はじめに
4月に新卒で入社し、
6月にエンジニア配属となり、
JavaScriptなるものを書き始めてから、早半年…
来年度入ってくる後輩に、正しい指摘/指導ができるよう、
私が配属半年で注意されてきたコードの書き方について、まとめて振り返ってみたいと思います。
1.数入りの変数・クラス名・id名をやめよう
$('#header-search2').val('');
お分かりの通り、ダメダメなheader-search2です。
この数入りの命名については、配属直後に何度も注意をされました。
コードを書いているその時は、何を指しているのか分かるものの、
実際、半年後に自分で読み返してみたところ、
「ん？この2って、何のこと指しているんだっけ？あれ、そもそも1は？」
となってしまいました。
後で変数名を変えようと思っても、面倒くさくなりがちなので、
命名段階で一度立ち止まって、
誰にでも(勿論半年後の自分にも)分かりやすいように名付けるようにしましょう。
(先輩方にオススメされて読んだ本です↓)
2.キャメルケースという命名手法を知る
初めて書いたコードでは、以下のように変数を定義していました。
let intervalID;
問題は勿論、intervalIDです。
ということで正しくは↓
let intervalId;
初心者丸出しの私は
idかIDの二択でしか考えられず、正しい書き方を聞いたときには
「Iだけ大文字にするの…!? dだけ小文字なんてことある？」
と内心思っていましたが、JavaScriptの書き方としてはintervalIdで正しいです。
(ロウワー)キャメルケース
ということで、上でご紹介したintervalIdのような書き方を
キャメルケースと言います。
JavaScriptにおいては、関数名や変数名はキャメルケースで書くように指摘されました。
一応、キャメルケース以外の命名手法についてもさらっと触れておきます。
スネークケース
データベースにおける、テーブル名やカラム名などを表す、_を用いた命名手法
例) is_working , working_userid
ケバブケース
HTMLにおける、id名やクラス名などを表す、-を用いた命名手法
例) modal-title , contents-box
3.変数宣言varはやめよう
やっとJavaScript的な話に入りますが、先輩からのコードレビュー時に真っ先に言われたのが、
「varをなくして、出来るだけconstもしくはletで書き換えよう」
というご指摘でした。
その時の理解としては、
「constだと再代入が不可能なのが良いってことか。
変数の中身が後で変わるかもしれないっていう心配がなくなるし、それでコードが読み書きしやすくなるってことかな。」
というところにとどまっていました。
けれども、
「varとletはどちらも再代入できるしなあ。varとletの違いってなんだろう。」
と思い、後に調べてみたところ、
主には3点あるようです。
① var：再宣言OK、let：再宣言NG
var x = 1 ;
var x = 2 ;
console.log(x); //2
let x = 1 ;
let x = 2 ; // SyntaxError: Identifier 'x' has already been declared
②var：関数スコープ、let：ブロックスコープ
if(true){
var x = 2;
console.log(x); // 2
}
console.log(x); // 2
if(true){
let x = 2;
console.log(x); // 2
}
console.log(x); // ReferenceError: x is not defined
③ var：巻き上げがある、let：巻き上げがない
そもそも巻き上げとは…
現れる場所に関係なく、コードが実行される前に処理されること
らしいですが、var宣言ではその巻き上げがあるらしい。
と言われても、私なら全くピンとこないので、以下を見てください。
console.log(x); // undefined
var x = 2 ;
console.log(x); // 2
console.log(x); // ReferenceError: Cannot access 'a' before initialization
let x = 2 ;
console.log(x);
最初に挙げた例で、1行目に書かれているconsole文の結果がエラーではなく、
undefined
になっていることからも分かるように、
varでの変数宣言は2行目なのに、最初に処理されるようです(以下のイメージ)。
var x; //最初にxという変数が宣言されるようなイメージ
console.log(x); // undefined
x = 2 ;
console.log(x); // 2
ということで、上で書いた3つが主な違いとなりますが、
こう書いてみると、letとvarで全然違うことが分かりますね…。
参考)var - MDN - Mozilla
参考)var/let/constの使い分けのメモ
参考)【JavaScript】var / let / const を本気で使い分けてみた
4.比較演算子==と===の違いについて知る
最初は==と===の違いについて、よく分かっていませんでしたが、
今は何があろうと、===で書くようになりました。
等価演算子==
等価演算子==は、
同じ型でない場合、オペランドを変換してから比較します。
要するに、数値の1と文字の1を
==を使って比較してみようとすると
console.log( 1 == '1' )
// true
となってしまいます。
型が違う場合には、==だと勝手に変換されたうえで比較されるため、trueになる
ということです。
厳密等価演算子===
厳密演算子===は、
型変換なしでオペランドの比較をしてくれます。
要するに、数値の1と文字の1を
===を使って比較してみると、
console.log( 1 === '1' );
// false
となるように、型が違えば勿論falseとなります。
これでよし。
おわりに
こうやってまとめてみると、
どんなメリットがあるのか、どのような違いがあるのかなどを
再確認することができて、物凄く良い機会になりました。
今回は「JavaScriptを書き始めたばかりの自分が注意されたこと」ばかりだったので、
超初心者向けの内容になってしまいましたが、
未来の私の後輩がこれを読んだときに、少しでもためになれば良いなと思います。