WEB開発でJavaScript(ECMAScript)バージョンの混在をチェックする方法

2020/10/27 2022/6/20 HTML/CSS/JavaScript/TypeScript, Tips, VSCode, ツール, プログラミング

この記事は公開から4年以上経過しています。

ChromeやEdgeなどのモダンブラウザを利用したWEB開発でレガシーブラウザへの対応も必要なとき、ES5/ES6といったブラウザバージョンに依存するJavaScript(ECMAScript)バージョンが混在していないかをチェックする方法。

VSCode Macros拡張のマクロを使い自作する方法もあります。興味があれば是非こちらの記事もご参照ください。

予めNode.jsが導入されている必要があります。

手順

npmでes-checkをインストール
【ローカルインストールしたいとき】
```
npm i es-check --save-dev
```
【グローバルインストールしたいとき】
```
npm i es-check -g
```
ECMAScriptバージョンとファイル名を指定してes-checkコマンド実行
【npm5.2以降、または手動でnpxを導入済のとき】
```
npx es-check ECMASCriptバージョン 'チェックしたいファイル名(ワイルドカード指定可)'
```
【npxが未導入のとき】
```
./node_modules/.bin/es-check ECMASCriptバージョン 'チェックしたいファイル名(ワイルドカード指定可)'
```
実行時パラメータ中のECMASCriptバージョンには、チェック対象のスクリプトのECMAScriptバージョンを
```
es3 es4 es5 es6/es2015 es7/es2016 es8/es2017 es9/es2018 es10/es2019
```
から選択して指定します。詳細についてはes-checkのヘルプまたはWEBサイトでご確認ください。

実行結果

通常の関数とES6以降で利用可能なアロー関数だけ記載したテストソースコードに対してES5/ES6でチェックを行った結果は以下のとおりです。

【テストコード(test.js)】

// 通常の関数
function normalFunc()
{
}

// アロー関数(ES6〜)
var lambdaFunc = () =>
{
}

【ES6を指定してes-checkを実行した結果】

$ npx es-check es6 /var/tmp/test.js
ES-Check: there were no ES version matching errors!  🎉

【ES5を指定してes-checkを実行した結果】

$ npx es-check es5 /var/tmp/test.js
ES-Check: there were 1 ES version matching errors.

          ES-Check Error:
          ----
          · erroring file: /var/tmp/test.js
          · error: SyntaxError: Unexpected token (7:18)
          · see the printed err.stack below for context
          ----

          SyntaxError: Unexpected token (7:18)
                     ・
                     ・
                     ・

ES6はエラーなし、ES5では7行目のアロー演算子部分でESバージョンの不一致エラーが検出されました。

参考ウェブサイトなど

npm
ES Check

以上です。