この記事で分かること
document.open()とdocument.close()の役割- ドキュメント書き出しの仕組み
- MIMEタイプの指定方法
window.open()との違い- 使用時の注意点（ページ内容が消えるケース）
document.open() と document.close() は、HTML ドキュメントへの書き出し処理を開始・終了するためのメソッドです。
ただし使い方を誤るとページ内容が消えてしまうため、仕組みを正しく理解することが重要です。
document.open / document.close の基本
document.open(MIMEタイプ); // ドキュメントの書き出し開始
document.close(); // 書き出し終了
document.open()：ドキュメントを開き、書き込み可能な状態にするdocument.close()：書き込みを終了し、ブラウザに表示させる- MIMEタイプは省略可能（省略時は
text/html）
重要： 現在のページで document.open() を実行すると、
そのページの内容はすべて消去され、書き換えられます。
open メソッド｜ドキュメントの書き出し開始
document.open() を実行すると、HTML 文書が「書き込み可能な状態」になります。
HTML 以外の形式で書き出したい場合は MIME タイプを指定します。
document.open("text/plain"); // プレーンテキストとして書き出す
MIMEタイプとは？
MIMEタイプは、コンテンツの種類を表す文字列です。
text/plain（テキスト）text/html（HTML）image/jpeg（JPEG画像）
省略した場合は text/html として扱われます。
close メソッド｜書き出し終了
document.close() は、open で開始した書き込み処理を終了し、
ブラウザに内容を反映させるためのメソッドです。
// ウィンドウ newWin のドキュメントを書き換える
newWin.document.open();
newWin.document.write("<h1>新しい内容</h1>");
newWin.document.close();
注意： close を呼ばないとページが「読み込み中」のままになってしまいます。
window.open() と混同しないよう注意
window.open() は「新しいウィンドウ（またはタブ）を開く」メソッドで、
document.open() とはまったく別物です。
window.open()→ 新しいウィンドウを開くdocument.open()→ ドキュメントの書き出しを開始する
DOMにおける document.open()
JavaScript の document.open() では MIME タイプを指定できますが、
DOM 仕様では 引数なしで使用する 点に注意してください。
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
- 紙の本で体系的に学びたい
- ネット記事だけだと情報が断片的に感じる
- 基本文法を順序立てて理解したい
document.open / close は JavaScript の基礎であり、書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。
いちばんやさしい JavaScript の教本
写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
この本で解決できること：
documentの基本操作を視覚的に理解できる- JavaScript の基礎文法をやさしく習得できる
- サンプルを動かしながら学べるため挫折しにくい
確かな力が身につく JavaScript「超」入門
document の仕組みを体系的に学びたい方に向いている入門書です。
この本で解決できること：
documentの基礎を体系的に学び直せる- 実務で使えるレベルの基礎力を身につけられる
- 現代的な JavaScript の書き方が理解できる
動画で理解を深めたい方へ（Udemy講座）
document.open / close の動きを動画で見ると、理解が一気に深まります。
Udemy では初心者向けに丁寧に解説された講座が多数あります。
初心者のためのJavaScript 完全入門
document を含む JavaScript の基礎を体系的に学べる人気講座です。
この講座で解決できること：
documentの動きを視覚的に理解できる- 要素の取得・変更・追加の流れが分かる
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
document を含む JavaScript の基礎〜応用を幅広く学べる講座です。
この講座で解決できること：
documentの基礎〜応用を体系的に理解- 現代的なコードの書き方が身につく
- 実務で必要な知識をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
document.open/closeの仕組みが曖昧なまま進んでしまうwindow.openとの違いで混乱しやすい- コードの意図が理解できない
- 学習の順番に自信が持てない
document の理解は DOM 操作・イベント処理などの基礎になるため、
つまずきやすい部分を質問できる環境があると理解が深まります。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- 独学でつまずきやすい部分を事前に把握
- 学習方法の改善点をプロがアドバイス
- エンジニア転職を視野に入れたキャリア相談も可能
document を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
document.open / close に関するよくある質問（FAQ）
document.open() を実行するとページが消えるのはなぜ？
document.open() は現在のページ内容を破棄して新しい書き込みを開始するため、既存の内容が消えます。
MIMEタイプは必ず指定する必要がある？
省略可能です。省略した場合は text/html として扱われます。
window.open() と document.open() の違いは？
window.open() は新しいウィンドウを開くメソッド、document.open() はドキュメントの書き出しを開始するメソッドです。
document.close() を呼ばないとどうなる？
ブラウザが「読み込み中」の状態のままになり、書き込み内容が反映されません。
まとめ
document.open()はドキュメントの書き出し開始document.close()は書き出し終了- 現在のページで使うと内容が消えるので注意
window.open()とは別物- MIMEタイプを指定すると HTML 以外の形式で書き出せる
