マイブログ リスト

2019年11月21日木曜日

【JavaScript】コーディング規約を選定した話


初めまして、MtFormです。
今回はVue.jsのプロジェクトのコーディング規約を定めるにあたっていろいろ迷ったお話です。


コーディング規約とは（ざっくり概念）


プログラムって、同じ動作をする場合でも異なる書き方ができますよね。
例えば、
let a,b,c;
と書くか、
let a;
let b;
let c;
と書くか。

このあたりは個人の好みで書き方が分かれてしまうので、複数人でコードを書くとバラバラの記法になって、バグの原因になったりします。
そこで、コードの書き方を統一するためのルールを定めることにしました、これがコーディング規約です。




メジャーなJSコーディング規約


コーディング規約を1から全部決めるのは大変なので、大手の企業が公開しているコーディング規約を使わせていただきます。（場合によってはカスタマイズします）
今回は３つの候補に絞りました。

JavaScript Standard Style


・2015年に提唱された。ESLintのサブセットである（カスタマイズ済のESLint）
・行末のセミコロン禁止のため、人によっては受け入れられない。
※セミコロンを必須とした「JavaScript Semi-Standard Style」もある。

Google JavaScript Style Guide

・ESLintの候補として表示されるほど標準的なスタイル
・AngularやGWTなどを開発しているGoogle製

Airbnb JavaScript Style Guide

・ESLintで候補として表示されるほど標準的なスタイル
・GitHub上で最も人気のあるスタイル（starが90kで第1位、第2位は22.7k：2019年11月現在）
・オープンな議論を通じてスタイルが決定している。
・スタイルについてパフォーマンスに関するエビデンスがある。



選ばれたのはAirbnbでした


どのスタイルガイドもESLint（JSの構文チェッカー）に対応しているのですが、パフォーマンスに対するエビデンスがあるということで、Airbnb JavaScript Style Guide を利用することにしました。

今回のプロジェクトはVue-CLIで作られていたので、導入は次のコマンドでOK
$ yarn add @vue/eslint-config-airbnb -dev
これでESLintの設定がvue.jsとAirbnb JavaScript Style Guideに対応してくれました。

構文チェックは次のコマンド
$ yarn lint --no-fix
試してみると50個くらいエラーが検出されて焦りましたが、--no-fixオプションを外して実行するとlint側で勝手にコードを修正してくれるのでエラーは5個くらいまで減り、
残りも日本語のリファレンスを見ながら修正できました。



苦戦したポイント

個人的に引っかかった部分は次の2点。


comma-dangle

（https://mitsuruog.github.io/javascript-style-guide/#commas--dangling）

 配列の末尾には、カンマが必須らしい！
末尾カンマはJSONだとエラーになるから気持ち悪いなあと思いつつリファレンスを読んでみると、
・末尾コンマはbabelが自動的に消してくれる
・gitの差分がきれいになる
とのこと。
確かに、差分はこっちのほうが断然わかりやすい！
スタイルガイドはgit管理の部分まで視野に入ってるんですね。

BAD
const array = [
  apple,
  banana,
  chocolate
];

GOOD
const array = [
  apple,
  banana,
  chocolate,
];


operator-linebreak

（https://mitsuruog.github.io/javascript-style-guide/#variables--linebreak）
代入で=の前後に改行を入れてはいけない。
でも、そこを直したらmax-lenの100文字に引っかかってエラーになるんだけど……。
という板挟みの状況に陥ったわけですが、リファレンスにはちゃんと書いてありました。

そういう場合は、「値を丸括弧で囲むこと」だそうです。

BAD
const text =
  'superLongText';

GOOD
const text = (
  'superLongText'
);


結論

Airbnb JavaScript Style Guideは、リファレンスが丁寧！！
以上です、ありがとうございました。

参考サイト


・JavaScriptのスタイルガイドまとめ(おすすめ4選)
・JavaScript Standard Styleのススメ
・セミコロンは省略？人気スタイルガイドに学ぶJavaScriptのコーディング規則
・JavaScriptの有名なコーディングスタンダードまとめ
・ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う


投稿者 時刻: 0 件のコメント:
登録: 投稿 (Atom)