リーダブルコードを参考にコードの書き方を簡単にまとめてみた

Pocket

プログラミングを書くなら一度は読んでおきたいリーダブルコード。

数多くのブログでも紹介され、書かれている内容を実践し可読性があがったと感じている方も多いようです。

そんなリーダブルコードに書かれている内容の一部をまとめたので紹介していきます。

変数名に単位をつける

変数名に単位をつけよう//単位が曖昧
let margin=2;Readable Code//単位が明確
let margin_rem=2;

変数名に単位をつけるとコメントがなくても直感的に理解できますね。

 

変数名を使って説明する

変数を使って説明しようif (parseInt(info.substr(2))==22){
...Readable Codelet age = parseInt(info.substr(2));

分かりやすい変数名を付けて代入することで、何を判定しているのか明快になります

要約変数を利用する

要約変数を使用して条件文を短くするif ($user->age >=20 && $user->prefecture=='tokyo'){
   ...
}
Readable Code$is_ad

要約変数を使うと可読性も上がり、処理内で使い回す際にも長々とコードを書く必要がなくなります。

 

ループ内のネストを避ける

ループ内のネストを避けようfor(let i=0; i< user.length; i++){
    if (user[i].age >= 20){
        if (user[i].ge

ループ内部もネストが深くなりそうならcontinueで返す

 

if文の並び順に注意

if文の引数の並び順を意識しよう//定数->変数順だと分かりづらい
if (20 <= age)Readable Code//変数->定数順にしよう
if (age >= 20)

上の例で日本語訳すると
「20が年齢以下か」
となり直感的に理解しづらい。

下の例だと
「年齢が20以上か」
となり自然



ネストの深いif文はやめる

ネストの深いif文は避けるif (is_data1){
   if (is_data2){
      if(..)
   }
}Readable Codeif (!is_data1) ret

ループ内であればブレーク文を入れたり、関数ならリターンで返すなど、どうすればネストが浅くなるかを常に意識したいですね。

 

条件は否定形でなく肯定形


条件は否定形でなく肯定形から書くif (!is_not_null){
...
}else..Readable Codeif (is_null){
...
}else..

上記の例は理解するまで時間がかかる。
読み手が混乱しないか常に意識したいですね。

 

jQueryの変数には「$」をつける


jQueryの変数には頭に「$」をつけよう//文字なのかオブジェクトなのか判断しづらい
let user_name = $('input[name=user_name]')Readable Code

関数の引数にも「$」がつけるとコードが読みやすくなりますね。

グローバルスコープに注意

JavaScriptのグローバルスコープに注意function test(){
      //var,letで変数宣言されていない
      for(i=0;i<10;i++){

上の例だと変数「i」はグローバル変数扱いとなり、test関数外からでもアクセス可能になる。
for文では特に忘れがちなので注意が必要です。
変数は常に「var」「let」で定義する。


他にもより良いコードを書くためのシンプルで実践的なテクニックが数多く掲載されているので、随時追加していきます。

ちなみにこの記事で使用している画像のテンプレートは以下より使用できます

上下で比較できるテンプレート

 

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です