catch-img

JavaScriptでの改行の使い方。改行ができないときは?

JavaScriptで文字列を改行するためのコードと、具体的な使い方について解説します。併せて、改行がうまくいかない場合の対処法や、改行をもっとシンプルに行えるテンプレートリテラルの使い方についても紹介しますので、参考にしてください。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

目次[非表示]

  1. 1.文字列の途中で改行してみよう
    1. 1.1.OSによって使われる改行コードが異なる
    2. 1.2.バックスラッシュの打ち方
  2. 2.改行コードの使用例
    1. 2.1.confirm、alertダイアログ
    2. 2.2.改行コードを置換するreplace
  3. 3.改行されないときの対処法
    1. 3.1.HTMLとしての改行はbrタグに置き換え
    2. 3.2.PHPに書く場合は\\nを利用する
  4. 4.便利なテンプレートリテラル
    1. 4.1.バッククオートを使って改行
    2. 4.2.バッククオートの打ち方
  5. 5.改行の表現を覚え上手に使いこなそう

文字列の途中で改行してみよう

JavaScriptにかかわらず、プログラミングではテキストのようにエンターキーによる改行で文字列が改行されることはありません。

ジョブサポートのフロントエンド(HTML5・CSS・JavaScript)講座でも指導していますが、長い文字列はコードの読みにくさにもつながります。改行は適度に行う必要があるでしょう。

プログラミングによって改行方法は異なりますが、今回はJavaScriptに焦点を当てて改行方法について見ていきましょう。

OSによって使われる改行コードが異なる

OSごとに使われる文字コードや改行コードは異なります。OSごとの改行コードは次の通りです。

Unix
\r
mac(OS X)
\n
mac(OS 9より前) 
 \r
Windows
\r\n

Windowsでは「\n」と打つと1行目の文字が消えてしまうだけの結果になってしまうことがあるので注意しましょう。

バックスラッシュの打ち方

「 \」はバックスラッシュと読みます。「バックスラッシュ」と打っても変換はされません。

具体的な方法ですが、欧文フォントであれば半角の「¥」を押すと「\」に変換されるので、まずそちらから確認しましょう。

IMEを半角モードにしてキーボードの 「ろ」キーを押すという方法もありますが、基本的にはプログラミングでは欧文フォントを使う方が簡単です。欧文フォントに設定を変更することで対応しましょう。

■関連記事

  JavaScriptにおける引数の基本的考え方と関数への渡し方 | Java・フロントエンド研修のジョブサポート プログラミングにおいて、引数に対する理解は必須です。JavaScriptにおける引数の基本的な考え方や関数への渡し方を、実際のサンプルコードを見ながら理解していきましょう。引数をマスターすることが、JavaScript習得への近道です。 Java・フロントエンド研修のジョブサポート


改行コードの使用例

改行コードの使用について、実際のコードをみながら解説していきます。

全国の若手~ベテランエンジニアが受講している個別指導のオンライン・リモート講座(入門5日・基礎10日)はこちら

confirm、alertダイアログ

confirmダイアログとalertダイアログは、確認を促すことを目的としたダイアログです。confirmダイアログは「はい/いいえ」をユーザーが選択できるダイアログ、alertはできないものと覚えておきましょう。

ホームページを移動する際に「今のページから移ってしまってもよろしいですか?」などの表示を見たことがあるでしょう。あのメッセージはこれらのダイアログの働きによるものです。

この2つは働きも書き方もよく似ています。

confirm(確認の内容);

alert(確認の内容);

という記述で、メッセージ内容を指定します。

confirm("別のサイトへ移動します。\nよろしいですか?");

このように記載すると、メッセージは以下のように表示されます。

別のサイトへ移動します。
 よろしいですか?

改行コードを置換するreplace

文字列の改行コードを残したまま置換するには「replaceメソッド」を使います。書き方は以下の通りです。

var str = "おはようございます。\n いい天気ですね";
var comment = str.replace( '\n', '' );
console.log(comment);

これは2行目の「var comment~」で「\n」を空白に置き換えるという命令をしています。replaceメソッドは便利なので覚えておくと良いでしょう。

■関連記事

  JavaScriptの戻り値に困ったら。基本ルールを丁寧に解説 | Java・フロントエンド研修のジョブサポート JavaScriptには戻り値(もどりち)を返すためのreturn文があります。戻り値を適切に使えるようになると、JavaScriptでできることが増えます。戻り値の基本ルールに加え、エラーを吐いた場合の対処法について解説します。 Java・フロントエンド研修のジョブサポート


改行されないときの対処法

「\n」を記載しているのに改行されないばかりか、「\n」が出力された文章に記述されてしまうこともあります。そのような場合の対処法について解説しましょう。

簡単なWebサイトの改修の内製化を目指すフロントエンド(HTML・CSS・JavaScript)入門5日はこちら

HTMLとしての改行はbrタグに置き換え

ホームページの記述などに使うマークアップ言語「HTML」では、改行に「br」というタグを使います。ホームページのコードを記載していて「\n」がそのまま表示されている場合は、「br」に置き換えなければなりません。

あるいは別の方法として、コードの中に<script>タグを埋め込むという方法もあります。<script>は、タグの範囲内でJavaScriptを使用するための命令文です。

HTMLとJavaScriptは同じ場所で記載することがあるため、書き方に気をつけましょう。

PHPに書く場合は\\nを利用する

PHP内に記述する場合、\nではエディタによって表示がおかしくなることがあります。そのため、\\nという書き方を利用しましょう。

<?php echo '<script type="text/javascript">alert("別のページに飛びます。\\n確認してください");</script>'; ?>

このように使いますので、覚えておきましょう。

■関連記事

  基礎から学ぶJavaScript研修。プランやカリキュラム解説 | Java・フロントエンド研修のジョブサポート JavaScriptに関して知識があまりなく、どのような研修を行えばエンジニアやエンジニアを目指す従業員に効果的か分からない人事の方もいるでしょう。この記事では、研修の具体的なプランやカリキュラムについて解説していきます。 Java・フロントエンド研修のジョブサポート


便利なテンプレートリテラル

テンプレートリテラルの使い方についても覚えておきましょう。

わざわざ「\n」などの改行タグを使わなくても、テキストと同じ要領で改行することができます。

若手、新人エンジニアの成長を阻む 人材育成5つの失敗と解決策はこちら

バッククオートを使って改行

テンプレートリテラルの使い方はシンプルです。従来、文字列などを記述するのには「"」や「'」を使っていましたが、これを「`」(バッククオート)にするだけです。

var comment = "おはようございます。\n いい天気ですね";

var comment = `おはようございます。
いい天気ですね`;

上記2つの文章は、同じ内容で出力されます。

バッククオートの打ち方

バッククオートの打ち方は下記の通りです。

  • Mac…USキーボードの場合は[ Option ] + [ ~ ]、JISキーボードの場合は [ Shift] + [ @ ]
  • Windows…[ Shift] + [ @ ]

■関連サイト

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


改行の表現を覚え上手に使いこなそう

文字列の改行はプログラム言語によって異なります。JavaScriptの場合は「\n」を使うのが一般的な改行です。HTMLやPHPと同じ場所に記述する場合は、それぞれの改行方法と混同しないように気をつけましょう。

また、テキストのように改行できるテンプレートリテラルを覚えておくと便利です。改行することでコードを見やすくして、エラーの発生防止などにつなげることができます。

学歴、学部による「IT知識」「基礎知識」の格差を無くす個別指導の新人研修プロエンジニア育成コース(Java2・3ヶ月コース)はこちら


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。