yamaday0u Blog Written by yamaday0u

読みやすいコードを書こう!『リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック』

Book Review PROGRAMMER

@yamaday0uです。

今回はプログラマー向けの内容になります。

職場に置いてあった『リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック』という本を読んで個人的に心に響いた、ワクワクする考えを共有します。

本書はタイトルのとおり、読みやすくて良いコードを書くための手法を教えてくれます。

この記事では大きく分けて以下の項目でご紹介します。

  • 美しさ
  • 制御フロー
  • 変数
  • リーダブルなコードを書くステップ

では行きましょう!

スポンサーリンク

美しさ

一番はじめは、見た目が美しいコードを書くことです。

見た目が美しいコードというのは、見た瞬間に「整理されているな」と感じたり、意味ごとのブロックにコードが分けられていることが理解できるコードです。

縦の線を真っ直ぐにする

たとえば、以下のように引数の2番目以降の縦の線を揃えると読みやすいですよね。

var a = setProperty("queen", 12, "tomato"   )
var b = setProperty("king" , 13, "lemon"    )
var c = setProperty("joker",  0, "pineapple")

一貫性と意味のある並び

ある規則で並んでいたり、意味ごとのまとまりになっていると美しいコードに近づきます。

例えば以下の順で並べます。

  1. フォームのinputフィールド順
  2. 重要度
  3. アルファベット順

アルファベット順は変数定義を探すときに非常に効果的ですね!

制御フロー

基本はif/else文

node.jsなどには三項演算子という演算子があります。

以下のような構文ですね。

var boolean = comparisonValue === standardValue ? true : false

comparisonValueの値がstandardValueの値と等しければtrue、そうでなければfalseを変数booleanに代入します。

この例であれば三項演算子を使うほうが簡潔にコードを書けますが、次のような場合はどうでしょうか?

var result = comparisonValue === standardValue ? getNewValue(a,b,c) : checkNext(a,b,c)

分かるといえば分かりますが、先ほどより直感的に読むことが難しく感じるようになりました。

直感的に読みにくい場合はif/else文を使いましょう。

var result
if(comparisonValue === standardValue) {
  result = getNewValue(a,b,c)
} else {
  result = checkNext(a,b,c)
}

個人的には上記の例のように、分岐により異なる関数を呼び出す場合はif/else文を使うと読みやすくなると感じています。

基本はif/else、より簡潔にできるときに三項演算子

関数から早く返す

関数での処理結果をなるべく早く返すようにすることで、読みやすいコードを書くことができます。

具体的には、関数の中で複数のreturn文を使って「ガード節」という方法を使います。

まずはガード節を使わない例を見てみましょう。

function check(params) {
  if (condition1) {
    if (condition2) {
      // 処理A
    } else {
      if (condition3) {
        // 処理B
      } else {
        // 処理C
      }
    }
  } else {
    // 処理D
  }
}

if文の入れ子が3層になっていてどういう処理になっているかわかりにくいですよね。

次にガード節を使う例を見てみます。

function check(params) {
  if (!condition1) {
    // 処理D
  }
  if (condition2) {
    // 処理A
  }
  if (condition3) {
    // 処理B
  } else {
    // 処理C
  }
}

ガード節を使うことで、if文の入れ子を無くなりました。

こちらのほうが処理内容が直感的に分かるようになりましたね。

このようにガード節を使うことで、if文の入れ子を無くしたり、浅くしたりすることができます。

ガード節を使おう

スポンサーリンク

変数

続いては変数です。

変数の使い方を工夫すると一気に読みやすいコードになります。

要約変数

要約変数とは読んで字のごとく、変数に入れた式の内容を要約する変数ですね。

例としてこんな感じです。

var isOwnBook = user.id === book.userId

式をそのまま読むよりも、変数名を読んで自分の著書であるかどうかを表していることがすぐにわかるようになりました。

変数に式を要約させる

変数のスコープを縮める

たとえばクラスで定義されている変数(メンバ変数)をクラス内の関数の中で定義できないでしょうか?

メンバ変数を定義することは修正時の影響範囲が大きいため、保守性の観点でもなるべく避けたいです。

定義の位置を下げる

以下のプログラムを見てください。

var first
var second
/*
  中略
*/
function process1(params) {
  first = params
}
function process2(params) {
  second = params
}

変数を定義している箇所と、実際にその変数が使われている箇所が遠いので、この変数がどこで定義されているのかすぐには分からなくなっています。

変数の定義は実際にその変数が使われる直前に定義するとぐっと読みやすくなります。

var first
function process1(params) {
  first = params
}
var second
function process2(params) {
  second = params
}

使う直前で変数を定義する。

リーダブルなコードを書くステップ

最後は実際にリーダブルなコードを書くためのステップです。

他の人に読んでもらう

自分が読みやすいと思う書き方と、他人が読みやすいと思う書き方にはギャップがあります。

実際に他の人に読んでもらいフィードバックをもらうことで、よりリーダブルなコードに近づけます。

新しく書くコードから読みやすいコードで書く

いきなり既存のコードを変えていくのは、想定外のバグを生むリスクもあり難易度が高いです。

なので自分に任されたタスクの中で新しく書くコードから本書で学んだ手法で読みやすいコードを書いて、リーダブルなコードを書く感覚を身に着けましょう。

スポンサーリンク

最後に

ぼく自身、整理整頓したり物を減らしたりするのが大好きなので、このリーダブルコードは大変感銘を受けました。

自己満足になるだけではなく、他の開発メンバーがソースコードを理解するのにかかる時間を省略できるのでチームにとっても有益です。

なにより整ったものを見るのは気持ちがいいですよね。

トップ画像:200 DegreesによるPixabayからの画像

yamaday0uを応援お願いします!あなたの1クリックが励みになります。
>> にほんブログ村