JavaScript初心者に伝えたい、一番最初に守って欲しい3つのこと

誰に読んで欲しいか

• 初学者を指導するにあたり、どこまで拘って指導したらいいか、最低限守るべきラインに悩む人
• JavaScriptを学び始め、少しキレイなコードを目指したい人

なぜ記事を書いたか

会社の初級エンジニアにフロントエンドの指導をしている時、指摘したいことは多くあるけどどこまで細かく指摘したらいいのか、、、悩みに悩みました。そこで、チョット難しいけど絶対意識して欲しいし、それだけで品質が変わることを自分なりに振り返ったのでJavaScriptをどうやって学習しようか悩む人や指導の仕方で悩む人の一助になればと思い纏めました。

本題

1. 変数宣言でconst以外は使わない

JavaScriptの変数宣言にはvar, let, constが存在します。
極力constを使うことは変数の意味が一意に決まり、全ての開発メンバーがプログラムを理解することに役立ちます。
２番以降の守るべきことを実践していくと、自ずとconstだけで通用するようになります。

• varは絶対に使わないでください。グローバルスコープが汚れてしまいます。

  • 変数を宣言するたびに全てのファイルで同じ名前が宣言されていないかチェックするのは現実的でないでしょう。

• letは基本的に必要でありません。

  • counterなどの特定要件で必要なこともあります。しかし、プログラムの位置によって変数の値が変わることは可読性の低下、バグにつながります。明確な理由がなければ使わないことが無難です。

2. 配列に対してforを使わない

JavaScriptで重要なことは変数をイミュータブル(値が不変）に保つことです。
イミュータブルに保つことでその配列が何を保持しているか明確になります。またイミュータブルな処理はシンプルで誰でも理解しやすいコードになります。
本質的にforでなければならない場面はほとんど存在しないはずです。もしforやfor...in, for...ofがある場合は、下記の関数で代替できないか振り返る癖をつけてください。

• JavaScriptの配列を操作するににはmap, reduceを使いましょう。

  • map
    • 操作対象の配列の長さと同じ長さの結果が必要な場合に使いましょう
  • reduce
    • 操作対象の配列の長さを変更する場合に使いましょう

• 配列を絞り込む場合はfilter, 配列内の存在チェックはsome, everyを使いましょう

  • filter
    • 配列の中に特定の条件の値が存在し、その値を抽出したい場合に使いましょう。
  • some
    • 配列の中に特定の条件の値が一つ以上存在するかを確認したい場合に使いましょう。
  • every
    • 配列の中が全て特定の条件の値と一致するか確認したい場合に使いましょう。

3. 三項演算子を使いこなそう

三項演算子は条件によって値を取得したい場合に使うことが多くあります。
ifを使いたくなったら三項演算子で書けないか考えてみるようにしてください。
ifでも書けますが、三項演算子を使いこなすことで少ない行数でわかりやすく書くことができます。
但し、三項演算子を複雑に使いすぎると可読性が著しく落ちます。下記の基本条件で三項演算子とifを使い分けてください。

• 使う場面

  • 条件によって値Aを取得したい場合

  # 変数A === Bの場合、 '合格'と取得し、!==の場合は'不合格'と取得したい
  return a === B ? '合格' : '不合格'
  

• 使わない場面

  • 条件によって特定の処理が必要な場面

  # 変数A === Bの場合、 hellowWordとログを表示し、!==の場合は処理をしない
  if (a === B) console.log('hellowWorld')
  

  • 3つ以上の返り値が必要な場合

  # 変数A === Bの場合、'合格'と取得し、A === Cの場合、'不合格'と取得し、 それ以外の場合、'補欠合格'と取得したい
  if ( a === B ) return '合格'
  if ( a === C ) return '不合格'
  return '補欠合格'
  

最後に

JavaScriptは汚いコードでも期待通り動いてしまいます。良くも悪くも自由度が高い言語です。
また、進歩も著しいために少し古いコードと最近のコードでは全く異なる書き方をしていることもしばしばあります。
全てを覚えることは大変ですが、まずはモダンな書き方の中で特に重要な３つのことから慣れるようにして綺麗なコードを目指しましょう。