クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > 開発環境 > 【JS】ESLintで構文チェックを事始める

【JS】ESLintで構文チェックを事始める

開発環境 JS ESLint デバッグ

以前、フロントエンドの開発環境についていろいろ調べた記事を書きました。その後、Gulp、Babel、Webpackのフロント開発三兄弟を体験しました。今回はESLintを使った構文チェックをやってTRY！それではいきませう。

【目次】

※参考：フロントエンドのモダンな開発環境を作るために調べていること（追記あり） - クモのようにコツコツと

Web開発環境まとめ
qiita.com

そもそもLintとは何か

「ナントカLint」みたいなツール名はよく見かけるけどそもそもLintって何だろう？翻訳すると「糸くず」という意味のようだ。

Wikipediaによると

lint とは、主にC言語のソースコードに対し、コンパイラよりも詳細かつ厳密なチェックを行うプログラムである。静的解析ツールとも呼ばれる。

コンパイラではチェックされないが、バグの原因になるような曖昧な記述についても警告される。構文（シンタックス）レベルのチェックだけでなく、意味（セマンティクス）レベルのチェックまで実行するものもある。

※参考：lint - Wikipedia

ふむ、C言語などのコンパイルしてくれる言語はその時点で構文チェックが行われるが、Lintはさらにチェックに特化したツールのようだ。

フロントエンドの場合、JSはコンパイル不要のスクリプト言語なので、ブラウザのデベロッパーツールよりもチェックに特化したツール、という理解でいいかな。

Lint導入せずにデベロッパーツールで凌いでいた時代

で、フロントエンドのLintツールだけども、自分がコーディングを始めた5年前には確か「JSLint」というのが有名だったように思う。当時の自分は黒い画面アレルギーで導入にハードルを感じていた。

そのため「構文チェック？デベロッパーツールでエラーが分かるから使わなくてええやん」みたいな認識だったw

エラーコードをググッたりalert()やconsole.log()で挙動を調べて凌いでいた。

※参考：Chromeデベロッパーツール事始め！HTML、CSS、JSを直感的に修正しよう - クモのようにコツコツと

デベロッパーツールについてはブレイクポイントとかを使った細かい検証もしたい。（また記事を改めて書きます）

※参考：ChromeのデベロッパーツールでJSをデバッグする方法(2019年版) - ICS MEDIA

構文チェック、今はESLintが定番のようだ

JSLint、JSHint、ESLintなどいろんなツールがあるようだが、今はESLint一択に落ち着いているようだ。

※参考：jshint, jslint, eslint では今のところ eslint 一択が良さそう | site-hhs

※参考：ESLintについて - Qiita

Googleトレンドで見ても差は歴然。

という事で、これから構文チェックを始めるならESLint！時が来た！それだけだ。

ESLintのインストール

ESLintの導入方法について色々調べたがこちらの記事が初級者にとって分かりやすそうだったので参考にさせていただいた。

※参考：JavaScriptで開発をしているならESLintは使った方がいい - Fact of Life

まず、Node.jsとnpmは既に入っている前提（ターミナルで下記を叩くとバージョン番号が出る）

node -v
npm -v

ESLintを入れるフォルダを作る。今回は「eslint_test」とした。

cdコマンドでeslint_testフォルダに移動。

cd （フォルダのパス）/eslint_test

package.jsonの作成（参考記事にはないが必要な工程だった）

npm init -y

ローカルにESLintをインストールする。

npm install -D eslint

package.jsonにESlintの記述がでた。

  "devDependencies": {
    "eslint": "^6.8.0"
  }

ESLintの設定ファイルを作成

設定ファイルを作るコマンド（参考記事にはないがnpxを付けた）

npx eslint --init

npxはグローバルインストールせずにパッケージを実行できる便利なコマンド。

※参考：知らないのは損！npmに同梱されているnpxがすごい便利なコマンドだった | Developers.IO

なんか質問が始まる。

? How would you like to use ESLint? (Use arrow keys)
  To check syntax only 
❯ To check syntax and find problems 
  To check syntax, find problems, and enforce code style

？ ESLintをどのように使用しますか？ （矢印キーを使用）
   構文のみをチェックするには
syntax構文を確認して問題を見つけるには
   構文を確認し、問題を見つけ、コードスタイルを適用するには

? What type of modules does your project use? (Use arrow keys)
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these

？ プロジェクトではどのタイプのモジュールを使用していますか？ （矢印キーを使用）
❯JavaScriptモジュール（インポート/エクスポート）
   CommonJS（必須/エクスポート）
   どれでもない

あ、モジュール使わないのに選んじゃった。まあいいかな。使うかもしれん。

? Which framework does your project use? (Use arrow keys)
  React 
  Vue.js 
❯   None of these

？ プロジェクトではどのフレームワークを使用していますか？ （矢印キーを使用）
反応
   Vue.js
❯   どれでもない

フレームワークは使わないので「どれでもない」に。

? Does your project use TypeScript? (y/N)

TypeScript、これはNoだな。

? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to 
invert selection)
❯◉ Browser
 ◯ Node

？ コードはどこで実行されますか？ （<space>を押して選択し、<a>を押してすべてを切り替え、<i>を押して 選択を反転）
❯◉ブラウザ
  ◯ノード

ブラウザかな。

? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript 
  YAML 
  JSON

？ 構成ファイルをどの形式にしたいですか？ （矢印キーを使用）
❯JavaScript
   YAML
   JSON

JSだな。

Successfully created .eslintrc.js file in /（ファイルのパス）/eslint_test

お、成功した。

ESLintの設定ファイルは.eslintrc.jsという隠しファイルになっているので、ファインダーで表示されるようにしませう。

※参考：Macのショートカットキー - 不可視ファイルの表示/非表示を切り替える - PC設定のカルマ

開いてみるとESLintの設定が書かれている。

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
};

ただし、一番下のrulesはまだ空っぽだな。

ESLintの構文チェック実行

テストファイルを作ってみる。test.jsという名前にて。

alert("こんにちは、いぃえすりんと。');

分かりやすい誤記として、文字列を囲うクオーテーションをダブルとシングル混在にしてみる。

eslintコマンドの後ろにJSのファイル名を書けば実行される。（頭にnpxを付ける）

npx eslint ファイル名

それでは初めての構文チェック、実行！

npx eslint test.js

結果

/（ファイルのパス）/eslint_test/test.js
  1:7  error  Parsing error: Unterminated string constant

✖ 1 problem (1 error, 0 warnings)

   1：7エラー解析エラー：終了していない文字列定数
✖1つの問題（1つのエラー、0つの警告）

1：7とは1行目の7文字目という意味のはず。文字列が終了して（閉じられて）ないよ、と。

修正して再実行

それでは、これを修正してみようぞホトトギス！

alert("こんにちは、いぃえすりんと。");

再実行！どうだ？

npx eslint test.js

お、今度は何も起こらない。何も起こらないのは何も問題がない（便りが無いのは良い便り）ということのようだ！

もう一つ実験。alert()をわざとタイプミスしてみる。alart()w

alart("こんにちは、いぃえすりんと。");

実行！

npx eslint test.js

お、チェックに引っかかった。

/（ファイルのパス）/ir_fdpc/eslint_test/test.js
  1:1  error  'alart' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)

1：1エラー 'alart'は定義されていませんno-undef
✖1つの問題（1つのエラー、0つの警告）

1：1は1行目の1文字目ということね。定義されていない。そんな関数は無いよ！と。

ルールを自分で細かく追加できる

設定ファイル.eslintrc.jsの中のrulesキーには自分で細かく設定が追加できるようだ。

{
  "rules": {
    "ルール名": "ルール設定"
  }
}

※参考：Step by Stepで始めるESLint - Qiita

公式サイトにはルール一覧がある。すごい数！

※参考：List of available rules - ESLint - Pluggable JavaScript linter

冒頭にこんな文章が

No rules are enabled by default. The "extends": "eslint:recommended" property in a configuration file enables rules that report common problems, which have a check mark below.

デフォルトではルールは有効になっていません。 構成ファイルの「extends」：「eslint：recommended」プロパティを使用すると、一般的な問題を報告するルールを有効にできます。このルールには、以下のチェックマークが付いています。

なるほど"extends": "eslint:recommended"があったおかげでルールがなくても先ほどの構文チェックは動いたわけだ。

最後に

という事でESLintを事始めました。ブラウザのデベロッパーツールで調べるのもいいけど、コードを書いた瞬間にチェックしてもらえると時短になりますな。今はまだ手動でチェックしてるけど、自動チェックにもトライしたい。あと、ルールももっと細かく知りたい。

フロントエンド開発環境シリーズ、次回は「コードフォーマッター」のprettierにトライしてみる。イメージとしてはデベロッパーツールの「Sources」にある「Format」（{ }のアイコン）見たいのかなと思っている。

そしてその次はフロントエンドでのテスト駆動開発のツールJest（JSのテストって意味だと思われる）もやってみる予定。それではまた！

Web開発環境まとめ
qiita.com