コーディング規約

JavaScript本格入門(ISBN 978-4774184111)で基礎からJavaScriptを勉強するシリーズです。今回はChapter8よりコーディング規約についてです。

概要

複数人で開発していると、コーディング規約が大切ということについては言わずもがなだと思います。
JavaScriptのコーディング規約については、下記の記事に、有名どころが纏まっていますので参考にさせていただきました。

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

筆者がNode.jsで開発することが多いので、Felix's Node.js Style Guideのコーディング規約を使って、書いたコードをチェックするようにしてみます。

環境

記事作成時点の環境は以下の通りです。

• Windows 10 Home edition(64bit)
• Node.js 10.15.1
• npm 6.4.1

ESlintのインストール

ESlint（リンター）を使ってコーディング規約に則っているかをチェックしますので入れます。

インストール

$ npm install eslint

バージョン確認

$ eslint --version
v6.0.1

実践

コーディングしてみる

何も考えずに、テキトーに動くサンプルを作ってみました。
さてチェックするとどうなるでしょうか。

main.js

var Main = function(arg1, arg2) {
    console.log("Your input is " + arg1 + ".")
}

Main("hoge");

Felix's Node.js Style Guideの設定を持ってくる

ESlintは.eslintrc.jsonファイルをESlintの設定として読み込んでくれます。

今回はFelix's Node.js Style Guideを利用するのでGitHubから持ってきます。
（ほんとはgit clone & バージョン指定して持ってくるべき）

参照：https://github.com/felixge/node-style-guide/blob/master/.eslintrc

.eslintrc.json

{
  "env": {
    "node": true
  },
  "rules": {
    "array-bracket-spacing": [2, "never"],
    "block-scoped-var": 2,
    "brace-style": [2, "1tbs"],
    "camelcase": 1,
    "computed-property-spacing": [2, "never"],
    "curly": 2,
    "eol-last": 2,
    "eqeqeq": [2, "smart"],
    "max-depth": [1, 3],
    "max-len": [1, 80],
    "max-statements": [1, 15],
    "new-cap": 1,
    "no-extend-native": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-trailing-spaces": 2,
    "no-unused-vars": 1,
    "no-use-before-define": [2, "nofunc"],
    "object-curly-spacing": [2, "never"],
    "quotes": [2, "single", "avoid-escape"],
    "semi": [2, "always"],
    "keyword-spacing": [2, {"before": true, "after": true}],
    "space-unary-ops": 2
  }
}

ESlintでチェックしてみる

$ eslint main.js
  1:27  warning  'arg2' is defined but never used                                                               no-unused-vars
  2:17  error    Strings must use singlequote                                                                   quotes
  2:43  error    Strings must use singlequote                                                                   quotes
  2:47  error    Missing semicolon                                                                              semi
  3:2   error    Missing semicolon                                                                              semi
  5:1   warning  A function with a name starting with an uppercase letter should only be used as a constructor  new-cap
  5:6   error    Strings must use singlequote                                                                   quotes
  5:14  error    Newline required at end of file but not found                                                  eol-last

✖ 8 problems (6 errors, 2 warnings)
  6 errors and 0 warnings potentially fixable with the `--fix` option.

いっぱい怒られました！直しましょう！

コードを直す

fixed

var main = function(arg1) {
    console.log('Your input is ' + arg1 + '.');
};

main('hoge');

警告に従って直しました。

最後にもう一度チェック

$ eslint main.js

何も言われませんでした。これで安心してプルリクエストできます。

まとめ

Grunt(タスクランナー)や、CircleCIなどと組み合わせれば、コミットが来るたびに自動チェック等が出来ますね。