【2026年8月最新】JavaScriptで文字列を改行する方法|「\n」がHTMLで改行されない罠とCRLF/LF変換|非エンジニアでもClaude Codeで直せる

【2026年8月最新】JavaScriptで文字列を改行する方法|「\n」がHTMLで改行されない罠とCRLF/LF変換|非エンジニアでもClaude Codeで直せる

お問い合わせフォームのテキストエリアに、お客様が改行を入れて入力してくれたはずなのに、管理画面や通知メールでは「1行の長文」につながって表示されてしまう。あるいは、Excelで作った顧客データをWebシステムに取り込んだら、改行が入っているはずのメモ欄がなぜか崩れて読めない——こうした経験はないでしょうか。

原因を調べてシステム担当やエンジニアに聞くと、「JavaScriptの\n(改行コード)の扱いですね」という答えが返ってくることがよくあります。JavaScriptにおける文字列の改行は、プログラミングを知らない人にとって「行を変える記号」という程度のイメージしかありませんが、実務でこの仕組みを正しく理解していないと、フォームの表示崩れ・CSV取り込みエラー・チャットウィジェットの改行消失といった、地味だが業務を止めるトラブルの原因になります。

この記事では、非エンジニアの経営者・管理職の方でも仕組みを理解できるよう、業務の比喩を交えながらJavaScriptの改行の扱いを解説します。さらに後半では、JavaScriptの文法を一切知らない状態でも、Claude Codeに日本語で指示するだけで「なぜ改行が崩れるのか」を診断してもらう実演を公開します。

代表菅澤 代表菅澤
この記事にたどり着いた方の多くは、自分でJavaScriptを書きたいというより「フォームの改行がなぜか消える」「メールに転記すると改行がズレる」という現場の違和感を解消したい方だと思います。今日はコードを深く読み込まなくても、改行コードの正体を業務の言葉で理解してもらいます。
AI鬼管理山崎 AI鬼管理山崎
そしてもうひとつ。この記事の後半では、JavaScriptをまったく知らない菅澤が、Claude Codeに日本語で指示するだけで「フォームの改行が画面に反映されない」原因を突き止め、直してもらう様子をそのまま公開します。「\nを書ける」ことと「表示崩れの原因を突き止める」ことは、実は別の話だという実例です。

この記事を最後まで読むと、次の6つが明確になります。

✔️改行コード(\n)が具体的に何を表しているのか、業務の比喩で理解できる
✔️\nを書いてもブラウザ画面では改行されないという、多くの人が引っかかる罠とその直し方
✔️Windows(CRLF)・Mac/Linux(LF)で改行コードが違うことによる、データ不一致の正体
✔️\nを<br>に変換する方法と、より安全な代替手段(CSSのwhite-space)
✔️弊社GENAIの実運用データから見る、表示崩れ調査をAIに任せた場合の効果
✔️JavaScript未経験でもClaude Codeに日本語で指示するだけで、改行崩れの原因を突き止める方法
Claude Code 完全解説セミナー|経営者・会社役員専用 1on1 60分 無料Claude Codeを経営に活かしたい方へ — AI鬼管理
📌 この記事の結論
【2026年8月最新】JavaScriptで文字列を改行する方法|「\n」がHTMLで改行されない罠とCRLF/LF変換|非エンジニアでもClaude Codeで直せる
JavaScriptで文字列に改行を入れる「\n」の使い方から、ブラウザ画面では改行が反映されない罠、への変換方法、Windows/Mac間のCRLF・LF違いが引き起こすデータ不一致まで解説。非エンジニアがClaude Codeでフォームやチャットの改行崩れを直す方法も紹介します。

01 改行コードとは何か 業務でいう「ここで行を変えてください」という合図に近い

まず結論から言うと、改行コードとは「ここで行を変えてください」という指示を、コンピュータが理解できる形で文字列の中に埋め込んだものです。私たちが目で見る「改行」は、実際のデータの中では見えない特殊な1文字(または2文字の組み合わせ)として保存されています。JavaScriptでは、この改行を表す記号として\n(バックスラッシュ + n)を使います。

業務の場面に置き換えて考えてみましょう。紙の書類に手書きで文章を書くとき、私たちは「ここで行を変える」という判断を目で見ながら自然に行っています。ところがコンピュータの中の文字列は、単なる文字の羅列(データ)でしかないため、「ここで行が変わる」ということを明示的に伝える目印が必要になります。その目印の役割を果たしているのが\nという改行コードです。

📚 用語解説

改行コード(かいぎょうコード):文字列の中で「ここで行を変える」ことを表す、目には見えない特殊な文字(制御文字)。JavaScriptを含む多くのプログラミング言語では\n(LF、ラインフィード)という記号で表現される。画面上には表示されないが、文字列の中には確かに1文字分として存在しており、文字数のカウントにも含まれる。

この「見えない目印」という性質が、この記事全体を通して重要になります。以下の図は、改行コードが業務システムのどの段階で意識されるかを示したものです。

①人間が
改行して入力

フォーム・Excel・
チャットなど
②内部的に
改行コードが挿入

目には見えない
\nという文字
③保存・転送
DB保存・
メール送信など
④画面や
他システムで表示

改行が
正しく再現されるか

この「④画面や他システムで表示」の段階で、改行コードが正しく解釈されずに表示が崩れる、というのが本記事のテーマです。改行コードそのものは単純な仕組みですが、「どこで作られたか」「どこで表示されるか」の組み合わせによって挙動が変わるため、原因の切り分けには一定の知識が必要になります。

💡 経営者向けの一言まとめ

改行コードは「行を変える機能」ではなく「行を変えてほしいという意思表示を、データの中に見えない形で保存しておく仕組み」です。システム担当が「改行コードの問題ですね」と言ったときは、「見えない目印の解釈がどこかでズレています」というニュアンスだと捉えるとほぼ間違いありません。

02 JavaScriptで文字列に改行を入れる基本の書き方 「\n」とテンプレートリテラルの2つの書き方

JavaScriptで文字列の途中に改行を入れる方法は、大きく分けて2種類あります。ひとつはエスケープシーケンスと呼ばれる\nを直接書き込む方法、もうひとつはバッククォート(`)で囲むテンプレートリテラルの中で実際に改行キーを押して書く方法です。

// 方法1: エスケープシーケンス「\n」を書く
const message1 = "こんにちは\n田中様\nお世話になっております";

console.log(message1);
// コンソール(実行結果を表示する画面)では、以下のように改行されて表示される:
// こんにちは
// 田中様
// お世話になっております

📚 用語解説

エスケープシーケンス:文字列の中で、そのままでは入力・表現できない特殊な意味を持つ文字を表すための書き方。バックスラッシュ(\)に続けて特定の文字を書くことで、改行(\n)・タブ(\t)・ダブルクォート自体(\")などを表現できる。「エスケープ」は英語で「抜け出す」という意味で、通常の文字としての解釈から抜け出して特別な意味を持たせる、というニュアンス。

もうひとつの方法が、ES2015(2015年に追加されたJavaScriptの仕様)以降で使えるテンプレートリテラルです。シングルクォート(')やダブルクォート(")の代わりにバッククォート(`)で文字列を囲むと、その中に実際の改行キーで改行を書き込めます。

// 方法2: テンプレートリテラル(バッククォート)の中で実際に改行する
const message2 = `こんにちは
田中様
お世話になっております`;

console.log(message2 === message1);
// 出力: true
// 見た目の書き方は違うが、できあがる文字列としては同じ(\nを含む文字列)になる

📚 用語解説

テンプレートリテラル:バッククォート(`)で文字列を囲む、ES2015以降のJavaScriptの書き方。改行をそのまま書き込めることに加え、${変数名}という書き方で文字列の中に変数の値を埋め込める(テンプレート機能)のが特徴。「〇〇様\n\nお世話になっております」のような定型文をコードの中で組み立てる場面でよく使われる。

✔️短い文字列やログメッセージ → \n(エスケープシーケンス)で書くのが一般的
✔️長い定型文やメールテンプレート → テンプレートリテラル(バッククォート)で改行を直接書く方が読みやすい
✔️変数の値を文中に埋め込みたい → テンプレートリテラルの ${変数名} が便利
✔️どちらの書き方でも、できあがる文字列の中身(\nという改行コード)は同じ
AI鬼管理山崎 AI鬼管理山崎
テンプレートリテラルは、Excelでいう「セル内改行(Alt+Enter)」に近い感覚で捉えると分かりやすいです。見た目のまま改行を書けるので、長い定型文を組み立てるときはこちらの方が直感的だと感じます。

03 【最重要】「\n」を使ってもブラウザ画面では改行されない罠 コンソールでは改行されるのに、Webページでは1行につながる理由

ここが、この記事で最も伝えたいポイントです。前章のコード例のように、\nを使えば文字列の中には確かに改行が含まれます。ところが、その文字列をWebページの画面上にそのまま表示しようとすると、改行が反映されず1行につながって表示されるという現象が起きます。多くのフォーム表示崩れ・チャット表示崩れの正体はここにあります。

const message = "こんにちは\n田中様\nお世話になっております";

// textContentでHTML要素に文字列を挿入する
document.getElementById("preview").textContent = message;

// 【結果】画面上では改行されず、以下のように1行につながって表示される:
// 「こんにちは 田中様 お世話になっております」
//
// ※ message自体には\n(改行コード)が3箇所含まれている。
//   「文字列の中身」と「画面での見た目」は別物であるという点が最大の落とし穴。
⚠️ なぜ改行が消えたように見えるのか

HTML(Webページを組み立てる言語)は、デフォルトの設定(white-space: normal)では、文字列の中の改行やスペースの連続を「無視して1つの半角スペースにまとめる」という仕様になっています。これはJavaScriptのバグではなく、HTML/CSSの標準的な仕様です。そのため、\nを含む文字列をそのまま画面に表示させようとしても、ブラウザ側が改行を「意味のない空白」として扱ってしまい、結果として1行につながって見えます。

この仕様を知らないと、「JavaScriptで改行を入れたはずなのに、なぜかWebページでは改行されない」という現象に何度も遭遇することになります。解決策は大きく分けて2つあります。

3-1. 解決策1:\nを
タグに変換してから表示する

ひとつ目の解決策は、\n(JavaScriptの改行コード)を、HTMLが改行として認識する<br>タグに変換してから画面に挿入する方法です。

const message = "こんにちは\n田中様\nお世話になっております";

// 1. まずHTMLとして特別な意味を持つ文字(&,<,>)をエスケープする(安全対策)
const escaped = message
  .replace(/&/g, "&amp;")
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;");

// 2. その後に \n を <br> タグへ変換する
const htmlSafe = escaped.replace(/\n/g, "<br>");

document.getElementById("preview").innerHTML = htmlSafe;
// 【結果】<br>タグによって、画面上でも正しく改行されて表示される

📚 用語解説

innerHTML と textContent の違い:どちらもJavaScriptからHTML要素の中身を書き換える手段だが、性質が異なる。textContentは文字列を「ただの文字」として挿入するため<br>と書いても改行タグとして機能せず、そのまま文字として表示される。innerHTMLは文字列を「HTMLのコードとして」解釈するため<br>が本物の改行タグとして機能する。ただし後述のとおりinnerHTMLは第三者の入力をそのまま流し込むと危険(XSS)を伴うため、エスケープ処理が必須になる。

⚠️ innerHTMLを使う前に必ずエスケープする

ユーザーがフォームに入力した文字列を、エスケープ処理をせずにそのままinnerHTMLへ渡してはいけません。悪意のある入力に<script>タグなどのHTMLコードが含まれていた場合、それがそのままページ内で実行されてしまうXSS(クロスサイトスクリプティング)という深刻なセキュリティ問題につながります。&・<・>を先にエスケープしてから\nを<br>に変換する、という順番を必ず守る必要があります。

📚 用語解説

XSS(クロスサイトスクリプティング):悪意のある人物が、フォームなどの入力欄に仕込んだ不正なコード(スクリプト)を、他の利用者のブラウザ上でそのまま実行させてしまう攻撃手法。ユーザー入力をエスケープせずにinnerHTMLへ挿入するようなコードがあると発生しやすい。個人情報の盗難やなりすまし投稿などの被害につながるため、フォームを扱うWebサイトでは必須の対策項目とされている。

3-2. 解決策2:CSSのwhite-spaceプロパティで改行をそのまま活かす

もうひとつの解決策は、\nを<br>に変換せず、CSSのwhite-spaceプロパティを使って「改行やスペースをそのまま表示する」よう指定する方法です。この方法はinnerHTMLを使わずtextContentのままで済むため、エスケープ処理の書き忘れによるXSSのリスクを避けられる、より安全な選択肢です。

/* CSS側の指定 */
#preview {
  white-space: pre-wrap;
}
// JavaScript側は textContent のままでよい(innerHTMLを使わない)
const message = "こんにちは\n田中様\nお世話になっております";
document.getElementById("preview").textContent = message;
// white-space: pre-wrap を指定したCSSと組み合わせることで、
// HTMLタグへの変換なしに、画面上でも\nがそのまま改行として表示される
💡 迷ったらCSSのwhite-space: pre-wrapを優先する

ユーザー入力を含む文字列を改行付きで表示したい場合、innerHTML + <br>変換よりも、textContent + CSSのwhite-space: pre-wrapの組み合わせの方が、エスケープ処理の実装ミスによる事故(XSS)が起きにくく安全です。「<br>への変換が本当に必要な場面(メール本文の組み立てなど、HTML文字列そのものを扱う場面)」以外では、こちらを優先して検討することをおすすめします。

代表菅澤 代表菅澤
正直、私も最初にこの仕様を知ったときは「改行を書いたのに、なぜ画面では消えるのか」と驚きました。エラーも出ないので、原因に気づくまで「何かのバグでは」と疑ってしまう方も多いはずです。
Claude Code 完全解説セミナー|経営者・会社役員専用 1on1 60分 無料Claude Codeを経営に活かしたい方へ — AI鬼管理

04 OSによって改行コードが違う問題(CRLF/LF/CR) Windowsで作ったデータが、Mac/Linuxで崩れる本当の理由

ここまでは「\nという改行コードがどう表示されるか」の話でしたが、実はもうひとつ厄介な問題があります。それが、OS(オペレーティングシステム)によって、改行コードの「正式な種類」自体が異なるという事実です。

OS改行コードの種類記号JavaScriptでの表現
WindowsCR(復帰)+ LF(改行)の2文字CRLF\r\n
旧Mac OS(〜2001年頃)CR(復帰)のみの1文字CR\r
現行macOS・Linux・Web標準LF(改行)のみの1文字LF\n

📚 用語解説

CR(キャリッジリターン)とLF(ラインフィード):古いタイプライターの動作に由来する2つの制御文字。CR(Carriage Return)は「カーソルを行の先頭に戻す」動作、LF(Line Feed)は「1行分下に送る」動作を意味していた。現在ではWindowsが両方を組み合わせたCRLF(\r\n)を、macOS・Linux・多くのWeb標準はLF(\n)のみを標準の改行コードとして採用している。

つまり、Windowsパソコンで作成したテキストファイルやCSVファイルの改行は「\r\n」(2文字分)で保存されているのに対し、Mac・Linux・多くのWebシステムは「\n」(1文字分)を標準として扱います。この違いが、部署間・取引先間でのファイルのやり取りにおいて、見た目には分からない不具合を引き起こします。

// 見た目は「同じ3行のテキスト」に見えるが、改行コードの種類が違う
const windowsText = "1行目\r\n2行目\r\n3行目";   // Windows由来(CRLF)
const linuxText   = "1行目\n2行目\n3行目";        // Mac/Linux由来(LF)

console.log(windowsText === linuxText);
// 出力: false
// 見た目は同じ「3行のテキスト」なのに、
// 改行コードの種類(\r\nか\nか)が違うため、文字列としては一致しない
⚠️ 「見た目は同じテキストなのに、システムでは一致しない」の正体

Windowsで作成したCSVファイルをMac/Linux系のWebシステムに取り込んだ際、「該当データが見つかりません」「文字化けしているように見える」といったトラブルが起きることがあります。この多くは、文字コード(全角/半角や日本語エンコーディング)の問題だと思われがちですが、実際には改行コードの種類(CRLFかLFか)の不一致が原因であるケースが少なくありません。

Windowsで
ファイル作成

改行は\r\n
(CRLF)で保存
取引先・社内で
ファイル受け渡し

メール添付・
共有ドライブ等
Mac/Linux系の
Webシステムで開く

LF(\n)を
前提に設計
改行コード不一致で
取り込みエラー

行数のズレ・
該当なしエラー
AI鬼管理山崎 AI鬼管理山崎
「同じCSVフォーマットのはずなのに、この会社から届くファイルだけ毎回エラーになる」という相談を受けたとき、真っ先に疑うのが改行コードの違いです。文字コード(UTF-8かShift-JISか)は意識される機会が多い一方、改行コードの違いは見落とされがちなポイントだと感じます。

05 改行コードを置換する方法 <br>への変換とCRLF/LFの正規化を1つのコードでまとめて行う

ここまでの内容を踏まえて、実務で使う「改行コードの置換」を整理します。JavaScriptでは、文字列の中の特定の文字を置き換えるreplace()メソッド正規表現を組み合わせて、改行コードの変換・統一を行います。

📚 用語解説

replace() メソッド:JavaScriptの文字列に対して使う、指定した文字(またはパターン)を別の文字に置き換えるための機能。第1引数に「何を探すか」、第2引数に「何に置き換えるか」を指定する。第1引数に正規表現とgフラグ(global、全体を対象にする指定)を組み合わせると、文字列中に複数回出現する箇所をまとめて置換できる。

まず、異なる改行コード(CRLF・CR・LF)が混在しているデータを、1つの種類に統一する正規化処理です。改行コードの違いによるデータ不一致(前章)を解消するために使います。

// CRLF・CR・LFが混在していても、すべてLF(\n)に統一する関数
function normalizeNewlines(text) {
  // 「\r\n」を最優先でマッチさせてから「\r」単体を処理することで、
  // CRLFを二重に変換してしまう事故を防いでいる
  return text.replace(/\r\n|\r/g, "\n");
}

const windowsText = "1行目\r\n2行目\r\n3行目";
const normalized = normalizeNewlines(windowsText);

console.log(normalized === "1行目\n2行目\n3行目");
// 出力: true
💡 正規表現のパターンの並び順に注意

/\r\n|\r/g という書き方は、「\r\nという2文字の並び」を先に確認し、それに該当しない場合だけ「\r単体」を確認するという順番で動作します。仮に順番を逆にして/\r|\r\n/gと書くと、\r\nの中の\r部分だけが先にマッチしてしまい、残った\nが別の改行として扱われる、といった意図しない結果になる可能性があります。「長く具体的なパターンを先に書く」のが正規表現の基本の考え方です。

次に、正規化してLF(\n)に統一した文字列を、画面表示用に<br>タグへ変換する処理です。前章の内容と組み合わせると、以下のような一連の流れになります。

function toDisplayHtml(rawText) {
  // Step1: 改行コードをLFに統一
  const normalized = rawText.replace(/\r\n|\r/g, "\n");

  // Step2: HTMLとして特別な意味を持つ文字をエスケープ(安全対策)
  const escaped = normalized
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");

  // Step3: LFを<br>タグに変換
  return escaped.replace(/\n/g, "<br>");
}

const windowsInput = "住所:東京都渋谷区\r\n備考:要確認";
console.log(toDisplayHtml(windowsInput));
// 出力: "住所:東京都渋谷区<br>備考:要確認"
✔️複数の改行コードが混在するデータを扱う → まず replace(/\r\n|\r/g, "\n") で正規化する
✔️正規化した文字列を画面に安全に表示したい → &,<,> をエスケープしてから \n を <br> に変換する
✔️エスケープ処理を書くのが不安 → innerHTMLを使わず、CSSのwhite-space: pre-wrap + textContent を優先する
✔️改行数をカウントして行数を数えたい → split(/\r\n|\r|\n/) で分割してから配列の長さを見る
代表菅澤 代表菅澤
この一連の処理を「毎回自分でコードを書ける」必要はまったくないと思っています。大事なのは「今起きている表示崩れが、どの段階の問題なのか」を業務の言葉で説明できることです。原因の切り分けさえできれば、実装はAIに任せられる時代になっています。

06 実務でありがちな「改行崩れ」3パターン 「動いているのに、なぜか改行がおかしい」を防ぐ

ここまでの内容を踏まえて、実務で特に頻発する「改行が正しく表示されない」パターンを3つ整理します。いずれも、原因を知らないまま対処すると調査に時間がかかる一方、原因さえ分かれば数分で解決できるものばかりです。

6-1. お問い合わせフォームの改行が管理画面で消える

お客様がテキストエリアに改行を入れて入力した内容が、管理画面や通知メールでは1行につながって表示されてしまうケースです。多くの場合、フォームから送信されたデータ自体には正しく\nが含まれているにもかかわらず、それを画面に表示する側のコードが<br>への変換やCSSのwhite-space指定を行っていないことが原因です。

// 送信データ自体は正しく改行を含んでいる
const formInput = "ご相談内容:\n見積もりについて教えてください。\nよろしくお願いします。";

// 【原因】表示側でtextContentのまま挿入し、CSSのwhite-space指定もない
document.getElementById("adminView").textContent = formInput;
// → 管理画面では1行につながって表示される

6-2. CSVインポートで行数がずれる(改行コードの混入が原因)

顧客の「備考」欄などに改行を含むテキストが入力されたCSVファイルを取り込む際、セルの中の改行コードとCSVファイル自体の行区切り(改行コード)が混同され、1件のデータが複数行に分割されて取り込まれてしまうことがあります。これは改行コードの種類そのものではなく、「改行がどこまでを1件のデータの区切りとするか」の解釈のズレによって起こる、より進んだ落とし穴です。

6-3. チャットウィジェットで改行だけが消える

自社サイトに設置したチャットウィジェットやFAQボットで、ユーザーが箇条書きで質問を入力しても、画面上では改行がすべて無視されて1行の文章として表示されてしまうケースです。原因の多くは、チャット表示部分のスタイル(CSS)にwhite-space: normal(初期値)がそのまま適用されており、\nを<br>へ変換する処理もCSSのpre-wrap指定も入っていないことにあります。

✔️フォーム・チャットの改行が消える → 表示側でinnerHTML+<br>変換、またはCSSのwhite-space: pre-wrapが入っているか確認する
✔️CSV取り込みで行数がずれる → セル内改行とファイルの行区切り改行が混同されていないか確認する
✔️取引先から届くファイルだけエラーになる → CRLF/LFの改行コードの違いを疑う
✔️改行を含む文字列をエスケープなしでinnerHTMLへ渡していないか、セキュリティの観点でも必ず確認する
AI鬼管理山崎 AI鬼管理山崎
この3つのパターンに共通しているのは、「送信・保存の段階では正しくデータが記録されているのに、表示の段階だけで崩れる」という点です。データそのものは壊れていないため、原因調査では「どの段階で改行の解釈がズレているか」を順番に確認していく必要があります。
Claude Code 完全解説セミナー|経営者・会社役員専用 1on1 60分 無料Claude Codeを経営に活かしたい方へ — AI鬼管理

07 【独自データ】GENAI社内のフォーム・チャット改行トラブル対応 表示崩れの原因調査という専門知識を、非エンジニアがどこまでAIに任せられるか

ここまで改行コードの技術的な中身を見てきましたが、多くの読者にとって本当に知りたいのは「結局、こうした表示崩れの調査を自分で行えるようになる必要があるのか」という点だと思います。弊社(株式会社GENAI)ではClaude Max 20xプラン(月額$200・約30,000円)を契約し、経営・営業・広告・開発・経理・秘書業務まで全社でClaude Codeを活用しています。

項目内容
契約プランClaude Max 20x(月額$200 / 約30,000円)
利用開始2025年後半〜
利用部署経営・営業・広告・開発・経理・秘書業務・個人業務まで全社
主な利用モデルSonnet 4.6(日常業務)/ Opus 4.6(複雑な判断が必要なとき)

弊社では自社のお問い合わせフォームやLP(ランディングページ)のチャットウィジェットを自前で運用しており、「入力内容の改行が管理画面で消える」「メール通知に転記すると改行がズレる」といった細かな表示崩れの調査・修正にClaude Codeを日常的に活用しています。以下は業務領域別の概算削減時間です(肌感ベース・2026年4月時点)。

業務領域主な用途概算削減時間
開発LP/フォーム/チャットウィジェットの表示崩れ調査・修正(改行・文字化け等)都度数時間の削減
営業提案書・見積・顧客別資料の自動生成週20h → 週2h
広告運用週次レポート・CPA分析・配信内容調整週10h → 週1h
経理請求書チェック・経費仕訳・Freee連携月40h → 月5h
秘書業務日報生成・議事録・スケジュール調整日2h → 日15分
⚠️ 数値の注意書き

上記は弊社の肌感ベースの数値であり、業種・業態・担当者のスキルによって削減時間は変動します。「完全自動化された」わけではなく、レビューや微調整の工程は都度発生している前提でご覧ください。

注目したいのは、こうした表示崩れのトラブルは原因の特定に時間がかかる一方、原因さえ分かれば修正自体は数行のコード変更で済むという性質を持つ点です。弊社の代表・菅澤自身はJavaScriptの改行コードの仕様を体系的に学んだ経験があるわけではありませんが、それでも「フォームの改行がなぜか消える」という違和感をClaude Codeに伝えるだけで、この記事で紹介したような原因の切り分け(表示側の変換漏れか、そもそもCRLF/LFの不一致か)を行ってもらえる状態が、日常的に成立しています。

Step 1
「改行が
表示されない」という
違和感を伝える
Step 2
Claude Codeが
該当のコードを
実際に調査する
Step 3
原因(変換漏れ/
CRLF不一致等)を
特定する
Step 4
修正コード+
再発防止策を
提案・実装する
AI鬼管理山崎 AI鬼管理山崎
弊社では新しく人を雇う前に、まず「その調査業務はClaude Codeでどこまで肩代わりできるか」を検討するルールにしています。表示崩れのような、原因究明に時間がかかる割に修正自体は単純作業に近い業務ほど、AIに任せる効果が大きいと感じています。

08 【実演】JavaScript未経験の菅澤が、日本語の指示だけで改行崩れを直してみた 専門用語を使わず、業務の言葉のままClaude Codeに依頼する

ここからは実演です。JavaScriptの文法をほとんど知らない状態でも、Claude Codeにどのような日本語で話しかければ、この記事で紹介した落とし穴(\nがHTMLでは改行にならない性質・エスケープ処理の必要性・CRLF/LFの不一致)を踏まえた正しい診断・修正が得られるのかを見ていきます。

8-1. ステップ1:業務の言葉のまま、違和感を伝える

専門用語を使う必要はありません。「\nを<br>に変換してください」ではなく、以下のような伝え方で十分です。

指示例:
「お問い合わせフォームで、お客様が改行して入力してくれた内容が、
管理画面では改行なしの1行につながって表示されてしまう。
どこに原因があるか調べて、正しく改行が表示されるように直してほしい。」

この指示には「\n」「エスケープ」「CRLF」といった技術的な単語は一切含まれていません。それでも「改行なしの1行につながって表示される」という具体的な違和感を添えるだけで、Claude Codeは3章・5章で解説した観点(表示側で\nを<br>に変換する処理やCSSのwhite-space指定が抜けていないか)を踏まえた調査を行い、原因を切り分けてくれます。

8-2. ステップ2:Claude Codeが返してくる診断のイメージ

// Claude Codeが該当コードを調査し、以下のような原因説明とともに修正案を提示する例

// 【調査結果】
// フォームから送信されるデータ自体には\nによる改行が正しく含まれています。
// しかし管理画面側のコードが textContent で挿入しているだけで、
// <br>への変換もCSSのwhite-space指定もされていないため、
// ブラウザの標準仕様により改行が無視されて1行表示になっています。

// 【修正案】
function renderInquiry(rawText) {
  const escaped = rawText
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
  return escaped.replace(/\n/g, "<br>");
}

document.getElementById("adminView").innerHTML = renderInquiry(formInput);
// これで管理画面でも入力どおりに改行が表示されるようになります。

重要なのは、コードそのものだけでなく「なぜ改行が消えていたのか」という補足説明まで日本語で返ってくる点です。JavaScriptの文法を理解していなくても、この補足を読めば「表示側の変換処理が抜けていた」という業務判断に必要な材料を自分で把握できます。

8-3. ステップ3:修正と再発防止までAIに任せる

Claude Codeはコードを書くだけでなく、実際にそのコードを実行して結果を確認するところまで自律的に行える点が、通常のチャット型AIとの大きな違いです。「このフォームの表示部分を実際に直して、改行が正しく表示されるか確認して」と伝えれば、実際にコードを修正した上で、動作確認まで含めて対応してくれます。

💡 コードすら書かせず、原因の説明だけ受け取る選択肢もある

ここまではJavaScriptのコードを得る流れを紹介しましたが、そもそも自分でシステムを触る予定がなく「なぜ改行が消えるのかだけ知りたい、エンジニアへの依頼文を作りたい」という場合は、コードを一切書かせずにClaude Codeへ状況を伝え「この現象の原因を、外部のエンジニアに説明できる文章でまとめて」と依頼するだけでも完結します。コードを書く・書かないは目的次第で選べる、という点も覚えておくと便利です。

この一連の流れが示しているのは、「JavaScriptの改行コードの仕様を正しく書けるようになる」ことと「表示崩れの原因を正しく特定する」ことは、もはや同じスキルを必要としないという事実です。前者はエンジニアの専門スキルのままですが、後者は「体感の違和感を具体的に言語化する力」に置き換わりつつあります。

Step 1
業務の言葉で
違和感を
そのまま伝える
Step 2
Claude Codeが
コードを調査し
補足説明を返す
Step 3
実際に修正して
動作を
確認する
Step 4
修正内容を
そのまま
業務に反映する
代表菅澤 代表菅澤
弊社のお客様の中にも、プログラミング経験がまったくない担当の方が、Claude Codeを使って自社サイトのフォームの表示崩れを直しているケースがあります。大事なのは文法の暗記ではなく、「何がどう崩れて見えるか」を具体的に言語化する力です。

09 まとめ ── 「\nを書ける」より先に、「崩れの原因を言語化できる」時代へ 経営者に必要なのは文法知識ではなく、違和感を伝える力

この記事では、JavaScriptにおける文字列の改行について、\nとテンプレートリテラルの基本的な書き方、\nがHTML画面では改行として反映されない罠とその解決策(<br>変換・CSSのwhite-space)、OSによるCRLF/LF/CRの違い、改行コードの置換・正規化の方法、実務でありがちな不一致パターンまでを、非エンジニア向けの比喩を交えて解説しました。最後にポイントを振り返ります。

✔️改行コード(\n)は「行を変えてほしいという意思表示を、見えない形でデータに埋め込んだもの」
✔️JavaScriptの\nは文字列としては改行だが、HTML画面ではそのままでは改行として表示されない
✔️画面表示には <br> への変換(要エスケープ)か、CSSのwhite-space: pre-wrap を使う
✔️Windows(CRLF)とMac/Linux(LF)は改行コードの種類が異なり、これがファイル間のデータ不一致の一因になる
✔️複数の改行コードが混在する場合は replace(/\r\n|\r/g, "\n") で正規化してから扱う
✔️フォーム・チャット・CSV取り込みの改行トラブルは「表示側の変換漏れ」か「改行コード不一致」のどちらかが多い
✔️JavaScript未経験でも「改行が消えて見える」という違和感を伝えるだけで、Claude Codeが原因を特定してくれる

最も伝えたいメッセージは、JavaScriptの改行コードの仕様を暗記することと、表示崩れの原因を正しく特定することは、もはや別のスキルになっているという点です。システム担当やエンジニアとの会話で置いていかれないための「教養」としてこの記事の内容を知っておくのは有益ですが、実務でフォームやチャットの表示崩れそのものが問題になっている場面では、Claude Codeのような自律型のAIエージェントに原因調査と修正を任せてしまう方が、時間対効果は圧倒的に高くなります。

弊社では、こうした「専門知識の壁でAI活用を諦めている」経営者・管理職の方に向けて、Claude Codeを実務に組み込むための伴走支援を行っています。表示崩れの調査に限らず、日々の業務の中で「これは専門的すぎるから」と後回しにしていた作業があれば、まずは無料相談でご相談ください。

代表菅澤 代表菅澤
弊社では「AI鬼管理」というサービスで、Claude Codeを使った業務自動化の設計から伴走まで支援しています。「なぜか改行が消える」「なぜか表示が崩れる」という違和感があれば、実は任せてみる価値があります。まずは無料相談でお気軽にご相談ください。

「なぜか改行が消える」も、Claude CodeとAI鬼管理で原因を突き止める

JavaScriptの改行コードのように「専門的すぎて手が出せない」と感じていた表示崩れの調査も、Claude Codeなら日本語の指示だけで原因の切り分けから修正までたどり着けます。
貴社の業務のどこにこの仕組みが使えるか、無料相談で一緒に見つけます。

AI鬼管理山崎 AI鬼管理山崎
「専門知識がないから任せられない」という思い込みを外すところから、導入支援はスタートします。まずは日常業務の中で一番「なぜか表示が崩れる」と感じている画面を1つ、教えてください。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか?

AI鬼管理 — Claude Code導入支援トレーニング

AI活用を自社で回せるようになりたい方へ

AI鬼管理

Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。

AIBPO by AI鬼管理 — 定型業務の丸ごと代行

業務を丸ごと任せたい方へ

AIBPO by AI鬼管理

請求処理・データ入力・問い合わせ対応などの定型業務を、AI×人の品質管理体制で丸ごと代行。いまのコストの75%目安で、日々は成果物を承認するだけ。

よくある質問

Q. JavaScriptで文字列に改行を入れたのに、Webページで改行が表示されないのはなぜですか?

A. HTMLはデフォルトの設定(white-space: normal)では、文字列中の改行やスペースの連続を無視して1つの半角スペースにまとめてしまう仕様になっているためです。これはバグではなくHTML/CSSの標準仕様です。改行を画面に反映させるには、\nを<br>タグに変換してから挿入するか、CSSのwhite-space: pre-wrapを指定した要素にtextContentで挿入する必要があります。

Q. \nを<br>に変換する際、なぜ&,<,>のエスケープを先に行う必要があるのですか?

A. innerHTMLに挿入する文字列は、HTMLコードとしてそのままブラウザに解釈されるためです。もしユーザー入力の中に<script>のようなHTMLタグが含まれていた場合、エスケープをせずにinnerHTMLへ渡すと、それが本物のHTMLタグとして実行されてしまい、XSS(クロスサイトスクリプティング)という深刻なセキュリティ問題につながります。&,<,>を先にエスケープしてから\nを<br>に変換する順序を守ることで、この事故を防げます。

Q. Windowsで作ったCSVファイルをWebシステムに取り込むと、なぜ改行やデータがずれることがあるのですか?

A. Windowsの改行コードはCRLF(\r\n、2文字分)である一方、Mac・Linux・多くのWeb標準の改行コードはLF(\n、1文字分)だからです。この違いを想定していないシステムにWindows由来のファイルを取り込むと、改行の解釈がずれて行数がカウントされたり、該当データが見つからないといったエラーにつながることがあります。

Q. 複数の改行コード(CRLF・CR・LF)が混在するデータを、安全に1つに統一する方法はありますか?

A. text.replace(/\r\n|\r/g, "\n") のように、正規表現でCRLFを最優先にマッチさせてからCR単体を処理する書き方で、すべての改行コードをLFに統一(正規化)できます。パターンの並び順を誤ると(例えばCR単体を先に処理すると)CRLFの中のCR部分だけが先にマッチしてしまい意図しない結果になるため、長く具体的なパターンを先に書く点に注意が必要です。

Q. innerHTMLとtextContent、改行を表示したい場合はどちらを使うべきですか?

A. ユーザー入力を含む文字列を扱う場合は、textContent + CSSのwhite-space: pre-wrapの組み合わせを優先することをおすすめします。innerHTML + <br>変換でも改行は表示できますが、エスケープ処理を書き忘れるとXSSのリスクが生じます。textContentはHTMLとして解釈されないため、この種の事故が起きにくく、実装ミスに強い選択肢です。

Q. テンプレートリテラル(バッククォート)で書いた改行と、\nで書いた改行は同じものですか?

A. 基本的には同じです。テンプレートリテラルの中で実際に改行キーを押して書いた場合も、\nを明示的に書いた場合も、できあがる文字列としては同じ改行コード(LF)を含むものになります。定型文を組み立てる場合はテンプレートリテラルの方が見た目のまま書けて読みやすく、短いログメッセージなどでは\nの方が簡潔に書けるため、場面によって使い分けられています。

Q. プログラミング未経験でも、Claude Codeに改行の表示崩れの原因調査を正しく依頼できますか?

A. できます。この記事で紹介したように、専門用語を使わず「入力した改行が画面では1行につながって表示される」といった業務目線の違和感を伝えるだけで、Claude Codeのような自律型AIエージェントは適切な調査方法(表示側の変換漏れか、改行コードの種類の不一致かなど)を選んで原因を切り分けてくれます。理解してから使うのではなく、使いながら理解が追いつく順序で進められます。

AIAI鬼管理

AI鬼管理へのお問い合わせ

この記事を読んで気になった方へ。
AI鬼管理の専門スタッフが、御社に最適な
業務自動化プランを無料でご提案します。

会社名を入力してください
業種を選択してください
お名前を入力してください
※法人・事業用のメールアドレスでお願いします(Gmail等の個人用フリーメールは受付できません)
正しいメールアドレスを入力してください

1つ以上選択してください
1つ以上選択してください
月額コストを選択してください

約1時間のオンライン面談(Google Meet)です

空き枠を取得中...
面談日時を選択してください

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。

監修 最終更新日: 2026年8月8日
菅澤孝平
菅澤 孝平 株式会社GENAI 代表取締役
  • AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
  • Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
  • 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社(2021年設立・鬼管理専門塾運営)にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
  • 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
  • メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
  • 明治大学政治経済学部卒
現在は AI鬼管理(Claude Code活用の伴走型パーソナルトレーニング)を主事業とし、経営者と二人三脚で「AIに業務を任せる仕組み」を実装。「実行を強制する環境」を AI で構築する手法を、自社の実運用知見をもとに発信している。