Branding Engineer Tech Blog

株式会社Branding Engineerプロダクト部のブログになります。

JavaScriptのコーディングスタイルについて

こんにちは。今回は2回目のブログとしてJavaScript
コーディングスタイルについてお話させていただきます。

JavaScriptといえばほぼ毎年、新しい仕様が定義され
新たな書き方が増えています。

同じコーディングでも何種類も書き方があり、
コーディングスタイルを導入しないと古い書き方と新しい書き方が
混在し可読性が著しく下がります。


そこで今回は弊社で使っているコーディングスタイルに
ついてご紹介していきます。

アジェンダ:

1. AirbnbJavaScriptコーディングガイド
- 形式
- 書き方

AirbnbJavaScriptコーディングガイドについて

github.com


弊社では世界で宿泊仲介サービスを提供しているAirbnbによる
コーディングガイドを導入しています。

次々と新しい仕様に変更されるECMAScriptにおいて、
もうすでに古くなってしまった書き方、
今後どのように書くのがベストプラクティスであるのか書かれています。

また活発な議論もされており、
こちらを見るのも勉強になります。

github.com


コーディングスタイルは

  • 形式
  • 書き方

と大きく2つのジャンルに分けることができるとおもうので、
まずフォーマットについて言及していきます。

形式

  • Formatting(フォーマット)
  • Blocks(ブロック)
  • Naming Conventions(命名規則)
  • Variables(変数)
  • Functions(関数)
  • Comments(コメント)

Formatting(フォーマット)

・インデントは2つ。
・stringを囲む時はシングルクォートを使う。
・1行あたり100文字を超える文字列は同じ行(1行)で書く。

Blocks(ブロック)

・複数行にまたがる時は中括弧を使う

if (test)
  return false;

// good
if (test) return false;

Naming Conventions(命名規則)

・変数や関数にはlowキャメルケースを使う(adminUser)
・クラス名にはupperキャメルケースを使う(AdminUser)
・定数には大文字を使う(ADMIN_USER)
・略語には大文字を使う(HTTP、SNS)

Variables(変数)

・1度しか宣言しないものはconstを何度も代入するものはletを使う。
・配列の要素を複数の行にまたがって定義する時は、最後の要素にも,をつける。

const numberInArray = [
  1,
  2,
];

Functions

・関数定義で作成した関数式に名前をつける。

// bad
function foo() {
  // ...
}

// bad
const foo = function () {
  // ...
};

// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};


・可変長引数を受け取る時は(...args)を使う

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


・関数内で引数に初期値を定義する場合はdefault parameterを使う。

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

Comments(コメント)

複数行にまたがる場合は

/** ... */

1行なら

//


を使う。

書き方

  • Arrow Function(アロー関数)
  • type coercion(型強制)
  • Comparison Operators & Equality(比較)
  • Properties(プロパティ)
  • Iterators and Generators(イテレーター)

Arrow Function(アロー関数)

無名関数を使う時はアロー関数の形式にする。

// 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;
});

type coercion(型強制)

Stringへコンバートする時はString()を使う。

// bad
const totalScore = this.reviewScore.toString(); // isn’t guaranteed to return a string

// good
const totalScore = String(this.reviewScore);


NumberへコンバートするときはNumber()を使う。

// bad
const val = parseInt(inputValue);

// good
const val = Number(inputValue);


BooleanへコンバートするときはBoolean()または!!を使う。

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// best
const hasAge = !!age;

Comparison Operators & Equality(比較)

・比較する時は、==、!=ではなくて===と!==を使うようにする。

Properties(プロパティ)

・プロパティにアクセスする時は、[]ではなく.を使うようにする。
(変数でアクセスする時はluke[key]のようにする)

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;

Iterators and Generators(イテレーター)

forのようなイテレーターを使う場合は

  map() / every() / filter() / find() / findIndex() / reduce() / some() 

などを使うようにする。

イテレーターを使って生成した配列は、

  Object.keys() / Object.values() / Object.entries()

を使って生成するようにする。

const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;


以上、弊社が参考にしているコーディングガイドについて
簡単にご紹介しました。
(*コードに関しては、https://github.com/airbnb/javascriptより抜粋しております。)


次のECMAScript2019でも、またどんどん新しい書き方が増えていくので
随時確認していきたいですね。

(ECMAScript2019での新機能については↓がわかりやすいです。
配列操作がよりしやすくなるみたいです。)
www.youtube.com