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

ESLint／@cybozu/eslint-config とは

ESLint は、2013 年に Nicholas C. Zakas 氏がオープンソースプロジェクトとして公開した JavaScript の構文チェックツールです。
ESLint は、柔軟なルールの設定が可能で、多くのルールセットが公開されています。
サイボウズでも、「@cybozu/eslint-config」という名前の ESLint のルールセットを公開しています。

この記事では、ESLint と @cybozu/eslint-config のセットアップ方法と、kintone の JavaScript ファイルにチェックをかける方法を説明します。

下準備

ESLint を実行するには、Node.js とパッケージ管理ツールの npm が必要です。
Node.js をインストールすると、npm は自動でインストールされます。

Node.js 公式サイトからインストーラーをダウンロードします。
必要な Node.js のバージョンは、 package.json の engines プロパティを確認してください。
たとえば次の記載の場合、Node.js のバージョン 14 以上が必要です。
1 2 3

"engines": { "node": ">=14" },
ダウンロードしたインストーラーを実行し、画面にしたがってセットアップします。

Quickstart

Step1：必要なパッケージのインストール

ESLint と@cybozu/eslint-config をインストールします。

作業用ディレクトリーを作成します。ここでは、例として「works」というディレクトリー名にします。
1

mkdir works
作成した作業用ディレクトリーに移動します。
ESLint と @cybozu/eslint-config をインストールします。
1 2 3

cd works npm init -y npm install --save-dev eslint @cybozu/eslint-config
TypeScript と Prettier をインストールする旨の警告が表示されます。
この Quickstart のサンプルでは、TypeScript や Prettier を使用しないため、警告を無視します。
TypeScript や Prettier が必要な場合は、適宜インストールしてください。
1 2 3 4

# TypeScript をインストールする npm install --save-dev typescript # Prettier をインストールする npm install --save-dev prettier
ESLint と @cybozu/eslint-config がインストールされていることを確認します。
@ 以降の数字は、インストールした ESLint や @cybozu/eslint-config のバージョン番号です。
1 2 3 4

npm ls --depth=0 works ├── @cybozu/eslint-config@17.0.0 └── eslint@8.9.0

Step2：設定ファイルの作成

次の内容で、作業用ディレクトリーに「.eslintrc.js」という名前のファイルを作成します。
ファイル名の先頭には「.」が必要です。

1
2
3
4
5
6


module.exports = {
  extends: [
    '@cybozu',
    '@cybozu/eslint-config/globals/kintone'
  ]
};

Step3：チェック対象のファイルを作成

ESLint でチェックしたい JavaScript ファイルを準備します。
ここでは、例として次の内容の JavaScript ファイル「sample.js」を作成します。
この JavaScript ファイルは、ESLint を適用すると、エラーとなる内容になっています。

1
2
3
4
5
6
7


(() => {
  'use strict'
  const func = (a, b) => {
    return a+ b;
  };
  const result = func(1, 3);
})();

Step4：ESLintの実行

ESLint を実行します。

1

npx eslint sample.js

実行すると、次のようなメッセージが表示されます。

1
2
3
4
5
6
7
8
9


npx eslint sample.js

/Users/test/work/sample.js
  2:15  warning  Missing semicolon                            semi
  4:13  warning  Operator '+' must be spaced                  space-infix-ops
  6:9   error    'result' is assigned a value but never used  no-unused-vars

✖ 3 problems (1 error, 2 warnings)
  0 errors and 2 warnings potentially fixable with the `--fix` option.

この場合、「sample.js」に次のエラーを含むことがわかります。

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

エラーが表示された場合、エラーのレベル（error／warning）に応じて、JavaScript ファイルを修正します。
エラー内容の詳細は、 ESLint 公式サイトの Rules を確認してください。

error：必ず修正してください。JavaScript が動かなかったり、意図しない動作をすることがあります。
warning：修正するほうが望ましいですが、必須ではありません。

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

1

npx eslint sample.js

Step5：コードの自動修正

エラーによっては、自動修正できるエラーもあります。
エラーを自動修正する場合には、--fix オプションを付けて実行します。

1

npx eslint sample.js --fix

コマンドを実行すると、JavaScript ファイルが修正されます。
自動修正できなかったエラーが残っていれば、修正できなかったエラーの内容が表示されます。

1
2
3
4


npx eslint sample.js --fix

/Users/test/work/sample.js
  6:9  error  'result' is assigned a value but never used  no-unused-vars

自動修正できないエラーは、エラーの内容に応じて自分で修正します。

補足

他のルールセットを利用する

Quickstart では、ES2015（ES6）以上で kintone のカスタマイズ開発をする方向けのルールセットを利用していました。
@cybozu/eslint-config には、その他のシーンでも活用できるルールが用意されています。必要に応じて、「.eslintrc.js」を書き換えてください。

ここでは、代表的なパターンをいくつか紹介します。
すべてのルールは、GitHub の README を参照してください。

ES5 で kintone のカスタマイズ開発をする場合

1
2
3


module.exports = {
  extends: '@cybozu/eslint-config/presets/kintone-customize-es5'
};

Node.js で kintone のカスタマイズ開発をする場合

1
2
3
4
5
6


module.exports = {
  extends: [
    '@cybozu/eslint-config/presets/node',
    '@cybozu/eslint-config/globals/kintone'
  ]
};

ES2015（ES6）以上での一般的なコーディング

1
2
3


module.exports = {
  extends: '@cybozu'
};

Node.js での一般的なコーディング

1
2
3
4
5


module.exports = {
  extends: [
    '@cybozu/eslint-config/presets/node'
  ]
};

更新履歴

2018 年 12 月 21 日
- パッケージ名を「eslint-config-kintone」から「@cybozu/eslint-config」へ変更
2019 年 8 月 30 日
- 手順をグローバルインストールする方法から、ローカルインストールする方法へ変更
2023 年 2 月 1 日
- サイボウズ製品の Internet Explorer サポート終了に伴い、ES2015（ES6）以上で kintone カスタマイズする場合のルールセットに変更

SDK & Tools