この記事はGizumoエンジニア Advent Calendar 2015の18日目の記事です
僕は**株式会社Gizumo**という、設立してまだ半年ほどの会社でエンジニアをやっています。
エンジニアの経歴としてはどちらかというとゴリゴリの開発より第三者検証のテストを行っていることが多く、フロントエンド開発の経験自体は浅いですが、つい先日参加したとある勉強会で後述するESLintに関しての話題があったことがきっかけで、簡単にまとめておこうと思い書いてみます。
はじめに
上記で軽く書いた第三者検証のテストが何かというと、プロダクトが仕様通りに動くかどうかを実際に動作確認をしてプロダクトの品質を保証するもので、いわゆるブラックボックステストと言われるものに近しい感じです。
一方でこのエントリーで書くものは、実装されたコードに基づいて、「正しく書かれているか」とか「正しく動くか」などを網羅的に確認していくホワイトボックステストです。
そしてこの中でも「正しく書かれているか」というところにフォーカスを当てて書いていこうと思います。
今回使うもの
-
ESLint
- コードの実行前にJavaScriptの文法はもちろん、綴りミスを見つけてくれたり、括弧や半角スペースとか悪い使い方を指摘してくれる便利なもの。
環境
今回は以下の環境で記事を書いていきます。
- OS / MacOS 10.11.2
- Node.js / v5.3.0
導入
ESLintをインストールするためにnpmというNode.jsのパッケージ管理ツールを使用するので、Node.jsをインストールしましょう。
Node.jsのインストールに関しては記事がたくさんあるので、今回は割愛します。
インストールができたら念のためバージョンを確認しておきましょう。
$ node -v // nodeのバージョンを確認する
v5.3.0
ESLintの導入
インストールはコマンドを打ちましょう
$ npm install -g eslint
$ eslint -v // インストールが完了したらバージョンを確認してみましょう
v1.10.3
実際に使ってみよう
初期設定
適当なディレクトリを作成し、（今回はjs-testというディレクトリを作成しました)
そこで以下のコマンドを打ってください。
$ eslint --init
そうすると以下のようにいくつか質問が出てくるので答えていきましょう
実際は自分の好きなようにしてもらえば良いのですが、今回は以下の形で進めていきます。
(↑と↓のキーで選択、Enterキーで次の質問に進みます)
? How would you like to configure ESLint?
> Use a popular style guide
? Which style guide do you want to follow?
> Google
? What format do you want your config file to be in?
> JavaScript
そうしたら.eslintrc.jsというファイルが生成されますが、
今は放っておいて大丈夫です。
JavaScriptファイルを作成する
次は実際にESLintを動かすJavaScriptのファイルを作りましょう。
var name = 'Yamada',
age = 25;
function aging (age) { // comment
age++;
console.log(age + "歳になりました");
}
function hello (name) {
console.log("HELLO " + name)
}
hello(name);
aging(age);
例えばこういうコードがあるとします。
一見問題ないように見えますが、ESLintにコードレビューをしてもらいましょう。
ESLintを動かす
使い方は簡単で、以下のようにeslintのあとにファイル名を指定するだけです。
$ eslint test.js
1:1 error Split 'var' declarations into multiple statements one-var
2:5 error Expected indentation of 2 space characters but found 4 indent
3:1 warning Missing JSDoc comment require-jsdoc
3:15 error Unexpected space before function parentheses space-before-function-paren
3:24 error Unexpected comment inline with code no-inline-comments
4:5 error Expected indentation of 2 space characters but found 4 indent
5:5 error Expected indentation of 2 space characters but found 4 indent
5:23 error Strings must use singlequote quotes
7:1 warning Missing JSDoc comment require-jsdoc
7:15 error Unexpected space before function parentheses space-before-function-paren
8:5 error Expected indentation of 2 space characters but found 4 indent
8:17 error Strings must use singlequote quotes
8:33 error Missing semicolon semi
11:2 error Newline required at end of file but not found eol-last
✖ 14 problems (12 errors, 2 warnings)
そうするとこのようにダメだったところを教えてくれます。
思った以上に多いですね。
このメッセージは以下のようになっています。
| 行番号:列番号 | 種類 | 内容 | ルール |
|---|---|---|---|
| 1:1 | error | Split 'var' declarations into multiple statements | one-var |
ルールというのはこちらに記載のもので、どういった基準でエラーや警告を出すかといったものが明確に決められているものです。
早速上記のエラーと警告を解消してみましょう。
var name = 'Yamada';
var age = 25;
var aging = function(age) {
age++;
console.log(age + '歳になりました');
};
var hello = function(name) {
console.log('HELLO ' + name);
};
hello(name);
aging(age);
// 最終行に空白行を入れる
これで再度
$ eslint test.js
コマンドを実行するとエラーが出なくなったかと思います。
このようにESLintを使用して、コードの精度を高めていきます。
ESLintの設定を変更する
ESLintの設定は.eslintrc.jsというファイルで全て管理できます。
今回の場合、Googleのスタイルガイドを使用しているため、デフォルトでは以下のようになっています。
module.exports = {
"extends": "google"
};
この中に"rules"というオブジェクトを作成し、以下のようにを入れてみましょう。
module.exports = {
"extends": "google",
"rules": {
"indent": [ 2, 4 ],
"semi": [ 0 ]
}
};
これで再度
var name = 'Yamada',
age = 25;
function aging (age) { // comment
age++;
console.log(age + "歳になりました");
}
function hello (name) {
console.log("HELLO " + name)
}
hello(name);
aging(age);
このコードに対してESLintをかけてみましょう。
以下のように最初に比べエラーが減ったかと思います。
1:1 error Split 'var' declarations into multiple statements one-var
3:1 warning Missing JSDoc comment require-jsdoc
3:15 error Unexpected space before function parentheses space-before-function-paren
3:24 error Unexpected comment inline with code no-inline-comments
5:23 error Strings must use singlequote quotes
7:1 warning Missing JSDoc comment require-jsdoc
7:15 error Unexpected space before function parentheses space-before-function-paren
8:17 error Strings must use singlequote quotes
✖ 8 problems (6 errors, 2 warnings)
これは何をしていたのかというと、今回は.eslintrc.jsというファイルでindentとsemiルールに対して、エラーを出す基準を変えていました。
"indent": [ 2, 4 ]
"semi": [ 0 ]
この部分です。
各ルールに対して、数字が設定できます。開始の[の直後の数字がそうです。
設定できる数字とその意味は以下の形です。
| 設定する数字 | 意味 |
|---|---|
| 0 | ルールを無視してエラーや警告を出さない |
| 1 | 警告を出す(warning) |
| 2 | エラーを出す(error) |
つまり今回のものは、
「indentに対してはルールを変更して、(デフォルトで2設定を) 4にする。semiに対してはエラーや警告を出さないようにする」という意味です。
このように.eslintrc.jsにオリジナルのルールを設定することで、
個人やチーム内で統一されたコードにしていくことができます。
最後に
フロントエンドでのテストとして、Mocha(もしくはJasmine)とKarmaも入れたかったとこですが、
今度自分の中で整理ができたときに書こうと思います。
今後の自分のためにもESLintで負の遺産をなくして、快適なコーディングライフを送りましょう。