【JavaScript】alert内で改行する方法！\nの使い方や改行されない原因を解説

JavaScriptを使ってユーザーに通知を送る際、最も手軽な手段が alert()（アラート）です。
しかし、長い文章を表示しようとすると、一行が長くなりすぎて読みづらくなってしまうことがあります。

このような悩みを解決するために、この記事ではJavaScriptの alert における改行の仕組みを基礎から解説します。

また、現在ではJavaScriptでのalertが非推奨とされる場面が増えている理由や、おしゃれにカスタマイズする最新の代替案についても詳しく紹介します。

JavaScriptのアラートで改行する基本：改行コード「\n」

JavaScriptの標準機能である alert() で改行を実現するには、エスケープシーケンスと呼ばれる特殊な文字、改行コード「\n」を使用します。

HTMLのタグとは扱いが全く異なるため、正しい記述方法を学ぶことが重要です。

ここでは、文字列内での直接指定と、変数を使ったより柔軟な指定方法について解説します。

改行コード「\n」を使った基本的な記述例

最もシンプルな方法は、表示したい文字列の中に直接 \n を挿入することです。

// \n を使ってアラート内で改行する
alert("こんにちは！\n今日は良い天気ですね。\nシステムへようこそ。");

実行結果
ブラウザのダイアログが表示され、以下のように3行に分かれて表示されます。

こんにちは！
今日は良い天気ですね。
システムへようこそ。

このソースコードの意味を詳しく解説します。

JavaScriptにおいてバックスラッシュ（または円記号）とアルファベットを組み合わせた \n は、画面上にそのまま表示される文字ではなく、「ここで改行しなさい」という命令として機能します。

注意点として、バックスラッシュの向きが逆になっていたり、全角文字を使っていたりすると、単なる文字として扱われてしまうため、必ず半角で入力してください。

変数と文字列結合を組み合わせた改行方法

実務では固定のメッセージだけでなく、動的なデータに改行を加えたい場面が多くあります。

const userName = "田中";
const point = 1200;

// 文字列結合の中に改行コードを混ぜる
alert("【通知】\n" + userName + "様、現在のポイントは\n" + point + "pt です。");

// モダンな「テンプレートリテラル」を使う方法
alert(`【通知】
${userName}様、現在のポイントは
${point}pt です。`);

実行結果

【通知】
田中様、現在のポイントは
1200pt です。

上の例では、プラス演算子 + を使って、通常のテキスト、変数、そして改行コードを数珠つなぎに結合しています。

一方、下の例ではバッククォート（ ）で囲む「テンプレートリテラル」という機能を利用しています。

テンプレートリテラルの中では、コード上でEnterキーを押して改行した場所がそのままアラートの改行として反映されるため、\n を書く必要がなく、非常に直感的に記述できるのが大きなメリットです。

alertで改行されない・出ない時の原因と解決策

正しくコードを書いたつもりでも、alert内のメッセージが改行されないというトラブルに遭遇することがあります。

また、ブラウザの設定によってはalertが出ないという状態に陥ることも珍しくありません。

ここでは、初心者が特につまずきやすいポイントと、その解決方法について整理していきます。

HTMLタグ（）を使っていないかチェック

Web制作に慣れている人が最もやってしまいがちなミスが、<br> タグの使用です。

// 失敗例：<br>は機能しません
alert("一行目<br>二行目");

実行結果

一行目<br>二行目

alert() や confirm() などのダイアログは、HTMLではなくOSやブラウザが制御するプレーンテキストのみを表示する場所です。

そのため、ブラウザで改行を意味する <br> タグを記述しても、それはタグとして解釈されず、単なる「文字」としてそのまま表示されてしまいます。

改行したい場合は、必ず前述の \n またはテンプレートリテラルを使用するようにしてください。

Windows環境特有の改行コード（\r\n）について

環境によっては、\n だけでは不十分な場合や、データの読み込み元によって挙動が変わるケースがあります。

// Windows形式の改行コード
alert("Windows標準の改行です。\r\n正しく表示されます。");

MacやLinux環境では \n（LF）が主流ですが、Windowsの古いシステムやファイルデータでは \r\n（CR+LF）という形式が使われることがあります。

現代のブラウザは非常に優秀であるため、基本的には \n だけでどちらの環境でも改行されますが、外部のテキストファイルを読み込んでアラートに表示させる際に改行が反映されない場合は、この \r（復帰）が含まれているか、あるいは置換処理が必要かどうかを確認する必要があります。

標準alertの限界：カスタマイズと最新の設計思想

ここまで alert の改行方法を解説してきましたが、現代のモダンなWebサイトでは、標準の alert() はあまり使われなくなっています。

その理由は、デザインの自由度が低く、ユーザー体験を損なうリスクがあるからです。

ここでは、標準機能の限界と、それに代わるalertのカスタマイズの手法について触れていきます。

なぜ標準アラートは避けられるのか

標準の alert() には、主に以下の3つの問題点があります。

1. デザインが変更できない: ブラウザやOSに依存するため、サイトの世界観に合わせられません。
2. 処理を一時停止させる: アラートが出ている間、ユーザーはページ内の他の操作ができず、プログラムの実行も止まります。
3. 自動で閉じることができない: alertを自動で閉じるという機能は標準では存在せず、必ずユーザーにボタンを押させる手間が発生します。

こうした制約から、現在のフロントエンド開発では、HTMLとCSSで自作したモーダルウィンドウや、高機能なライブラリを使うのが一般的です。

自由自在にデザイン！SweetAlert2などの活用

アラートの内容を読みやすくし、改行やボタンの見た目を自由に変えたい場合は、外部ライブラリの導入が最も効率的です。

// SweetAlert2 を使った例
Swal.fire({
  title: '通知',
  html: '一行目<br><b>二行目（太字）</b>', // HTMLタグで改行や装飾が可能
  icon: 'info',
  timer: 3000, // 3秒後に自動で閉じる
  timerProgressBar: true
});

ライブラリを使用すると、本来 alert では不可能だった「HTMLタグによる改行（<br>）」や「文字の装飾」、「自動で閉じる設定」などが数行のオプション指定だけで実現します。

また、見た目が非常にモダンになるため、ユーザーに安心感を与えることができます。

実務レベルのプロジェクトであれば、標準の alert はデバッグ用（動作確認用）に留め、公開用にはこうしたカスタマイズされたUIを採用することを強く推奨します。

JavaScriptのスキルを活かして年収を上げる方法

以上、JavaScriptでalert内で改行する方法について詳しく解説してきました。