後輩に正しく指導できるようになりたい① ~JavaScript超初心者向け~

#はじめに

4月に新卒で入社し、
6月にエンジニア配属となり、
**JavaScript**なるものを書き始めてから、早半年…

来年度入ってくる後輩に、正しい指摘/指導ができるよう、
私が配属半年で注意されてきたコードの書き方について、まとめて振り返ってみたいと思います。


#1.数入りの変数・クラス名・id名をやめよう

```javascript:数入り変数~悪い例~
$('#header-search2').val('');
```

お分かりの通り、ダメダメな**`header-search2`**です。
この**数入りの命名**については、配属直後に何度も注意をされました。

コードを書いているその時は、何を指しているのか分かるものの、
実際、半年後に自分で読み返してみたところ、

「ん？この2って、何のこと指しているんだっけ？あれ、そもそも1は？」

となってしまいました。
後で変数名を変えようと思っても、面倒くさくなりがちなので、
命名段階で一度立ち止まって、
誰にでも(勿論半年後の自分にも)分かりやすいように名付けるようにしましょう。

(先輩方にオススメされて読んだ本です↓)
>参考)[リーダブルコード: より良いコードを書くためのシンプルで実践的なテクニック](https://www.amazon.co.jp/%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89-%E2%80%95%E3%82%88%E3%82%8A%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%A7%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%81%AA%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-Theory-practice-Boswell/dp/4873115655)

#2.キャメルケースという命名手法を知る
初めて書いたコードでは、以下のように変数を定義していました。

```javascript:~悪い例~
let intervalID;
```

問題は勿論、`intervalID`です。
ということで正しくは↓

```javascript:~良い例~
let intervalId;
```
初心者丸出しの私は
idかIDの二択でしか考えられず、正しい書き方を聞いたときには

「Iだけ大文字にするの…!?  dだけ小文字なんてことある？」

と内心思っていましたが、JavaScriptの書き方としては`intervalId`で正しいです。

### (ロウワー)キャメルケース

ということで、上でご紹介した`intervalId`のような書き方を
**キャメルケース**と言います。

**JavaScript**においては、関数名や変数名はキャメルケースで書くように指摘されました。

>参考)[キャメルケース - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9)


一応、キャメルケース以外の命名手法についてもさらっと触れておきます。

###スネークケース

**データベース**における、テーブル名やカラム名などを表す、`_`を用いた命名手法

例)  `is_working` , `working_userid`

###ケバブケース

HTMLにおける、id名やクラス名などを表す、`-`を用いた命名手法

例)  `modal-title` , `contents-box`

>参考)[変数名の命名規則/＊＊ケースの使い分け](https://qiita.com/am_nimitz3/items/7b01af53751dba5d8fb1)


#3.変数宣言varはやめよう
やっとJavaScript的な話に入りますが、先輩からのコードレビュー時に真っ先に言われたのが、

「**varをなくして**、出来るだけ**const**もしくは**let**で書き換えよう」

というご指摘でした。
その時の理解としては、

「**constだと再代入が不可能**なのが良いってことか。
変数の中身が後で変わるかもしれないっていう心配がなくなるし、それでコードが読み書きしやすくなるってことかな。」

というところにとどまっていました。

けれども、
「varとletはどちらも再代入できるしなあ。varとletの違いってなんだろう。」
と思い、後に調べてみたところ、
主には3点あるようです。

###① var：再宣言OK、let：再宣言NG

```javascript:再宣言~var~
var x = 1 ;
var x = 2 ;
console.log(x); //2
```

```javascript:再宣言~let~
let x = 1 ;
let x = 2 ; // SyntaxError: Identifier 'x' has already been declared
```
###②var：関数スコープ、let：ブロックスコープ

```javascript:~var：関数スコープ~
if(true){
    var x = 2;
    console.log(x); // 2
}
console.log(x); // 2
```
```javascript:~let：ブロックスコープ~
if(true){
    let x = 2;
    console.log(x); // 2
}
console.log(x); // ReferenceError: x is not defined
```

###③ var：巻き上げがある、let：巻き上げがない

そもそも巻き上げとは…

>現れる場所に関係なく、コードが実行される前に処理されること

らしいですが、var宣言ではその**巻き上げ**があるらしい。
と言われても、私なら全くピンとこないので、以下を見てください。

```javascript:~var：巻き上げあり~
console.log(x); // undefined
var x = 2 ; 
console.log(x); // 2
```

```javascript:~let：巻き上げなし~
console.log(x); // ReferenceError: Cannot access 'a' before initialization
let x = 2 ;
console.log(x); 
```

最初に挙げた例で、1行目に書かれているconsole文の結果がエラーではなく、
`undefined`
になっていることからも分かるように、
varでの変数宣言は2行目なのに、最初に処理されるようです(以下のイメージ)。

```javascript:変数の巻き上げ：解釈version
var x; //最初にxという変数が宣言されるようなイメージ
console.log(x); // undefined
x = 2 ; 
console.log(x); // 2
```

ということで、上で書いた3つが主な違いとなりますが、
こう書いてみると、letとvarで全然違うことが分かりますね…。

>参考)[var - MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/var)
参考)[var/let/constの使い分けのメモ](https://qiita.com/masarufuruya/items/096e51c3e4c36c86ae27)
参考)[【JavaScript】var / let / const を本気で使い分けてみた](https://qiita.com/cheez921/items/7b57835cb76e70dd0fc4)

#4.比較演算子==と===の違いについて知る

最初は`==`と`===`の違いについて、よく分かっていませんでしたが、
今は何があろうと、`===`で書くようになりました。

##等価演算子==

等価演算子**==**は、
**同じ型でない場合、オペランドを変換**してから比較します。

要するに、数値の1と文字の1を
`==`を使って比較してみようとすると

```javascript:比較演算子==
console.log( 1 == '1' )
// true
```

となってしまいます。
型が違う場合には、`==`だと勝手に変換されたうえで比較されるため、`true`になる
ということです。

##厳密等価演算子===

厳密演算子**===**は、
**型変換なしで**オペランドの比較をしてくれます。

要するに、数値の1と文字の1を
`===`を使って比較してみると、

```javascript:厳密比較演算子===
console.log( 1 === '1' );
// false
```

となるように、型が違えば勿論`false`となります。
これでよし。

>参考)[比較演算子 - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators)

#おわりに
こうやってまとめてみると、
どんなメリットがあるのか、どのような違いがあるのかなどを
再確認することができて、物凄く良い機会になりました。

今回は「JavaScriptを書き始めたばかりの自分が注意されたこと」ばかりだったので、
超初心者向けの内容になってしまいましたが、
未来の私の後輩がこれを読んだときに、少しでもためになれば良いなと思います。