【リーダブルコード】ー10分で名書まとめー現場で即時開発効率向上、理解しやすいコードの書き方_第二章「変数名編」


##はじめに
皆さん、こんにちは！Webシステム開発エンジニアの蘭です！
SE、エンジニア、プログラマーに問わず、
現場にいるとみなさんも絶対こんな状況はあるかと思います。

同僚に思ったこと...
`「Aさんの開発技術はすごいが、天才しすぎて書いてるコードがまさに宇宙人でわからない！」`
新しい現場に入ったら、困ったこと...
`「何？開発ドキュメントがまったくない？辞めた前人が書いたコードを一週間以内に理解しようと？」`
N年前に自分が開発した案件で、同僚からコードの意味を聞かれる...
`「え...これ何使ってた関数でしたっけ？全然覚えてない」（結局理解するため自分の業務を横に一日かかってしまった）`

実はプログラミングはコンピューターを動かすための命令式だけではなく、
チームと一緒（またはN年後の自分）に開発する中、自分の開発ロジックを記述している文章でも言えます。
いい文章を書くことでチームメンバーとのコミュニケーションが180度変わります。

##ズバリ！理解しやすいコードを書くことで、
　　　　　・開発メンバーでコードの共有ができ、チーム共同開発効率向上
　　　　　・機能追加や編集がしやすく、開発効率と柔軟性が抜群
　　　　　・テストでバグがすぐに見つかる
　　　　　・メンテナンスでエラーの修正が速いため、コストを削減

##参考書籍：【リーダブルコード】
本記事の内容は【リーダブルコード】を参考しました。
  [リーダブルコード（Amazon）](https://www.amazon.co.jp/s/?ie=UTF8&keywords=%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB%E3%82%B3%E3%83%BC%E3%83%89&index=aps&jp-ad-ap=0&tag=googhydr-22&ref=pd_sl_7jlnewud51_e&adgrpid=52747835709&hvpone=&hvptwo=&hvadid=338561722060&hvpos=1t1&hvnetw=g&hvrand=17653691197669189120&hvqmt=e&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=1009304&hvtargid=kwd-334307148361&hydadcr=16038_11170849&gclid=EAIaIQobChMIu42527WH5QIVD3ZgCh18kgVoEAAYASAAEgIS8fD_BwE)

##関数、変数名編
今回は関数、変数名編について見ていきましょう！
（他はまた後日投稿します！）

##よし！今からやってみよう！Just Do It
#### No1.関数の名前自体がコメント
　　　　
一言で言いますと、関数名は普段私達がメールでやり取りしているメールのタイトルだと思ってください。考えてみてください、どんなメールタイトルが理解しやすいですか。
　　　　・`Aさんからのメール：【返信Re】`
　　　　・`Bさんからのメール：【小林＿歓迎会についての返信ー参加】`
　　　　　↑どちらが見やすいかは一目瞭然ですね！

####実は以下の秘密があったから
>・明確な単語を選ぶ
 ・汎用な名前を避ける
 ・具体的な名前を使う
 ・名前に情報を追加する
 ・名前の長さを決める
 ・名前のフォーマットで情報を伝える

####・明確な単語を選ぶ、具体的な名前を使う
・`Aさんからのメール：【返信Re】`を見るとわかりますが、どこからの返信か何についてか全く掴めませんね。
コードも同じく、例えばインターネットからページをダウンロードする関数があります。

```getPage.js
function getPage(url){
    ...
//getPageはどのようにまたどこから
//ページを取得してるのかわかりません。
}
```

```download_CsvFromInternet.js
function download_CsvFromInternet(url){
    ...
//インターネットからダウンロードし、また取得したファイル形式はCSVだとすぐに理解し
//引数のurlもダウンロードのソースURLだとすぐに連想できます。
}
```

####・tmpやretval等汎用な名前を避ける
・`Aさんからのメール：【返信Re】`と同じく、「返信」という汎用な単語を使っても、ポイントの情報がないため、事情を伝えてないと同じ状態になります。

```foo.js
function foo (user){
  let tmp = user.name;
  let retval = tmp + 'さん';
  return retval;
　//tmpは存在期間がわずか以外何をしてるかわからない。
 //retval戻り値の意味以外わからない。
}
```

```add_San_to_UserName.js
function add_San_to_UserName (user){
  let userName_original = user.name;
  let userName_Add_San = userName_original + 'さん';
  return userName_Add_San;
　//userName_originalは変更前のユーザー名。
　//add_San_to_UserNameでユーザー名に「さん」を追加するのが理解できる。
}
```

####・ループも同じくi,j,kを避けましょう
・悪い例

```loop.js
function loop (clubs, users){
  for(int i = 0; i < clubs.length; i++;){
     for(int j = 0; j < clubs[i].members.length; j++;){
       for(int k = 0; k < users.length; k++;){
           if(clubs[i].members == users[j])
               ...
         }
     }

}

　//i,j,kの意味が理解しにくい
　//if(clubs[i].members == users[j]でｊが書き間違ってるのも見つけにくい
//i_club, j_club_members, k_userだとわかりやすくなるね！
}
```

####・名前に情報を追加する
単位や危険を喚起する情報を追加する事ができます。

| 状況       |       変数名 |    改善後    |
|:-----------------|------------------:|:------------------:|
| 処理を延期するのは理解しても、秒、分か単位がわからない             |              delay |        delay_secs        |
| パスワードはプレインテキストなので、処理する前に暗号化すべき           |            password |       plaintext_password       |
| ユーザーが入力したコメントはエスケープする必要がある             |              comment |        unescaped_comment        |
| htmlの文字をUTF-8に変えた               |                html |         html_utf8         |
| 入力したdataをURLエンコードした             |             data |       data_urlenc       |

※これはmicrosoftで使われたハンガリアン記法なのではと思う方もいますが、ハンガリアン記法はもっと規定が厳密ですので、上記は理解をしやすいように情報追加してるので、少々違います。
　　[ハンガリアン記法について（wikipedia）](https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%82%AC%E3%83%AA%E3%82%A2%E3%83%B3%E8%A8%98%E6%B3%95)


####・名前の長さを決める
`newNavigationWrappingViewControllerForDataSourceOfClass`等短く情報量が足りないのも理解しにくいが、長過ぎるのも覚えにくいですし、コードの文字数が多くなりますので、避けましょう。

####・名前のフォーマットで情報を伝える
アンダースコア、ダッシュ、大文字等で情報を伝える。
`member_user_name`、`member-user-name`、`memberUserName`等。


##・まとめ
いかがでしたか。今回は関数名で必要な情報を相手に届ける事について語りました。
今後現場で使えると嬉しいです！：D

・おまけ
[【リーダブルコード】ー10分で名書まとめー現場で即時開発効率向上、理解しやすいコードの書き方_第三章「誤解されない変数名編」](https://qiita.com/moyegogo1020/items/8b8d7d1c5844b51fbab9)