Help us understand the problem. What is going on with this article?

【初心者向け】フロントエンド開発環境へのテストの導入

More than 3 years have passed since last update.

この記事は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のインストールに関しては記事がたくさんあるので、今回は割愛します。
インストールができたら念のためバージョンを確認しておきましょう。

console
$ node -v // nodeのバージョンを確認する
v5.3.0

ESLintの導入


インストールはコマンドを打ちましょう

console
$ npm install -g eslint

$ eslint -v // インストールが完了したらバージョンを確認してみましょう
v1.10.3

実際に使ってみよう

初期設定

適当なディレクトリを作成し、(今回はjs-testというディレクトリを作成しました)
そこで以下のコマンドを打ってください。

console
$ eslint --init

そうすると以下のようにいくつか質問が出てくるので答えていきましょう

hoge.png

実際は自分の好きなようにしてもらえば良いのですが、今回は以下の形で進めていきます。
(↑と↓のキーで選択、Enterキーで次の質問に進みます)

console
? 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のファイルを作りましょう。

test.js
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のあとにファイル名を指定するだけです。

console
$ 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

ルールというのはこちらに記載のもので、どういった基準でエラーや警告を出すかといったものが明確に決められているものです。

早速上記のエラーと警告を解消してみましょう。

test.js
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);

// 最終行に空白行を入れる

これで再度

console
$ eslint test.js

コマンドを実行するとエラーが出なくなったかと思います。
このようにESLintを使用して、コードの精度を高めていきます。

ESLintの設定を変更する

ESLintの設定は.eslintrc.jsというファイルで全て管理できます。
今回の場合、Googleのスタイルガイドを使用しているため、デフォルトでは以下のようになっています。

.eslintrc.js
module.exports = {
    "extends": "google"
};

この中に"rules"というオブジェクトを作成し、以下のようにを入れてみましょう。

.eslintrc.js
module.exports = {
    "extends": "google",
    "rules": {
        "indent": [ 2, 4 ],
        "semi": [ 0 ]
    }
};

これで再度

test.js
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をかけてみましょう。
以下のように最初に比べエラーが減ったかと思います。

console
  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というファイルでindentsemiルールに対して、エラーを出す基準を変えていました。

"indent": [ 2, 4 ]
"semi": [ 0 ]

この部分です。
各ルールに対して、数字が設定できます。開始の[の直後の数字がそうです。

設定できる数字とその意味は以下の形です。

設定する数字 意味
0 ルールを無視してエラーや警告を出さない
1 警告を出す(warning)
2 エラーを出す(error)

つまり今回のものは、
「indentに対してはルールを変更して、(デフォルトで2設定を) 4にする。semiに対してはエラーや警告を出さないようにする」という意味です。

このように.eslintrc.jsにオリジナルのルールを設定することで、
個人やチーム内で統一されたコードにしていくことができます。

設定できるルール関して詳しくはこちら

最後に

フロントエンドでのテストとして、Mocha(もしくはJasmine)とKarmaも入れたかったとこですが、
今度自分の中で整理ができたときに書こうと思います。
今後の自分のためにもESLintで負の遺産をなくして、快適なコーディングライフを送りましょう。

参考

tkfric
gizumo-inc
最新技術を追い求めるエンジニア集団です
http://gizumo-inc.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした