変数

意味が明確で発音可能な変数名を使用する

悪い例:

const yyyymmdstr = moment().format("YYYY/MM/DD");

良い例:

const currentDate = moment().format("YYYY/MM/DD");

同種の変数には同じ用語を使用する

悪い例:

getUserInfo();
getClientData();
getCustomerRecord();

良い例:

getUser();

検索可能な名前を採用する

私たちは書くコードよりも多くのコードを読むことになります。そのため、可読性と検索性の高いコードを書くことが重要です。プログラムの理解に重要な変数に名前を付けないと、読み手を混乱させることになります。buddy.jsやESLintといったツールを使えば、名前のない定数を特定するのに役立ちます。

悪い例:

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);

良い例:

// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_PER_DAY);

説明的な変数を活用する

悪い例:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);

良い例:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

頭の中での変換を避ける

暗黙より明示が優先される

悪い例:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});

良い例:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

不要なコンテキストを追加しない

クラス/オブジェクト名から情報が得られる場合、変数名で重複して表現する必要はありません

悪い例:

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}

良い例:

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car, color) {
  car.color = color;
}

短絡評価や条件分岐よりデフォルトパラメータを使用する

デフォルトパラメータは短絡評価よりも明確な場合が多いです。ただしundefined引数にのみ適用され、''、""、false、null、0、NaNなどの「falsy」な値はデフォルト値で置換されない点に注意が必要です。

悪い例:

function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}

良い例:

function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}