JavaScriptでalertダイアログの文章を改行する方法を現役エンジニアが解説【初心者向け】

2024-06-28

JavaScript アラートボックスに改行を入れる方法

方法 1: \n を使用する

最も一般的な方法は、改行コード \n を使用するものです。 \n は、文字列内に改行を挿入するエスケープシーケンスです。

alert("メッセージ1行目\nメッセージ2行目");

このコードを実行すると、次のアラートボックスが表示されます。

メッセージ1行目
メッセージ2行目

もう 1 つの方法は、HTML タグを使用する方法です。 HTML タグを使用すると、より多くの書式設定オプションを利用できます。

alert("<p>メッセージ1行目</p><p>メッセージ2行目</p>");

<p>メッセージ1行目</p>
<p>メッセージ2行目</p>

注意点

アラートボックスの幅は限られているため、改行を多用すると文字が折り返されてしまう可能性があります。
改行コード \n は、すべてのブラウザで同じように解釈されるとは限りません。古いブラウザでは、正しく表示されない場合があります。

上記以外にも、以下のような方法でアラートボックスに改行を入れることができます。

テンプレートリテラルを使用する
String.prototype.replace() メソッドを使用する

これらの方法は、より高度なテクニックであり、初心者にはおすすめできません。

JavaScript アラートボックスに改行を入れるには、\n を使用する方法と HTML タグを使用する方法があります。状況に合わせて適切な方法を選択してください。

方法 1: \n を使用する

function showAlertWithNewline() {
  alert("メッセージ1行目\nメッセージ2行目\nメッセージ3行目");
}

showAlertWithNewline();

メッセージ1行目
メッセージ2行目
メッセージ3行目

方法 2: HTML タグを使用する

function showAlertWithHtmlTags() {
  alert("<p>メッセージ1行目</p><p>メッセージ2行目</p><p>メッセージ3行目</p>");
}

showAlertWithHtmlTags();

<p>メッセージ1行目</p>
<p>メッセージ2行目</p>
<p>メッセージ3行目</p>

function showAlertWithTemplateLiteral() {
  alert(`メッセージ1行目
  メッセージ2行目
  メッセージ3行目`);
}

showAlertWithTemplateLiteral();

function showAlertWithReplaceMethod() {
  const message = "メッセージ1行目\nメッセージ2行目\nメッセージ3行目";
  alert(message.replace(/\n/g, "<br>"));
}

showAlertWithReplaceMethod();

これらのコードは、それぞれ異なる方法で改行を挿入します。どの方法を使用するかは、状況に合わせて選択してください。

JavaScript アラートボックスに改行を入れるその他の方法

テンプレートリテラルは、バッククォート () で囲まれた文字列リテラルです。テンプレートリテラルを使用すると、改行を含む文字列を簡単に記述することができます。

alert(`メッセージ1行目
メッセージ2行目
メッセージ3行目`);

利点:

コードが簡潔で読みやすい
改行を挿入するのが簡単

比較的新しく、古いブラウザではサポートされていない場合がある

String.prototype.replace() メソッドは、文字列の一部を別の文字列に置き換えるために使用されます。このメソッドを使用して、改行コード (\n) を HTML ブレークタグ (<br>) に置き換えることができます。

const message = "メッセージ1行目\nメッセージ2行目\nメッセージ3行目";
alert(message.replace(/\n/g, "<br>"));

柔軟性があり、さまざまな種類の改行処理に使用できる

DOMParser は、HTML 文字列を DOM ツリーに変換するために使用されます。この方法を使用して、HTML 文字列を作成し、それをアラートボックスに表示することができます。

const parser = new DOMParser();
const doc = parser.parseFromString("<p>メッセージ1行目</p><p>メッセージ2行目</p><p>メッセージ3行目</p>", "text/html");
alert(doc.body.innerHTML);