ESLintでJavaScriptのブラウザ依存を構文チェック

フロントエンドを開発していると、複数のブラウザに対応する状況は日常茶飯事です。
普段からフロントエンドを開発していない人にとって、JavaScriptのどの構文がどのブラウザで利用できるかを把握することは、非常に困難です。

そこで、 amilajack/eslint-plugin-compat を利用してJavaScriptのブラウザ依存の構文チェックをする方法を紹介します。

eslint-plugin-compat

eslint-plugin-compat は JavaScript のブラウザ依存を構文チェックするESLintのプラグインです。

対象ブラウザの設定は browserslist/browserslist に準拠して記述します。

インストール

npmを利用してインストールします。

$ npm init -y
$ npm install --save-dev eslint eslint-plugin-compat

使い方

.eslintrcに設定を追記

.eslintrcに eslint-plugin-compat を利用するための設定情報を追記します。

.eslintrc

{
  "env": {
    "browser": true
  },
  "plugins": ["compat"],
  "rules": {
    "compat/compat": "error"
  }
}

対象ブラウザ一覧の設定

package.jsonに構文チェックの対象とするサポートブラウザの一覧を記述していきます。
記述方法の詳細については browserslist/browserslist を参照してください。

今回はChromeの最新2バージョンとIE11を対象ブラウザとします。

package.json

{
  "browserslist": [
    "last 2 Chrome versions",
    "ie 11"
  ]
}

構文チェックを実行

index.js

const result = fetch('google.com')

サンプルコードに対してESLintを実行してみます。

$ npx eslint index.js

/Users/tomohiro/workspace/compat-test/index.js
  1:1  error  fetch is not supported in IE 11  compat/compat

✖ 1 problem (1 error, 0 warnings)

Fetch API がIE11でサポートされていないことを、構文エラーで教えてくれました d(>_< )!!

エディタでリアルタイムに構文チェックする

eslint-plugin-compat はESLintのプラグインなので、エディタにESLintのプラグインを導入すればそのままエディタ上でも確認できるようなります。

例えば Visual Studio Code の場合は、ESLintのプラグイン をインストールするだけでOKです。

さいごに

JavaScriptのブラウザ依存は普段フロントエンド開発しない人からしたら鬼門なので、
CIに組み込んで自動チェックできる仕組みを導入すれば、開発の心理的安全性が向上します。