JavaScript

JavaScriptで改行する方法 - 初心者向けに\nの使い方を解説

JavaScriptで改行する方法を初心者向けに完全解説。\nの使い方からHTMLでの改行、実際の使用例まで分かりやすく説明します。

Learning Next 運営
約 16 分で読めます
JavaScript改行\n初心者基礎知識

みなさん、JavaScriptで文字列を扱う時に困ったことはありませんか？

「文字列の途中で改行したいけど、どうやればいいの？」「 って見かけるけど、これは何？」「HTMLに表示すると改行されない」

こんな疑問を抱いている初心者の方、きっと多いですよね。

実は、JavaScriptには改行を表現する特別な文字があります。 これをマスターすることで、見やすいメッセージやデータを表示できるようになるんです。

この記事では、JavaScriptで改行する方法を初心者向けに分かりやすく解説します。 基本的な改行文字の使い方から、HTMLでの改行まで、実例を交えて説明していきますよ！

改行文字「

」って何？基本を理解しよう

改行文字の正体

**改行文字「 」**は、文字列の中で改行を表すための特殊な文字です。

簡単に言うと、「ここで改行してください」という指示を表す記号なんです。 見た目は普通の文字のように見えますが、実際には改行という動作を指定する特別な役割があります。

これはエスケープシーケンスと呼ばれる文字の一つです。 は「New Line」の略で、文字通り新しい行を作る働きをします。

最初の改行例を見てみよう

最もシンプルな改行の例を見てみましょう。

console.log("1行目
2行目");

このコードを実行すると、以下のような出力になります。

1行目 2行目

の部分で改行が発生し、文字列が2行に分かれて表示されます。 とてもシンプルで分かりやすいですね。

様々な改行方法をマスターしよう

文字列リテラル内での改行

文字列の中に を挿入することで、任意の位置で改行できます。

let message = "こんにちは
私の名前は田中です
よろしくお願いします";
console.log(message);

実行すると、以下のような結果になります。

こんにちは 私の名前は田中です よろしくお願いします

この方法は、長い文章を整理して表示する際にとても便利です。 挨拶文やメッセージの作成でよく使われます。

複数の改行を使ってみよう

改行を複数回行いたい場合は、 を複数回使用します。

console.log("タイトル


内容がここに入ります




最後の行");

実行結果はこちらです。

タイトル 内容がここに入ります 最後の行

`

`で空白行を作ることができます。 文章にメリハリを付けたい時に便利ですね。

変数と組み合わせた改行

変数と改行文字を組み合わせて使用することもできます。

let name = "佐藤";
let age = 25;
let message = "名前: " + name + "
年齢: " + age + "歳";
console.log(message);

実行すると、以下のような結果になります。

名前: 佐藤 年齢: 25歳

この方法で、動的なデータを含む改行付きの文字列を作成できます。 ユーザー情報の表示などでよく使われるパターンです。

テンプレートリテラルで楽に改行しよう

バッククォートを使った方法

ES6以降では、**テンプレートリテラル（バッククォート）**を使ってより直感的に改行を表現できます。

let message = `1行目
2行目
3行目`;
console.log(message);

この方法では、実際にコード内で改行を書くことで、文字列内に改行が反映されます。 を書かなくても良いので、とても楽ですね。

変数の埋め込みと改行

テンプレートリテラルでは、変数の埋め込みと改行を同時に行うことができます。

let name = "山田";
let hobby = "読書";
let profile = `私の名前は${name}です。
趣味は${hobby}です。
よろしくお願いします。`;
console.log(profile);

実行結果はこちらです。

私の名前は山田です。 趣味は読書です。 よろしくお願いします。

この方法は、複雑な文字列を作成する際に特に有効です。 見た目も分かりやすく、メンテナンスしやすいコードが書けます。

HTMLでの改行を理解しよう

HTML要素への表示

JavaScriptでHTMLに文字列を表示する際、改行文字の扱いには注意が必要です。

// HTMLの要素を取得
let element = document.getElementById("myDiv");


// 改行文字を含む文字列
let text = "1行目
2行目
3行目";


// textContentを使用（改行は反映されない）
element.textContent = text;


// innerTextを使用（改行が反映される）
element.innerText = text;

HTMLでは、textContentを使用すると改行が無視されます。 一方、innerTextを使用すると改行が反映されます。

HTMLタグを使った改行

HTMLで確実に改行を表示したい場合は、<br>タグを使用します。

let message = "1行目<br>2行目<br>3行目";
document.getElementById("myDiv").innerHTML = message;

この方法では、ブラウザ上で確実に改行が表示されます。 Webページでの表示には、この方法がおすすめです。

改行文字をHTMLタグに変換しよう

改行文字をHTMLの<br>タグに変換する便利な方法があります。

function convertNewlinesToBr(text) {
    return text.replace(/
/g, '<br>');
}


let originalText = "1行目
2行目
3行目";
let htmlText = convertNewlinesToBr(originalText);
document.getElementById("myDiv").innerHTML = htmlText;

この関数を使うことで、改行文字をHTMLタグに簡単に変換できます。 ユーザーが入力したテキストをWebページに表示する際に便利です。

実践的な使用例を見てみよう

ユーザー入力の処理

フォームからの入力に含まれる改行を処理する例です。

function processUserInput(input) {
    // 改行で分割して配列にする
    let lines = input.split('
');
    
    // 各行を処理
    let processedLines = lines.map(line => {
        return line.trim(); // 前後の空白を除去
    });
    
    // 空の行を除去
    let filteredLines = processedLines.filter(line => line !== '');
    
    return filteredLines.join('
');
}


let userInput = "  行1  


  行2  
  行3  ";
let cleaned = processUserInput(userInput);
console.log(cleaned);

この例では、ユーザーの入力を整理して、きれいな形で表示します。 余分な空白や空行を取り除く処理が含まれています。

メッセージフォーマット機能

メッセージを見やすい形式にフォーマットする機能です。

function createNotification(title, message, timestamp) {
    return `【${title}】


${message}


送信時刻: ${timestamp}`;
}


let notification = createNotification(
    "システム通知",
    "メンテナンスのお知らせ
明日の午前2時から4時まで
システムメンテナンスを実施します",
    "2025-07-06 10:00:00"
);


console.log(notification);

この関数を使うことで、統一されたフォーマットの通知メッセージを作成できます。

よくある問題と解決方法

HTMLで改行が表示されない問題

HTMLで改行が表示されない場合の対処法です。

// 問題のあるコード
let text = "1行目
2行目";
document.getElementById("myDiv").innerHTML = text; // 改行されない


// 解決方法1: innerTextを使用
document.getElementById("myDiv").innerText = text;


// 解決方法2: brタグに変換
let htmlText = text.replace(/
/g, '<br>');
document.getElementById("myDiv").innerHTML = htmlText;


// 解決方法3: CSSのwhite-spaceを使用
document.getElementById("myDiv").style.whiteSpace = "pre-line";
document.getElementById("myDiv").textContent = text;

これらの方法を使うことで、HTMLでも改行を正しく表示できます。

異なるOS間での改行文字の違い

OSによって改行文字が異なることがあります。

// Windows: \r


// Unix/Linux/Mac: 


// 古いMac: \r


function normalizeLineBreaks(text) {
    // すべての改行文字を統一
    return text.replace(/\r
/g, '
').replace(/\r/g, '
');
}


let text = "行1\r
行2\r行3
行4";
let normalized = normalizeLineBreaks(text);
console.log(normalized);

この関数を使うことで、OS間の違いを吸収できます。 ファイルを扱う際やデータをやり取りする際に重要です。

セキュリティを考慮した改行処理

HTMLに表示する際は、特殊文字のエスケープに注意が必要です。

function escapeHtml(text) {
    return text
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}


function safeDisplayWithLineBreaks(text) {
    // まずHTMLエスケープ
    let escaped = escapeHtml(text);
    // その後改行をbrタグに変換
    return escaped.replace(/
/g, '<br>');
}


let userText = "1行目
<script>alert('危険')</script>
3行目";
let safeHtml = safeDisplayWithLineBreaks(userText);
document.getElementById("myDiv").innerHTML = safeHtml;

この方法で、セキュリティを保ちながら改行を表示できます。 ユーザーからの入力を表示する際は、必ずエスケープ処理を行いましょう。

改行を使ったプログラミングのコツ

読みやすいコードの書き方

改行を使った読みやすいコードの書き方です。

// 良い例：改行を使って構造を明確に
function createUserMessage(user) {
    return `ユーザー情報
    
名前: ${user.name}
年齢: ${user.age}歳
職業: ${user.job}


登録日: ${user.registrationDate}
最終ログイン: ${user.lastLogin}`;
}


// 悪い例：改行がないと読みにくい
function createUserMessage(user) {
    return `ユーザー情報 名前: ${user.name} 年齢: ${user.age}歳 職業: ${user.job} 登録日: ${user.registrationDate} 最終ログイン: ${user.lastLogin}`;
}

改行を適切に使うことで、情報が整理されて読みやすくなります。

エラーメッセージの表示

エラーメッセージを分かりやすく表示する方法です。

function showValidationErrors(errors) {
    let errorMessage = "入力内容にエラーがあります:


";
    
    errors.forEach((error, index) => {
        errorMessage += `${index + 1}. ${error}
`;
    });
    
    errorMessage += "
内容を確認して、再度お試しください。";
    
    alert(errorMessage);
}


let errors = [
    "名前が入力されていません",
    "年齢は数値で入力してください",
    "メールアドレスの形式が正しくありません"
];


showValidationErrors(errors);

この方法で、複数のエラーを分かりやすく表示できます。

まとめ

JavaScriptで改行する方法は、文字列操作の基本的で重要な技術です。

基本的なポイントをおさらいしましょう。

  • ** **は改行文字として使用する
  • テンプレートリテラルでより直感的に改行を表現
  • HTMLではinnerTextや<br>タグを使用
  • OS間の違いや特殊文字のエスケープに注意
  • 読みやすさを重視した改行の使用

実践で役立つテクニックも身につきました。

  • ユーザー入力の整理と処理
  • 改行文字のHTMLタグへの変換
  • セキュリティを考慮したエスケープ処理
  • エラーメッセージの見やすい表示

改行を使いこなすことで、より使いやすく読みやすいプログラムを作成できます。 特に、ユーザーとのやり取りやデータの表示において、改行の処理は欠かせません。

ぜひ実際のプロジェクトで改行処理を実装してみてください。 適切な改行の使い方をマスターすることで、より良いユーザー体験を提供できるようになりますよ！

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

文系出身や未経験者でもJavaScriptを習得できる？難易度と効率的な学習方法を詳しく解説。挫折しないための具体的なステップを紹介します。

2025年7月6日
12分

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

プログラミング初心者にもわかりやすく、JavaScriptの基本概念から学習方法まで30分で理解できる完全ガイド。今すぐプログラミングの世界に飛び込みましょう。

2025年7月6日
14分

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説

JavaScriptとは何かを初心者向けに5分で理解できるよう解説。歴史、特徴、学習方法まで2025年最新情報でわかりやすく紹介します。

2025年7月6日
9分