この記事で分かること
document.write()とdocument.writeln()の役割- HTMLへの書き出しの仕組み
writeとwritelnの違い- 改行が反映される条件（
preタグ） - 使用時の注意点（ページ内容が消えるケース）
document.write() と document.writeln() は、HTML ドキュメントに文字列や画像などを直接書き出すためのメソッドです。
ページ生成時に動的な内容を挿入する際に利用できますが、使い方を誤るとページ内容が消えてしまうため注意が必要です。
write / writeln の基本
document.write(データ); // データを書き出す
document.writeln(データ); // データを書き出して改行する
write()：データを書き出すwriteln()：データを書き出し、最後に改行を追加する- HTMLタグを含む文字列はそのまま HTML として解釈される
- 複数の文字列は「
+」で結合、または「,」で並べて書き出せる
注意： ページ読み込み後に document.write() を実行すると、
現在のページ内容がすべて消えてしまうため、通常は使用しません。
write メソッド｜データを書き出す
document.write() は、引数として渡した文字列・HTML・画像タグなどをそのままページに書き出します。
例：文字列を書き出す
document.write("こんにちは、" + name + "さん！");
→ 変数 name の値を含めて「こんにちは、〇〇さん！」と表示されます。
HTMLタグもそのまま反映される
document.write("<strong>太字の文字</strong>");
→ 太字で表示されます。
writeln メソッド｜書き出し＋改行
document.writeln() は、write() と同じくデータを書き出しますが、
最後に自動で改行文字（\n）が追加されます。
ただし、改行を画面に反映させるには、出力先を <pre> タグで囲む必要があります。
例：画像を表示して改行
document.writeln("<img src=\\"cat1.gif\\" alt=\\"\\">");
→ 画像 cat1.gif を表示し、その後に改行が入ります。
write / writeln を使う際の注意点
- ページ読み込み後に実行するとページ内容が消える
- DOM 操作（
getElementByIdなど）が主流で、writeは古い手法 - HTMLタグを含む文字列はそのまま描画される
writelnの改行は<pre>タグ内でのみ有効
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
document.write / writeln は JavaScript の基礎であり、書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
この本で解決できること：
document.writeの動作を視覚的に理解できる- JavaScript の基礎文法をやさしく習得できる
- サンプルを動かしながら学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
document.write / writeln の仕組みを体系的に学びたい方に向いている入門書です。
この本で解決できること：
- HTML書き出しの仕組みを体系的に理解できる
- 実務で使えるレベルの基礎力を身につけられる
- 現代的な JavaScript の書き方が理解できる
動画で理解を深めたい方へ（Udemy講座）
document.write / writeln の動きを動画で見ると、理解が一気に深まります。
Udemy では初心者向けに丁寧に解説された講座が多数あります。
初心者のためのJavaScript 完全入門
JavaScript の基礎を体系的に学べる人気講座です。
この講座で解決できること：
document.writeの動作を視覚的に理解できる- 要素の取得・変更・追加の流れが分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
JavaScript の基礎〜応用を幅広く学べる講座です。
この講座で解決できること：
document.write/writelnの基礎〜応用を体系的に理解- 現代的なコードの書き方が身につく
- 実務で必要な知識をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
write/writelnの仕組みが曖昧なまま進んでしまう- DOM 操作との違いで混乱しやすい
- コードの意図が理解できない
- 学習の順番に自信が持てない
document.write / writeln は古い手法であるため、
現代的な DOM 操作と合わせて理解することが重要です。
つまずきやすい部分を質問できる環境があると理解が深まります。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
document.write / writeln に関するよくある質問（FAQ）
document.write() を実行するとページが消えるのはなぜ？
ページ読み込み後に実行すると、現在の HTML を破棄して新しい内容に書き換えるためです。
writeln の改行が反映されないのはなぜ？
writeln の改行は <pre> タグ内でのみ有効なため、通常の HTML では改行として表示されません。
write と writeln の違いは？
write は書き出しのみ、writeln は書き出し＋改行を行います。
現代でも document.write() を使うべき？
非推奨です。DOM 操作（getElementById など）が主流で、write は古い手法です。
まとめ
document.writeはデータを書き出す基本メソッドdocument.writelnは書き出し後に改行を追加する- HTMLタグを含む文字列はそのまま反映される
- ページ読み込み後の
writeはページ内容を消すため注意 - 現代では DOM 操作が推奨される
