ESLint（JavaScript コードチェッカー）

はじめに

JavaScriptのコードチェッカーとして、2016年5月よりご愛用いただいたjswatchdogに代わり、
2018年4月以降は、保守の観点からESLintを推奨します。

また、ESLintの設定として、kintoneのカスタマイズ開発向けのeslint-config-kintoneを推奨します。

この記事では、初心者の方向けに、ESLintのセットアップ手順をご説明します。

ESLintとは

eslint-config-kintoneとは

eslint-config-kintoneは、kintoneの開発担当が作った、kintone開発のためのESLintのルールセットです。

eslint-config-kintoneの特徴として次のものがあります。

• kintone開発の際に、コードの品質を保つことができます。（jswatchdogと同様です。）
• ESLintは元々コマンドラインツールですが、対応エディタに拡張としてインストールして使うこともできます。
  その場合、コーディングしながらリアルタイムでチェックすることが可能です。
• コマンドライン上で実行するときは、自動修正機能もあります。

コードはGitHub上に公開されています。

対応エディタ

Sublime TextやAtomなどメジャーなエディタに対応しています。今回はVisual Studio Codeで説明します。 対応エディタはESLint公式サイトをご確認ください。

ESLintのセットアップ（Windows）

事前準備

ESLintを実行するには、Node.js とnpm を扱える環境が必要です。

1. Node.js公式サイトからダウンロードします。公式サイトはこちら。
2. 「DOWNLOADS」タブをクリックし、ご自身のパソコンに合わせたインストーラーをダウンロードします。

   

3. インストールを実行します。

   「Next」をクリックします。

   

   ライセンス規約を確認したら、「I accept the terms in ihe Licence Agreement」にチェックを入れて「Next」をクリックします。

   

   Node.jsのインストール先フォルダを選択し、「Next」をクリックします。（デフォルトでOKです。）

   

    インストールするコンポーネントを選択し、「Next」をクリックします。（デフォルトでOKです。）

   

    「Install」をクリックすると、インストールが開始されます。

   

    

   

   インストールが終了したら、「Finish」をクリックします。

   

   これでNode.jsとnpmがインストールされました。

インストール

1. コマンドプロンプトで「node -v」でNode.jsのバージョンを確認します。バージョンが4.0.0以下の場合はアップデートしてください。

   

2. 「npm install -g eslint」でESLintをインストールします。コマンドを実行するとインストールが開始します。

   

   インストールが終了すると以下のように出力されます。
   

   

3. 「npm install -g eslint-config-kintone」で eslint-config-kintoneをインストールします。
   

   

4. 「npm ls -g --depth=0」で、ESLintとeslint-config-kintoneが親子関係でインストールされていることを確認します。
   

   

5. 「.eslintrc.js」ファイルを新規作成し、以下の3行を書き込みます。※ファイル名の先頭に「.」を付けてください。
   

   module.exports = {
       "extends": "eslint-config-kintone"
   }; 

6. チェックしたいソースコードを置いているフォルダの親階層に「.eslintrc.js」ファイルを置きます。
   

   
   ※どのフォルダでも同じ設定で実行したい場合は、「C:\Users\ユーザー名」フォルダ等に置いておくと便利です。

コマンドラインでの実行

「eslint ファイル名」または「eslint フォルダ名」で、ESLintを実行します。

例：「test.js」というファイルに対して実行する場合

▼「test.js」のサンプルコード

※ESLintが実行できているかどうか確認するため、エラーが出るような内容になっています。

実行結果

実行すると、画像のようにエラー内容が表示されます。

サンプルコードの場合は、

• セミコロンがありません。
• 演算子の前後はスペースが必要です。
• 'result'という値が使用されていません。

とエラーが表示されています。

※エラーのないファイルに対して実行するとメッセージは何も表示されません。

エラー内容の詳細については、ESLint公式サイトのRulesを参照してください。

エディタへの適用

エディタへの適用方法をご紹介します。

Visual Studio Code(Windows)

WindowsでのVisual Studio Code（以下VSCode）への適用手順をご紹介します。

•  VSCodeを立ち上げて、「拡張機能」をクリックします。
  

  

• 「ESLint」を検索し、「インストール」をクリックします。
  

  

  インストールが終了したらVSCodeを再起動します。拡張機能はVSCodeを再起動することで有効になります。

実行結果

エラーがあれば入力と同時に検証され、問題がある部分に赤の波線が表示されます。

エラーの詳細内容が「問題」タブに表示されます。

ESLintに慣れてきた人向けの情報については、ESLintをもっと使いこなすために に進んでください。

ESLintのセットアップ（Mac）

事前準備

ESLintを実行するには、Node.js とnpm を扱える環境が必要です。

1. Node.js公式サイトからダウンロードします。公式サイトはこちら。
2. 「DOWNLOADS」タブをクリックし、ご自身のパソコンに合わせたインストーラーをダウンロードします。
   
3. インストーラーをダブルクリックし、インストールを実行します。

   「続ける」をクリックします。
   

使用許諾契約で「続ける」をクリックします。

使用許諾契約を読み、「同意する」をクリックします。

インストール先を選択し、「続ける」をクリックします。

インストールの種類で「インストール」をクリックします。

インストールが終了したら、「閉じる」をクリックします。

これでNode.jsとnpmがインストールされました。

インストール

1. ターミナルで「node -v」でNode.jsのバージョンを確認します。バージョンが4.0.0以下の場合はアップデートしてください。

   $ node -v
   v8.9.4
   

2. Macでグローバルインストールする場合、権限エラーが出やすくなります。それを回避するために、
   以下の手順で、別の新規ディレクトリを作成してそちらにインストールするよう設定します。
   
   2-1.「mkdir」で「.npm-global」というディレクトリを作ります。
   

   $ mkdir ~/.npm-global

   2-2.「npm config set prefix」で、作成したディレクトリにインストールされる設定をします。

   $ npm config set prefix

   2-3.「vi ~/.profile」で「~/.profile」ファイルを新規作成または開きます。※ファイル名の先頭に「.」を付けてください。
   

   $ vi ~/.profile

   2-4.「~/.profile」ファイルに以下の1行を書き込みます。※「export PATH」で、システム環境変数を更新しています。

   export PATH=~/.npm-global/bin:$PATH

   （参考）ターミナルのviエディタの操作の一例です。
     2-4-1.「a」でviの入力モードに変更
     2-4-2.  上記の1行を書き込み
     2-4-3. escキーでviのコマンドモードに変更
     2-4-4.「:wq」で保存して終了
   
   2-5.「source ~/.profile」で、システム環境変数の更新を反映します。

   $ source ~/.profile

3. 「npm install -g eslint」でESLintをインストールします。コマンドを実行するとインストールが開始します。

   $ npm install -g eslint

   インストールが終了すると以下のように出力されます。
   

   

4. 「npm install -g eslint-config-kintone」で eslint-config-kintoneをインストールします。
   

   $ npm install -g eslint-config-kintone

5. 「npm ls -g --depth=0」で、ESLintとeslint-config-kintoneが親子関係でインストールされていることを確認します。
   

   $ npm ls -g --depth=0
   （ホームディレクトリ）/.npm-global/lib
   ├── eslint@4.19.0
   └── eslint-config-kintone@1.2.0
   

6. 「vi .eslintrc.js」で「.eslintrc.js」ファイルを新規作成します。※ファイル名の先頭に「.」を付けてください。
   

   $ vi .eslintrc.js

7. 「~/.eslintrc.js」ファイルに以下の3行を書き込みます。
   

   module.exports = {
       "extends": "eslint-config-kintone"
   }; 

   （参考）ターミナルのviエディタの操作の一例です。
     7-1.「a」でviの入力モードに変更
     7-2.  上記の3行を書き込み
     7-3.  escキーでviのコマンドモードに変更
     7-4.「:wq」で保存して終了

コマンドラインでの実行

Windowsのコマンドラインでの実行手順と同様です。

エディタへの適用

Windowsのエディタへの適用手順と同様です。

ESLintをもっと使いこなすために

ESLintに慣れてきた方向けに、もう一歩進んだ使い方をご紹介します。

自動修正機能の使用

コマンドラインでの実行で「--fix」オプションをつけると、自動的にコードを修正しファイルが更新されます。
※エラーの種類によっては、自動で修正できないものもあります。

ルール設定の変更

特定のルールを除外したいなど、ルールの設定を変更したい場合は、.eslintrcのファイルを編集します。

• 例1: Garoonカスタマイズ開発で使う時に、garoonのオブジェクトエラーを除外したい場合
  　　「globals」のキーを追加し、「garoon」を「true」にします。
• 例2: 特定のルールを除外したい場合
  　　「rules」のキーを追加し、除外したい設定の値を「off」にします。

以下は、例1と例2の内容を反映した.eslintrcのサンプルです。

参考サイト

• ESLint: 
  • User guide > Integrations
  • User guide > Getting Started with ESLint
  • User guide > Rules
• npm: Getting started > 03 - How to prevent permissions errors　※Mac固有の内容　

Topに戻る