js confirmの改行方法まとめ：改行コードの使い方からブラウザ互換性、自作confirmモーダルの実践例まで紹介！

Web開発をしていると、ユーザーに何か確認を求めたい場面が頻繁に訪れますよね。例えば、「本当に削除しますか？」といった最終確認や、「この内容で登録してもよろしいですか？」といった意思確認など、ユーザーの誤操作を防ぎ、スムーズな体験を提供するために確認ダイアログは欠かせません。

その中でも、JavaScriptが標準で提供しているwindow.confirm()（一般的にはconfirm()と記述されます）は、手軽に利用できることから多くの開発現場で使われています。しかし、このconfirm()ダイアログには、一つ大きな課題があります。それは、メッセージを改行したいのに、思った通りに改行できないという問題です。

「js confirm 改行」と検索してこの記事にたどり着いたあなたは、まさにこの問題に直面しているのではないでしょうか？メッセージが長くなって読みにくかったり、伝えたい情報が複数行にわたるために見栄えが悪くなってしまったりと、標準のconfirm()では対応しきれない場面も少なくありません。

この記事では、そんなあなたの悩みを解決するために、confirm()ダイアログでの改行の基本から、なぜ改行がうまくいかないのか、その具体的な対処法までを徹底的に解説します。さらに、一歩進んでconfirm()ダイアログを自由にカスタマイズする方法や、よりリッチなユーザー体験を提供するための**自作ダイアログ（モーダルウィンドウ）**の作成方法まで、網羅的にご紹介します。

JavaScriptのconfirmダイアログで改行を使う基本と仕組み

JavaScriptのconfirm()ダイアログは、ユーザーに簡単な確認を求める際に非常に便利な組み込み関数です。しかし、その手軽さとは裏腹に、メッセージの改行に関しては少々癖があります。「js confirm 改行」で検索されている方の多くが、この点に悩まされていることでしょう。ここでは、confirm()での改行の基本と、その裏側にある仕組み、そして改行がうまくいかない場合の対処法を詳しく見ていきましょう。

改行コード（\n, \r\n）を使ったメッセージの書き方と注意点

confirm()ダイアログのメッセージを改行する最も基本的な方法は、改行コードを使用することです。JavaScriptにおいては、バックスラッシュとnを組み合わせた\n（ニューライン、LF）が改行コードとして認識されます。

一般的なテキストエディタやプログラミング言語では、改行は\nで表現されることが多いですが、Windows環境では\r\n（キャリッジリターン＋ニューライン、CRLF）が使われることもあります。しかし、confirm()ダイアログでは基本的に\nのみで十分です。

実際にコードを見てみましょう。

// 基本的な改行の例 
const message1 = "これは1行目のメッセージです。\nこれは2行目のメッセージです。";
confirm(message1);

// 複数の改行を入れる例 
const message2 = "商品名：Tシャツ\n数量：1点\n合計金額：3,500円\n\nこの内容で注文を確定しますか？";
confirm(message2);

// 変数と組み合わせて改行する例
const userName = "山田";
const productPrice = 2500;
const confirmMessage = ${userName}様、\\nご購入ありがとうございます。\\n\\n合計金額は${productPrice}円です。\\nこのまま購入を確定しますか？;
confirm(confirmMessage);`

このように、メッセージ文字列の中に\\nを挿入するだけで、confirm()ダイアログ上でメッセージが改行されて表示されます。複数の改行を入れたい場合は、\\n\\nのように連続して記述することで、段落を分けるように空白行を挿入することも可能です。

注意点として、メッセージを記述する際には、テンプレートリテラル（バッククォート “` で囲む文字列）を使用すると、改行がそのまま反映されるため非常に便利です。

// テンプレートリテラルを使った改行の例const templateLiteralMessage =  ` これはテンプレートリテラルを使ったメッセージです。 改行がそのまま反映されます。 非常に読みやすく、記述が簡単です。 最終確認をお願いします。`
;confirm(templateLiteralMessage);

これは非常によく使われるテクニックなので覚えておきましょう。

主要ブラウザ（Chrome, Firefox, Safari）でのconfirm改行表示の互換性

confirm()ダイアログは、Webブラウザの組み込み機能として提供されているため、その表示や挙動は、ブラウザのOSやバージョンに依存します。幸いなことに、現代の主要なブラウザ（Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edgeなど）では、\nによる改行はほぼ共通してサポートされています。

ただし、以下のようなごく稀なケースや注意点が存在します。

• 古いブラウザのサポート: 非常に古いバージョンのブラウザでは、\\nによる改行が正しく解釈されない可能性がゼロではありません。しかし、現代のWeb開発においては、通常これらの古いブラウザを考慮する必要はほとんどありません。
• OSの表示スタイル: confirm()ダイアログの見た目自体は、ブラウザだけでなく、そのブラウザが動作しているOSのUIテーマや設定に影響を受けます。例えば、WindowsとmacOSでは、同じChromeで表示してもボタンの形状やフォントがわずかに異なることがあります。これは改行の挙動とは直接関係ありませんが、UI/UXの観点から知っておくと良いでしょう。

これらの点から、基本的なニーズであれば、\nを使うことで主要な環境では問題なく対応できると考えて差し支えありません。

改行されない原因とその対処法【HTMLタグが使えない理由も解説】

「\nを使っているのに、なぜか改行されない！」という経験をした方もいるかもしれません。また、「HTMLタグを使って改行したい」と考える方もいるでしょう。ここでは、そうした疑問や問題の原因と対処法を解説します。

改行されない主な原因

HTMLタグが使えない理由

confirm()ダイアログは、ブラウザのセキュリティ上の理由から、ユーザー入力やスクリプトによってHTMLを自由に挿入できないようになっています。もしHTMLタグが使えてしまうと、悪意のあるスクリプト（XSS攻撃など）を挿入され、ユーザーの情報を盗み取ったり、意図しない操作をさせたりするリスクが生じてしまいます。

そのため、confirm()は安全性を最優先し、表示できるコンテンツをプレーンテキストに限定しているのです。この設計は、alert()やprompt()といった他の組み込みダイアログにも共通しています。

もし、改行だけでなく、文字の色を変えたい、画像を表示したい、ボタンの形を変えたいといったニーズがある場合は、標準のconfirm()では実現できません。その場合は、HTML、CSS、JavaScriptを組み合わせてカスタムダイアログ（モーダルウィンドウ）を自作するか、既存のライブラリを利用することを検討する必要があります。

次のセクションでは、これらの「confirmダイアログのカスタマイズと拡張テクニック」について詳しく掘り下げていきます。

confirmダイアログのカスタマイズと拡張テクニック

前章では、confirm()ダイアログでの改行の基本と、なぜHTMLタグが使えないのかという制約について解説しました。しかし、Webアプリケーション開発において、標準のconfirm()ダイアログの見た目や挙動では物足りないと感じる場面も多いでしょう。ユーザー体験を向上させるためには、「confirm画面のカスタマイズ」のニーズは非常に高いです。

残念ながら、confirm()はブラウザ組み込みの機能であるため、そのデザインや機能の大部分を直接JavaScriptやCSSから変更することはできません。しかし、いくつかの「テクニック」を使うことで、ある程度のカスタマイズを実現したり、標準機能ではできないことを補完したりすることが可能です。

confirmのボタンテキストを「OK」「キャンセル」以外に変更する方法

標準のconfirm()ダイアログのボタンは、OSやブラウザによって「OK」「キャンセル」や「はい」「いいえ」といった固定のテキストが表示されます。これを「送信」「戻る」といった、アプリケーションの文脈に合わせたテキストに変更したいと考えるのは自然なことです。

しかし、結論から言うと、window.confirm()のボタンテキストを直接変更する標準的な方法は存在しません。これは、confirm()がブラウザのネイティブUIを使用しているため、Webページ側からその内部要素を操作できないようになっているためです。

では、どうすればこのニーズを満たせるのでしょうか？

この場合の解決策は、confirm()の代替となるカスタムダイアログを自作することです。カスタムダイアログであれば、HTMLとCSSでボタンを自由に配置し、JavaScriptでクリックイベントを制御できるため、テキストだけでなくボタンのデザイン、色、数、配置まですべてを自由にカスタマイズできます。

例えば、以下のようなHTMLとJavaScriptで、シンプルなカスタム確認ダイアログのボタンテキストを変更する例を考えられます。

<div id="customConfirmModal">
  <div class="customConfirmModalInner">
    <p id="confirmMessage">本当にこのデータを削除しますか？</p>
    <button id="confirmYes" style="">はい、削除します</button>
    <button id="confirmNo" style="">キャンセル</button>
  </div>
</div>

<button id="deleteButton">データを削除</button>

#customConfirmModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.customConfirmModalInner {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
#confirmYes {
  margin-right: 10px;
  padding: 8px 15px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#confirmNo {
  padding: 8px 15px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

const deleteButton = document.getElementById("deleteButton");
const customConfirmModal = document.getElementById("customConfirmModal");
const confirmMessage = document.getElementById("confirmMessage");
const confirmYes = document.getElementById("confirmYes");
const confirmNo = document.getElementById("confirmNo");

deleteButton.addEventListener("click", () => {
  // カスタムメッセージを設定することも可能
  // confirmMessage.textContent = "新しいメッセージです。";
  customConfirmModal.style.display = "flex"; // モーダルを表示
});

confirmYes.addEventListener("click", () => {
  alert("データが削除されました！");
  customConfirmModal.style.display = "none"; // モーダルを非表示
});

confirmNo.addEventListener("click", () => {
  alert("削除をキャンセルしました。");
  customConfirmModal.style.display = "none"; // モーダルを非表示
});

See the Pen js-confirm-custom-01 by watashi-xyz (@watashi-xyz) on CodePen.

この例では、display: noneで非表示にしておいたモーダルを、ボタンクリック時にdisplay: flexで表示しています。ボタンには独自のテキストとスタイルを適用できるため、「ボタンのテキストを変更したい」というニーズに直接応えることができます。次のセクションでは、この自作ダイアログについてさらに詳しく解説します。

confirmにタイトルやカスタムヘッダーを追加するテクニック

標準のconfirm()ダイアログには、メッセージ部分しか表示されず、タイトルバーはブラウザやOSによって「ページのメッセージ」のような汎用的なテキストが表示されるか、そもそも表示されない場合があります。

ダイアログに具体的なタイトルやヘッダーを付けて、何についての確認なのかを明確に伝えたいというニーズもよくあります。例えば、「ユーザー情報更新の確認」といったタイトルがあれば、ユーザーはメッセージを読む前からダイアログの目的を理解しやすくなります。

しかし、confirm()ダイアログに直接タイトルやカスタムヘッダーを追加する標準的なAPIは提供されていません。ここでも、前述のボタンテキストのカスタマイズと同様に、自作ダイアログが唯一の解決策となります。

自作ダイアログであれば、HTMLで自由にタイトル（<h1>や<h2>タグなど）やカスタムヘッダー（<div>要素など）を配置し、CSSでスタイルを適用できます。

先ほどのカスタムダイアログの例に、タイトル部分を追加してみましょう。

<div id="customConfirmModal">
  <div class="customConfirmModalInner">
    <h3 class="customConfirmTitle">⚠️ 最終確認</h3>
    <hr style="border: 0; border-top: 1px solid #eee; margin-bottom: 15px;">
    <p id="confirmMessage">この操作は元に戻せません。本当に実行しますか？</p> 
    <button id="confirmYes">はい、実行します</button>
    <button id="confirmNo">キャンセル</button>
  </div>
</div>

<button id="actionButton">危険なアクションを実行</button>

#customConfirmModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.customConfirmModalInner {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
#confirmYes {
  margin-right: 10px;
  padding: 8px 15px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#confirmNo {
  padding: 8px 15px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.customConfirmTitle {
  margin-top: 0; color: #333;
}

// JavaScriptは前例とほぼ同じ。モーダルの表示/非表示を制御する
const actionButton = document.getElementById("actionButton");
const customConfirmModal = document.getElementById("customConfirmModal");
const confirmYes = document.getElementById("confirmYes");
const confirmNo = document.getElementById("confirmNo");

actionButton.addEventListener("click", () => {
  customConfirmModal.style.display = "flex";
});

confirmYes.addEventListener("click", () => {
  alert("アクションが実行されました！");
  customConfirmModal.style.display = "none";
});

confirmNo.addEventListener("click", () => {
  alert("アクションをキャンセルしました。");
  customConfirmModal.style.display = "none";
});

See the Pen js-confirm -custom-2 by watashi-xyz (@watashi-xyz) on CodePen.

このように、自作ダイアログでは、<h3>タグを使ってタイトルを追加したり、<hr>タグで区切り線を入れたり、<div>で特定の領域をグループ化してスタイルを適用したりと、HTMLの柔軟性を最大限に活用できます。「タイトルのカスタマイズ」を実現するなら、自作が必須です。

デフォルトのconfirmダイアログの色やフォントをCSSで調整する方法

「標準のconfirmダイアログの背景色をブランドカラーにしたい」「フォントサイズを大きくして高齢者にも見やすくしたい」など、confirmダイアログのデザインをWebサイト全体のトーン＆マナーに合わせたいという要望は非常に多いです。

しかし、残念ながら、confirm()ダイアログの見た目をCSSで直接変更することはできません。これも、前述の理由と同様に、ブラウザのネイティブUIであり、セキュリティ上の制約があるためです。CSSはWebページ内のHTML要素に対してスタイルを適用しますが、confirm()ダイアログはWebページの一部とはみなされず、ブラウザが描画する独立したUI要素として扱われます。

そのため、「色やフォントの変更」といったニーズを標準のconfirm()で満たすことは不可能です。

もし、Webサイトのデザインに完全に合わせた確認ダイアログが必要な場合は、唯一の方法はカスタムダイアログ（モーダルウィンドウ）を自作することです。自作ダイアログであれば、HTMLで構造を作り、すべてのCSSプロパティ（background-color, color, font-size, border-radius, box-shadowなど）を自由に適用できます。

例えば、以下のようにCSSでデザインを調整できます。

<div id="customConfirmModal">
  <div class="customConfirmModalInner">
    <h3 class="customConfirmTitle">🚨 確認が必要です</h3>
    <hr style="border: 0; border-top: 2px solid #0056b3; margin-bottom: 20px;">
    <p id="confirmMessage"> この変更は元に戻すことができません。<br> 本当にこの操作を実行しますか？ </p>
    <div style="margin-top: 25px;"> 
      <button id="confirmYes">実行する</button> 
      <button id="confirmNo">キャンセル</button>
    </div>
  </div>
</div>

<button id="triggerCustomModal">カスタムモーダル表示</button>

#customConfirmModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.customConfirmModalInner {
  background-color: #f0f8ff;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  width: 350px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.customConfirmTitle {
  margin-top: 0;
  color: #0056b3;
  font-family: "Segoe UI", sans-serif;
  font-size: 1.5em;
}
#confirmMessage {
  font-size: 1.1em;
  color: #333;
  line-height: 1.6;
}
#confirmYes {
  margin-right: 15px;
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  transition: background-color 0.3s ease;
}
#confirmNo {
  padding: 10px 20px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.1em;
  transition: background-color 0.3s ease;
}

const triggerCustomModal = document.getElementById("triggerCustomModal");
const customConfirmModal = document.getElementById("customConfirmModal");
const confirmYes = document.getElementById("confirmYes");
const confirmNo = document.getElementById("confirmNo");

triggerCustomModal.addEventListener("click", () => {
  customConfirmModal.style.display = "flex";
});

confirmYes.addEventListener("click", () => {
  alert("カスタムアクションが実行されました！");
  customConfirmModal.style.display = "none";
});

confirmNo.addEventListener("click", () => {
  alert("カスタムアクションをキャンセルしました。");
  customConfirmModal.style.display = "none";
});

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

ご覧の通り、confirmダイアログの見た目をCSSで直接変更することは不可能ですが、HTMLでダイアログを構築し、CSSでスタイリングすることで、ブランドイメージに完全に合致する独自の確認ダイアログを作成できます。次のセクションでは、この「自作confirmダイアログ」について、より具体的な実装方法と実践例を掘り下げていきます。

自作confirmダイアログの作り方と実践例

ここまでで、標準のconfirm()ダイアログがいかに改行やデザインの面で制約が多いか、そしてその限界を突破するためには自作ダイアログが不可欠であることを理解していただけたかと思います。「js confirm 自作」というキーワードで検索されている方は、まさにこの段階に進みたいと考えていることでしょう。

自作の確認ダイアログは、HTML、CSS、JavaScriptを組み合わせることで、完全にあなたのWebサイトのデザインに合わせ、必要な機能を自由に実装できます。ここでは、その具体的な作り方と、実際の開発で役立つ実践例をご紹介します。

HTML＋CSS＋JavaScriptで自作confirmダイアログを作る方法

自作ダイアログの基本的な構成は、以下の3つの要素から成り立ちます。

1. HTML: ダイアログの構造（背景、モーダル本体、タイトル、メッセージ、ボタンなど）を定義します。
2. CSS: ダイアログの見た目（色、サイズ、フォント、アニメーション、レスポンシブ対応など）をスタイリングします。
3. JavaScript: ダイアログの表示・非表示、ボタンのクリックイベント、ユーザーの入力処理などを制御します。

ステップ1: HTML構造の定義

まず、Webページ内にダイアログのHTML構造を追加します。通常、ダイアログはページの他のコンテンツの上に重ねて表示されるため、ページ全体を覆うような要素と、その中央に表示されるダイアログ本体の要素に分けます。

<div id="customConfirm" class="custom-confirm-overlay">
  <div class="custom-confirm-dialog">
    <div class="custom-confirm-header">
      <h3 id="customConfirmTitle">確認</h3>
      </div>
    <div class="custom-confirm-body">
      <p id="customConfirmMessage">ここにメッセージが表示されます。</p>
    </div>
    <div class="custom-confirm-footer">
      <button id="customConfirmOk" class="custom-confirm-button custom-confirm-ok">OK</button>
      <button id="customConfirmCancel" class="custom-confirm-button custom-confirm-cancel">キャンセル</button>
    </div>
  </div>
</div>

• custom-confirm-overlay: ダイアログの背後の半透明のオーバーレイ（背景）です。これをクリックしてダイアログを閉じる機能などを追加できます。
• custom-confirm-dialog: ダイアログの本体です。この中にメッセージやボタンが入ります。
• custom-confirm-header, custom-confirm-body, custom-confirm-footer: それぞれダイアログのタイトル、メッセージ、ボタンを配置するエリアです。

ステップ2: CSSでのスタイリング

次に、上記のHTML構造にCSSでスタイルを適用し、見た目を整えます。初期状態では非表示にし、JavaScriptで表示を切り替えます。

/* style.css などに記述 */
.custom-confirm-overlay {
  display: none; /* 初期状態では非表示 */
  position: fixed; /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒い背景 */
  display: flex; /* Flexboxで中央配置 */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 他のコンテンツより手前に表示 */
}

.custom-confirm-dialog {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 90%; /* レスポンシブ対応 */
  max-width: 400px; /* PCでの最大幅 */
  padding: 25px;
  text-align: center;
  position: relative; /* 子要素のposition:absoluteの基準に */
  transform: translateY(-20px); /* 最初は少し上に */
  opacity: 0; /* 最初は非表示 */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out; /* アニメーション */
}

/* モーダル表示時のスタイル */
.custom-confirm-overlay.is-active .custom-confirm-dialog {
  opacity: 1;
  transform: translateY(0);
}

.custom-confirm-header {
  padding-bottom: 15px;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 15px;
}

.custom-confirm-header h3 {
  margin: 0;
  color: #333;
  font-size: 1.4em;
}

.custom-confirm-body p {
  font-size: 1.05em;
  color: #555;
  line-height: 1.6;
  white-space: pre-wrap; /* 改行コードを反映させる */
}

.custom-confirm-footer {
  margin-top: 25px;
}

.custom-confirm-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  min-width: 100px;
  transition: background-color 0.2s ease;
}

.custom-confirm-ok {
  background-color: #007bff;
  color: white;
  margin-right: 10px;
}

.custom-confirm-ok:hover {
  background-color: #0056b3;
}

.custom-confirm-cancel {
  background-color: #6c757d;
  color: white;
}

.custom-confirm-cancel:hover {
  background-color: #5a6268;
}

/* レスポンシブ対応の例 */
@media (max-width: 768px) {
  .custom-confirm-dialog {
    width: 95%;
    padding: 20px;
  }
  .custom-confirm-button {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .custom-confirm-footer {
    display: flex;
    flex-direction: column;
  }
}

ステップ3: JavaScriptでの機能実装

最後に、JavaScriptでダイアログの表示・非表示、メッセージやタイトルの設定、ボタンのクリックイベント処理を実装します。Promiseを使用することで、ネイティブのconfirm()のように非同期で結果を返す関数を作成できます。

JavaScrip// JavaScriptファイル (script.js など) に記述
class CustomConfirm {
  constructor() {
    this.overlay = document.getElementById('customConfirm');
    this.titleElement = document.getElementById('customConfirmTitle');
    this.messageElement = document.getElementById('customConfirmMessage');
    this.okButton = document.getElementById('customConfirmOk');
    this.cancelButton = document.getElementById('customConfirmCancel');

    this.currentResolve = null; // Promiseの解決関数を保持する
    this.currentReject = null; // Promiseの拒否関数を保持する

    this.okButton.addEventListener('click', () => this._handleConfirm(true));
    this.cancelButton.addEventListener('click', () => this._handleConfirm(false));
    this.overlay.addEventListener('click', (event) => {
      // オーバーレイをクリックしたら閉じる（ダイアログ本体以外）
      if (event.target === this.overlay) {
        this._handleConfirm(false);
      }
    });
  }

  // ダイアログを表示し、Promiseを返すメソッド
  show(message, title = '確認') {
    this.titleElement.textContent = title;
    this.messageElement.textContent = message; // \nがwhite-space: pre-wrap;で反映される
    this.overlay.style.display = 'flex'; // displayをflexにして表示
    setTimeout(() => { // アニメーションをトリガーするために少し遅延させる
      this.overlay.classList.add('is-active'); // アニメーション用クラスを追加
    }, 10);


    return new Promise((resolve, reject) => {
      this.currentResolve = resolve; // 現在のresolve関数を保持
      this.currentReject = reject;   // 現在のreject関数を保持
    });
  }

  // 確認ボタン（OK/キャンセル）がクリックされた時の処理
  _handleConfirm(result) {
    const resolveToCall = this.currentResolve; // 処理中のresolve関数をローカル変数にコピー
    const rejectToCall = this.currentReject;   // 処理中のreject関数をローカル変数にコピー

    this.overlay.classList.remove('is-active'); // アニメーション用クラスを削除
    // 少し遅延させてアニメーション完了後に非表示にする
    setTimeout(() => {
      this.overlay.style.display = 'none';
      if (resolveToCall) { // resolveToCallが存在することを確認
        if (result) {
          resolveToCall(true); // OKが押されたらtrueを返す
        } else {
          resolveToCall(false); // Cancelが押されたらfalseを返す
        }
      }
      // Promiseを一度解決したら、resolve/rejectをnullに戻す
      this.currentResolve = null;
      this.currentReject = null;
    }, 300); // CSSのtransition時間と合わせる
  }
}

// グローバルにインスタンスを公開（または必要な場所でインスタンス化）
const customConfirm = new CustomConfirm();

// 使用例：
document.getElementById('someActionButton').addEventListener('click', async () => {
  const message = "このユーザーデータを削除しますか？\nこの操作は元に戻せません。\n慎重に判断してください。";
  const title = "⚠️ 危険な操作の確認";

  const result = await customConfirm.show(message, title);

  if (result) {
    alert('ユーザーデータが削除されました！');
  } else {
    alert('削除はキャンセルされました。');
  }
});

// HTML側でトリガーとなるボタンを追加
// <button id="someActionButton">ユーザー削除</button>

▼コード結果はこちら

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

ReactやjQueryで既存コードに組み込むconfirm代替モーダルのベストプラクティス

多くのWebプロジェクトでは、素のJavaScriptだけでなく、jQueryやReact、Vue.jsといったフレームワークやライブラリが利用されています。これらの環境でカスタムダイアログを組み込む際のベストプラクティスを見ていきましょう。

jQueryの場合

jQueryを使用している場合、DOM操作が簡潔に記述できるため、カスタムダイアログの実装も比較的容易です。基本的な考え方は素のJavaScriptと同じですが、セレクタの選択やイベントリスナーの設定がよりシンプルになります。

<div id="jqueryConfirmModal" class="custom-confirm-overlay">
  <div class="custom-confirm-dialog">
    <div class="custom-confirm-header"><h3>jQuery確認</h3></div>
    <div class="custom-confirm-body"><p id="jqueryConfirmMessage"></p></div>
    <div class="custom-confirm-footer">
      <button class="custom-confirm-button custom-confirm-ok">続行</button>
      <button class="custom-confirm-button custom-confirm-cancel">中止</button>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
  $(function() {
    // カスタムConfirm関数を定義
    window.myConfirm = function(message, title = '確認') {
      return new Promise((resolve) => {
        const $modal = $('#jqueryConfirmModal');
        $modal.find('#jqueryConfirmMessage').text(message); // 改行はCSSのwhite-space: pre-wrap;で対応
        $modal.find('.custom-confirm-header h3').text(title);

        $modal.addClass('is-active').css('display', 'flex'); // 表示アニメーション開始

        $modal.off('click', '.custom-confirm-button').on('click', '.custom-confirm-button', function() {
          const result = $(this).hasClass('custom-confirm-ok');
          $modal.removeClass('is-active'); // アニメーション終了
          setTimeout(() => {
            $modal.css('display', 'none');
            resolve(result);
          }, 300); // CSSアニメーションの時間に合わせる
        });

        // オーバーレイクリックでもキャンセル
        $modal.off('click.overlay').on('click.overlay', function(e) {
          if (e.target === this) {
            $modal.removeClass('is-active');
            setTimeout(() => {
              $modal.css('display', 'none');
              resolve(false); // キャンセル
            }, 300);
          }
        });
      });
    };

    // 使用例
    $('#triggerJqueryConfirm').on('click', async function() {
      const result = await window.myConfirm("このファイルを完全に削除しますか？\n削除後は元に戻せません。", "ファイル削除の確認");
      if (result) {
        alert('ファイルを削除しました。');
      } else {
        alert('ファイル削除をキャンセルしました。');
      }
    });
  });

  // HTML側でトリガーとなるボタンを追加
  // <button id="triggerJqueryConfirm">jQuery Confirm表示</button>
</script>

jQueryを使うことで、DOM要素の取得やイベントのバインディングがより簡潔に記述できます。Promiseベースの非同期処理と組み合わせることで、ネイティブのconfirm()と遜色ない使い勝手を実現できます。

Reactの場合

Reactでは、コンポーネント指向の考え方に基づいてカスタムダイアログを実装するのが一般的です。ダイアログ自体を再利用可能なコンポーネントとして定義し、親コンポーネントからpropsを通じてメッセージや表示状態を制御します。

Reactでカスタムダイアログを実装する際は、以下のような考慮事項があります。

• コンポーネント化: ダイアログを独立したReactコンポーネントとして作成します。
• State管理: ダイアログの表示・非表示は、親コンポーネントのStateで管理し、propsとして子コンポーネントに渡します。
• コールバック関数: OK/キャンセル時の処理は、親コンポーネントからpropsとして渡されるコールバック関数（例: onConfirm, onCancel）で処理します。
• Portal: ダイアログはDOMツリーの最上部（body直下など）にレンダリングするために、React Portalを使用すると良いでしょう。これにより、親コンポーネントのCSSの影響を受けにくく、z-indexの問題も回避しやすくなります。

<!– end list –>

// ConfirmDialog.jsx (Reactコンポーネント)
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const ConfirmDialog = ({ isOpen, title, message, onConfirm, onCancel }) => {
  if (!isOpen) return null; // isOpenがfalseなら何もレンダリングしない

  const modalRef = useRef(null);

  useEffect(() => {
    // モーダル表示時にフォーカスを当てるなど
    if (isOpen && modalRef.current) {
      modalRef.current.focus();
    }
  }, [isOpen]);

  const handleOverlayClick = (e) => {
    if (modalRef.current && !modalRef.current.contains(e.target)) {
      onCancel(); // モーダルの外側をクリックしたらキャンセル
    }
  };

  // Portalを使ってbody直下にレンダリング
  return ReactDOM.createPortal(
    <div className="custom-confirm-overlay is-active" onClick={handleOverlayClick}>
      <div className="custom-confirm-dialog" ref={modalRef} tabIndex="-1">
        <div className="custom-confirm-header">
          <h3>{title}</h3>
        </div>
        <div className="custom-confirm-body">
          <p>{message}</p>
        </div>
        <div className="custom-confirm-footer">
          <button className="custom-confirm-button custom-confirm-ok" onClick={onConfirm}>OK</button>
          <button className="custom-confirm-button custom-confirm-cancel" onClick={onCancel}>キャンセル</button>
        </div>
      </div>
    </div>,
    document.body // body要素直下にレンダリング
  );
};

export default ConfirmDialog;

// App.js (親コンポーネントでの使用例)
import React, { useState } from 'react';
import ConfirmDialog from './ConfirmDialog'; // 上記で作成したコンポーネントをインポート
// CSSファイルもインポート (例: import './styles.css';)

function App() {
  const [isConfirmOpen, setIsConfirmOpen] = useState(false);
  const [dialogMessage, setDialogMessage] = useState('');
  const [dialogTitle, setDialogTitle] = useState('');

  const handleDelete = () => {
    setDialogTitle('ユーザー削除の確認');
    setDialogMessage('選択したユーザーを削除します。\nこの操作は元に戻せません。');
    setIsConfirmOpen(true);
  };

  const handleConfirm = () => {
    console.log('ユーザーを削除しました！');
    setIsConfirmOpen(false);
    alert('ユーザー削除を実行しました！');
  };

  const handleCancel = () => {
    console.log('削除をキャンセルしました。');
    setIsConfirmOpen(false);
    alert('ユーザー削除をキャンセルしました。');
  };

  return (
    <div>
      <h1>React Confirmダイアログの例</h1>
      <button onClick={handleDelete}>ユーザー削除</button>

      <ConfirmDialog
        isOpen={isConfirmOpen}
        title={dialogTitle}
        message={dialogMessage}
        onConfirm={handleConfirm}
        onCancel={handleCancel}
      />
    </div>
  );
}

export default App;

Reactでは、状態管理とコンポーネントの再利用性が鍵となります。useStateでダイアログの表示状態を管理し、ConfirmDialogコンポーネントにpropsとして渡すことで、柔軟なカスタムダイアログを実現できます。特に、Portalを使用することで、DOM構造が複雑になりがちなReactアプリケーションでも、ダイアログを意図した位置にレンダリングできるのが大きな利点です。

confirmダイアログの代替ライブラリ

confrimダイアログの自作は非常に柔軟性が高いですが、ゼロから実装するのは時間と手間がかかります。特に、アニメーション、アクセシビリティ、多様なオプション（フォーム入力、複数ボタンなど）が必要な場合、既存のライブラリを活用するのが効率的です。

以下に、confirm()ダイアログの代替としてよく利用されるJavaScriptライブラリをいくつかご紹介します。これらは「confirmのカスタマイズ」のニーズを高いレベルで満たしてくれます。

• SweetAlert2:
  • 非常に美しく、モダンなデザインの警告・確認ダイアログを簡単に実装できます。
  • 豊富なカスタマイズオプション（アイコン、タイトル、テキスト、ボタンの色、アニメーション、入力フィールドなど）が提供されています。
  • PromiseベースのAPIで、非同期処理との相性も抜群です。
  • 特徴: 見た目の美しさと豊富なカスタマイズ性、導入の容易さ。
  • 公式ドキュメント: https://sweetalert2.github.io/
• Toastify:
  • 「トースト通知」と呼ばれる、画面の隅に一時的に表示されるメッセージを生成するライブラリですが、確認メッセージとしても応用できます。
  • カスタマイズ性が高く、成功/失敗/警告など様々な種類の通知を簡単に作れます。
  • 特徴: 軽量で高速、柔軟な位置設定とアニメーション。
  • 公式ドキュメント: https://apvarun.github.io/toastify-js/
• Notyf:
  • モダンでレスポンシブなトースト通知ライブラリです。非常にシンプルで使いやすく、カスタマイズも容易です。
  • 特徴: 高度にカスタマイズ可能で、複数の通知タイプをサポート。
  • 公式ドキュメント: https://carlosroso.com/notyf/ (外部サイト)

これらのライブラリは、単なる「js confirm 改行」以上の、高度なUI/UXを実現するための強力なツールとなります。プロジェクトの要件や既存の技術スタックに合わせて、最適なライブラリを選択してみてください。ほとんどのライブラリが詳細なドキュメントと豊富なデモを提供しているので、導入は比較的スムーズに行えるでしょう。

まとめ

本記事では、「js confirm 改行」というよくある課題から始まり、JavaScriptのconfirm()ダイアログの挙動、そしてそれを超える柔軟なUIを実現する方法について、多角的に解説してきました。

まず、confirm()ダイアログにおける改行の基本として、改行コード\nが唯一の有効な手段であることを確認しました。なぜHTMLタグが使えないのか、主要ブラウザでの互換性はどうかといった点も掘り下げ、その制約の背景にあるセキュリティ上の理由を理解いただけたかと思います。

次に、標準のconfirm()では実現できない「js confirm カスタマイズ」の要望、例えばボタンテキストの変更やタイトルの追加、デザイン調整といったニーズがある場合、カスタムダイアログの自作が唯一の解決策となることを示しました。

そして、HTML、CSS、JavaScriptを組み合わせた自作ダイアログの具体的な実装方法をステップバイステップで解説し、Promiseを用いた非同期処理によって、ネイティブのconfirm()のような使い勝手を実現できることを示しました。さらに、jQueryやReactといった既存のフレームワークやライブラリ環境でカスタムダイアログを組み込む際のベストプラクティスも紹介しました。

最後に、ゼロからの実装が難しい場合に役立つSweetAlert2などの代替ライブラリもご紹介しました。これらのライブラリを活用することで、開発コストを抑えつつ、リッチでユーザーフレンドリーな確認ダイアログを実装することが可能です。

ユーザー体験を向上させる上で、適切なタイミングで分かりやすい確認を促すことは非常に重要です。confirmを適切に活用してよりよいUXを提供していきましょう。

ハンバーガーメニューをページ内リンクで確実に閉じる方法とトラブル解消法【jQuery＆Vanilla JS対応】

「ハンバーガーメニューのページ内リンクでメニューが閉じない…」そんな悩みを解決します！JavaScriptやjQuery、CSSだけで対応する方法をやさしく解説。原因の理解からコピペで使える実装例、さらに背景クリックやアクセシビリティ対応まで網羅しているので、初心者から実務レベルの方まで安心して参考にしていただけます。

watashi.xyz

2025.05.19

JavaScriptで「もっと見る」ボタンを作る！クリックで表示・閉じる・10件ずつ展開まで対応した実装方法を徹底解説！

Webサイトの長いリスト、どう表示していますか？HTML, CSS, JavaScriptを使った「もっと見る ボタン js」で解決しましょう！この記事では、基本的な実装コードから、10件ずつ表示・開閉式・複数設置といった応用、実装時のエラーやパフォーマンス、レスポンシブ、アクセシビリティまで網羅的に解説しています。

watashi.xyz

2025.05.18

HTML＆CSSプログレスバー実装ガイド｜おしゃれ・アニメ・円形・React対応まで＋コピペOKサンプル付き

HTMLプログレスバーのデザインをもっと自由に！CSSで色や形をカスタマイズ、アニメーションやJavaScriptで動的な表現を加える方法をコピペで使えるサンプルコードと共に紹介します。円形プログレスバーの実装、Reactでの利用に加え、よくあるトラブルについても。初心者からステップアップしたい方におすすめです。

watashi.xyz

2025.05.14

CSSタイムラインの作り方まとめ｜沿革・経歴・スケジュールに使えるデザインと実装コードを厳選紹介！

タイムラインを自作したいけれど方法がわからない方へ。この記事では、HTMLとCSSだけで縦型・横型タイムラインの基本構造から実装方法まで、初心者にもわかりやすく解説します。疑似要素を活用したデザイン、アイコンや画像を取り入れた多彩なスタイリング、スマホ対応のレスポンシブ設計まで、コピペで使えるコード例も掲載！

watashi.xyz

2025.05.11

HTMLプルダウンメニューをJavaScriptで強化！初心者向け実装ガイドと動的機能の作り方

HTMLとJavaScriptでプルダウンメニューを簡単に実装！CSSでの見た目の整え方から、JavaScriptを使った要素の取得、選択値の取得、ユーザーのアクションを検知するchangeイベントの使い方、デフォルト項目を設定する方法まで基礎を網羅。よくあるエラーの解決策といった実践的な応用テクニックまで紹介します。

watashi.xyz

2025.05.10

HTMLのツールチップ、title属性では改行できない？広く使えるCSS・JavaScriptでの実装テクニック

HTMLのツールチップで改行を実現する方法を探していますか？title属性では改行が難しい仕様がありますが、CSSやJavaScriptを使ってカスタムツールチップを作成することで改行が可能です。BootstrapやReactなどのフレームワーク対応方法も含め、改行可能なツールチップの実装方法や注意点を解説します。

watashi.xyz

2025.05.06