diff --git a/javascript/DOCS.md b/javascript/DOCS.md index 307dec1f..cdec8f14 100644 --- a/javascript/DOCS.md +++ b/javascript/DOCS.md @@ -539,19 +539,22 @@ for文中の処理の最初で`array[i]`を別の変数(例えば`value`)に代 ## 6. コードをまとめてわかりやすくしよう -ここまででJSでの基本的な処理の説明を行ってきました。 -それらの組み合わせで多種多様な処理を作っていくわけですが、処理のたびに毎回同じコードを書くのは気が引けますよね？一連の処理に名前をつけて呼び出せたら...それを実現する愉快な仲間たちを紹介します。 +ここまでで JS での基本的な処理の説明を行ってきました。 +プログラミングではそれらを組み合わせて多種多様な処理を作っていくわけです。 +しかし処理のたびに毎回同じコードを書くのは気が引けますよね？ もし一連の処理に名前をつけて呼び出せたら...。 +ここではそれを実現する愉快な仲間たちを紹介します。 -> ※ このセクションは全体的にだいぶ端折った説明をしています。 +> このセクションは全体的にだいぶ端折った説明をしています。 > より詳細な説明は参考文献から[mdn web docs](https://developer.mozilla.org/ja/docs/Web)や[JSPrimer](https://jsprimer.net/)の該当箇所を読んでください。 ### 6-1. 関数 #### 6-1-1. 関数 -すでに関数の呼び出しは資料中にたくさん登場しています。例えば`console.log()`は立派な関数呼び出しです。このように`関数名(引数)`という形で関数は呼び出せます。 +すでに関数の呼び出しは資料中にたくさん登場しています。例えば `console.log()` は立派な関数呼び出しです。 +このように関数は `関数名(引数)` という形で呼び出せます。 -では関数はどのようにプログラム中で記述できるのかというと、基本的に以下のように記述できます。 +プログラム中では基本的に以下のように記述できます。 ```javascript function <関数名> (<引数>) { @@ -560,11 +563,12 @@ function <関数名> (<引数>) { } ``` -具体的に二次方程式の解を求める関数を作成してみます。(ただし、JSは標準では虚数を表現できません) +例えば二次方程式の解を求める関数を作成してみます（ただし、JS は標準では虚数を表現できません）。 ```javascript function solveQuadraticEquation (a, b, c) { const d = b ** 2 - 4 * a * c; + if (d === 0) { return { type: '重解', @@ -587,16 +591,20 @@ function solveQuadraticEquation (a, b, c) { }; } } -``` -ここで `a`, `b`, `c` は**仮引数**と呼ばれ、関数の呼び出し時に`()`の中の対応する位置に与えられた値(**引数**)を参照できます。その後`return`で関数の処理結果を**返り値**として返しています。 -この`return`文は値を返す必要がない関数では省略可能です。 +// 関数を呼び出す +let result = solveQuadraticEquation(3, 5, 7); +``` -また、`return`は値を返す、つまり関数の処理を終えたことを意味します。そのため上記の処理のように処理の途中で関数を終了したり、条件によって複数の終了処理を記述することができます。 +ここで `a`, `b`, `c` は**仮引数**と呼ばれ、関数の呼び出し時に `()` の中の対応する位置に与えられた値（**引数**）を参照できます。 +その後 `return` で関数の処理結果を**返り値**として呼び出し元に返しています。この `return` 文は値を返す必要がない関数では省略可能です。 +`return` は値を返す、つまり関数の処理を終えたことを意味します。そのため上記の処理のように処理の途中で関数を終了したり、条件によって複数の終了処理を記述することができます。 #### 6-1-2. 無名関数 -JSで頻出する関数の書き方には名前はないけど関数として宣言されて実行されるものがあります。それが無名関数です。以下のようなものが無名関数と呼ばれます。 +JS で頻出する関数の書き方として、名前はないけど関数として宣言されて実行されるものがあります。それが**無名関数**です。 + +以下のようなものが無名関数と呼ばれます。 ```javascript function (msg) { @@ -608,20 +616,21 @@ function (msg) { }; ``` -後者は特別に*アロー関数*と呼ばれる場合もあります。これらは返り値として関数を返します。 -そのため、変数に関数を代入して変数名の後ろに`()`をつけることで代入した関数を呼び出すことができます。 +後者は特別に**アロー関数**と呼ばれる場合もあります。これらは返り値として関数を返します。 +そのため、以下のように変数に代入して変数名の後ろに `()` をつけることで代入した関数を呼び出すことができます。 ```javascript const log = function (msg) { console.log(msg); }; + log('test'); ``` #### 6-1-3. 値としての関数 -5-1-2.では無名関数を変数に代入していました。このことから、JSの関数は値として扱うことができるのがわかります。 -また、この性質を利用してコールバックという処理方法を取れます。`setTimeout(callback, delay)`の`callback`のように関数を値として渡すことで特別な処理がしやすくなります。 +6-1-2. では無名関数を変数に代入していました。このことから、JS の関数は値として扱えることがわかります。 +この性質を利用してコールバックという処理方法を取れます。`setTimeout(callback, delay)` の `callback` のように関数を値として渡すことで特別な処理がしやすくなります。 ```javascript setTimeout(() => { @@ -633,19 +642,20 @@ setTimeout(() => { ![setTimeout](imgs/set-interval.gif)
- setTimeout + setTimeout - `setTimeout`は`setTimeout(callback, delay)`のように2つの引数を取ります。 - `callback`はコールバック関数で`delay`ミリ秒後に実行されます。 - また、返り値として正の整数値を返します。これは登録されたtimeoutのIDで、`setTimeout`が呼ばれてから`delay`ミリ秒の間に`clearTimeout(timeoutID)`とすることで登録されたコールバック関数の実行をキャンセルできます。 + `setTimeout` は `setTimeout(callback, delay)` のように2つの引数を取ります。 + `callback` はコールバック関数で `delay` ミリ秒後に実行されます。 + また、返り値として正の整数値を返します。これは登録されたタイマーを一意に識別するためのIDです。 + `setTimeout` が呼ばれてから `delay` ミリ秒の間に `clearTimeout(timeoutID)` とすることで登録されたコールバック関数の実行をキャンセルできます。
### 6-2. オブジェクト #### 6-2-1. 定義とアクセス -オブジェクトの名はここまでにも登場していますが、あらためて説明します。 -JSにおけるオブジェクトとは、キーと値が対になった**プロパティの集合**です。 +オブジェクトの名はここまでにも登場していますが、あらためて説明します。 +JS におけるオブジェクトとは、キーと値が対になった**プロパティの集合**です。 以下の文法で定義・アクセスできます。 ```javascript @@ -657,14 +667,16 @@ let obj = { console.log(obj.key1, obj['key2']); ``` -![オブジェクトのサンプル実行結果](imgs/object-sample.png) +![オブジェクトのサンプル実行結果](imgs/object-sample.webp) -このとき、`[]`(ブラケット記法)を利用したアクセスでは`obj['key2']`のように、プロパティ名を文字列として記述するほうが望ましいです。仮に`obj[key2]`と記述してアクセスしようとしたとき、`key2`が変数として解釈されて未定義のためエラーが発生します。 -これに対して、`.`(ドット記法)を利用したアクセスでは、使えないプロパティ名があることに注意が必要です。数字で始まるプロパティ名やハイフンを含んだプロパティ名はブラケット記法でアクセスする必要があります。 +このとき、`[]`（ブラケット記法）を利用したアクセスでは `obj['key2']` のように、プロパティ名を文字列として記述するほうが望ましいです。 +仮に `obj[key2]` と記述してアクセスしようとしたとき、`key2` が変数として解釈されて未定義のためエラーが発生します。 +これに対して、`.`（ドット記法）を利用したアクセスでは、使えないプロパティ名があることに注意が必要です。 +数字で始まるプロパティ名やハイフンを含んだプロパティ名はブラケット記法でアクセスする必要があります。 #### 6-2-2. プロパティの追加と存在確認 -JSのオブジェクトは、一度作成したあとその値自体を変更できる特性を持ちます。これは`const`を利用して宣言したときも同様です。 +JS のオブジェクトは、一度作成したあとその値自体を変更できる特性を持ちます。これは `const` を利用して宣言したときも同様です。 そのため、以下のようにしてオブジェクトにプロパティを追加できます。 ```javascript @@ -676,9 +688,12 @@ obj['key2'] = 'value2'; console.log(obj.key1, obj['key2']); ``` -![オブジェクトにプロパティを追加](imgs/objectr-add-property.png) +![オブジェクトにプロパティを追加](imgs/objectr-add-property.webp) + +またこの特性から、オブジェクトにないプロパティも参照できてしまいます（参照すると `undefined` が返ります）。 +この挙動によるバグを回避するために、いくつかの方法でオブジェクトに目的のプロパティが存在するかを確認することができます。 -またこの特性から、オブジェクトにないプロパティも参照できてしまいます(参照すると`undefined`が返ります)。この挙動によるバグを回避するために、いくつかの方法でオブジェクトに目的のプロパティが存在するかを確認することができます。ここでは最も使いやすい手法として**Optional Chaining演算子**`?.`を用いた方法を以下に示します。 +ここでは最も使いやすい手法として **Optional Chaining 演算子** `?.` を用いた方法を以下に示します。 ```javascript const obj = { @@ -694,24 +709,26 @@ console.log(obj.prop1); // O {key1: 'value1'} console.log(obj.prop1.key1); // O 'value1' console.log(obj.prop1.key2); // X undefined console.log(obj.prop2); // X undefined -console.log(obj.prop2.key1); // エラー undefinedに対して更にプロパティにアクセスしようとした -console.log(obj.prop2.key2); // エラー undefinedに対して更にプロパティにアクセスしようとした +console.log(obj.prop2.key1); // エラー undefined に対して更にプロパティにアクセスしようとした +console.log(obj.prop2.key2); // エラー undefined に対して更にプロパティにアクセスしようとした // optional chaining -// `?.`のつなげられたプロパティが存在するかを確認して -// 存在すれば`?.`でつながったプロパティにアクセスする -// 存在しなければundefinedを返す +// `?.` のつなげられたプロパティが存在するかを確認して +// 存在すれば `?.` でつながったプロパティにアクセスする +// 存在しなければ undefined を返す console.log(obj.prop2?.key1); // X undefined -console.log(obj?.prop2.key1); // エラー (obj?.prop2 が undefinedになり、undefined.key1と同じ意味になる) -console.log(obj?.prop2?.key1); // X undefined (obj?.prop2 が undefinedになり、undefined?.key1がundefinedになる) +console.log(obj?.prop2.key1); // エラー ( obj?.prop2 が undefined になり、undefined.key1 と同じ意味になる) +console.log(obj?.prop2?.key1); // X undefined ( obj?.prop2 が undefined になり、undefined?.key1 が undefined になる) ``` -例えば、APIリクエストのレスポンスにあったりなかったりするプロパティにアクセスするときや、入力が必須でない項目があるフォームなどを扱うときに重宝する機能です。覚えていると良いことがあるかもしれません。 +例えば、API リクエストのレスポンスにあったりなかったりするプロパティにアクセスするときや、入力が必須でない項目があるフォームなどを扱うときに重宝する機能です。 +覚えていると良いことがあるかもしれません。
オブジェクトのプロパティに関数を - JSの関数は値として扱える、という話をしましたが、ならばキーと値が対になったプロパティに関数を使うこともできそうですよね？できます。 + JS の関数は値として扱える、という話をしましたが、ならばキーと値が対になったプロパティに関数を使うこともできそうですよね？ + できます。 ```javascript const basicArithmeticOperations = { @@ -727,12 +744,12 @@ console.log(obj?.prop2?.key1); // X undefined (obj?.prop2 が undefinedにな console.log(basicArithmeticOperations.div(2, 2)); ``` - ![関数をプロパティに](imgs/object-function.png) + ![関数をプロパティに](imgs/object-function.webp)
### 6-3. クラス -クラスは以下のような文で定義し、インスタンスを生成してメソッドやプロパティにアクセスできます。 +クラスは以下のように定義し、インスタンスを生成してメソッドやプロパティにアクセスできます。 ```javascript // クラス定義 @@ -741,7 +758,7 @@ class <クラス名> { constructor (<コンストラクタ引数>) { <コンストラクタ関数での処理> - <※ コンストラクタ関数では`return`は基本的にしない> + <※ コンストラクタ関数では `return` は基本的にしない> } <メソッド(関数)の定義> @@ -754,11 +771,12 @@ class <クラス名> { <インスタンス変数名>.<プロパティ または メソッド> ``` -↑の疑似コードでは分かりづらい部分もあるので具体的に +↑の疑似コードでは分かりづらい部分もあるので具体的に... +例えば - クラス名: `MyClass` - 文字列を与えて初期化できる（与えなくても初期値をもつ） - - `printText`メソッドを呼び出すことで自身が持つ文字列を出力する + - `printText` メソッドを呼び出すことで自身が持つ文字列を出力する というクラスを実装してみます。 @@ -776,20 +794,20 @@ class MyClass { } ``` -これがクラスです。クラスは設計書のようなもので、これをもとに実体(**インスタンス**)を生成します。 +これがクラスです。クラスは設計書のようなもので、これをもとに実体（**インスタンス**）を生成します。 ```javascript const myClass = new MyClass('my text'); ``` -これで自身の文字列として`'my text'`を持つ`MyClass`のインスタンスを生成して`myClass`に代入できました。 -`myClass`から`printText`メソッドを呼び出せば`'my text'`と出力されるはずです。 +これで自身の文字列として `'my text'` を持つ `MyClass` のインスタンスを生成して `myClass` に代入できました。 +`myClass` から `printText` メソッドを呼び出せば `'my text'` と出力されるはずです。 ```javascript myClass.printText(); ``` -![クラスのサンプルコード実行結果](imgs/class-sample.png) +![クラスのサンプルコード実行結果](imgs/class-sample.webp) ## 7. 非同期処理を使おう diff --git a/javascript/imgs/class-sample.png b/javascript/imgs/class-sample.png deleted file mode 100644 index 2a836f7e..00000000 Binary files a/javascript/imgs/class-sample.png and /dev/null differ diff --git a/javascript/imgs/class-sample.webp b/javascript/imgs/class-sample.webp new file mode 100644 index 00000000..c669c9a6 Binary files /dev/null and b/javascript/imgs/class-sample.webp differ diff --git a/javascript/imgs/object-function.png b/javascript/imgs/object-function.png deleted file mode 100644 index 064d162d..00000000 Binary files a/javascript/imgs/object-function.png and /dev/null differ diff --git a/javascript/imgs/object-function.webp b/javascript/imgs/object-function.webp new file mode 100644 index 00000000..9335af12 Binary files /dev/null and b/javascript/imgs/object-function.webp differ diff --git a/javascript/imgs/object-sample.png b/javascript/imgs/object-sample.png deleted file mode 100644 index 15a664e7..00000000 Binary files a/javascript/imgs/object-sample.png and /dev/null differ diff --git a/javascript/imgs/object-sample.webp b/javascript/imgs/object-sample.webp new file mode 100644 index 00000000..0ae7d857 Binary files /dev/null and b/javascript/imgs/object-sample.webp differ diff --git a/javascript/imgs/objectr-add-property.png b/javascript/imgs/objectr-add-property.png deleted file mode 100644 index a0cf40dd..00000000 Binary files a/javascript/imgs/objectr-add-property.png and /dev/null differ diff --git a/javascript/imgs/objectr-add-property.webp b/javascript/imgs/objectr-add-property.webp new file mode 100644 index 00000000..aabdf6ae Binary files /dev/null and b/javascript/imgs/objectr-add-property.webp differ