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

固定リンクがコピーされました

ESLint／@cybozu/eslint-configとは

固定リンクがコピーされました

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

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

ESLintまたは@cybozu/eslint-configのバージョンが古い方は後述の「 @cybozu/eslint-config v25以前からのアップデート」を参考に、アップデートしてください。

GitHub

固定リンクがコピーされました

https://github.com/cybozu/eslint-config

ライセンス

固定リンクがコピーされました

MITライセンス

ドキュメント

固定リンクがコピーされました

https://github.com/cybozu/eslint-config/blob/master/README.md

下準備

固定リンクがコピーされました

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

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

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

Quickstart

固定リンクがコピーされました

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

固定リンクがコピーされました

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

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

mkdir works
作成した作業用ディレクトリに移動します。

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

1
2
3
4


cd works
npm init -y
npm install --save-dev eslint
npm install --save-dev @cybozu/eslint-config

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

npm ls --depth=0 works ├── @cybozu/eslint-config@26.0.0 └── eslint@10.8.0

Step2：設定ファイルの作成

固定リンクがコピーされました

次の内容で、作業用ディレクトリに「eslint.config.mjs」という名前のファイルを作成します。

本記事ではESM形式で記述しています。
.mjs拡張子のファイルは常にESM形式として扱われるため、package.jsonに"type": "module"を追加していないCommonJS環境のプロジェクトでもESM形式で記述できます。

1
2
3
4
5


import kintoneCustomize from '@cybozu/eslint-config/presets/kintone-customize';

export default [
  ...kintoneCustomize,
];

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                            @stylistic/semi
  4:13  warning  Operator '+' must be spaced                  @stylistic/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を確認してください。
ESLint公式サイトのRules

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

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

1

npx eslint sample.js

Step5：コードの自動修正

固定リンクがコピーされました

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

1

npx eslint sample.js --fix

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

1
2
3
4
5
6


npx eslint sample.js --fix

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

✖ 1 problem (1 error, 0 warnings)

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

補足

固定リンクがコピーされました

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

固定リンクがコピーされました

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

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

注意

@cybozu/eslint-config v26でルールセットを見直しました。
プリセットによって、新たなlintエラーが検出されるようになる、または検出されなくなる可能性があります。

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

1
2
3
4
5


import kintoneCustomizeES5 from '@cybozu/eslint-config/presets/kintone-customize-es5';

export default [
  ...kintoneCustomizeES5,
];

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import nodeConfig from '@cybozu/eslint-config/presets/node';
import kintoneGlobals from '@cybozu/eslint-config/globals/kintone';

export default [
  ...nodeConfig,
  {
    languageOptions: {
      globals: kintoneGlobals
    }
  }
];

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

1
2
3
4
5


import baseConfig from '@cybozu/eslint-config/presets/base';

export default [
  ...baseConfig,
];

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

1
2
3
4
5


import nodeConfig from '@cybozu/eslint-config/presets/node';

export default [
  ...nodeConfig,
];

@cybozu/eslint-config v25以前からのアップデート

固定リンクがコピーされました

@cybozu/eslint-config v26は、ESLint v10に対応するため大幅に変更されました。
v25以前も、引き続きこれまで通り対応するESLintのバージョンで利用できます。
ただし、ESLint v10未満のバージョンは2026年8月6日をもってメンテナンスが終了するため、@cybozu/eslint-configをv26へアップデートすることをおすすめします。
アップデートするには、次の対応が必要になります。

設定ファイルをFlat Config形式で記述する。（.eslintrc.*などの旧形式は利用不可）
設定ファイルをESM形式で記述する。
プリセットのインポートパスを書き換える。
Node.jsのバージョンをv22以上にアップデートする。

アップデートする際、まず現状の設定をFlat Config化・ESM化してから、@cybozu/eslint-configのバージョンをv26に上げるのがおすすめです。
現状の設定に応じて、適切なアップデート手順を選んでください。

Flat Config未移行の場合

固定リンクがコピーされました

.eslintrc.*（.eslintrc.js、.eslintrc.json、.eslintrc.ymlなど）で@cybozu/eslint-configを利用している場合の手順です。
まずFlat Config（ESM形式）に移行してから、v26にアップデートします。

作業用ディレクトリでeslint.config.mjsを新規作成し、利用しているプリセットに合わせて次のように記述します。
プリセット名の対応は「他のルールセットを利用する」を参照してください。
1 2 3 4 5

import kintoneCustomize from '@cybozu/eslint-config/presets/kintone-customize'; export default [ ...kintoneCustomize, ];

.eslintrc.*に独自のルールなどを追加していた場合は、eslint.config.mjsの配列に追加します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import kintoneCustomize from '@cybozu/eslint-config/presets/kintone-customize';

export default [
  ...kintoneCustomize,
  {
    rules: {
      'no-console': 'warn',
    },
  },
];

.eslintrc.*を削除します。

パッケージを最新版にアップデートします。

1

npm install --save-dev eslint@latest @cybozu/eslint-config@latest

Flat Config + CommonJSの場合

固定リンクがコピーされました

eslint.config.jsにrequireで@cybozu/eslint-configを読み込んでいる場合は、次の手順でESM形式に書き換えてから、v26にアップデートします。

設定ファイルの拡張子を.jsから.mjsにリネームします。

CommonJSの記述をESMの記述に書き換えます。
合わせて、インポートパスから/flatと末尾の.jsを削除します。

変更前：

1
2
3
4
5


const config = require('@cybozu/eslint-config/flat/presets/kintone-customize.js');

module.exports = [
  ...config,
];

変更後：

1
2
3
4
5


import kintoneCustomize from '@cybozu/eslint-config/presets/kintone-customize';

export default [
  ...kintoneCustomize,
];

パッケージを最新版にアップデートします。

1

npm install --save-dev eslint@latest @cybozu/eslint-config@latest

Flat Config + ESMの場合

固定リンクがコピーされました

すでにESM形式（eslint.config.mjs、またはeslint.config.js + "type": "module"）で@cybozu/eslint-configを利用している場合の手順です。
インポートパスの書き換えとパッケージのアップデートのみで対応できます。

インポートパスから/flatと末尾の.jsを削除します。

変更前：

1

import kintoneCustomize from '@cybozu/eslint-config/flat/presets/kintone-customize.js';

変更後：

1

import kintoneCustomize from '@cybozu/eslint-config/presets/kintone-customize';

パッケージを最新版にアップデートします。

1

npm install --save-dev eslint@latest @cybozu/eslint-config@latest

更新履歴

固定リンクがコピーされました

2018年12月21日
- パッケージ名を「eslint-config-kintone」から「@cybozu/eslint-config」へ変更
2019年8月30日
- 手順をグローバルインストールする方法から、ローカルインストールする方法へ変更
2023年2月1日
- サイボウズ製品のInternet Explorerサポート終了に伴い、ES2015（ES6）以上でkintoneカスタマイズする場合のルールセットに変更
2025年2月4日
- ESLintバージョン9以降の設定ファイル記述方法へ変更
2026年7月27日
- @cybozu/eslint-config v26以降の設定手順へ更新
- 「@cybozu/eslint-config v25以前からのアップデート方法」を追加

kintone API

SDK & Tools