JavaScriptのコーディングスタイル

JavaScriptで開発する際、文法上正しいというだけではなく、一般的に良いとされている作法や書き方を守った方が後々のメンテナンスやチーム内での共有に役立ちます。

ここではいくつかの有名なJavaScriptのコーディングスタイルを紹介をします。

JavaScriptのコーディングスタイルガイド

JavaScriptのコーディングスタイルの例

上記の内容を全部、細かくみるのは大変！です。
またそれぞれのスタイルで主張する内容が違う部分もあります。

実際の開発ではESLintのようなツールの助けを借りる事になります。

ここでは一部を抜粋して記載します。参照元のスタイルガイドは番号で示します。

インデント (1,2,3,4)

タブでもなく、スペース4つでもなく、スペース2つが推奨されています。

シングルクオートとダブルクオート (1,2,3)

文字リテラルの表現には、シングルクオートを使用する。

let foo = 'bar';
//👎 let foo = "bar"

中括弧の位置 (1,3)

中括弧の開き括弧は文と同じ行にする。

if (true) {
/*👎
if (true)
{
*/

変数の宣言 (1,2,3)

変数の宣言は1文で1つ。

let keys = ['foo', 'bar'];
let values = [23, 42];
/*👎
let keys = ['foo', 'bar']
   ,values = [23, 42];
*/

参照の宣言 (2,3)

varは変数の宣言で使用しない。参照の再割り当てが無い場合constを、再割り当てがある場合letを使用する。

const a = 1;
let count = 1;
if (true) {
  count += 1;
}
/*👎
var a = 1;
var count = 1;
if (true) {
  count += 1;
}
*/

定数、変数、プロパティ、クラスの命名規約 (1,2,3,4)

定数は、大文字とアンダースコア(underscores)
変数は、ローワーキャメルケース(lower camel case)
プロパティは、ローワーキャメルケース(lower camel case)
関数は、ローワーキャメルケース(lower camel case)
クラスは、パスカルケース(アッパーキャメルケース(upper camel case))

const MAX_SIZE = 100;
let userName = user.firstName;
function getUserName() {}
class User {}
/*👎
const maxSize = 100;
let user_name = user.first_name;
function get_User_Name() {}
class user {}
*/

ファイル名 (4)

ファイル名は小文字の英数字とアンダースコア(underscores _)とダッシュ(dashes -)で拡張子は.jsにする。文字コードはUTF-8を使用する。

オブジェクトのキーと最後のカンマ (1,2,3)

キーのクオートは必要がなければ不要 (3. Google JavaScript Style Guideでは混在させないように記載されている)。

末尾にはカンマ,を付ける。

let b = {
  good: 'code',
  'is generally': 'pretty',
};
/*👎
let b = {
  "good": 'code'
  , is generally: 'pretty'
};
*/

複数行の関数(2)

引数で改行し、末尾にカンマをつける。

function foo(
  bar,
  baz,
  quux,
) {
}
console.log(
  foo,
  bar,
  baz,
);
/*👎
function foo(bar,
            baz,
            quux) {
}
console.log(foo,
  bar,
  baz);
*/

オブジェクト、配列の作成 (2,3,4)

オブジェクトの作成はnewではなくリテラル構文で行う

const item = {};
const items = [];
/*👎
const item = new Object();
const items = new Array();
*/

比較の演算 (1,2,3)

同値演算は==ではなく、===を使う。同様に等しく無いは!=ではなく、!==を使う。

let a = 0;
if (a === '') {
  console.log('winning');
}
/*👎
let a = 0;
if (a == '') {
  console.log('losing');
}
*/

深いネストの排除 (1)

深いネストはガード節を意識して、ネストが深くならないようにする。

function isPercentage(val) {
  if (val < 0) {
    return false;
  }

  if (val > 100) {
    return false;
  }

  return true;
}
/*👎
function isPercentage(val) {
  if (val < 0) {
    if (val > 100) {
      return false;
    } else {
      return true;
    }
  } else {
    return false;
  }
}
*/
/*👍
function isPercentage(val) {
  let isInRange = (val >= 0 && val <= 100);
  return isInRange;
}
*/

名前付きクロージャ (1)

クロージャには名前をつけてよい。

req.on('end', function onEnd() {
  console.log('winning');
});
/*👎
req.on('end', function() {
  console.log('losing');
});
*/

関数式より関数宣言 (2)

関数式より関数宣言を使用する。

const foo = function longUniqueMoreDescriptiveLexicalFoo() {};
/*👎
function foo() {}
const foo = function () {};
*/

作成日 : 2020年06月06日

JavaScriptのコーディング スタイル