はじめに

私はJavaScriptを勉強し始めて3ヶ月経ちました。
難しい問題も解けるようになり始めましたが、深いネストが多く見直した時に何をしているのかわからないコードを書いてしまいます。
深いネストの解消の仕方調べても難しそうな関数がたくさんで今すぐに改善するのは大変そう、、、、と思ってしまいました。
今回は、読みやすいコードにするためにする方法をたくさん調べ、今からでも意識して変えられる方法をまとめて書きたいと思います。

マジックナンバーには名前をつける

ハードコーディングされている謎の数字のことをマジックナンバーと言います。


// この「50」は何？
const pages = Math.ceil(records.length / 50);

マジックナンバーは混乱させる原因になります。できるだけ値には名前をつけるようにしましょう。


const maxPage = 50;
const pages = Math.ceil(records.length / maxPage);

とすることで最大のページ数が50であることがわかります。

もちろん名前をつけなくてもいい数字もあります。
例えば角度をラジアンに変換するとき、「180」に名前をつける必要はないと思います。


const radian = degree * Math.PI / 180;

識別子を短くしない

識別子（関数名、変数名など）をむやみに短くしないというのも大事です。名前が省略されていると、本来の名前を推測する必要が出てきます。そうすると無駄な時間がかかりますし、最悪の場合は全く違う理解をしてしまうことがあります。
私の場合、関数の意味あっているものをつけるだけではなく、似たような意味を持つ関数の時に違いがわからないような名前をつけてしまうので気をつけたいです。

否定形は、ほどほどに

名前に否定形はあまり入れないほうがいいです。
何か処理するのは表示するとき？しないとき？と混乱します。

関数名のおすすめサイト

プログラミングでよく使う英単語のまとめ【随時更新】

目的を名前にする

こちらも名前関連で、うっかりすると、関数名で「手段」を名前につけてしまうことがあります。
後から手段が変わったときに実態と異なる名前になってしまい、バグのもとです。
名前には「目的」をつけましょう。

コメントを書く

どうわかりやすくすればいいかわからなくなった時は私はだいたいコメント書いてしまいます。
初歩的な事柄であるわりに効果が大きいのがコメントです。コメントは、コードを読む人が意味を理解するための大きな助けになります。

深いネストの解消

関数を使うネストの解消は私には難しく少し勉強しないと使えないかなと思ったので、すぐできそうな解消の仕方を紹介します。

if(...){
    if(...){
        if(...){
            処理...
        }else{
            エラー処理①...
        }
    }else{
        エラー処理②...
    }
}else{
    エラー処理③...
}

if文が3つネストしています。
この場合はエラー処理をifで定義してネストを解消することができます。


if(...){
    エラー処理③
    return or exception
}

if(...){
    エラー処理②
    return or exception
}

if(...){
    エラー処理①
    return or exception
}

  処理...

他にも改善できる書き方があります。

数珠つなぎの条件


if($a == 1){
  if($b == 2){
    // 何らかの処理
  }
}

こうやって繋げていくのはやめて


if($a == 1 && $b ==2){
  // なんらかの処理
}

こうできるといいと思います。

最後に

紹介した他にもたくさん良くする方法はあります。
もっとこうすると良いんじゃないかっと思ったらコメントイダ抱けると嬉しいです。

参考リンク

他人に読んでもらうJavaScriptコードを書くために
 読みやすいコードを書くために
 新人プログラマに知ってもらいたいメソッドを読みやすく維持するいくつかの原則
 【プログラミング】ネストの減らし方〜可読性UPのシンプルな原則〜

〔JavaScript〕未来の自分が読みやすいコードにするために出来る事