no-alert

2025-05-16

なぜ「no-alert」が必要なのか？

このルールが推奨される主な理由は以下の通りです。

ユーザーエクスペリエンスの低下
alert()、confirm()、prompt()は、ブラウザの実行を一時停止させ、ユーザーの操作をブロックするモーダルダイアログを表示します。これはユーザーにとって邪魔になることが多く、特に頻繁に表示されると不快感を与えます。現代のウェブアプリケーションでは、より洗練された非モーダルなUI要素（トースト通知、カスタムモーダルダイアログなど）を使用することが推奨されています。
デバッグコードの残存防止
開発中にデバッグ目的で一時的にalert()を使うことがあります。しかし、本番環境にデプロイする際にこれらのalert()が残ってしまうと、意図しない挙動やユーザーエクスペリエンスの悪化につながります。「no-alert」ルールは、このようなデバッグコードの残存を防ぐのに役立ちます。
セキュリティリスク
prompt()などは、ユーザーからの入力を受け付けるため、適切にサニタイズされていないとXSS（クロスサイトスクリプティング）などのセキュリティ脆弱性につながる可能性があります。

ルールの設定

ESLintの設定ファイル（例: .eslintrc.jsや.eslintrc.json）で、no-alertルールを有効にすることができます。

例えば、エラーとして警告を出したい場合は以下のように設定します。

{
  "rules": {
    "no-alert": "error"
  }
}

"off"または0: ルールを無効にします。
"warn": 警告として報告します。コードの実行は停止しませんが、修正を促します。
"error": alert()などが使用された場合、ESLintはエラーとして報告し、通常はコードの実行を停止させます（CI/CDパイプラインなど）。

「no-alert」ルールが有効になっている場合、以下のコードはESLintによって警告またはエラーとして報告されます。

// エラーまたは警告の対象となるコード
alert("Hello, world!");
confirm("Are you sure?");
prompt("Please enter your name:");

これらのブラウザネイティブのアラート機能の代わりに、例えば以下のようなカスタムUIライブラリや実装を使用することが推奨されます。

// 代替案の例 (ライブラリによる)
// 例: SweetAlert2 や Material-UI の Dialog など
// Swal.fire("Hello, world!");

// 代替案の例 (独自実装)
function showCustomDialog(message) {
  // DOM操作などで独自のモーダルダイアログを表示する処理
  console.log(message); // コンソール出力は問題ない
}
showCustomDialog("Hello, custom dialog!");

no-alert ルールは、alert(), confirm(), prompt() の使用を禁止する非常にシンプルなルールですが、それでもいくつかの一般的な「エラー」や「トラブルシューティング」のシナリオが発生することがあります。

エラーメッセージの理解

まず、ESLint が no-alert ルールに違反していると報告する際のエラーメッセージを理解することが重要です。通常、以下のようなメッセージが表示されます。

<ファイル名>:<行番号>:<列番号>  Expected no alert, confirm, or prompt.  no-alert

これは、「指定されたファイル、行、列で、alert(), confirm(), prompt() のいずれかが使用されており、no-alert ルールに違反しています」という意味です。

一般的な「エラー」シナリオと解決策

シナリオ A: 意図せず `alert()` を残してしまった場合

これは最も一般的なケースです。開発中にデバッグ目的で一時的に alert() を使用し、その後の本番環境へのデプロイ前に削除し忘れてしまうことがあります。

問題

function saveData() {
  // ... データを保存する処理 ...
  alert("データが保存されました！"); // デバッグで使った alert() が残っている
}

解決策
alert() を削除するか、より適切な通知方法に置き換えます。

function saveData() {
  // ... データを保存する処理 ...
  // alert() を削除するか、
  // console.log("データが保存されました！"); // デバッグ目的ならこちら
  // または、トースト通知などの非モーダルなUI要素に置き換える
  // showToast("データが保存されました！");
}

シナリオ B: 意図的に `alert()` を使用しているが、ESLint が警告を出す場合

特定の状況下で、やむを得ず alert() の使用を許可したい場合があります（非常に限定的なケースですが）。しかし、ESLint はデフォルトでこれを禁止します。

問題
ESLint の設定で no-alert: "error" または no-alert: "warn" が有効になっているにもかかわらず、特定の場所で alert() を使用したい。

解決策 1: 特定の行またはブロックを無効にする

ESLint のコメントディレクティブを使用して、特定の行またはコードブロックに対してルールを無効にすることができます。

コードブロックを無効にする
```
/* eslint-disable no-alert */
function specialAlertFunction() {
  alert("このブロック内の alert は許可されます。");
  confirm("これもOKです。");
}
/* eslint-enable no-alert */
```
注意: この方法は、例外的な状況にのみ使用し、乱用しないようにしてください。コードレビューでその妥当性が問われる可能性があります。

特定の行を無効にする

// eslint-disable-next-line no-alert
alert("これは特別な状況なので許可します。");

解決策 2: ESLint 設定でルールを完全に無効にする (非推奨)

プロジェクト全体で alert() の使用を許可したい場合は、ESLint の設定ファイル (.eslintrc.js または .eslintrc.json) で no-alert ルールを無効にできます。

// .eslintrc.json
{
  "rules": {
    "no-alert": "off" // または "0"
  }
}

注意
これは一般的には推奨されません。これにより、プロジェクト全体で alert() が誤って使用される可能性が大幅に高まります。本当に必要な場合のみ検討してください。

シナリオ C: 別のライブラリが `alert` を使用している場合

稀に、依存しているサードパーティのライブラリが内部で alert() や confirm() を使用していることがあります。

問題
自分のコードでは alert() を使用していないのに、ESLint が依存ライブラリのファイルで no-alert のエラーを報告する。

依存ライブラリが原因であることを確認する
エラーメッセージに示されているファイルパスを確認し、それが node_modules 内のファイルであるかどうかを確認します。
ignorePatterns を使用して node_modules を無視する
ESLint は通常、デフォルトで node_modules ディレクトリを無視しますが、何らかの理由で無視されていない場合、ESLint の設定ファイルに ignorePatterns を追加して明示的に無視させることができます。
```
// .eslintrc.json
{
  "ignorePatterns": ["node_modules/", "dist/"],
  "rules": {
    "no-alert": "error"
  }
}
```
ライブラリの選定を見直す
もしライブラリがユーザーエクスペリエンスを損なう形で alert() を多用している場合、そのライブラリの代替を検討することも一つの手です。

トラブルシューティングのヒント

他のルールとの干渉
- no-alert ルール自体が他のルールと直接干渉することは稀ですが、ESLint の設定全体で予期しない動作が発生していないか確認することも重要です。
ESLint のバージョンを確認する
- ごく稀に、特定の ESLint のバージョンやプラグインの組み合わせで予期しない動作をする場合があります。
キャッシュをクリアする
- ESLint はキャッシュを使用することがあります。問題が解決しない場合は、ESLint のキャッシュをクリアしてみてください。npx eslint --fix --no-eslintrc <ファイル名> のように --no-eslintrc を一時的に使用するか、./node_modules/.bin/eslint --cache-flush (もし ESLint のバージョンが古い場合) を試してみてください。
ESLint の設定ファイルを確認する
- .eslintrc.js や .eslintrc.json などの設定ファイルが正しくロードされているか？
- no-alert ルールが rules セクションでどのように設定されているか ("error", "warn", "off")？
- 複数の設定ファイルが存在する場合（ルートディレクトリとサブディレクトリなど）、ESLint がどの設定ファイルを適用しているか？
ESLint の実行環境を確認する
- 開発環境のIDE (VS Code など) で ESLint 拡張機能が正しく動作しているか？
- コマンドラインで npx eslint <ファイル名> を実行して同じエラーが出力されるか？

ESLint 設定ファイルでのルール設定

まず、ESLint の設定ファイル（通常は .eslintrc.json または .eslintrc.js）で no-alert ルールを有効にする方法です。

.eslintrc.json の例

{
  "rules": {
    "no-alert": "error" // alert, confirm, prompt の使用をエラーとして報告
    // "no-alert": "warn" // alert, confirm, prompt の使用を警告として報告
    // "no-alert": "off"  // alert, confirm, prompt の使用を許可（非推奨）
  }
}

no-alert ルールに違反するコード例

no-alert: "error" または "warn" が設定されている場合、以下のコードは ESLint によって検出されます。

// alert() の使用
function showGreeting() {
  alert("こんにちは、世界！"); // 違反: no-alert
}

// confirm() の使用
function deleteItem() {
  const confirmed = confirm("本当にこのアイテムを削除しますか？"); // 違反: no-alert
  if (confirmed) {
    console.log("アイテムを削除しました。");
  }
}

// prompt() の使用
function getUserName() {
  const name = prompt("お名前を入力してください:"); // 違反: no-alert
  if (name) {
    console.log(`こんにちは、${name}さん！`);
  }
}

// 複数のアラート関数を同時に使用
function debugFunction() {
  alert("デバッグメッセージ1"); // 違反: no-alert
  console.log("途中の処理...");
  confirm("デバッグを続けますか？"); // 違反: no-alert
}

no-alert ルールに違反しない代替コード例

alert(), confirm(), prompt() を使用せずに、同様の機能を実現するための代替方法です。これらはより現代的で、ユーザーエクスペリエンスを向上させる方法です。

代替例 1: `console.log()` を使用したデバッグメッセージ

デバッグ目的であれば、ブラウザのコンソールにメッセージを出力するのが最もシンプルで一般的な代替手段です。

// alert() の代わりに console.log() を使用
function showGreetingDebug() {
  console.log("こんにちは、世界！ (デバッグ用)"); // ESLint は問題なし
}

// 他のコンソールメソッドも利用可能
console.warn("これは警告です！");
console.error("これはエラーです！");
console.info("これは情報です。");

代替例 2: カスタムモーダルダイアログまたはトースト通知

ユーザーへの確認や情報表示には、モーダルダイアログ（例: Material-UI の Dialog、Ant Design の Modal など）や、画面の端に短時間表示されるトースト通知（例: React-Toastify、Notistack など）が適しています。

// ライブラリを使ったカスタムモーダルダイアログの概念例（擬似コード）
// ※ 実際のコードは使用するUIライブラリによって異なります

// 例1: 情報を表示するカスタムダイアログ
function showCustomInfoDialog(message) {
  // ここでUIライブラリのAPIを呼び出して、モーダルダイアログを表示
  // 例: MyUIPackage.Dialog.open({ message: message, type: 'info' });
  console.log(`カスタム情報ダイアログ: ${message}`); // デモのためにコンソール出力
}

showCustomInfoDialog("データが正常に保存されました。"); // ESLint は問題なし

// 例2: ユーザーに確認を求めるカスタムモーダルダイアログ
function showCustomConfirmDialog(message, onConfirm, onCancel) {
  // ここでUIライブラリのAPIを呼び出して、確認ダイアログを表示し、
  // ユーザーの選択に応じて onConfirm または onCancel コールバックを呼び出す
  // 例: MyUIPackage.ConfirmDialog.open({
  //   message: message,
  //   onOk: onConfirm,
  //   onCancel: onCancel
  // });
  console.log(`カスタム確認ダイアログ: ${message}`); // デモのためにコンソール出力
  // 例: ここでユーザーが「OK」をクリックしたと仮定して onConfirm を呼び出す
  setTimeout(() => onConfirm(), 1000);
}

function deleteItemCustom() {
  showCustomConfirmDialog(
    "本当にこのアイテムを削除しますか？",
    () => {
      console.log("アイテムを削除しました。");
    },
    () => {
      console.log("アイテムの削除をキャンセルしました。");
    }
  ); // ESLint は問題なし
}
deleteItemCustom();

// 例3: ユーザーから入力を受け付けるカスタムモーダルダイアログ
function showCustomPromptDialog(message, onInput) {
  // UIライブラリのAPIを呼び出して、入力フィールドを含むダイアログを表示
  // 例: MyUIPackage.PromptDialog.open({
  //   message: message,
  //   onOk: (value) => onInput(value)
  // });
  console.log(`カスタム入力ダイアログ: ${message}`); // デモのためにコンソール出力
  // 例: ここでユーザーが「John Doe」と入力したと仮定して onInput を呼び出す
  setTimeout(() => onInput("John Doe"), 1500);
}

function getUserNameCustom() {
  showCustomPromptDialog("お名前を入力してください:", (name) => {
    if (name) {
      console.log(`こんにちは、${name}さん！`);
    } else {
      console.log("名前が入力されませんでした。");
    }
  }); // ESLint は問題なし
}
getUserNameCustom();

代替例 4: HTML要素の表示/非表示を切り替える

シンプルな情報表示であれば、事前にHTML内に非表示のメッセージ要素を置いておき、JavaScriptで表示・非表示を切り替えるだけでも十分な場合があります。

<div id="message-container" style="display: none; padding: 10px; border: 1px solid blue; background-color: lightblue;">
  <p id="message-text"></p>
  <button onclick="hideMessage()">閉じる</button>
</div>

function showHtmlMessage(message) {
  const container = document.getElementById("message-container");
  const text = document.getElementById("message-text");
  text.textContent = message;
  container.style.display = "block";
}

function hideMessage() {
  const container = document.getElementById("message-container");
  container.style.display = "none";
}

// HTMLメッセージを表示する例
// alert("何か通知があります！"); // 違反コード
showHtmlMessage("新しい通知があります！"); // ESLint は問題なし

やむを得ない理由で特定の箇所でのみ alert() の使用を許可したい場合は、ESLint のコメントディレクティブを使用できます。

// eslint-disable-next-line no-alert
alert("この行の alert は ESLint で無視されます。");

function someLegacyCode() {
  /* eslint-disable no-alert */
  // このブロック内の alert は ESLint で無視されます
  alert("レガシーコード内の alert");
  confirm("本当に続行しますか？");
  /* eslint-enable no-alert */
}

alert("この行の alert は再び ESLint の対象になります。"); // 違反: no-alert

ネイティブアラート関数の代わりに、より洗練されたユーザー体験を提供する様々な方法があります。

コンソールへのログ出力 (console.log, console.warn, console.error)

欠点
一般ユーザーが問題に気付かない可能性がある。
利点
簡単、軽量、デバッグに最適。
特徴
ユーザーには表示されず、開発者ツールのコンソールにのみ出力されます。アプリケーションのフローを中断しません。
目的
デバッグ情報、開発者向けメッセージ、非ユーザー向けのエラー表示。

コード例

// デバッグメッセージ
console.log("データが正常にロードされました。");

// 警告メッセージ
console.warn("APIの応答が遅いです。");

// エラーメッセージ
console.error("ユーザー情報の取得中にエラーが発生しました。", errorObject);

非モーダルな「トースト通知」または「スナックバー」

よく使われるライブラリ/UIフレームワーク
- React-Toastify (React)
- Notistack (React)
- Material-UI (Snackbar)
- Bootstrap (Toast)
- Vue-Toastification (Vue.js)
欠点
重要な情報を見逃される可能性がある、複雑なインタラクションには不向き。
利点
ユーザーエクスペリエンスを妨げない、視覚的に分かりやすい、邪魔にならない。
特徴
画面の端（通常は上部または下部）に短時間表示され、自動的に消えます。ユーザーの操作をブロックしません。
目的
短い操作結果、成功/失敗メッセージ、一時的な情報通知。

概念的なコード例 (ライブラリのAPIに依存)

// 例えば、あるライブラリのAPIを使用する
// import { showToast } from './toast-library'; // 仮のインポート

function saveUserData() {
  // データの保存処理...
  if (success) {
    showToast("データが正常に保存されました。", "success");
  } else {
    showToast("データの保存に失敗しました。", "error");
  }
}

// ユーザーのアクションを取り消す場合
function undoLastAction() {
  // アクションの取り消し処理...
  showToast("最後のアクションを取り消しました。", "info", {
    action: {
      label: "再実行",
      onClick: () => redoLastAction(),
    },
    duration: 5000, // 5秒後に自動的に消える
  });
}

カスタムモーダルダイアログ / ポップアップ

よく使われるライブラリ/UIフレームワーク
- Material-UI (Dialog)
- Ant Design (Modal)
- Chakra UI (Modal)
- SweetAlert2 (汎用的なアラート/確認/プロンプト代替)
- Headless UI (Dialog)
欠点
実装に手間がかかる（ライブラリを使用しない場合）、適切に閉じられないとユーザーを閉じ込める可能性がある。
利点
重要な情報を確実に表示できる、ユーザーからの複雑なインタラクションに対応できる、デザインの自由度が高い。
特徴
アプリケーションのコンテンツ上に重ねて表示され、ユーザーの操作を一時的にそのダイアログに限定します（モーダルですが、ブラウザの実行はブロックしません）。
目的
ユーザーからの入力、重要な確認、詳細な情報表示、フォーム入力。

概念的なコード例 (カスタム確認ダイアログの擬似コード)

// 例1: 確認ダイアログ
// import { showConfirmDialog } from './custom-dialog-library'; // 仮のインポート

function deleteRecord(recordId) {
  showConfirmDialog({
    title: "レコードの削除",
    message: "本当にこのレコードを削除しますか？この操作は元に戻せません。",
    confirmText: "削除する",
    cancelText: "キャンセル",
    onConfirm: () => {
      console.log(`レコード ${recordId} を削除しました。`);
      // 削除API呼び出しなど
    },
    onCancel: () => {
      console.log("レコードの削除をキャンセルしました。");
    },
  });
}

// 例2: 入力ダイアログ
// import { showInputDialog } from './custom-dialog-library'; // 仮のインポート

function askForUsername() {
  showInputDialog({
    title: "ユーザー名の入力",
    message: "新しいユーザー名を入力してください:",
    placeholder: "例: johndoe",
    onConfirm: (username) => {
      if (username) {
        console.log(`新しいユーザー名: ${username}`);
        // ユーザー名を更新するAPI呼び出しなど
      } else {
        console.log("ユーザー名が入力されませんでした。");
      }
    },
  });
}

インラインメッセージ / フィードバック

欠点
広範囲なエラーや通知には不向き。
利点
文脈に沿ったフィードバック、ユーザーの注意を散漫にしない。
特徴
関連するUI要素のすぐ近くにテキストメッセージとして表示されます。
目的
フォーム入力のエラー、フィールドごとのバリデーションメッセージ、小さな警告。

コード例 (フォームバリデーション)

<form>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" onblur="validateEmail()">
  <p id="email-error" style="color: red; display: none;">無効なメールアドレスです。</p>
</form>

function validateEmail() {
  const emailInput = document.getElementById("email");
  const emailError = document.getElementById("email-error");
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

  if (!emailRegex.test(emailInput.value)) {
    emailError.style.display = "block";
  } else {
    emailError.style.display = "none";
  }
}

ページ内リダイレクト / 新しいページへの表示

欠点
ユーザー体験が途切れる、ページロードの待ち時間が発生する。
利点
状態を明確に伝えることができる、複雑な情報を表示しやすい。
特徴
ユーザーを完全に新しいページやビューに誘導し、そこでメッセージや状態を表示します。
目的
重要な操作の完了、セッションの期限切れ、ログイン後のリダイレクト。

function handlePaymentSuccess() {
  // 支払い処理の成功後
  window.location.href = "/payment-success?orderId=12345"; // 成功ページへリダイレクト
}

// payment-success.html (または React/Vue コンポーネント)
// <h1>お支払いありがとうございます！</h1>
// <p>ご注文番号: <span id="order-id"></span></p>
// <script>
//   const params = new URLSearchParams(window.location.search);
//   document.getElementById('order-id').textContent = params.get('orderId');
// </script>