変数を美しく書いてみよう！

はじめに

前回リーダブルコードを読んでコメントを美しく書いてみよう！　を記載しました。
今回は本の内容から、変数の書き方に焦点を当てて記載していきます！
参考文献：リーダブルコード

これまでの経験と本の内容を合わせて、それっぽいコードをサンプルに記載してまとめていきます！

不要な変数は削除する

不要な変数はなるべく削除したほうがいいとのことです。
理由としては以下の二点があげられます。

• 変数が多いと変数を追跡するのが難しくなる
• 変数が頻繁に変更されると現在の値を把握するのが難しくなる

        // 住所を取得
        $address = $getAddressData(zipcode);
        if ($address) { 
            ････
        }

この例では、関数内にaddressは一度しか使われていないことを前提とします。

if文の中身は住所があるかないかをみているだけです。変数がここでしか使われていないため、関数をif内に直接移動させて、$addressを削除しても良さそうです。

定義の位置を下げる

たまに関数の先頭で変数が全て定義されているコードをみます。
例えば以下のようなコードです。

        // 住所を取得
        $address = $getAddressData(zipcode);
        // 電話番号を取得
        $phonenumber = $getPhonenumberData(hoge);
        ...
        ...
        ...
        if ($address) { 
            ････
        }

実際に使用するのはずっと先だとしても、このように先頭にまとめて変数が定義されているコードを見かけます。
まとまっていると見やすそうですが、最初から全ての変数を知る必要はないので、使う直前に移動するほうがいいとされています。
また先頭に羅列すると、後で不要になった場合に消し忘れて残されたままというのもよく見かけてきました。
そういった無駄な変数も、処理の直前に記載することで消し忘れの防止につながります。

javascriptのグローバル変数には気を付けよう

グローバルスコープの取り扱いには気を付けたほうが良いです。（基本はグローバル変数は使わない）
意図せずグローバル変数にしてしまっている場合もあるので、以下の例を見て今一度グローバル変数を使ってないか気を付けましょう！

var f = function() {
  for(i =0; i <10; i +=1) {
    …
  }
}

こちらの例ではiがグローバル変数になってしまってます。別の関数でvarのない同じ名前の関数をつくってしまうと、影響がでてしまいます。

変数は一度だけ書き込むものだと理解する

永続的に変更されない変数は使いやすいとされています。仮に変数の値を入れ替えなくてはいけないことになっても、変更箇所はなるべく少なくした方が良いです。
Reactの場合は基本的にconstを利用して、値が変更されない変数にすることを心がけたほうが良いです。

まとめ

・不要な変数は削除する
・変数の定義は直前に書く
・グローバル変数にならないように気を付ける
・一度だけ書き込む変数を使う