Merge pull request #62 from jigintern/haruto17/chapter-2

📝 2章「読みやすいコードを書くために」の修正

Author: haruto17

javascript/DOCS.md

@@ -92,71 +92,75 @@ console.log('Hello, World!');
 
 ## 2. 読みやすいコードを書くために
 
-これから始まるインターンやその他でも「チーム開発」をしなければならないタイミングがあると思います。
-そんなとき最も大事なことの一つが「**コードを読んだ人間に処理の意味・意図が伝わること**」です。
-自分以外の人が見ても読みやすいコードを書くために、JSの機能やプログラムを書く上で気をつける点を説明します。
+これから始まるインターンやその他でも「チーム開発」をしなければならないタイミングがあると思います。  
+そんなとき最も大事なことの一つが「**コードを読んだ人間に処理の意味・意図が伝わること**」です。  
+この章では自分以外の人が見ても読みやすいコードを書くために、JS の機能やプログラムを書く上で気をつける点を説明します。
 
 ### 2-1. 厳格モード
 
-厳格モード (strictモード) とは、そうでない状態ではエラーにはならない微妙な実装をエラー扱いとするモードです。これによって、暗黙的に失敗していた処理をエラーとして検知できるようになったり、JSのエンジンが最適化しづらい手順を修正できるようになったりといったメリットがあります。しかし、利用したい構文がstrictモードに非対応である場合には注意が必要です。
+厳格モード（ strict モード）とは、そうでない状態ではエラーにはならない微妙な実装をエラー扱いとするモードです。  
+これによって、暗黙的に失敗していた処理をエラーとして検知できるようになったり、JS のエンジンが最適化しづらい手順を修正できるようになったりといったメリットがあります。  
+しかし、利用したい構文が strict モードに非対応の場合もあるため注意が必要です。  
 
-厳格モードはJSのコード内に`"use strict";`と記述することで有効化できます。
+厳格モードは JS のコード内に `"use strict";` と記述することで有効化できます。
 試しに以下のコードを実行してみてください。
 
-```JavaScript
+```javascript
 "use strict";
 a = 1;
 ```
 
-![未宣言の変数に値を代入しようとしたエラー](imgs/strict-error-undefined-variable.png)
+<img src="imgs/strict-error-undefined-variable.webp" width="50%" alt="未宣言の変数に値を代入しようとしたエラー">
 
-↑の画像のようにエラーが出れば問題なく厳格モードが有効になっています。この場合は未宣言の変数を操作しようとしたことでエラーが発生しています。
-これは意図せずグローバル変数を宣言してしまうことを防いでくれます。
+上の画像のようにエラーが出れば問題なく厳格モードが有効になっています。  
+この場合は宣言していない変数を操作しようとしたことでエラーが発生しています。これは意図せずグローバル変数を宣言してしまうのを防いでくれます。  
 
-このように便利な厳格モードですが、スクリプト全体で有効にしてしまうと他のライブラリやファイルが厳格モードに対応しない記述で書かれていたときに動作しなくなってしまうことには注意が必要です。
-使用方法のおすすめとしては関数の冒頭部で有効化するものです。そうすることで厳格モードは関数内でのみ有効になります。
+このように便利な厳格モードですが、スクリプト全体で有効にしてしまうと他のライブラリやファイルが厳格モードに対応しない記述で書かれていたときには動作しなくなってしまうため注意が必要です。  
+おすすめの使用方法としては関数の冒頭部で有効化することです。そうすることで厳格モードは関数内でのみ有効になります。
 
 ### 2-2. コメント
 
-コメントは他のほぼすべてのプログラミング言語にもある「コード中に記述されているが処理に影響がない文」のことで、JSでは以下の二通りで記述できます。
+コメントは他のほぼすべてのプログラミング言語にもある「コード中に記述されているが処理に影響がない文」のことです。  
+JS では主に以下の二通りで記述できます。
 
 ```javascript
 console.log('コメントの説明');
-// console.log('これは一行だけをコメントにするやつ');
+// console.log('// は一行だけをコメントにする');
 console.log('//が書いてある行にしか影響しない');
 
 /**
- * console.log('これは複数行をコメントにするやつ');
- * console.log('/* から * /までの間が実行されない');
+ * console.log('/* と * / で囲むと複数行をコメントにする');
+ * console.log('そのため /* から * / までの処理は実行されない');
  */
 ```
 
-コメントを適切に書くことでコードの意図や内容を他の開発者にわかりやすく伝えることができます。
+コメントを適切に書くことでコードの意図や内容を他の開発者にわかりやすく伝えることができます。  
 また、実行したくないコードをコメントにすることで開発中のデバッグをやりやすくする使い方もあります。
 
 ### 2-3. 命名
 
-命名はプログラムを書く上で逃れられず、かつ難しい要素の一つです。
-「名は体を表す」ということわざがありますが、意識するべきはまさにこれです。
-コードを読む上でわざわざ他人の書いたコードをすべて読んで意味を理解してから使うことはあまりにも面倒です。そのため、完結で処理の内容や意味、効果がわかりやすい命名を変数・関数にするべきだとされています。
+命名はプログラムを書く上で逃れられず、かつ難しい要素の一つです。「名は体を表す」ということわざがありますが、意識するべきはまさにこれです。  
+他人が書いたコード（もしかしたら過去の自分が書いたコード）をすべて読んで、その意味を理解するのは非常に時間がかかり、骨が折れる作業です。  
+そのため、簡潔で処理の内容や意味、効果がわかりやすい命名を変数・関数にするべきだとされています。
 
 | 良い例 | 悪い例 |
 | ---- | ---- |
 | `let count = 0;` | `let a = 0;` |
 | `function solveQuadraticEquation () {...}` | `function solve() {...}` |
 
-1つ目の例はあまりにも極端ですが、`count`という名前で宣言されている方が変数の利用目的が明確です。
-2つ目の例は場合によってどちらがいいかの判断が変わる場合があります。特にクラスのメンバとしてある式を解くような関数の場合では悪い例は悪いとは言い切れません。また、エディタの補完機能がない場合には冗長な命名の関数は嫌われるため良い例が必ずしも良いわけではありません。
+1つ目の例では `count` という名前で宣言されている方が変数の利用目的が明確です。  
+2つ目の例では場合によってどちらがいいかの判断が変わることがあります。`solveQuadraticEquation` という名前の方が処理の内容が明確です。しかし（特に）クラスのメンバとしてある式を解くような関数の場合は `solve` という名前も悪いとは言い切れません。
+エディタの補完機能がない場合には冗長な命名は嫌われるため、むしろ `solve` の方が適切かもしれません。
 
 時と場合に合わせて命名とコメントを組み合わせて誰が読んでもわかりやすいコードになるよう心がけましょう。
 
 ### 2-4. インデント
 
-インデントとは、行頭の字下げのことを指します。
-主にコード中のブロックをわかりやすくするために利用されます。Pythonのようなインデントベースの言語ではブロックそのものを表すために使われますが、JSではコードのブロックは`{}`で表現されるため、インデントがなくてもエラーになったりはしません。
-インデントをつけたほうが処理の塊がわかりやすくなるので、つけるようにしましょう。なお、`{}`で囲まれた文をそれまでの字下げよりもう1段階深くインデントするのが一般的です。
+インデントとは、行頭の字下げのことを指します。主にコード中のブロックをわかりやすくするために利用されます。  
+Python のようなインデントベースの言語ではブロックそのものを表すために使われますが、JS ではコードのブロックは `{}` で表現されるため、インデントがなくてもエラーになったりはしません。
+しかしインデントをつけることは処理の塊を理解しやすくするために非常に重要な作業です。意識してつけるようにしましょう。なお、`{}` で囲まれた文をそれまでの字下げよりもう1段階深くインデントするのが一般的です。
 
-インデントなし
+**インデントなし**
 
 ```javascript
 function myFunc () {
@@ -167,7 +171,7 @@ console.log(i);
 }
 ```
 
-インデントあり
+**インデントあり**
 
 ```javascript
 function myFunc () {