" Airbnb JavaScript Style Guide() { "(日本語版)を読んでみた感想など

技術・テクノロジー

Airbnb JavaScript スタイルガイド() { | javascript-style-guide を読んでみたので、忘れないうちに感想などを書いておこうと思います。

JavaScript のスタイルガイドまとめ(おすすめ 4 選) - Qiita

上記の Qiita の記事に JS のいくつかのスタイルガイドが書いてあり、ざっくり見たところ Airbnb のものが一番良さそう(例があるとか、日本語版があるとか、説明が分かりやすいとか)だったので、読んでみることにしました。

このスタイルガイドは ES6 にもだいたい対応しており、全体を通して参考になることが多かったです。

リンク元の Qiita の記事にもあるように、オープンな議論を通じてスタイルが決定しているらしく、納得できるルールばかり、という感じでした。

個人的には 19.2 の末尾のカンマ がなるほど、と思いました。

JavaScript において末尾のカンマ(通称ケツカンマ)は JavaScript の「ケツカンマ問題」まとめ · DQNEO 日記 にもあるように、昔の IE で正常に動かない問題があるのですが、

Why? This leads to cleaner git diffs. Also, transpilers like Babel will remove the additional trailing comma in the transpiled code which means you don't have to worry about the trailing comma problem in legacy browsers.

なぜ? これはクリーンなgitの差分につながります。また、Babelの様なトランスパイラはトランスパイルする際に末尾の余計なカンマを除去します。これは、レガシーブラウザでの余計なカンマ問題を心配する必要がないことを意味します。

とあるように、Babel でトランスパイルすることを考慮すると問題ないそうです。

  // bad - git diff without trailing comma
  const hero = {
       firstName: 'Florence',
  -    lastName: 'Nightingale'
  +    lastName: 'Nightingale',
  +    inventorOf: ['coxcomb graph', 'modern nursing']
  };

  // good - git diff with trailing comma
  const hero = {
       firstName: 'Florence',
       lastName: 'Nightingale',
  +    inventorOf: ['coxcomb chart', 'modern nursing'],
  };

  // bad
  const hero = {
    firstName: 'Dana',
    lastName: 'Scully'
  };

  const heroes = [
    'Batman',
    'Superman'
  ];

  // good
  const hero = {
    firstName: 'Dana',
    lastName: 'Scully',
  };

  const heroes = [
    'Batman',
    'Superman',
  ];

若干気持ち悪い気もしますが、git で差分がわかりやすくなるなど、メリットもあるので、いいかな、と思いました。