【JavaScriptの応用】読みやすいコードを書くためのポイント

プログラムを作っていくと、段々とコードの量が増えていくにつれ、コードが複雑化していきます。
開発の規模によっては、複雑性が大きくなることは避けられない場合もありますが、良く考えずにコードを書き進めてしまうと、結果的に手が付けられない状態に陥ってしまいます。

JavaScriptには、コードを検証するための便利なツールがありますが、まずはプログラムを作っていく段階からコードが適切であるかどうか意識していくことが大切です。
そこで今回は、読みやすいコードを書くために意識すべきポイントを紹介していきます。

一つのことをうまくやる

ソフトウェア開発の規範にUNIX哲学というものがあります。
UNIX OSの開発者たちの経験に基づいたとされているもので、その中には「Do one thing and do it well」という有名な言葉があります。
つまり、一つのことをうまくやるという格言です。

例えば、JavaScriptにおいても、index.jsファイルにすべてまとめて書くのではなく、役割ごとにファイルを分割して書くことが推奨されています。
似たような機能や関数であっても異なるファイルに分けることで、役割をより明確にすることができます。

重複を防ぐ

プログラミングにおいて「Don’t repeat yourself」という重複を防ぐ考え方があります。
何度も同じようなコードが出現するのを避けるという意味です。

重複箇所が多数に渡ると、単純にコードを書く時間と修正の手間がかかるだけでなく、不必要なコードによって不具合が生じる原因となります。
そのため、似た動きをする関数は抽象度を高めて一つにまとめます。

コード全体を見たときに、複雑性が低くより理解しやすい構造を心がけることが大切です。

適切な名前を付ける

変数に何が格納されているのか、関数にはどのような目的があるのか、プログラマはそれらの名前を見て意図を判断します。
そのため、パッと見て変数や関数の意図が組み取れるように、適切な名前を付ける必要があります。

例えば以下のような場合です。
後者の方がパッと見て判断しやすいのが分かります。

// 悪い例
let p;
function pSound() {}

// 良い例
let playlist;
function playSound() {}

変数名を短縮して書ける場合は、できるだけ短く簡潔に記述します。

// 悪い例
let songCollection;

// 良い例
let songs;

適切なコメントを残す

上記で挙げた変数名の付け方にも共通しますが、適切なコメントが残されているとコードを読む助けになります。
そのため、後から自分で見返しても理解できること、他の人が見ても分かるようにコメントを残すことが重要です。

例えば、「後で修正する」というコメントがあっても、何のために何を修正するのか判断できません。
必要な情報であれば、より具体的にコメントを残すようにしましょう。

// 悪い例
function playSound() {} // TODO：後で修正する

// 良い例
function playSound() {} // TODO：再生時間が短すぎるため、30秒から1分に修正する

一方、コードが自明なものに対してコメントを残してしまうと、かえって可読性が下がってしまいます。

let playlist; // プレイリストを保存するための変数

コメントを残す際には、コメントを書く価値があるかどうかも意識しましょう。

一貫性を保つ

コーディング規約として、コードの書き方を統一することが推奨されています。

例えば、インデントのスペースが2つであったり4つであったり、{}内にスペースがあったりなかったりすると、コード全体のバランスが悪くなり可読性が下がってしまいます。

const validation = ( password ) => { // ()中の引数の左右に無駄なスペースがある
  return new Promise((resolve, reject) => {
    if (password.length >= 8){ // ()と{}の間にスペースがない
      resolve({
        password: password,
      });
    } else {
          reject('パスワードの文字数が制限を満たしていません') // 他はインデントのスペースが2つなのに、ここだけスペースが4つになっている
    }
  });
};

チーム単位やプロジェクト単位でルールが変わることもあります。
まずは、普段から一貫性のあるコードを書く習慣を身に付けましょう。

コードを分ける

一行あたりの文字数が長すぎたり、複数の機能を持つコードを一行にまとめてしまうと、読みにくくなってしまいます。
無理に一行にまとめずに、機能や時系列ごとに分割することも考えましょう。

// 悪い例
validation(password).then(result => console.log(result)).catch(error => console.log(error));

// 良い例
validation(password).then(
　　result => console.log(result),
　　error => console.log(error)
);

また、オブジェクトや配列の要素が多い場合にも同じことが言えます。

// 悪い例
const giftlist = { mother: 'candle', father: 'book', sister: 'earphone', niece: 'gloves' };

// 良い例
const giftlist = {
  mother: 'candle',
  father: 'book',
  sister: 'earphone',
  niece: 'gloves'
};

要素が少ない場合には一行にまとめて書くのも良いですが、3つ以上キーがある場合には、分割することを心がけましょう。