ESLint の "no-restricted-imports" ルール：詳細解説

ESLint の no-restricted-imports ルールは、特定のモジュールのインポートを禁止することで、コードベースの整合性と保守性を向上させるのに役立ちます。プロジェクトで使用すべきライブラリやモジュールを標準化したり、廃止されたモジュールの使用を防いだり、セキュリティ上の脆弱性を回避したりするために使用できます。

ルール設定

このルールは、オブジェクトを使用して設定します。オブジェクトのプロパティには、禁止するモジュールの名前と、オプションの警告メッセージを含めることができます。

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "name": "module-name",
        "message": "Please use alternative-module instead."
      },
      {
        "name": "another-module-name",
        "message": "This module is no longer supported."
      }
    ]
  }
}

上記の例では、module-name モジュールのインポートはエラーとなり、alternative-module モジュールの使用を推奨する警告メッセージが表示されます。another-module-name モジュールのインポートもエラーとなり、モジュールがサポートされていないことを示す警告メッセージが表示されます。

オプション

このルールには、いくつかのオプションが用意されています。

patterns: パターンを使用して、モジュールの名前をより柔軟に指定できます。
paths: 特定のディレクトリからのインポートのみを禁止できます。
allowlist: 特定のモジュールのインポートを許可できます。

ユースケース

このルールは、さまざまなユースケースで役立ちます。

ライブラリの標準化: プロジェクト全体で使用するライブラリを標準化し、一貫したコードベースを維持できます。
廃止されたモジュールの使用禁止: 廃止されたモジュールや脆弱性のあるモジュールの使用を防ぎ、コードベースのセキュリティを向上させることができます。
依存関係の整理: 不要なモジュールのインポートを禁止することで、コードベースの依存関係を整理し、保守性を向上させることができます。

注意点

このルールを使用する場合は、誤った禁止設定によって必要なモジュールがインポートできなくなることを避けるために注意が必要です。また、開発者が必要なモジュールをインポートできない場合は、ルールを無効化できるオプションも用意されています。

// 特定のモジュールのインポートを禁止し、代替モジュールを推奨するエラーメッセージを表示する例
{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "name": "module-name",
        "message": "Please use alternative-module instead."
      }
    ]
  }
}

// 廃止されたモジュールのインポートを禁止し、モジュールがサポートされていないことを示す警告メッセージを表示する例
{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "name": "another-module-name",
        "message": "This module is no longer supported."
      }
    ]
  }
}

// パターンを使用して、モジュールの名前をより柔軟に指定する例
{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": [
          "external-module-*", // 外部モジュールのすべてを禁止
          "deprecated/*" // 廃止されたすべてのモジュールを禁止
        ]
      }
    ]
  }
}

// 特定のディレクトリからのインポートのみを禁止する例
{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "node_modules/private-package",
            "message": "Do not import from private packages."
          }
        ]
      }
    ]
  }
}

// 特定のモジュールのインポートを許可する例
{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "name": "jquery",
        "allowlist": ["jquery/slim"] // jQuery Slimのみ許可
      }
    ]
  }
}

追加リソース

[Examples of using the no-restricted-imports rule]([無効なURL を削除しました])

"no-restricted-imports" の代替方法

しかし、状況によっては、no-restricted-imports ルールよりも適切な代替手段が存在する場合があります。以下に、いくつかの代替手段とその利点と欠点をご紹介します。

eslint-plugin-import プラグインの使用

eslint-plugin-import プラグインは、no-restricted-imports ルールよりも多くの機能と柔軟性を提供します。モジュールの名前、パス、相対パス、サイドエフェクト、未使用のインポートなどを基準とした、より詳細なインポート制限を設定できます。

利点:

no-restricted-imports ルールよりもきめ細かい制御が可能
相対インポートや未使用のインポートなどの問題に対処できる
カスタムロジックを使用して、複雑なインポート制限を定義できる

欠点:

eslint-plugin-import プラグインをインストールして設定する必要がある
no-restricted-imports ルールよりも複雑で冗長な設定になる可能性がある

例:

// 特定のディレクトリからのインポートを禁止する
{
  "plugins": ["eslint-plugin-import"],
  "rules": {
    "import/no-restricted-paths": [
      "error",
      "node_modules/private-package"
    ]
  }
}

@typescript-eslint/no-restricted-imports ルール（TypeScript プロジェクトの場合）

TypeScript プロジェクトの場合は、@typescript-eslint/no-restricted-imports ルールを使用できます。このルールは、TypeScript 型情報を使用して、より正確なインポート制限を設定できます。

型情報に基づいてインポートを制限できる
誤ったインポートをより確実に検出できる

TypeScript プロジェクトでのみ使用可能

// 特定の型を持つモジュールのインポートを禁止する
{
  "rules": {
    "@typescript-eslint/no-restricted-imports": [
      "error",
      {
        "name": "module-name",
        "type": "'ILogger'"
      }
    ]
  }
}

カスタム ESLint ルールを作成する

独自の要件を満たすために、カスタム ESLint ルールを作成することもできます。これは、複雑なインポート制限ロジックが必要な場合や、既存のルールではカバーできない要件がある場合に役立ちます。

完全な制御と柔軟性
特定のプロジェクトのニーズに合わせたカスタムロジックを作成できる

ルールの作成と保守が難しい場合がある
ESLint に関する深い知識が必要

// 特定の条件に基づいてインポートを禁止するカスタム ESLint ルール
const isInvalidImport = (path) => {
  // カスタムロジックを使用して、インポートが無効かどうかを判断
  return path.startsWith("deprecated");
};

module.exports = {
  rules: {
    "no-invalid-imports": [
      "error",
      isInvalidImport
    ]
  }
};

コードレビューと静的解析ツールの組み合わせ

no-restricted-imports ルールに代わる方法として、コードレビューと静的解析ツールの組み合わせも考えられます。コードレビューでは、開発者が禁止されているモジュールを意図せずインポートしていないかどうかを確認できます。静的解析ツールは、コードベースをスキャンして、潜在的なインポートの問題を特定するのに役立ちます。

コードの質と一貫性を向上させるのに役立つ包括的なアプローチ
開発者にインポートに関するフィードバックを提供する機会

時間と労力のかかるプロセス
すべての潜在的な問題を検出できない可能性がある