JavaScriptのdocument.writeとdocument.writelnとは？使い方・違い・注意点を初心者向けに解説

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 初心者におすすめの学習書籍

書籍で学ぶのが向いている人

紙の本でじっくり読み込みたい
体系的にまとまった教材で学びたい
ネット記事だけだと情報が断片的に感じる

JavaScriptは「文法 → DOM → イベント → 非同期処理」という順で学ぶと理解しやすいです。
以下の書籍はこの流れに沿って学べるため、初心者でも挫折しにくい構成になっています。

いちばんやさしい JavaScript の教本

手を動かしながら JavaScript を学びたい方には、初心者向けにやさしく解説された実践型の入門書があります。
実際に動くサンプルを使って学べるため、基本をしっかり身につけたい方に最適です。

この本で解決できること：

JavaScriptの基本文法をやさしく理解できる
手を動かしながら学べるため、挫折しにくい
「まず動くものを作ってみたい」が実現できる

→ いちばんやさしい JavaScript の教本

確かな力が身につくJavaScript「超」入門

JavaScriptの基礎を体系的に学びたい方には、こちらの書籍がとても分かりやすくおすすめです。
初心者がつまずきやすいポイントを丁寧に解説している入門書です。

この本で解決できること：

JavaScriptの基礎を体系的に学び直せる
初心者がつまずきやすい部分を重点的に理解できる
実務で使えるレベルの基礎力を身につけられる

→ 確かな力が身につくJavaScript「超」入門

体系的に学びたい方へ（スクールという選択肢）

独学の限界を感じやすいポイント

エラーの原因が分からず、調べても解決できない
学習の順番に自信が持てない
モチベーションが続かず、途中で止まってしまう
実務レベルのコードレビューを受ける機会がない

こういった悩みが増えてきたら、「質問できる環境」や「学習ロードマップを一緒に考えてくれる人」がいるだけで、学習効率は大きく変わります。

無料相談で得られるメリット

あなたの現在のレベルに合わせた学習ロードマップを作成してくれる
独学で詰まりやすいポイントを事前に教えてくれる
学習方法の改善点をプロがアドバイスしてくれる
エンジニア転職を考えている場合、キャリア相談も可能

JavaScript を独学で学んでいると、「もっと効率よく理解したい」「プロに質問しながら進めたい」と感じる方も多いです。
そのような方には、未経験からエンジニアを目指せる DMM WEBCAMP の学習コースも選択肢のひとつです。
無料相談では、学習ロードマップの作成やキャリア相談など、独学では得られないサポートを受けられます。

→ DMM WEBCAMP 学習コース（無料相談はこちら）

まとめ

document.write はデータを書き出す基本メソッド
document.writeln は書き出し後に改行を追加する
HTMLタグを含む文字列はそのまま反映される
ページ読み込み後の write はページ内容を消すため注意
現代では DOM 操作が推奨される

【JavaScript入門】document.writeとdocument.writelnの使い方｜違い・注意点・HTML出力の仕組みを解説