JavaScript/TypeScript 引用符のESLint設定：エラー例と具体的な対策

2025-05-31

具体的には、以下のような設定が可能です。

配列での指定
より詳細な設定も可能です。例えば、最初の要素で基本的な引用符の種類を指定し、第二の要素で特定の状況下でのみ許可する引用符の種類を指定できます。
- ['single', { avoidEscape: true }]: 基本はシングルクォートを使用し、エスケープが必要な場合はダブルクォートを許可します。
- ['double', { allowTemplateLiterals: true }]: 基本はダブルクォートを使用し、テンプレートリテラル（バッククォート）の使用を許可します。
"avoid-escape"
文字列内でエスケープが必要な文字（例：'の中に'を使う場合）がない限り、シングルクォートまたはダブルクォートの使用を許可します。どちらの引用符を使うかは一貫している必要があります。
"backtick"
テンプレートリテラル（バッククォートで囲まれた文字列）の使用を強制します。これは、変数や式を埋め込む際に便利です。
```
const name = '太郎';
const greeting = `こんにちは、${name}さん！`;
```
"double"
文字列リテラルには常にダブルクォートを使用することを強制します。
```
const message = "World";
```
"single"
文字列リテラルには常にシングルクォートを使用することを強制します。
```
const message = 'Hello';
```

このルールを設定する主な目的は以下の通りです。

チーム開発の効率化
チームメンバー間でコーディングスタイルを統一することで、コードレビューやマージ作業をスムーズに進めることができます。
潜在的なエラーの防止
異なる引用符の使用が混在すると、予期せぬエラーを引き起こす可能性があります。一貫性を保つことで、このようなリスクを軽減できます。
コードの一貫性
プロジェクト全体で引用符の種類を統一することで、コードの可読性を向上させ、見た目を整えます。

ESLintの設定ファイル（通常は.eslintrc.jsや.eslintrc.jsonなど）のrulesセクションで、quotesルールとそのオプションを設定します。

例（.eslintrc.js）：

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'quotes': ['single'], // シングルクォートを強制
    // 他のルール...
  },
};

一般的なエラーメッセージ

Unexpected string literal; use backticks instead. (quotes: [..., { allowTemplateLiterals: true }]) の場合
- 意味
  予期しない文字列リテラルです。テンプレートリテラル（バッククォート）を使用してください。
- 発生するコード例
```
const name = '太郎';
const greeting = 'こんにちは、' + name + 'さん！';
```
- 対処法
  文字列をテンプレートリテラル（バッククォート）に書き換えます。
```
const name = '太郎';
const greeting = `こんにちは、${name}さん！`;
```
Unexpected string literal. (quotes: ['single', { avoidEscape: true }]) の場合
- 意味
  予期しない文字列リテラルです。エスケープが必要ない場合は、設定された基本の引用符（この例ではシングルクォート）を使用する必要があります。
- 発生するコード例
```
const path = "C:\\Users\\..."; // バックスラッシュのエスケープは不要
```
- 対処法
  基本の引用符（シングルクォート）に修正します。
```
const path = 'C:\\Users\\...';
```
  もしダブルクォートが必要な理由（例えば、文字列内にシングルクォートが多く含まれるなど）がある場合は、設定を見直すか、ESLintのコメントディレクティブ (// eslint-disable-next-line quotes) を使用して特定行のエラーを無視することも検討できます。
Strings must use backtick. (quotes: 'backtick') の場合
- 意味
  文字列はバッククォート (`) を使用しなければなりません。
- 発生するコード例
```
const message = 'ESLint';
```
- 対処法
  シングルクォートまたはダブルクォートで囲まれた文字列をバッククォートに修正します。
```
const message = `ESLint`;
```
  ただし、この設定は主にテンプレートリテラルを強制する場合に使われます。
Strings must use doublequote. (quotes: 'double') の場合
- 意味
  文字列はダブルクォート (") を使用しなければなりません。
- 発生するコード例
```
const message = 'World';
```
- 対処法
  シングルクォート (') で囲まれた文字列をダブルクォートに修正します。
```
const message = "World";
```
- 意味
  文字列はシングルクォート (') を使用しなければなりません。
- 発生するコード例
```
const message = "Hello";
```
- 対処法
  ダブルクォート (") で囲まれた文字列をシングルクォートに修正します。
```
const message = 'Hello';
```

一般的なトラブルシューティング

ESLintの設定ファイルの確認
- まず、プロジェクトのルートディレクトリにある.eslintrc.js、.eslintrc.json、またはpackage.json内のeslintConfigセクションを確認し、rulesの中にquotesの設定がどのように記述されているかを確認します。
- 設定が意図したものになっているか、スペルミスがないかなどを確認してください。
エディタのESLint連携の確認
- 使用しているテキストエディタやIDEにESLintのプラグインが正しくインストールされ、有効になっているかを確認します。
- プラグインの設定によっては、保存時に自動で修正する機能がある場合もあります。
コマンドラインでのESLintの実行
- ターミナルで npx eslint . (または npm run lint など、プロジェクトの設定に応じたコマンド) を実行し、コマンドライン上でESLintのエラーを確認します。エディタの表示と異なる場合は、エディタの設定に問題がある可能性があります。
特定の行のエラー無視
- どうしても特定の行でルールに違反する必要がある場合は、ESLintのコメントディレクティブを使用してその行のエラーを無視できます。
  - // eslint-disable-next-line quotes (次の行のみを無視)
  - /* eslint-disable quotes */ (ファイル全体を無視 - 推奨されません)
  - /* eslint-enable quotes */ (特定のブロック内でのみ無視)
- ただし、安易な無視はコードの一貫性を損なう可能性があるため、慎重に使用してください。
設定の継承と上書き
- extendsオプションを使用している場合、継承元の設定がquotesルールに影響を与えている可能性があります。自身の設定で意図した挙動にならない場合は、継承元の設定を確認するか、自身の設定で明示的に上書きする必要があります。
設定の競合
- 他のESLintプラグインや設定とquotesルールが競合している可能性も考えられます。他のルールの設定を見直すか、一時的に無効化して問題の切り分けを行うと良いでしょう。

エラー解決のヒント

必要に応じて、ESLintの公式ドキュメントを参照すると、より詳細な情報が得られます。
設定ファイルを丁寧に確認し、意図した設定になっているかを確認します。
エラーメッセージをよく読み、何が問題なのかを理解することが重要です。

'single' (シングルクォートの強制)

.eslintrc.js の設定:

module.exports = {
  rules: {
    'quotes': ['single'],
  },
};

エラーが発生するコード例

const message1 = "Hello"; // ダブルクォートはエラー
const message2 = `World`; // バッククォートはエラー

修正後のコード例

const message1 = 'Hello';
const message2 = 'World';

'double' (ダブルクォートの強制)

module.exports = {
  rules: {
    'quotes': ['double'],
  },
};

エラーが発生するコード例

const message1 = 'Hello'; // シングルクォートはエラー
const message2 = `World`; // バッククォートはエラー

修正後のコード例

const message1 = "Hello";
const message2 = "World";

'backtick' (バッククォートの強制)

module.exports = {
  rules: {
    'quotes': ['backtick'],
  },
};

エラーが発生するコード例

const message1 = 'Hello'; // シングルクォートはエラー
const message2 = "World"; // ダブルクォートはエラー

修正後のコード例

const message1 = `Hello`;
const message2 = `World`;

注意点
'backtick' は主にテンプレートリテラルを強制する場合に使われます。単純な文字列リテラルにもバッククォートを強制する設定は、一般的ではありません。

['single', { avoidEscape: true }] (シングルクォートを基本とし、エスケープが必要な場合のみダブルクォートを許可)

module.exports = {
  rules: {
    'quotes': ['single', { avoidEscape: true }],
  },
};

エラーが発生するコード例

const message1 = "Hello"; // エスケープの必要がないのにダブルクォートを使用しているためエラー
const path = 'C:\\Users\\...'; // バックスラッシュのエスケープはシングルクォートでも可能なのでエラー

許可されるコード例

const message2 = 'World';
const stringWithSingleQuote = 'This string contains a single quote: \''; // シングルクォートをエスケープする必要があるため、ダブルクォートが許可される
const stringWithDoubleQuote = "This string contains a double quote: \""; // ダブルクォートをエスケープする必要があるため、シングルクォートが許可される

修正後のコード例

const message1 = 'Hello';
const path = 'C:\\\\Users\\\\...'; // バックスラッシュをエスケープ

または、以下のようにダブルクォートを使用することも許可されます（シングルクォート内にシングルクォートがある場合など）。

const stringWithSingleQuote = "This string contains a single quote: '";

['double', { allowTemplateLiterals: true }] (ダブルクォートを基本とし、テンプレートリテラル（バッククォート）を許可)

module.exports = {
  rules: {
    'quotes': ['double', { allowTemplateLiterals: true }],
  },
};

エラーが発生するコード例

const message1 = 'Hello'; // シングルクォートはエラー

許可されるコード例

const message2 = "World";
const name = "太郎";
const greeting = `こんにちは、${name}さん！`; // テンプレートリテラルは許可される

const message1 = "Hello";

Prettier などのコードフォーマッターの利用

使い方
Prettierを設定し、コードを保存したり、コマンドラインから実行したりすることで、自動的に引用符のスタイルが整形されます。

設定例 (.prettierrc.js)

module.exports = {
  singleQuote: true, // シングルクォートを使用
  // または
  // singleQuote: false, // ダブルクォートを使用
};

利点
- quotes ルールを含め、インデント、改行、空白など、コード全体のスタイルを自動で整形してくれます。
- ESLintと連携させることで、品質チェックとスタイル整形の両方を効率的に行うことができます。
- 設定ファイル (.prettierrc.js や .prettierrc.json) で、使用する引用符の種類（シングルクォートまたはダブルクォート）を簡単に設定できます。

ESLint の自動修正機能の活用

使い方
- コマンドライン: npx eslint --fix .
- エディタプラグイン: 保存時に自動修正する設定を有効にするか、エラー表示された箇所に対して修正を実行します。
利点
- 手動で一つずつ修正する手間が省けます。
- コマンドラインから --fix オプションを付けてESLintを実行するか、エディタのESLintプラグインが提供する自動修正機能を利用することで、違反箇所を自動的に修正できます。

チーム内でのコーディング規約の明確化と徹底

注意点
- 人手による管理のため、どうしてもスタイル違反が発生する可能性があります。
- ESLintやPrettierなどのツールと併用することで、より効果を発揮します。
利点
- コードレビューなどを通じて、人為的にスタイルの一貫性を保つことができます。
- 新しいメンバーがプロジェクトに参加する際にも、規約を共有することでスムーズに開発に参加できます。

ESLint の stylistic プラグインの利用

注意点
eslint-plugin-stylistic は別途インストールする必要があります (npm install -D @stylistic/eslint-plugin).
利点
- より柔軟な引用符のスタイル設定が可能です。
- 例えば、JSXの属性値の引用符の種類を制御するルールなどが提供されている場合があります。

チームでの規約
どのような方法を選択するにしても、チーム内で合意されたコーディング規約を明確にし、それを守る意識を持つことが重要です。
Prettier を導入しない場合
ESLint の quotes ルールを適切に設定し、ESLint の自動修正機能を活用することで、ある程度の引用符スタイルの一貫性を保つことができます。
最も推奨される組み合わせ
Prettier を導入してコード全体のスタイルを自動整形し、ESLint を導入してコードの品質チェックと基本的なスタイルの強制を行うのが一般的です。Prettier が自動で引用符のスタイルを整形してくれるため、ESLint の quotes ルールは、Prettierの設定と矛盾しないようにするか、Prettierに完全に任せるという選択肢があります。