読みやすいコード入門編(javascript)

無駄にライブラリを使わない

標準機能で実現できることにライブラリを使わないことを心がける。

マジックナンバーには名前をつける

// この「100」は何？
const pages = Math.ceil(records.length / 100);

// ああ、1ページあたり100件ってことね！
const maxRecordsPerPage = 100;
const pages = Math.ceil(records.length / maxRecordsPerPage);

識別子を短くしない

// この変数はどういうこと？
const cx = 5;
const cy = 10;

// 意味がはっきりした！
const centerX = 5;
const centerY = 10;

// 関数名から機能を把握しにくい！
function fetchTrk(id) {
    return fetch('./api/tracking/' + id);
}

// これなら多少わかりやすい
function fetchPersonTrackingData(personId) {
    return fetch('./api/tracking/' + personId);
}

デフォルト引数はオブジェクトにする

// 複数のデフォルト引数を使っている
function findBookRecords(queryString, useCache = true, maxRecords = 50, caseSensitive = false) {
    // 取得処理
}

// どの引数が何を意味しているのかわかりにくい
const bookRecords = findBookRecords('JavaScript', true, 10, true);

// デフォルト引数をオブジェクトにしている
function findBookRecords(queryString, options = {}) {
    // 取得処理
}

// 引数の意味がわかりやすく、順番にも左右されない
const bookRecords = findBookRecords('JavaScript', { useCache: true, maxRecords: 10, caseSensitive: true });

イベントハンドラー関数は「on」で始めること

イベントをキャッチしたら始まる処理、もしくはイベントをキャッチするグローブのこと

垂直のインデント: コードを論理ブロックに分割するための空行

function pow(x, n) {
  let result = 1;
  //              <--
  for (let i = 0; i < n; i++) {
    result *= x;
  }
  //              <--
  return result;
}

ネストレベル

下のコードの方が見やすい

function pow(x, n) {
  if (n < 0) {
    alert("エラー");
  } else {
    let result = 1;

    for (let i = 0; i < n; i++) {
      result *= x;
    }

    return result;
  }
}

function pow(x, n) {
  if (n < 0) {
    alert("エラー");
    return;
  }

  let result = 1;

  for (let i = 0; i < n; i++) {
    result *= x;
  }

  return result;
}

関数の配置

NG:ヘルパー関数を使うコードの上に関数を記述する

// 関数宣言
function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

// 関数を使用するコード
let elem = createElement();
setHandler(elem);
walkAround();

OK:コードが最初で、その後に関数を記述

// 関数を使用するコード
let elem = createElement();
setHandler(elem);
walkAround();

// --- ヘルパー関数 ---

function createElement() {
  ...
}

function setHandler(elem) {
  ...
}

function walkAround() {
  ...
}

その他心構え

• シンプルなコードは、「素人っぽく」見えることもある
• プログラミングにおける1つ1つの判断は「そのコードが変更される」前提で行う。
• コードは1つずつタスクを行うようにしなければいけない。そのタスクは小さくなるように分割する。
• コードをたくさんの小さい部分に分割する（関数などが長くなったら分割して短くする）。
• プログラミングにおいては「今日単純なことをして、明日変更が必要になった時に、変更のコストを支払う」方が「今日複雑なことをして、結局使わない」よりも良い結果を生む。
• 問題を声に出して説明するだけで、解決策が見つかることがある。（通称ラバーダッキング）
• 関数を使う側にとって必要なのは、その関数が「何をするか（What）」であって、「どうやってするか（How）」ではありません。言い換えると、内部実装の情報まで関数名に含める必要はありません。

https://sbfl.net/blog/2018/03/24/readable-javascript-code/

https://note.com/shiory602/n/n5d15cdd28823

https://ja.javascript.info/coding-style

https://engineeeer.com/readable-code-tips/