Lorem ipsum

ミニマリストなフリーランスエンジニアの雑記です。

" 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で差分がわかりやすくなるなど、メリットもあるので、いいかな、と思いました。