javascriptで構文をチェックする方法を解説します。ESLintの簡単な使い方|おちゃカメラ。

本日限定

Amazonタイムセール開催中

セール商品を見に行く

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

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

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

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

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

ESLintで何ができるのか？
- JSやES6の構文チェック
- チェックツールの定義と流用が可能
  - ルールに迷ったらまずはeslint-recommended
javascriptで用いるモジュールをおさらい
npmパッケージeslintのインストール
ESLintを使って構文チェック
まとめ

ESLintで何ができるのか？

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

JSやES6の構文チェック

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

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

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

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

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

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

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

日本語で一部が翻訳された解説記事もありますので、以下もご覧になると分かりやすいと思います。

Qiita
ESLintのエラールール。日本語ざっくり解説[スタイル編]
大まかなルールの日本語解説です。コード例もとても分かりやすいです。

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

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

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

有名どころは、

eslint-config-google
eslint-config-standard
eslint-config-airbnb

といったチェックツールがあるようです。上記のルールの比較がされている記事がありますのでそちらもご覧ください。

Qiita
eslintの各configの違い
eslintのeslint:recommendedとgoogleとairbnbとstandardの違いを各チェックルール毎に比較されています

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

ルールに迷ったらまずは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インストールしましょう。

サンプルコード

サンプルコードはgithubにアップしていますので、そちらをご覧ください。

https://github.com/tea3/js-test-practice

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

bash

$ 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

save-devオプションって何？

npm installコマンドの--save-devオプションは、開発で使うパッケージという意味合いを示すために指定しています。本体のプログラムでは使用せず、テストなど本体のプログラムで使わないパッケージがあれば、このオプションを指定してインストールしましょう。

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

node.jsやコマンドラインについて

node.jsの環境を用意する方法やコマンドラインの使い方については以下を併せてご覧ください。

ESLintを使って構文チェック

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

設定ファイル.eslintrcを作る

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

.eslintrc

{
    "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ファイルを作成し以下のように記述しましょう。

.eslintignore

node_modules/
coverage/
tmp/
web/

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

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

Qiita
Git .gitignoreの仕様詳解

eslintを実行

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

package.json

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

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

bash

1
2
3

$ npm run eslint
> eslint .
$

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

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

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

index.js

1 2	let foo = bar ...

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

bash

$ 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では構文チェックツールを一部上書きすることが出来ます。今度は、前項で警告表示されたチェックツールを無効にしてみましょう。チェックツールを無効にするにはrulesのオブジェクト名に0を指定します。

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

.eslintrc

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