Ruby / Rails以外の開発一般

2017.09.12

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか（翻訳）

hachi8833

シェア
ツイート
ブックマーク
LINE

概要

AirbnbによるJavaScriptスタイルガイドです。
MITライセンスに基いて翻訳・公開いたします。

英語スタイルガイド: airbnb/javascript: README.md
更新日: 2017/09/08
著者: Airbnb

github.com/airbnbより

凡例

原文にはありませんが、利便性のため項目ごとに目安となる分類を【】で示しました。

【必須】【禁止】：従わないと技術的な悪影響が生じる
【推奨】【非推奨】：技術上の理由から強く推奨される、または推奨されない
【選択】：採用してもしなくてもよいスタイル
【スタイル】：読みやすさのためのスタイル統一指示
【知識】：指示に該当しない基礎知識

なお、Translationに日本語を含む各国の既存訳へのリンク一覧があります。

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか（翻訳）

メモ: 本ガイドではBabelの利用を前提とします。また、babel-preset-airbnbあるいは同等のライブラリが必要です。他に、airbnb-browser-shimsまたは同等のライブラリでshims/polyfillsをアプリにインストールしていることも前提とします。

1. 型（type）

1.1 【知識】プリミティブ型: プリミティブ型にアクセスすると、その値を直接操作する。

string
number
boolean
null
undefined

const foo = 1;
let bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9

1.2 【知識】複合型: 複合型にアクセスすると、（値そのものではなく）値への参照で操作する。

object
array
function

const foo = [1, 2];
const bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

2. 参照（reference）

2.1 【推奨】参照は常に `const`を使い、`var`は避けること。

eslint: prefer-const, no-const-assign

理由: constを使うことで、参照への再代入を防止できる。参照への再代入はバグを誘発し、コードを読みづらくする。

// Bad: 定数をvarで宣言している
var a = 1;
var b = 2;

// Good: 定数をconstで宣言している
const a = 1;
const b = 2;

2.2 【必須】参照の再代入には`var`ではなく`let`を使うこと。

eslint: no-var
jscs: disallowVar

理由: letはブロックスコープであり、varなどのような関数スコープではない。

// Bad
var count = 1;
if (true) {
  count += 1;
}

// Good: letを使うべき
let count = 1;
if (true) {
  count += 1;
}

2.3 【知識】`let`と`const`はどちらもブロックスコープである点に注意すること。

// constとletはどちらもそれらが宣言されたブロック内でのみ有効
{
  let a = 1;
  const b = 1;
}
console.log(a); // ReferenceError
console.log(b); // ReferenceError

3. オブジェクト（object）

3.1 【推奨】オブジェクトの作成にはリテラル文法を使うこと（`new`を使わないこと）。

eslint: no-new-object

// Bad
const item = new Object();

// Good
const item = {};

3.2 【推奨】オブジェクト作成時にプロパティ名を動的に与える場合は、computedプロパティ名（訳注: ECMAScript 6の機能）を使うこと。

理由: computedプロパティ名を使うと、オブジェクトの全プロパティを1箇所で定義できる。


function getKey(k) {
  return `a key named ${k}`;
}

// Bad
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// Good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

3.3 【推奨】オブジェクトメソッドのショートハンド表記（訳注: ES6の機能）を使うこと。

eslint: object-shorthand
jscs: requireEnhancedObjectLiterals

// Bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// Good: 「addValue(value)」ショートハンド形式にする
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

3.4 【推奨】プロパティ値のショートハンドを使うこと。

eslint: object-shorthand
jscs: requireEnhancedObjectLiterals

理由: 短くて書きやすく、内容を端的に表せる。

const lukeSkywalker = 'Luke Skywalker';

// Bad
const obj = {
  lukeSkywalker: lukeSkywalker,
};

// Good
const obj = {
  lukeSkywalker,
};

3.5 【スタイル】ショートハンドプロパティは他のプロパティと混ぜず、オブジェクト宣言の冒頭にまとめる。

理由: ショートハンド形式のプロパティであることをわかりやすくするため。

const anakinSkywalker = 'Anakin Skywalker';
const lukeSkywalker = 'Luke Skywalker';

// Bad
const obj = {
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  lukeSkywalker,
  episodeThree: 3,
  mayTheFourth: 4,
  anakinSkywalker,
};

// Good
const obj = {
  lukeSkywalker,
  anakinSkywalker,
  episodeOne: 1,
  twoJediWalkIntoACantina: 2,
  episodeThree: 3,
  mayTheFourth: 4,
};

3.6 【推奨】プロパティを引用符で囲む場合は、識別子として無効な名前だけを引用符で囲むこと。

eslint: quote-props
jscs: disallowQuotedKeysInObjects

理由: 主観的にはこの方が一般に読みやすいと考えられる。さらにシンタックスハイライトにもよい影響があり、さまざまなJSエンジンで最適化が効きやすくなる。

// Bad
const bad = {
  'foo': 3,
  'bar': 4,
  'data-blah': 5,
};

// Good: 'data-blah'だけ引用符で囲む
const good = {
  foo: 3,
  bar: 4,
  'data-blah': 5,
};

3.7 【禁止】`Object.prototype`のメソッド（`hasOwnProperty`、`propertyIsEnumerable`、`isPrototypeOf`など）を（`.prototype`を介さずに）直接呼んではならない。

理由: これらのメソッドは、そのオブジェクトのプロパティによって隠蔽される可能性がある。{ hasOwnProperty: false }の場合もあれば、オブジェクトが実際にはnullオブジェクト（Object.create(null)）のこともある。

// Bad
console.log(object.hasOwnProperty(key));

// Good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// ベスト
const has = Object.prototype.hasOwnProperty; // 探索はモジュールスコープ内で1度キャッシュされる。
/* 以下でもよい */
import has from 'has';
// ...
console.log(has.call(object, key));

3.8 【禁止】オブジェクトの「浅いコピー（shallow-copy）」では`Object.assign` を使わないこと。
【推奨】spread演算子（訳注: ドット演算子とも呼ばれる）`...`の利用が望ましい。
【推奨】特定のプロパティが省略されるオブジェクトを取得する場合は`...`演算子で受けること。

// 非常に悪い
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // `original`が変更されてしまう！ ಠ_ಠ
delete copy.a; // これも`original`が消される

// Bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); 
// copy => { a: 1, b: 2, c: 3 }

// Good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; 
// copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; 
// noA => { b: 2, c: 3 }

4. 配列（array）

4.1 【推奨】配列はリテラル文法で作成すること。

eslint: no-array-constructor

// Bad
const items = new Array();

// Good
const items = [];

4.2 【推奨】配列の項目はArray#push で作成すること。配列に項目を直接代入してはならない。

const someStack = [];

// Bad
someStack[someStack.length] = 'abracadabra';

// Good
someStack.push('abracadabra');

4.3 【必須】配列のコピーには配列のspread演算子`...`を使うこと。

// Bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// Good
const itemsCopy = [...items];

4.4 【必須】配列に近いオブジェクトを配列に変換する場合は、Array.from を使うこと。

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

4.5 【推奨】配列メソッドのコールバックでは`return`文を使うこと。ただし、関数の内容が1文だけで、かつ副作用のない式を返す場合は8.2に基いて`return`を省略してもよい。

eslint: array-callback-return

// Good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// Good
[1, 2, 3].map(x => x + 1);

// Bad
const flat = {};
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
  const flatten = memo.concat(item);
  flat[index] = flatten;
});

// Good
const flat = {};
[[0, 1], [2, 3], [4, 5]].reduce((memo, item, index) => {
  const flatten = memo.concat(item);
  flat[index] = flatten;
  return flatten;
});

// Bad
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// Good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});

4.6 【スタイル】複数行に渡る配列では、開き角かっこ`[`の直後と閉じ角かっこ`]`の直前を改行すること。

// Bad
const arr = [
[0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
id: 1,
}, {
id: 2,
}];

const numberInArray = [
1, 2,
];

// Good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
{
  id: 1,
},
{
  id: 2,
},
];

const numberInArray = [
1,
2,
];

5. 分割代入（Destructuring）

5.1 【推奨】1つのオブジェクトで複数のプロパティにアクセスする場合は「オブジェクトの分割代入」を使うこと。

jscs: requireObjectDestructuring

理由: プロパティの一時的な参照が作成されずに済むため。

// Bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;

  return `${firstName} ${lastName}`;
}

// Good
function getFullName(user) {
  const { firstName, lastName } = user;
  return `${firstName} ${lastName}`;
}

// ベスト
function getFullName({ firstName, lastName }) {
  return `${firstName} ${lastName}`;
}

5.2 【推奨】「配列の分割代入」を使うこと。

jscs: requireArrayDestructuring

const arr = [1, 2, 3, 4];

// Bad
const first = arr[0];
const second = arr[1];

// Good
const [first, second] = arr;

5.3 【推奨】複数の値を返す場合は「配列の分割代入」ではなく「オブジェクトの分割代入」を使うこと。

jscs: disallowArrayDestructuringReturn

理由: 今後プロパティを追加したり順序を変更したりしても呼び出し側に影響を与えずに済むため。

// Bad
function processInput(input) {
  // この後えらいことになる
  return [left, right, top, bottom];
}

// 呼び出し元は戻り値の順序を常に気にしなければならない
const [left, __, top] = processInput(input);

// Good
function processInput(input) {
  // この後うれしいことが起きる
  return { left, right, top, bottom };
}

// 呼び出し側は欲しいデータだけを使えばよい
const { left, top } = processInput(input);

6. 文字列（string）

6.1 【スタイル】文字列は常に一重引用符`' '`で囲むこと。

eslint: quotes
jscs: validateQuoteMarks

// Bad
const name = "Capt. Janeway";

// Bad - テンプレートリテラルは式展開か改行を含む場合に使うべき
const name = `Capt. Janeway`;

// Good
const name = 'Capt. Janeway';

6.2 【スタイル】100文字を超えるような複数行にわたる長い文字列を文字列結合などで分割しないこと。

理由: 分割された文字列は扱いづらく、コードの検索性も落ちる。

// Bad
const errorMessage = 'このウルトラスーパー長いエラーメッセージがスローされたのは\
バットマンのせい。バットマンがそんなことをする理由をいくら考えたところでさっぱり\
先に進まない。';

// Bad
const errorMessage = 'このウルトラスーパー長いエラーメッセージがスローされたのは' +
  'バットマンのせい。バットマンがそんなことをする理由をいくら考えたところでさっぱり' +
  '先に進まない。';

// Good
const errorMessage = 'このウルトラスーパー長いエラーメッセージがスローされたのはバットマンのせい。バットマンがそんなことをする理由をいくら考えたところでさっぱり先に進まない。';

6.3 【推奨】文字列をプログラムで組み立てる場合は`+`の文字列結合ではなく、テンプレート文字列を使うこと。

eslint: prefer-template template-curly-spacing
jscs: requireTemplateStrings

理由: テンプレート文字列は読みやすく、改行や文字列の式展開（interpolation）を正しく使える簡潔な文法であるため。

// Bad
function sayHi(name) {
  return 'How are you, ' + name + '?';
}

// Bad
function sayHi(name) {
  return ['How are you, ', name, '?'].join();
}

// Bad
function sayHi(name) {
  return `How are you, ${ name }?`;
}

// Good: ${name}にはスペースを含めないこと
function sayHi(name) {
  return `How are you, ${name}?`;
}

6.4 【禁止】`eval()`は決して文字列に対して使用してはならない。`eval()`は無数の脆弱性を引き起こす。

eslint: no-eval

6.5 【推奨】文字列内の文字を不必要に`\`でエスケープしないこと。

eslint: no-useless-escape

理由: バックスラッシュ\は可読性を損なうため、本当に必要な場合にのみ使うこと。

// Bad
const foo = '\'this\' \i\s \"quoted\"';

// Good
const foo = '\'this\' is "quoted"';
const foo = `my name is '${name}'`;

7. 関数

7.1 【禁止】関数宣言（function declaration）は使わず、代わりに名前付き関数式（named function expression）を使うこと。

eslint: func-style
jscs: disallowFunctionDeclarations

理由: 関数宣言は巻き上げられる（ホイスティング:hoisting）ため、ファイル内でその関数宣言の定義より上の位置から簡単に（あまりに簡単に）参照できてしまい、可読性もメンテナンス性も損なわれる。ある関数定義が、ファイルの他の部分をすべて理解しなければならないほど巨大で複雑になっているのであれば、そろそろ関数を独自のモジュールに切り出してもよいだろう。その際、式には必ず名前をつけること。無名関数を使うとエラーのコールスタックで問題を特定するのが困難になるかもしれない（議論）。

// Bad: 関数宣言
function foo() {
  // ...
}

// Bad: 無名関数
const foo = function () {
  // ...
};

// Good: 名前付き関数式
const foo = function bar() {
  // ...
};

7.2 【推奨】即時関数式（IIFE: immediately-invoked function expression）は丸かっこ`( )`で囲むこと。

eslint: wrap-iife
jscs: requireParenthesesAroundIIFE

理由: 即時関数式は単一のユニットであり、即時関数式とその呼出の丸かっこ()の両方を丸かっこ()で囲むことで明確に表現できるようになる。ただし、あらゆる場所でモジュールが使われているような世界では、即時関数式が必要になることはほぼまったくありえない。

// 即時関数式（IIFE）
(function () {
  console.log('インターネットへようこそ。フォローしてね。');
}());

7.3 【禁止】関数でないブロック（`if`や`while`など）の中では決して関数宣言を行ってはならない。代わりに関数を変数に代入すること。ブラウザではそのようなコードでも動いてしまうが、コードはまったく違う形で解釈され、痛い目を見ることになる。

eslint: no-loop-func

7.4 【知識】注: ECMA-262では`block`を文（statement）のリストと定義している。そして関数宣言は文ではない（ ECMA-262の注記を参照）。

// Bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// Good
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

7.5【禁止】パラメータに決して`arguments`という名前をつけてはならない。もし使うと、あらゆる関数スコープで与えられる`arguments`オブジェクトが隠蔽されてしまう。

// Bad
function foo(name, options, arguments) {
  // ...
}

// Good
function foo(name, options, args) {
  // ...
}

7.6 【禁止】`arguments`は決して使ってはならない。代わりに`...`記法を使うこと。

eslint: prefer-rest-params

理由: ...を使うことで、どの引数を取得したいかが明確になる。さらに...記法の引数は本物の配列である。argumentsのような配列もどきではない。

// Bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// Good
function concatenateAll(...args) {
  return args.join('');
}

7.7 【禁止】引数を関数で変更してはならない。代わりにデフォルトパラメータ文法を使うこと。

// 非常に悪い
function handleThings(opts) {
  // 関数でこのように引数を変更するべきではない！
  // さらなる副作用: optsがfalsyの場合、必要なものがそのオブジェクトに
  // 運よく設定されるかもしれないが、微妙なバグの原因になるかもしれない
  opts = opts || {};
  // ...
}

// これでも悪い
function handleThings(opts) {
  if (opts === void 0) {
    opts = {};
  }
  // ...
}

// Good
function handleThings(opts = {}) {
  // ...
}

7.8 【推奨】デフォルトパラメータでは副作用の発生を避けること

理由: 動作の理解で混乱を招く。

var b = 1;
// Bad
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

7.9 【必須】デフォルトパラメータは常に末尾に置くこと。

// Bad
function handleThings(opts = {}, name) {
  // ...
}

// Good
function handleThings(name, opts = {}) {
  // ...
}

7.10 【禁止】関数を決して関数コンストラクタで作成してはならない。

eslint: no-new-func

理由: 関数コンストラクタを使うと文字列がeval()と似た方法で評価され、脆弱性が発生する。

// Bad
var add = new Function('a', 'b', 'return a + b');

// still bad
var subtract = Function('a', 'b', 'return a - b');

7.11 【スタイル】関数シグネチャにはスペースを置くこと。

eslint: space-before-function-paren space-before-blocks

理由: スタイル統一のため。名前の追加や削除の際にこのスペースを増やしたり減らしたりすべきではない。

// Bad
const f = function(){};
const g = function (){};
const h = function() {};

// Good
const x = function () {};
const y = function a() {};

7.12 【禁止】受け取ったパラメータを変更してはならない。

eslint: no-param-reassign

理由: パラメータとして渡されたオブジェクトを改変すると、呼び出し元で意図に反して変数の副作用が発生する可能性がある。

// Bad
function f1(obj) {
  obj.key = 1;
}

// Good
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}

7.13 【禁止】パラメータに決して再代入してはならない。

eslint: no-param-reassign

理由: パラメータに再代入すると、特にargumentsオブジェクトにアクセスするする場合に思わぬ挙動が発生する可能性がある。さらに、特にV8エンジンで最適化に問題が発生する可能性もある。

// Bad
function f1(a) {
  a = 1;
  // ...
}

function f2(a) {
  if (!a) { a = 1; }
  // ...
}

// Good
function f3(a) {
  const b = a || 1;
  // ...
}

function f4(a = 1) {
  // ...
}

7.14 【推奨】variadic関数の呼び出しより、spread演算子`...`が望ましい。

eslint: prefer-spread

理由: ...の方が簡潔であり、コンテキストを与える必要がない。applyを使うと（意味のない）newが簡単にはできなくなる。

// Bad
const x = [1, 2, 3, 4, 5];
console.log.apply(console, x);

// Good
const x = [1, 2, 3, 4, 5];
console.log(...x);

// Bad
new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

// Good
new Date(...[2016, 8, 5]);

7.15 【スタイル】シグネチャや呼び出しが複数行に渡る関数は、本スタイルガイドの他でも使われている方法でインデントすること。各項目は単独で1行ずつ記述し、最終項目末尾のカンマは省略しないこと。

// Bad
function foo(bar,
             baz,
             quux) {
  // ...
}

// Good
function foo(
  bar,
  baz,
  quux,
) {
  // ...
}

// Bad
console.log(foo,
  bar,
  baz);

// Good
console.log(
  foo,
  bar,
  baz,
);

8. アロー関数（arrow function）

8.1 【推奨】関数式を無名関数として渡さなければならない場合は、アロー関数記法を使うこと。

eslint: prefer-arrow-callback, arrow-spacing
jscs: requireArrowFunctions

理由: アロー関数を使うと、thisのコンテキストで実行される関数が与えられる。これは多くの場合において適切であり、文法も簡潔になる。

使わない場合の理由: 関数がかなり複雑な場合は、ロジックを独自の関数宣言に切り出すことを検討すること。

// Bad
[1, 2, 3].map(function (x) {
  const y = x + 1;
  return x * y;
});

// Good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

8.2 【スタイル】関数の内容が1つの式を副作用なしで返す単一の文の場合、波かっこ `{}` と`return`を省略するか、波かっこ `{}` と`return`を明示的に書くか、どちらかにする。

eslint: arrow-parens, arrow-body-style
jscs: disallowParenthesesAroundArrowParam, requireShorthandArrowFunctions

理由: シンタックスシュガーであり、複数の関数を連鎖したときに読みやすくなる。

// Bad
[1, 2, 3].map(number => {
  const nextNumber = number + 1;
  `A string containing the ${nextNumber}.`;
});

// Good
[1, 2, 3].map(number => `A string containing the ${number}.`);

// Good
[1, 2, 3].map((number) => {
  const nextNumber = number + 1;
  return `A string containing the ${nextNumber}.`;
});

// Good
[1, 2, 3].map((number, index) => ({
  [index]: number,
}));

// 副作用ありの場合のreturnの省略
function foo(callback) {
  const val = callback();
  if (val === true) {
    // コールバックがtrueの場合に何かする
  }
}

let bool = false;

// Bad
foo(() => bool = true);

// Good
foo(() => {
  bool = true;
});

8.3 【スタイル】式が複数行に渡る場合、丸かっこ`( )`で囲んで読みやすくする。

理由: 関数の開始と終了がわかりやすくなる。

// Bad
['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )
);

// Good
['get', 'post', 'put'].map(httpMethod => (
  Object.prototype.hasOwnProperty.call(
    httpMagicObjectWithAVeryLongName,
    httpMethod,
  )
));

8.4 【スタイル】引数を1つだけ取り、波かっこ`{ }`を使わない関数では、引数の丸かっこ`( )`を省略するか、読みやすさと一貫性のために引数を常に丸かっこ`( )`で囲むか、どちらかにする。
注: 常に丸かっこ`( )`で囲むスタイルも許容される。eslintでは“always” オプションをオンにし、jslintの場合は`disallowParenthesesAroundArrowParam`をすることで設定できる。

eslint: arrow-parens
jscs: disallowParenthesesAroundArrowParam

理由: 可読性の向上。

// Bad
[1, 2, 3].map((x) => x * x);

// Good
[1, 2, 3].map(x => x * x);

// Good
[1, 2, 3].map(number => (
  `${number}を含むとても長い文字列。あんまり長いので.map行で場所を取りたくない！`
));

// Bad
[1, 2, 3].map(x => {
  const y = x + 1;
  return x * y;
});

// Good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

8.5 【スタイル】比較演算子（`<=`、`>=`）と紛らわしい場合はアロー関数記法(`=>`)の利用を避ける。

eslint: no-confusing-arrow

// Bad
const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize;

// Bad
const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize;

// Good
const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize);

// Good
const itemHeight = (item) => {
  const { height, largeSize, smallSize } = item;
  return height > 256 ? largeSize : smallSize;
};

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか （翻訳）

概要

凡例

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか （翻訳）

1. 型（type）

1.1 【知識】プリミティブ型: プリミティブ型にアクセスすると、その値を直接操作する。

1.2 【知識】 複合型: 複合型にアクセスすると、（値そのものではなく）値への参照で操作する。

2. 参照（reference）

2.1 【推奨】参照は常に constを使い、varは避けること。

2.2 【必須】参照の再代入にはvarではなくletを使うこと。

2.3 【知識】letとconstはどちらもブロックスコープである点に注意すること。

3. オブジェクト（object）

3.1 【推奨】オブジェクトの作成にはリテラル文法を使うこと（newを使わないこと）。

3.2 【推奨】オブジェクト作成時にプロパティ名を動的に与える場合は、computedプロパティ名（訳注: ECMAScript 6の機能）を使うこと。

3.3 【推奨】オブジェクトメソッドのショートハンド表記（訳注: ES6の機能）を使うこと。

3.4 【推奨】プロパティ値のショートハンドを使うこと。

3.5 【スタイル】ショートハンドプロパティは他のプロパティと混ぜず、オブジェクト宣言の冒頭にまとめる。

3.6 【推奨】プロパティを引用符で囲む場合は、識別子として無効な名前だけを引用符で囲むこと。

3.7 【禁止】Object.prototypeのメソッド（hasOwnProperty、propertyIsEnumerable、isPrototypeOfなど）を（.prototypeを介さずに）直接呼んではならない。

4. 配列（array）

4.1 【推奨】配列はリテラル文法で作成すること。

4.2 【推奨】配列の項目はArray#push で作成すること。配列に項目を直接代入してはならない。

4.3 【必須】配列のコピーには配列のspread演算子...を使うこと。

4.4 【必須】配列に近いオブジェクトを配列に変換する場合は、Array.from を使うこと。

4.5 【推奨】配列メソッドのコールバックではreturn文を使うこと。ただし、関数の内容が1文だけで、かつ副作用のない式を返す場合は8.2に基いてreturnを省略してもよい。

4.6 【スタイル】複数行に渡る配列では、開き角かっこ[の直後と閉じ角かっこ]の直前を改行すること。

5. 分割代入（Destructuring）

5.1 【推奨】1つのオブジェクトで複数のプロパティにアクセスする場合は「オブジェクトの分割代入」を使うこと。

5.2 【推奨】「配列の分割代入」を使うこと。

5.3 【推奨】複数の値を返す場合は「配列の分割代入」ではなく「オブジェクトの分割代入」を使うこと。

6. 文字列（string）

6.1 【スタイル】文字列は常に一重引用符' 'で囲むこと。

6.2 【スタイル】100文字を超えるような複数行にわたる長い文字列を文字列結合などで分割しないこと。

6.3 【推奨】文字列をプログラムで組み立てる場合は+の文字列結合ではなく、テンプレート文字列を使うこと。

6.4 【禁止】eval()は決して文字列に対して使用してはならない。eval()は無数の脆弱性を引き起こす。

6.5 【推奨】文字列内の文字を不必要に\でエスケープしないこと。

7. 関数

7.1 【禁止】関数宣言（function declaration）は使わず、代わりに名前付き関数式（named function expression）を使うこと。

7.2 【推奨】即時関数式（IIFE: immediately-invoked function expression）は丸かっこ( )で囲むこと。

7.4 【知識】注: ECMA-262ではblockを文（statement）のリストと定義している。そして関数宣言は文ではない（ ECMA-262の注記 を参照）。

7.5【禁止】 パラメータに決してargumentsという名前をつけてはならない。もし使うと、あらゆる関数スコープで与えられるargumentsオブジェクトが隠蔽されてしまう。

7.6 【禁止】argumentsは決して使ってはならない。代わりに...記法を使うこと。

7.7 【禁止】引数を関数で変更してはならない。代わりにデフォルトパラメータ文法を使うこと。

7.8 【推奨】デフォルトパラメータでは副作用の発生を避けること

7.9 【必須】デフォルトパラメータは常に末尾に置くこと。

7.10 【禁止】関数を決して関数コンストラクタで作成してはならない。

7.11 【スタイル】関数シグネチャにはスペースを置くこと。

7.12 【禁止】受け取ったパラメータを変更してはならない。

7.13 【禁止】パラメータに決して再代入してはならない。

7.14 【推奨】variadic関数の呼び出しより、spread演算子...が望ましい。

7.15 【スタイル】シグネチャや呼び出しが複数行に渡る関数は、本スタイルガイドの他でも使われている方法でインデントすること。各項目は単独で1行ずつ記述し、最終項目末尾のカンマは省略しないこと。

8. アロー関数（arrow function）

8.1 【推奨】関数式を無名関数として渡さなければならない場合は、アロー関数記法を使うこと。

8.2 【スタイル】関数の内容が1つの式を副作用なしで返す単一の文の場合、波かっこ {} とreturnを省略するか、波かっこ {} とreturnを明示的に書くか、どちらかにする。

8.3 【スタイル】式が複数行に渡る場合、丸かっこ( )で囲んで読みやすくする。

8.5 【スタイル】比較演算子（<=、>=）と紛らわしい場合はアロー関数記法(=>)の利用を避ける。

関連記事（JavaScript）

Stimulus: Connected・Disconnectedコールバックでtargetsの更新をトラッキングする（翻訳）

CSS: 2025年に押さえておきたい最新CSS機能13選（翻訳）

Stimulus.JS: 値の変更時にトリガーされるコールバックをコントローラで利用する（翻訳）

playwright-mcpで大きなページのtoken limit問題を解決するAPIを実装してみた

型付けの "duplicate duck" 落とし穴を踏んだ話（翻訳）

どれくらいの抽選回数でビンゴになるの？ シミュレーションして調べてみた

チーム開発においてGit初心者が踏みがちな地雷まとめ

OracleにないLIMITの代わりにROWNUMを使う場合の罠

Windowsでネットワーク速度を制限する方法

PostgreSQLのVACUUMやANALYZEの話

Stimulus: Connected・Disconnectedコールバックでtargetsの更新をトラッキングする（翻訳）

AIパフォーマンスの最適化を学ぶ（2）「SOWを作って」は超便利な指示

CSS: 2025年に押さえておきたい最新CSS機能13選（翻訳）

Stimulus.JS: 値の変更時にトリガーされるコールバックをコントローラで利用する（翻訳）

SQLite on Railsシリーズ（14）SQLite拡張機能をsqlpkgでインストールする（翻訳）

関連記事

JavaScriptスタイルガイド 15〜26: 比較演算子、ブロック、制御文、型変換、命名規則ほか （翻訳）

JavaScriptスタイルガイド 9〜14: クラス、モジュール、イテレータ、プロパティ、変数、巻き上げ（翻訳）

CONTACT

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか（翻訳）

JavaScriptスタイルガイド 1〜8: 型、参照、オブジェクト、配列、関数ほか（翻訳）

1.2 【知識】複合型: 複合型にアクセスすると、（値そのものではなく）値への参照で操作する。

2.1 【推奨】参照は常に `const`を使い、`var`は避けること。

2.2 【必須】参照の再代入には`var`ではなく`let`を使うこと。

2.3 【知識】`let`と`const`はどちらもブロックスコープである点に注意すること。

3.1 【推奨】オブジェクトの作成にはリテラル文法を使うこと（`new`を使わないこと）。

3.7 【禁止】`Object.prototype`のメソッド（`hasOwnProperty`、`propertyIsEnumerable`、`isPrototypeOf`など）を（`.prototype`を介さずに）直接呼んではならない。

4.3 【必須】配列のコピーには配列のspread演算子`...`を使うこと。

4.5 【推奨】配列メソッドのコールバックでは`return`文を使うこと。ただし、関数の内容が1文だけで、かつ副作用のない式を返す場合は8.2に基いて`return`を省略してもよい。

4.6 【スタイル】複数行に渡る配列では、開き角かっこ`[`の直後と閉じ角かっこ`]`の直前を改行すること。

6.1 【スタイル】文字列は常に一重引用符`' '`で囲むこと。

6.3 【推奨】文字列をプログラムで組み立てる場合は`+`の文字列結合ではなく、テンプレート文字列を使うこと。

6.4 【禁止】`eval()`は決して文字列に対して使用してはならない。`eval()`は無数の脆弱性を引き起こす。

6.5 【推奨】文字列内の文字を不必要に`\`でエスケープしないこと。

7.2 【推奨】即時関数式（IIFE: immediately-invoked function expression）は丸かっこ`( )`で囲むこと。

7.4 【知識】注: ECMA-262では`block`を文（statement）のリストと定義している。そして関数宣言は文ではない（ ECMA-262の注記を参照）。

7.5【禁止】パラメータに決して`arguments`という名前をつけてはならない。もし使うと、あらゆる関数スコープで与えられる`arguments`オブジェクトが隠蔽されてしまう。

7.6 【禁止】`arguments`は決して使ってはならない。代わりに`...`記法を使うこと。

7.14 【推奨】variadic関数の呼び出しより、spread演算子`...`が望ましい。

8.2 【スタイル】関数の内容が1つの式を副作用なしで返す単一の文の場合、波かっこ `{}` と`return`を省略するか、波かっこ `{}` と`return`を明示的に書くか、どちらかにする。

8.3 【スタイル】式が複数行に渡る場合、丸かっこ`( )`で囲んで読みやすくする。

8.5 【スタイル】比較演算子（`<=`、`>=`）と紛らわしい場合はアロー関数記法(`=>`)の利用を避ける。

どれくらいの抽選回数でビンゴになるの？　シミュレーションして調べてみた

JavaScriptスタイルガイド 15〜26: 比較演算子、ブロック、制御文、型変換、命名規則ほか（翻訳）