この記事を書いてる人: 
tea

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

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

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

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

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

develop or drink ?
 develop or drink ?  photo by tea ©
Ads

目次

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の違いを各チェックルール毎に比較されています

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

Ads

ルールに迷ったらまずは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にアップしていますので、そちらをご覧ください。

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

bash
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
 save-devオプションって何?

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

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

ESLintを使って構文チェック

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

設定ファイル.eslintrcを作る

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

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

.eslintignore
1
2
3
4
node_modules/
coverage/
tmp/
web/

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

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

Qiita
Git .gitignoreの仕様詳解

eslintを実行

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

package.json
1
2
3
4
5
6
{
...
"scripts": {
"eslint": "eslint ."
},
...

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

bash
1
2
3
$ npm run eslint
> eslint .
$

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

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

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

index.js
1
2
let foo = bar
...

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

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

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

.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-varsno-undefチェックルールを無効にするように設定を変更しました。ここで、改めてeslintを実行してみましょう。

bash
1
2
3
$ npm run eslint
> eslint .
$

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

このように、ESLintでは不要と捉えるチェックツールを一部無効にする事ができます。実際にチェックする際には、各チェックルールを少しづつ有効にしながらコードの修正を行っていくと良さそうです。用途に応じてカスタマイズしましょう。

自動修正を行う

eslintは設定ファイルの.eslintrcで指定した各チェックルールに基いて、コードを自動修正する機能があります。自動修正を行う場合は--fixオプションを追記してeslintを呼び出します。

例えば、下記はtest/test.jsを自動修正するコマンドです。

bash
1
$ eslint --fix test/test.js

全てのファイルを修正したい時には下記のようなコマンドを呼び出します。

bash
1
$ eslint --fix .

その他の使い方は以下の記事が参考になります。

Qiita
ESLintで特定ルールの警告だけ修正する
–fixオプションによるeslintの自動修正機能を解説している

まとめ

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

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

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

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

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

javascriptで構文をチェックする方法を解説します。ESLintの簡単な使い方 - TPB
https://photo-tea.com/p/17/javascript-test-how-to-4/

 おすすめ記事
Ads
 作例掲載