javascriptで構文をチェックする方法を解説します。ESLintの簡単な使い方

javascriptまたはEcmaScript6(ES6)のコーディングルールを保つ方法を、備忘録としてまとめてみたいと思います。

今回は第4回目です。ESLint(イーエスリント)という、JavascriptやEcmaScript6の構文をチェックしてくれるnpmパッケージの使い方について触れていきたいと思います。

前回は、プログラムが隈なくテストされているのかを計測するテストカバレッジ(テストの網羅率)の取得について解説しました。カバレッジにはistanbulというnpmパッケージを使用しました。

自身のブログ
javascriptでテストカバレッジ(網羅率)を取得する方法を解説します。istanbulの簡単な使い方

私自身もテスト初心者ですので、できるだけ平たく説明していきます。もしこれは違う！という内容があればツッコミをお待ちしております。

目次

ESLintで何ができるのか？

ESLintでは大まかに以下の事ができます。

JSやES6の構文チェック

JavascriptまたはES6ファイルの記述内容が、構文チェックツールに従って書かれているかを判断します。基準に従わない記述が見つかった場合はエラー表示されます。

チェックツールの定義と流用が可能

ESLintでは、チェックしたい構文ルールを

• 自由に定義
• 既存のルールを流用
• 既存のルールを流用し、一部のルールを上書き

と言ったルールのカスタマイズが可能になっています。

ルールは一から作ろうとすると複雑で膨大です。ルールはESlintの公式ドキュメントで見ることができますので、以下をご覧ください。

ESLint
Rules(構文チェック ルールの一覧)

ルールを全て手作業で定義するのは大変なので、一般的にはnpmやgithubなどで配布されているルールのパッケージを流用して構文チェックすることになります。

例えば、Githubではeslint-config-◯◯◯というパッケージが無数に存在しています。どのような物があるのか探してみましょう。

Github
Github 検索「eslint-config」で始まるプロジェクト

私が見たところ、汎用性の高いルールと、プロジェクト内でコーディングを統一する目的で作られたルールが存在しているように感じました。ただ、実際のところ詳細なルールはよく分かりません(^-^;)

ルールに迷ったらまずはeslint-recommended

構文チェックツールをどのように設定すべきか迷ったら、まずはESLintの推奨設定であるeslint-recommendedを使う事ができます。

Gist mysticatea/eslint-recommended
eslint-recommendedのルール一覧(和訳)

また、ESLintを使用したデモを本家のHPで体験できますので、どのような物なのかざっくりと以下で試してみましょう。

ESLint
ESLint - Demo

上記のデモでは、変数の中身が定義されていないbarを使用した事による警告と、変数fooが定義されているのに一度も使用されていない警告が表示されています。

これも予め定められているルールにより、警告が表示されているのですが、設定変更によっては警告を一部無効にする事も可能です。それでは、実際にESLintをJavascriptのプロジェクトで使ってみましょう。

javascriptで用いるモジュールをおさらい

第1回目でも触れましたが、Javascriptの構文チェックを行うために、以下のnpmパッケージを使います。

• eslint (イーエスリント)

  javascriptやES6等の文法と記述が正しいかをチェックできるパッケージです。記述のチェックルールは別途設定ファイル(.eslintrc)で決めたり、設定npmパッケージ(eslint-config-◯◯◯というパッケージが無数に存在)を全て反映・または一部流用することが可能となっています。

今回は、上記のパッケージeslintのみを使う事になるので、使い方は比較的シンプルで分かりやすいかと思います。

npmパッケージeslintのインストール

それではまず、eslintをnpmインストールしましょう。

まずは、サンプルコードを実行するプロジェクトjs-test-practiceディレクトリを作成し、npmパッケージをインストールします。

1
2
3
4
5

$ git clone https://github.com/tea3/js-test-practice.git
$ mkdir js-test-practice
$ cd js-test-practice
$ npm init
$ npm install --save-dev eslint

また、node.jsやnpm、そしてコマンドラインについてご不明な場合は以下をご覧ください。

ESLintを使って構文チェック

それでは早速ESLintを使ってみましょう。

設定ファイル.eslintrcを作る

まずは、eslintの設定ファイルである.eslintrcを作成して以下のように記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
    "extends": "eslint:recommended",
    "parserOptions": {
      "ecmaVersion": 6
  },
  "env" : {
    "node" : true ,
    "browser" : true,
    "mocha" : true
  },
  "rules": {
        "no-console": 0
  }
}

上記の設定ファイルはJSON形式ですが、以下のような内容をオプションとして指定しています。

• extends

  利用したい構文チェックルールを指定します。"eslint:recommended"でESLintの推奨設定であるeslint-recommendedを使う事ができます。

• ecmaVersion

  ESLintでES6をチェックしたい時にこのオプションを追加します。

• env

  チェックしたいJavascriptやES6の実行環境に応じて、このオプションを追加していきます。実行環境がnode.jsならば"node":trueを指定します。ブラウザでは"browser":trueを指定。テスト環境ならば例えば"mocha":trueを指定します。

• rules

  ルールを一部変更したい場合にこのオプションを追加します。上記の設定例ではeslint-recommendedのルールに対して、コンソール出力のコードを許可するようにルールを書き換えています。

これで、ES6やJavascriptの主な利用シーンで書かれたコードがチェックできる準備が整いました。

構文チェックしたくないファイルを.eslintignoreで設定

次に、ESLintで構文チェックしたくないファイルを.eslintignoreで定義します。.eslintignoreファイルを作成し以下のように記述しましょう。

1

node_modules/
coverage/
tmp/
web/

こちらはGitの.gitignoreファイルと同じ記述方法です。上記のように改行区切りでファイル名を指定します。

ファイルの指定方法は、一つのファイルやディレクトリを除外ファイルとして指定したり、ディレクトリ配下の全てのファイルを構文チェックの対象ファイルから外すように記述が可能です。その他の詳しい記述方法はQiitaの記事が参考になりますのでご覧ください。

Qiita
Git .gitignoreの仕様詳解

eslintを実行

それではESLintを使って構文チェックしてみましょう。まずはpackage.jsonのscriptsにeslintのコマンドを追記しておきましょう。

1
2
3
4
5
6

{
  ...
  "scripts": {
    "eslint": "eslint ."
  },
  ...

これでプロジェクトディレクトリ内でeslintコマンドが使えるようになります。

1
2
3

$ npm run eslint
> eslint .
$

eslint実行後に何も結果が返ってこない場合は、構文チェックが通った事になります。

構文チェックエラーを発生させてみよう

今度は、敢えてエラーが出るコードを追加して、どのような警告が表示されるのか見てみましょう。index.jsに以下のようなコードを追記します。

1
2

let foo = bar
...

改めて、eslintを実行してみます。

1
2
3
4
5
6
7
8

$ npm run eslint
> eslint .

index.js
  1:5   error  'foo' is assigned a value but never used  no-unused-vars
  1:11  error  'bar' is not defined                      no-undef

✖ 2 problems (2 errors, 0 warnings)

上記のように2件のエラーが発生しました。今回追記したコードはESLintデモのコードと同様の内容を書きましたので、デモと同じ警告が発生している事が分かります。

実際のコーディングではエラーが出た箇所を修正していき、警告が出ない状態まで手を加えていく事になります。警告が不要である場合には次の項目のように、ルールを一部カスタマイズしていきます。

ルールをカスタマイズしよう

前述でも触れた通り、ESLintでは構文チェックツールを一部上書きすることが出来ます。今度は、前項で警告表示されたチェックツールを無効にしてみましょう。

eslintの設定ファイルである.eslintrcを以下のように変更します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
    "extends": "eslint:recommended",
    "parserOptions": {
      "ecmaVersion": 6
  },
  "env" : {
    "node" : true ,
    "browser" : true,
    "mocha" : true
  },
  "rules": {
        "no-console": 0,
        "no-unused-vars" : 0 ,
        "no-undef" : 0
  }
}

上記では、rulesオプションでno-unused-varsとno-undefチェックルールを無効にするように、設定を変更しました。ここで、改めてeslintを実行してみましょう。

1
2
3

$ npm run eslint
> eslint .
$

index.jsの記述内容は変更していないのですが、警告表示が表示されなくなりました。

このように、ESLintでは不要と捉えるチェックツールを一部無効にする事ができます。用途に応じてカスタマイズしましょう。

まとめ

という事で、今回はjavascriptやES6における、プログラムの構文(文法)チェックする方法を分かりやすくまとめました。

npmパッケージのeslintを使うと、プログラムがルールで定めた通りに記述されているか否かを機械的に検証することができます。グループ内、チーム内でコード品質を一定ルールで管理したい場合に有効な手段なのでぜひ参考にしてください。

次回の最終回では、GithubにpushしたリポジトリをTravis CIというサービスを使ってjavascriptまたはEcmaScript6(ES6)のコードを継続的インテグレーションする方法をまとめてみたいと思います。

自身のブログ
GithubとTravisCIで継続的インテグレーションする方法を解説します。