JavaScript Tips | UI・画面部品：Alertを表示する

JavaScript JavaScript
スポンサーリンク
スポンサーリンク
  1. Alertを表示するユーティリティは「ユーザーに“重要な情報”をはっきり伝えるための仕組み」です
  2. Alertの役割と他のUI部品との違いを整理する
    1. Alertの役割
    2. Toast・Modalとの違い
  3. ステップ1：Alertの基本HTML構造を用意する
    1. 典型的なAlertのHTML構造
  4. ステップ2：CSSでAlertの見た目を整える
    1. Alertの基本CSS
  5. ステップ3：JavaScriptでAlertを生成・表示するユーティリティを作る
    1. Alertユーティリティの基本
    2. 使用例（フォームの上部にAlertを表示する）
  6. ステップ4：業務でよくある「フォーム用Alert」のテンプレート
    1. HTML例
    2. JavaScriptでフォーム用Alertを表示する関数
    3. 使用例
  7. ステップ5：画面全体の「状態」を伝えるAlert（グローバルAlert）
    1. HTML例（画面上部のAlertコンテナ）
    2. JavaScriptでグローバルAlertを表示する関数
    3. 使用例
  8. ステップ6：Alertの「表示タイミング」と「消し方」をどう設計するか（重要な深掘り）
    1. 表示タイミングの考え方
    2. 消し方のパターン
    3. 自動で消すAlertの例（情報系のみ）
  9. ステップ7：セキュリティ・プライバシーの観点からのAlertの注意点
    1. 注意すべき点
    2. 安全なAlertメッセージの例
  10. ステップ8：チームで共有するための「Alert設計ルール」をコードとドキュメントに刻む
    1. コードコメントで明示する
    2. レビュー時のチェックポイント
  11. まとめ：Alertを表示するユーティリティは「ユーザーに重要な情報をはっきり伝え、画面の状態を理解してもらうための実務的なUI技術」です

Alertを表示するユーティリティは「ユーザーに“重要な情報”をはっきり伝えるための仕組み」です

業務システムやWebアプリケーションでは、 ユーザーに対して「これは知っておいてほしい」「注意してほしい」という情報を 画面上に分かりやすく表示したい場面が多くあります。

  • 入力フォームの上部に「この操作は取り消せません」と表示する
  • 画面の上部に「メンテナンス予定があります」と告知する
  • エラー時に「保存に失敗しました。再度お試しください」と明示する

こうした「画面内に固定表示されるメッセージ」が Alert（アラート） です。

ここで扱うAlertは、window.alert() のようなブラウザ標準のポップアップではなく、 画面内に表示するUI部品としてのAlertです。

ここでは、初心者向けに、

  • Alertの役割とToast・Modalとの違い
  • HTML・CSS・JavaScriptでAlertを表示するユーティリティ
  • 業務で使いやすい設計と注意点

をステップバイステップで解説していきます。

Alertの役割と他のUI部品との違いを整理する

まず、Alertがどんな場面で使われるべきか、 ToastやModalとの違いを整理します。

Alertの役割

  • 重要な情報・注意・エラーを画面内に「固定表示」する
    • 例：フォームの上部に「必須項目が未入力です」と表示する。
    • 例：画面上部に「現在システムが混雑しています」と表示する。
  • ユーザーに「状況」を理解してもらうためのメッセージ
    • 操作の結果だけでなく、「今この画面はこういう状態です」を伝える。
  • 一定時間、またはユーザーが閉じるまで表示され続ける
    • Toastのように自動で消えるのではなく、しばらく残ることが多いです。

Toast・Modalとの違い

  • Toast
    • 画面の端に一時的に表示され、自動で消える「軽い通知」。
    • 操作を邪魔しない、さりげないメッセージ。
  • Modal
    • 画面の上に重ねて表示され、ユーザーの操作を一時的に止める「対話の場」。
    • 確認や決定を求める。
  • Alert（画面内のアラート）
    • 画面の一部に固定表示される「重要な情報・注意の表示」。
    • 状態やエラーを、ユーザーにしっかり認識してもらうためのメッセージ。

ポイント：Alertは「画面の一部として、重要な情報をはっきり伝える」ための部品であり、 ToastやModalとは役割が違います。

ステップ1：Alertの基本HTML構造を用意する

まず、Alertを表示するための基本的なHTML構造を考えます。

典型的なAlertのHTML構造

<div class="alert alert--error" role="alert">
  <span class="alert-icon">!</span>
  <div class="alert-content">
    <div class="alert-title">エラーが発生しました</div>
    <div class="alert-message">
      保存に失敗しました。時間をおいて再度お試しください。
    </div>
  </div>
  <button type="button" class="alert-close" aria-label="閉じる">×</button>
</div>

ここで重要なのは次の点です。

  • role="alert"
    • スクリーンリーダーに「これは重要なメッセージだよ」と伝えるための属性です。
  • alert--error/alert--warning/alert--infoなどの種類別クラス
    • エラー・警告・情報などを色やアイコンで区別するために使います。
  • alert-closeボタン
    • ユーザーが自分でAlertを閉じられるようにするためのボタンです。

この構造をベースに、CSSとJavaScriptで 「表示・非表示」「種類ごとの見た目」「閉じる動作」を制御していきます。

ステップ2：CSSでAlertの見た目を整える

次に、Alertの見た目をCSSで定義します。

Alertの基本CSS

.alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-size: 14px;
}

.alert-icon {
  font-weight: bold;
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: bold;
  margin-bottom: 4px;
}

.alert-message {
  line-height: 1.4;
}

.alert-close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

/* 種類ごとの色分け */
.alert--error {
  background: #ffebee;
  border: 1px solid #c62828;
  color: #c62828;
}

.alert--warning {
  background: #fff8e1;
  border: 1px solid #f9a825;
  color: #f9a825;
}

.alert--info {
  background: #e3f2fd;
  border: 1px solid #1565c0;
  color: #1565c0;
}

.alert--success {
  background: #e8f5e9;
  border: 1px solid #2e7d32;
  color: #2e7d32;
}

このようにしておくと、

  • エラーは赤系
  • 警告は黄色系
  • 情報は青系
  • 成功は緑系

といった直感的な色分けができます。

ポイント：Alertは「一目で種類が分かる」ことが重要です。 色・アイコン・タイトルを組み合わせて、ユーザーが瞬時に意味を理解できるようにします。

ステップ3：JavaScriptでAlertを生成・表示するユーティリティを作る

いよいよ、JavaScriptでAlertを表示するユーティリティを作っていきます。

Alertユーティリティの基本

export const Alert = {
  show(container, options) {
    const {
      type = "info",          // "error" | "warning" | "info" | "success"
      title = "",
      message = "",
      closable = true,
    } = options;

    const alertEl = document.createElement("div");
    alertEl.classList.add("alert");

    // 種類に応じてクラスを付与
    alertEl.classList.add(`alert--${type}`);

    alertEl.setAttribute("role", "alert");

    // アイコン（簡易版）
    const iconEl = document.createElement("span");
    iconEl.className = "alert-icon";
    iconEl.textContent = type === "error" ? "!" :
                         type === "warning" ? "!" :
                         type === "success" ? "✓" : "i";
    alertEl.appendChild(iconEl);

    // コンテンツ
    const contentEl = document.createElement("div");
    contentEl.className = "alert-content";

    if (title) {
      const titleEl = document.createElement("div");
      titleEl.className = "alert-title";
      titleEl.textContent = title;
      contentEl.appendChild(titleEl);
    }

    const messageEl = document.createElement("div");
    messageEl.className = "alert-message";
    messageEl.textContent = message;
    contentEl.appendChild(messageEl);

    alertEl.appendChild(contentEl);

    // 閉じるボタン
    if (closable) {
      const closeBtn = document.createElement("button");
      closeBtn.className = "alert-close";
      closeBtn.type = "button";
      closeBtn.setAttribute("aria-label", "閉じる");
      closeBtn.textContent = "×";
      closeBtn.addEventListener("click", () => {
        this.hide(alertEl);
      });
      alertEl.appendChild(closeBtn);
    }

    // コンテナに追加
    container.appendChild(alertEl);

    return alertEl;
  },

  hide(alertEl) {
    if (alertEl && alertEl.parentNode) {
      alertEl.parentNode.removeChild(alertEl);
    }
  },

  clear(container) {
    container.querySelectorAll(".alert").forEach((el) => {
      this.hide(el);
    });
  },
};
JavaScript

使用例（フォームの上部にAlertを表示する）

<div id="form-alerts"></div>

<form id="user-form">
  <!-- フォーム内容 -->
</form>

const alertContainer = document.getElementById("form-alerts");

// バリデーションエラー時
Alert.clear(alertContainer); // 既存のAlertを消す
Alert.show(alertContainer, {
  type: "error",
  title: "入力エラーがあります",
  message: "必須項目が未入力です。赤枠の項目を確認してください。",
});
JavaScript

ポイント：Alertユーティリティは「どのコンテナに表示するか」を引数で受け取るようにしておくと、 画面のどの場所にも柔軟にAlertを表示できるようになります。

ステップ4：業務でよくある「フォーム用Alert」のテンプレート

業務システムでは、フォームの上部にAlertを表示するパターンが非常によく使われます。

HTML例

<div id="form-alerts"></div>

<form id="user-form">
  <!-- 入力項目 -->
</form>

JavaScriptでフォーム用Alertを表示する関数

export function showFormError(message) {
  const container = document.getElementById("form-alerts");
  if (!container) return;

  Alert.clear(container);

  Alert.show(container, {
    type: "error",
    title: "入力内容に問題があります",
    message,
  });
}

export function showFormWarning(message) {
  const container = document.getElementById("form-alerts");
  if (!container) return;

  Alert.clear(container);

  Alert.show(container, {
    type: "warning",
    title: "確認が必要です",
    message,
  });
}
JavaScript

使用例

const form = document.getElementById("user-form");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const hasError = /* バリデーション処理 */;
  if (hasError) {
    showFormError("必須項目が未入力です。赤枠の項目を確認してください。");
    return;
  }

  // 正常時の処理
});
JavaScript

ポイント：フォーム用Alertは「何が問題なのか」をユーザーに明確に伝える役割を持ちます。 タイトルとメッセージを分けて表示することで、情報が整理されて伝わりやすくなります。

ステップ5：画面全体の「状態」を伝えるAlert（グローバルAlert）

業務システムでは、画面の上部に「システムの状態」や「重要なお知らせ」を表示することがあります。

HTML例（画面上部のAlertコンテナ）

<div id="global-alerts"></div>

<main>
  <!-- 画面のメインコンテンツ -->
</main>

JavaScriptでグローバルAlertを表示する関数

export function showGlobalInfo(message) {
  const container = document.getElementById("global-alerts");
  if (!container) return;

  Alert.clear(container);

  Alert.show(container, {
    type: "info",
    title: "お知らせ",
    message,
    closable: true,
  });
}

export function showGlobalWarning(message) {
  const container = document.getElementById("global-alerts");
  if (!container) return;

  Alert.clear(container);

  Alert.show(container, {
    type: "warning",
    title: "注意事項",
    message,
    closable: true,
  });
}
JavaScript

使用例

// メンテナンス告知
showGlobalWarning("本日22:00〜23:00の間、システムメンテナンスを実施します。");
JavaScript

ポイント：グローバルAlertは「この画面全体に関わる情報」を伝える場です。 ユーザーが画面に入った瞬間に目に入る位置に表示することで、重要な情報を見逃しにくくできます。

ステップ6：Alertの「表示タイミング」と「消し方」をどう設計するか（重要な深掘り）

Alertは、Toastと違って「自動で消えるとは限らない」部品です。

表示タイミングの考え方

  • フォーム送信時のバリデーションエラー
    • 送信ボタンを押した直後に表示する。
  • 画面読み込み時のお知らせ
    • ページロード直後に表示する。
  • 操作結果のエラー
    • API呼び出しの結果に応じて表示する。

消し方のパターン

  • ユーザーが閉じるボタンを押したときに消す
    • alert-close ボタンで消す。
  • 別のAlertを表示するときに、古いAlertを消す
    • Alert.clear(container) でコンテナ内のAlertを一括削除。
  • 一定時間後に自動で消す（必要に応じて）
    • Alertは基本的に「残る」部品ですが、 軽い情報の場合は自動で消すこともあります。

自動で消すAlertの例（情報系のみ）

export function showAutoDismissInfo(container, message, duration = 5000) {
  const alertEl = Alert.show(container, {
    type: "info",
    title: "情報",
    message,
    closable: true,
  });

  setTimeout(() => {
    Alert.hide(alertEl);
  }, duration);
}
JavaScript

ポイント：Alertは「ユーザーにしっかり認識してほしい情報」を扱うため、 消し方を慎重に設計する必要があります。 重要なエラーや注意は、ユーザーが自分で閉じるまで残しておく方が安全なことが多いです。

ステップ7：セキュリティ・プライバシーの観点からのAlertの注意点

Alertは画面上に大きく表示されるため、 「誰が画面を見ているか」によっては、情報漏洩の一因になり得ます。

注意すべき点

  • Alertに機密情報（パスワード、トークン、個人情報など）を表示しない。
  • エラーメッセージに内部構造（SQL文、スタックトレースなど）をそのまま表示しない。
  • 「このユーザーは管理者です」など、権限情報を過度に表示しない。

安全なAlertメッセージの例

  • 「保存に失敗しました。時間をおいて再度お試しください。」
  • 「権限が不足しているため、この操作は実行できません。」
  • 「入力内容に問題があります。赤枠の項目を確認してください。」

ポイント：Alertは「誰の目にも触れやすい」情報なので、 セキュリティ・プライバシーの観点から、表示内容を慎重に設計する必要があります。

ステップ8：チームで共有するための「Alert設計ルール」をコードとドキュメントに刻む

コードコメントで明示する

// 注意:
// Alertは、画面内に重要な情報・注意・エラーを表示するためのUI部品です。
// Alert.show を使って、コンテナと種類・タイトル・メッセージを指定して表示してください。
// Alertには機密情報（パスワード、トークン、個人情報など）を表示しないでください。
// フォーム用AlertやグローバルAlertなど、用途ごとのラッパー関数を用意し、
// チーム全体で一貫した使い方をすることを推奨します。
JavaScript

レビュー時のチェックポイント

  • Alertがユーティリティ経由で表示されているか（バラバラな実装になっていないか）
  • Alertのメッセージに機密情報が含まれていないか
  • Alertの種類（error / warning / info / success）が適切に使い分けられているか
  • Alertがユーザーにとって「うるさすぎない」か（過剰なエラー表示になっていないか）

こうしたルールをチームで共有することで、 「画面ごとにバラバラなAlert」「危険なメッセージ表示」などの問題を防ぎやすくなります。

まとめ：Alertを表示するユーティリティは「ユーザーに重要な情報をはっきり伝え、画面の状態を理解してもらうための実務的なUI技術」です

Alertを表示するためのJavaScriptユーティリティと設計を導入することで、次のような効果があります。

  • どの画面でも同じスタイルで重要な情報を表示できる
  • フォームエラーやシステム状態を、ユーザーに分かりやすく伝えられる
  • セキュリティ・プライバシーに配慮したメッセージ設計をチームで共有しやすくなる
  • ToastやModalと役割を分けて使うことで、UI全体の整理が進む

業務システムにおいて、Alertは「ユーザーに状況を理解してもらうための声」です。

その声を、きちんとしたユーティリティと設計で扱うことは、 ユーザー体験とシステムの信頼性を高めるうえで、とても実務的で重要な技術だと言えます。

スポンサーリンク
タイトルとURLをコピーしました