JavaScriptでアラート内のメッセージに改行を入れる方法10選

●アラートでの改行の基本

JavaScriptでアラートを表示するときに、メッセージ内で改行したいというニーズは多いと思います。

アラートでの改行は、実はいくつか方法があるんです。

ここでは、alert()関数を使った基本的な改行の仕方と、メッセージを変数に入れる方法を紹介していきます。

○alert()での改行の仕方

alert()関数は、ブラウザ上にポップアップウィンドウを表示するための関数です。

この関数に文字列を渡すことで、メッセージを表示できます。

では、このメッセージ内で改行を入れるにはどうすればいいのでしょうか。

□サンプルコード1：改行コード\nを使う

alert()関数に渡す文字列内で、改行したい箇所に改行コード「\n」を入れることで改行できます。

次のようなコードを実行してみましょう。

alert("こんにちは！\nJavaScriptの改行の仕方を学びましょう。");

実行結果は次のようになります。

こんにちは！
JavaScriptの改行の仕方を学びましょう。

このように、「\n」を使うことでアラートのメッセージ内に改行を入れることができました。

ただ、「\n」という文字列がそのまま見えてしまうのは少し見栄えが悪いですよね。

□サンプルコード2：HTMLタグを使う

実は、alert()関数ではHTMLタグも使えるんです。

改行したい箇所にタグを入れることで、より自然な改行ができます。

先ほどのコードを次のように変えてみましょう。

alert("こんにちは！<br>JavaScriptの改行の仕方を学びましょう。");

実行結果は次のようになります。

こんにちは！
JavaScriptの改行の仕方を学びましょう。

先ほどと同じように改行されていますが、コード内に「\n」が見えなくなりました。

HTMLタグを使うことで、より読みやすいコードになりましたね。

○alert()のメッセージを変数にする

先ほどの例では、alert()関数に直接文字列を渡していましたが、メッセージが長くなると少し見づらくなってきます。

そこで、メッセージを変数に入れてから、その変数をalert()に渡す方法を紹介します。

□サンプルコード3：テンプレートリテラルを使う

ES6から導入されたテンプレートリテラルを使うと、文字列内で改行やJavaScriptの式を使えるようになります。

次のようなコードを見てみましょう。

const message = `こんにちは！
JavaScriptの改行の仕方を学びましょう。
現在の時刻は${new Date().toLocaleString()}です。`;

alert(message);

実行結果は次のようになります。

こんにちは！
JavaScriptの改行の仕方を学びましょう。
現在の時刻は2023/6/6 12:34:56です。

テンプレートリテラルを使うことで、文字列内で直接改行ができるようになりました。

また、${}内にJavaScriptの式を書くことで、動的な値も埋め込めるようになります。

●JavaScriptでの改行のコツ

前章では、alert()関数を使ってアラートにメッセージを表示し、その中で改行を入れる方法を学びました。

JavaScriptには改行に関するいくつかの便利な機能があるので、ここではそれらを掘り下げていきましょう。

改行コードや正規表現、テンプレートリテラルなど、JavaScriptならではの改行テクニックを身につけると、コーディングの幅が広がりますよ。

○改行コード\nとは

皆さん、改行コード「\n」ってご存知ですか？

これは、プログラミングの世界では特別な意味を持つエスケープシーケンスの一つなんです。

「\n」は「LF」(Line Feed)とも呼ばれ、文字列内で改行を表現するために使われます。

WindowsではCRLF（\r\n）が改行コードとして使われることもありますが、基本的には「\n」を覚えておけばOKです。

○正規表現で改行を置換

正規表現は、文字列のパターンを表現するための強力な武器です。

JavaScriptでは、正規表現を使って文字列を検索したり、置換したりできます。

例えば、文字列内の改行を別の文字列に置換してみましょう。

□サンプルコード4：replaceで改行を<br>に置換

文字列の置換には、String.prototype.replace()メソッドを使います。

第一引数に正規表現、第二引数に置換後の文字列を渡します。

const message = "こんにちは！\nJavaScriptの改行の仕方を学びましょう。";
const replacedMessage = message.replace(/\n/g, "<br>");

console.log(replacedMessage);

実行結果

こんにちは！<br>JavaScriptの改行の仕方を学びましょう。

正規表現の/\n/gは、文字列内の全ての改行コード「\n」にマッチします。

これを「<br>」に置換することで、HTMLの改行タグに変換できました。

正規表現を使えば、柔軟な文字列操作ができるようになりますね。

○改行を含む文字列の扱い方

JavaScriptでは、バッククオート(`)を使ったテンプレートリテラルという機能があります。

これを使うと、文字列内で改行を直接表現できるんです。

先ほど紹介したテンプレートリテラルをもう一度見てみましょう。

□サンプルコード5：バッククオートによる複数行文字列

const message = `こんにちは！
JavaScriptの改行の仕方を学びましょう。
現在の時刻は${new Date().toLocaleString()}です。`;

console.log(message);

実行結果

こんにちは！
JavaScriptの改行の仕方を学びましょう。
現在の時刻は2023/6/6 12:34:56です。

バッククオートで囲んだ文字列は、そのまま改行を含めて表現できます。

しかも、${式}という形式で変数や式の値を埋め込むこともできるんです。

これは、長い文字列を扱う際に特に便利ですよ。

●アラートのカスタマイズ

ここまで、JavaScriptのアラートに改行を入れる基本的な方法と、改行に関連するちょっとしたテクニックを解説してきました。

でも、実はアラートってもっといろいろカスタマイズできるんです。

自動で閉じるアラートや、サイズを変更したアラート、OKボタンの制御など、アラートを自分好みに調整する方法を見ていきましょう。

ユーザーフレンドリーなアラートを作れるようになれば、Webアプリの満足度もグッと上がります。

○自動で閉じるアラート

通常のアラートは、ユーザーがOKボタンを押すまで画面に表示され続けます。

でも、時間が経ったら自動的にアラートを閉じたい場合もありますよね。

そんなときは、setTimeout()関数を使って一定時間後にアラートを閉じるようにしましょう。

□サンプルコード6：setTimeout()を使う

// 3秒後にアラートを自動で閉じる
setTimeout(() => {
  alert("3秒経ったので、このアラートは自動で閉じます。");
}, 3000);

実行結果

（アラートが表示され、3秒後に自動で閉じる）

setTimeout()関数の第一引数には、一定時間後に実行したい処理を関数として渡します。

第二引数には、遅延時間をミリ秒単位で指定します。

ここでは、3000ミリ秒（3秒）後にアラートを表示し、すぐに閉じるようにしています。

自動で閉じるアラートを使えば、ユーザーを待たせることなくスムーズな操作が可能になります。

○アラートのサイズ変更

アラートのサイズって、変更できるのをご存知でしたか？実は、CSSを使ってアラートのスタイルを調整できるんです。

アラートのサイズを変更して、メッセージをより見やすく表示してみましょう。

□サンプルコード7：CSSでアラートをカスタマイズ

<style>
  /* アラートのスタイルを変更 */
  .custom-alert {
    width: 300px;
    height: 200px;
    font-size: 18px;
    color: #ff0000;
  }
</style>

<script>
  // カスタムアラートを表示
  window.alert = function(message) {
    const div = document.createElement("div");
    div.className = "custom-alert";
    div.innerHTML = message;
    document.body.appendChild(div);
  };

  alert("カスタムアラートのサンプルです。\nサイズと文字色を変更しています。");
</script>

実行結果

（幅300px、高さ200pxの赤色文字のアラートが表示される）

まず、<style>タグ内でアラートのスタイルを定義します。ここでは、幅、高さ、フォントサイズ、文字色を変更しています。

次に、window.alert関数を上書きして、カスタムアラートを表示するようにします。

document.createElement()でdiv要素を作成し、クラス名とメッセージを設定して、document.bodyに追加しています。

こうすることで、標準のアラートではなく、カスタマイズしたアラートが表示されるようになります。

○アラートのOKボタンを制御

アラートのOKボタンを押したときの動作って、カスタマイズできるのをご存知ですか？

OKボタンをクリックしたときに、特定の処理を実行したり、ページを遷移させたりできるんです。

アラートをもっとインタラクティブにしてみましょう。

□サンプルコード8：OKボタンクリック時の処理

// OKボタンがクリックされたら、指定したURLに遷移する
const result = window.confirm("OKボタンを押すと、Googleのトップページに遷移します。");

if (result) {
  window.location.href = "https://www.google.com/";
}

実行結果

（confirmダイアログが表示され、OKボタンを押すとGoogleのトップページに遷移する）

ここでは、window.confirm()関数を使ってOKボタンとキャンセルボタンを持つダイアログを表示しています。

OKボタンがクリックされると、result変数にtrueが格納されます。

if文でresultがtrueかどうかを判定し、trueの場合はwindow.location.hrefプロパティを使って指定したURLに遷移します。

このように、アラートやダイアログを使って、ユーザーとのインタラクションを実現することができます。

●GASでの改行

さて、ここまでJavaScriptでアラートに改行を入れる方法を詳しく見てきました。

でも、皆さん、Google Apps Script（GAS）ってご存知ですか？

GASは、Googleのサービスを拡張したり自動化したりするためのスクリプト言語なんです。

実は、GASでもアラートや文字列の改行を扱うことができるんですよ。

ここでは、GASならではの改行テクニックを2つ紹介しましょう。

○GASでの改行コード

GASは基本的にJavaScriptがベースになっているので、改行コードの扱い方はほとんど同じです。

つまり、「\n」を使えば改行ができるんですね。

でも、GASならではの使い方もあるんです。例えば、ログ出力時に改行を入れたいときなんかは、GASのLogger.log()メソッドが便利ですよ。

□サンプルコード9：GASで改行コードを使う

function logMessage() {
  const message = "こんにちは！\nGASでの改行の仕方を学びましょう。";
  Logger.log(message);
}

実行結果

こんにちは！
GASでの改行の仕方を学びましょう。

Logger.log()メソッドに改行を含む文字列を渡すことで、ログ出力時に改行が反映されます。

GASでは、ログ出力はデバッグやエラーチェックに欠かせない機能なので、改行を使って見やすく整形しておくと便利ですよ。

○GASでHTMLメールを送信

GASのもう一つの強力な機能が、メール送信です。

GASを使えば、Gmailのアカウントから自動でメールを送ることができるんです。

しかも、HTMLメールも送れるので、改行やら書式やらを自由自在に設定できちゃいます。

□サンプルコード10：HTML形式のメールを送る

function sendHtmlMail() {
  const recipient = "test@example.com";
  const subject = "HTML形式のメールです";
  const body = `
    <p>こんにちは！</p>
    <p>HTML形式のメールを送ってみましょう。<br>
    改行やら書式やらを自由自在に設定できます。</p>
    <p>GASからのメール送信、便利ですよね。</p>
  `;

  GmailApp.sendEmail(recipient, subject, body, {htmlBody: body});
}

実行結果

（指定した宛先にHTML形式のメールが送信される）

GmailApp.sendEmail()メソッドを使ってメールを送信します。第一引数から順に、宛先、件名、本文を指定します。

第四引数のオプションでhtmlBodyプロパティを指定することで、HTML形式の本文を送ることができます。

本文内では、HTMLタグを使って自由に改行や書式設定ができるので、見栄えのいいメールが作れますね。

●よくあるエラーと対処法

JavaScriptやGASで改行を扱う際、ちょっとしたミスでエラーに遭遇することがあります。

ここでは、よくあるエラーとその対処法を3つ紹介します。

きっと、皆さんも似たような経験があるのではないでしょうか。

エラーに負けずに、一緒に乗り越えていきましょう！

○alert()での改行が反映されない

まずは、alert()での改行が反映されないケースから見ていきましょう。

こんなコードを書いたのに、改行されないって、悩んだことありませんか？

alert("こんにちは！\nJavaScriptの改行の仕方を学びましょう。");

実は、改行コード「\n」を使っているのに改行されないのは、JavaScriptの文字列がシングルクォートかダブルクォートで囲まれているからなんです。

この場合、「\n」はエスケープシーケンスとして認識されず、そのまま文字列の一部になってしまいます。

対処法は簡単。シングルクォートやダブルクォートの代わりに、バッククォート（`）で文字列を囲むことです。

こうすることで、「\n」が改行として正しく認識されるようになります。

alert(`こんにちは！\nJavaScriptの改行の仕方を学びましょう。`);

○文字列内の\nがそのまま表示される

似たような症状で、文字列内の「\n」がそのまま表示されてしまうケースもあります。

例えば、HTMLの要素のtextContentに文字列を設定する際などですね。

const element = document.getElementById("my-element");
element.textContent = "こんにちは！\nJavaScriptの改行の仕方を学びましょう。";

この場合、「\n」はHTMLでは改行として認識されないため、そのまま表示されてしまいます。

対処法としては、「\n」をHTMLの改行タグ「<br>」に置き換えることです。

正規表現を使って置換すると、こんな感じになります。

const element = document.getElementById("my-element");
const message = "こんにちは！\nJavaScriptの改行の仕方を学びましょう。";
element.innerHTML = message.replace(/\n/g, "<br>");

正規表現の/\n/gは、文字列内の全ての「\n」にマッチします。

これを「br>」に置換することで、HTMLでも改行が反映されるようになります。

ただし、textContentではなくinnerHTMLを使う点に注意してくださいね。

○関数内の改行が無視される

最後は、関数内の改行が無視されるケースです。

こんなコードを見たことはありませんか？

function greet() {
  const message = "こんにちは！
  JavaScriptの改行の仕方を学びましょう。";
  alert(message);
}

このコードでは、messageの値を複数行に渡って定義しようとしていますが、JavaScriptでは関数内の改行が無視されるため、エラーになってしまいます。

対処法は、バッククォートを使ったテンプレートリテラルを使うことです。

テンプレートリテラルなら、複数行に渡る文字列を直感的に記述できます。

function greet() {
  const message = `こんにちは！
  JavaScriptの改行の仕方を学びましょう。`;
  alert(message);
}

バッククォートで囲むことで、関数内の改行もそのまま文字列の一部になります。

これなら、複数行の文字列も簡単に扱えますね。

まとめ

JavaScriptやGASでアラートに改行を入れる様々な方法を学び、アラートのカスタマイズやエラー対処法も解説してきました。

実際のプロジェクトでアラートを活用し、ユーザーフレンドリーなメッセージを表示することで、Webアプリの印象が向上するでしょう。

今回学んだことを土台に、JavaScriptやGASの奥深い世界にさらに踏み込み、試行錯誤しながら成長を続けていきましょう。