@@ -540,18 +540,19 @@ for文中の処理の最初で`array[i]`を別の変数(例えば`value`)に代
540540## 6. コードをまとめてわかりやすくしよう
541541
542542ここまででJSでの基本的な処理の説明を行ってきました。
543- それらの組み合わせで多種多様な処理を作っていくわけですが、処理のたびに毎回同じコードを書くのは気が引けますよね?一連の処理に名前をつけて呼び出せたら...それを実現する愉快な仲間たちを紹介します。
543+ プログラミングではそれらを組み合わせて多種多様な処理を作っていくわけです。
544+ しかし処理のたびに毎回同じコードを書くのは気が引けますよね?もし一連の処理に名前をつけて呼び出せたら...。ここではそれを実現する愉快な仲間たちを紹介します。
544545
545- > ※ このセクションは全体的にだいぶ端折った説明をしています。
546+ > このセクションは全体的にだいぶ端折った説明をしています。
546547> より詳細な説明は参考文献から[ mdn web docs] ( https://developer.mozilla.org/ja/docs/Web ) や[ JSPrimer] ( https://jsprimer.net/ ) の該当箇所を読んでください。
547548
548549### 6-1. 関数
549550
550551#### 6-1-1. 関数
551552
552- すでに関数の呼び出しは資料中にたくさん登場しています。例えば` console.log() ` は立派な関数呼び出しです。このように ` 関数名(引数) ` という形で関数は呼び出せます 。
553+ すでに関数の呼び出しは資料中にたくさん登場しています。例えば` console.log() ` は立派な関数呼び出しです。このように関数は ` 関数名(引数) ` という形で呼び出せます 。
553554
554- では関数はどのようにプログラム中で記述できるのかというと、基本的に以下のように記述できます 。
555+ プログラム中では基本的に以下のように記述できます 。
555556
556557``` javascript
557558function <関数名> (< 引数> ) {
@@ -560,11 +561,12 @@ function <関数名> (<引数>) {
560561}
561562```
562563
563- 具体的に二次方程式の解を求める関数を作成してみます。( ただし、JSは標準では虚数を表現できません)
564+ 例えば二次方程式の解を求める関数を作成してみます( ただし、JSは標準では虚数を表現できません)。
564565
565566``` javascript
566567function solveQuadraticEquation (a , b , c ) {
567568 const d = b ** 2 - 4 * a * c;
569+
568570 if (d === 0 ) {
569571 return {
570572 type: ' 重解' ,
@@ -587,16 +589,18 @@ function solveQuadraticEquation (a, b, c) {
587589 };
588590 }
589591}
590- ```
591592
592- ここで ` a ` , ` b ` , ` c ` は** 仮引数** と呼ばれ、関数の呼び出し時に` () ` の中の対応する位置に与えられた値(** 引数** )を参照できます。その後` return ` で関数の処理結果を** 返り値** として返しています。
593- この` return ` 文は値を返す必要がない関数では省略可能です。
593+ // 関数を呼び出す
594+ let result = solveQuadraticEquation (3 , 5 , 7 );
595+ ```
594596
595- また、` return ` は値を返す、つまり関数の処理を終えたことを意味します。そのため上記の処理のように処理の途中で関数を終了したり、条件によって複数の終了処理を記述することができます。
597+ ここで ` a ` , ` b ` , ` c ` は** 仮引数** と呼ばれ、関数の呼び出し時に` () ` の中の対応する位置に与えられた値(** 引数** )を参照できます。その後` return ` で関数の処理結果を** 返り値** として呼び出し元に返しています。
598+ この` return ` 文は値を返す必要がない関数では省略可能です。
599+ ` return ` は値を返す、つまり関数の処理を終えたことを意味します。そのため上記の処理のように処理の途中で関数を終了したり、条件によって複数の終了処理を記述することができます。
596600
597601#### 6-1-2. 無名関数
598602
599- JSで頻出する関数の書き方には名前はないけど関数として宣言されて実行されるものがあります。それが無名関数です 。以下のようなものが無名関数と呼ばれます。
603+ JSで頻出する関数の書き方として、名前はないけど関数として宣言されて実行されるものがあります。それが ** 無名関数 ** です 。以下のようなものが無名関数と呼ばれます。
600604
601605``` javascript
602606function (msg ) {
@@ -608,20 +612,21 @@ function (msg) {
608612};
609613```
610614
611- 後者は特別に* アロー関数* と呼ばれる場合もあります。これらは返り値として関数を返します。
612- そのため、変数に関数を代入して変数名の後ろに ` () ` をつけることで代入した関数を呼び出すことができます。
615+ 後者は特別に** アロー関数* * と呼ばれる場合もあります。これらは返り値として関数を返します。
616+ そのため、以下のように変数に代入して変数名の後ろに ` () ` をつけることで代入した関数を呼び出すことができます。
613617
614618``` javascript
615619const log = function (msg ) {
616620 console .log (msg);
617621};
622+
618623log (' test' );
619624```
620625
621626#### 6-1-3. 値としての関数
622627
623- 5 -1-2.では無名関数を変数に代入していました。このことから、JSの関数は値として扱うことができるのがわかります 。
624- また、 この性質を利用してコールバックという処理方法を取れます。` setTimeout(callback, delay) ` の` callback ` のように関数を値として渡すことで特別な処理がしやすくなります。
628+ 6 -1-2.では無名関数を変数に代入していました。このことから、JSの関数は値として扱えることがわかります 。
629+ この性質を利用してコールバックという処理方法を取れます。` setTimeout(callback, delay) ` の` callback ` のように関数を値として渡すことで特別な処理がしやすくなります。
625630
626631``` javascript
627632setTimeout (() => {
@@ -633,11 +638,11 @@ setTimeout(() => {
633638![ setTimeout] ( imgs/set-interval.gif )
634639
635640<details >
636- <summary >setTimeout</summary >
641+ <summary >< code > setTimeout</ code > </summary >
637642
638643 ` setTimeout ` は` setTimeout(callback, delay) ` のように2つの引数を取ります。
639644 ` callback ` はコールバック関数で` delay ` ミリ秒後に実行されます。
640- また、返り値として正の整数値を返します。これは登録されたtimeoutのIDで 、` setTimeout ` が呼ばれてから` delay ` ミリ秒の間に` clearTimeout(timeoutID) ` とすることで登録されたコールバック関数の実行をキャンセルできます。
645+ また、返り値として正の整数値を返します。これは登録されたタイマーを一意に識別するためのIDで 、` setTimeout ` が呼ばれてから` delay ` ミリ秒の間に` clearTimeout(timeoutID) ` とすることで登録されたコールバック関数の実行をキャンセルできます。
641646</details >
642647
643648### 6-2. オブジェクト
@@ -659,8 +664,8 @@ console.log(obj.key1, obj['key2']);
659664
660665![ オブジェクトのサンプル実行結果] ( imgs/object-sample.png )
661666
662- このとき、` [] ` ( ブラケット記法) を利用したアクセスでは` obj['key2'] ` のように、プロパティ名を文字列として記述するほうが望ましいです。仮に` obj[key2] ` と記述してアクセスしようとしたとき、` key2 ` が変数として解釈されて未定義のためエラーが発生します。
663- これに対して、` . ` ( ドット記法) を利用したアクセスでは、使えないプロパティ名があることに注意が必要です。数字で始まるプロパティ名やハイフンを含んだプロパティ名はブラケット記法でアクセスする必要があります。
667+ このとき、` [] ` ( ブラケット記法) を利用したアクセスでは` obj['key2'] ` のように、プロパティ名を文字列として記述するほうが望ましいです。仮に` obj[key2] ` と記述してアクセスしようとしたとき、` key2 ` が変数として解釈されて未定義のためエラーが発生します。
668+ これに対して、` . ` ( ドット記法) を利用したアクセスでは、使えないプロパティ名があることに注意が必要です。数字で始まるプロパティ名やハイフンを含んだプロパティ名はブラケット記法でアクセスする必要があります。
664669
665670#### 6-2-2. プロパティの追加と存在確認
666671
@@ -678,7 +683,7 @@ console.log(obj.key1, obj['key2']);
678683
679684![ オブジェクトにプロパティを追加] ( imgs/objectr-add-property.png )
680685
681- またこの特性から、オブジェクトにないプロパティも参照できてしまいます( 参照すると` undefined ` が返ります) 。この挙動によるバグを回避するために、いくつかの方法でオブジェクトに目的のプロパティが存在するかを確認することができます。ここでは最も使いやすい手法として** Optional Chaining演算子** ` ?. ` を用いた方法を以下に示します。
686+ またこの特性から、オブジェクトにないプロパティも参照できてしまいます( 参照すると` undefined ` が返ります) 。この挙動によるバグを回避するために、いくつかの方法でオブジェクトに目的のプロパティが存在するかを確認することができます。ここでは最も使いやすい手法として** Optional Chaining演算子** ` ?. ` を用いた方法を以下に示します。
682687
683688``` javascript
684689const obj = {
@@ -732,7 +737,7 @@ console.log(obj?.prop2?.key1); // X undefined (obj?.prop2 が undefinedにな
732737
733738### 6-3. クラス
734739
735- クラスは以下のような文で定義し 、インスタンスを生成してメソッドやプロパティにアクセスできます。
740+ クラスは以下のように定義し 、インスタンスを生成してメソッドやプロパティにアクセスできます。
736741
737742` ` ` javascript
738743// クラス定義
@@ -754,8 +759,9 @@ class <クラス名> {
754759< インスタンス変数名> .< プロパティ または メソッド>
755760` ` `
756761
757- ↑の疑似コードでは分かりづらい部分もあるので具体的に
762+ ↑の疑似コードでは分かりづらい部分もあるので具体的に...
758763
764+ 例えば
759765- クラス名: ` MyClass`
760766 - 文字列を与えて初期化できる(与えなくても初期値をもつ)
761767 - ` printText` メソッドを呼び出すことで自身が持つ文字列を出力する
@@ -776,7 +782,7 @@ class MyClass {
776782}
777783` ` `
778784
779- これがクラスです。クラスは設計書のようなもので、これをもとに実体( **インスタンス**) を生成します。
785+ これがクラスです。クラスは設計書のようなもので、これをもとに実体( **インスタンス**) を生成します。
780786
781787` ` ` javascript
782788const myClass = new MyClass (' my text' );
0 commit comments