JavaScriptでHTML出力！write()メソッドの使い方と注意点
投稿日 2025年02月07日 更新日 2025年02月07日
JavaScriptのwrite()メソッドを使ってHTMLを出力しようとすると、以下のようなエラーが発生することがあります。
Uncaught TypeError: document.write is not a functionこのエラーの原因と解決方法について、実践的なコード例を交えながら解説します。
write()メソッドの基本的な使い方
write()メソッドは、HTMLドキュメントに直接テキストを書き込むための機能です。基本的な使い方は以下の通りです：
document.write("Hello World!");HTMLタグを含めて出力することも可能です：
document.write("<h1>見出し1です</h1>");
document.write("<p>これは段落です</p>");エラーが発生する主な原因
このエラーが発生する主な原因は以下の2つです：
1. DOMの読み込みが完了した後にwrite()メソッドを使用している
2. documentオブジェクトを正しく参照できていない
解決方法
1. DOMContentLoadedイベント前に実行する
最も確実な方法は、スクリプトをHTML読み込み時に実行することです：
<!DOCTYPE html>
<html>
<head>
<script>
document.write("<h1>これは正常に動作します</h1>");
</script>
</head>
<body>
</body>
</html>2. innerHTML を使用する
write()の代わりに、innerHTMLを使用する方法がより安全です：
document.body.innerHTML = "<h1>これは安全な方法です</h1>";3. createElement()を使用する
最も推奨される方法は、createElement()を使用する方法です：
const heading = document.createElement("h1");
heading.textContent = "これは最も推奨される方法です";
document.body.appendChild(heading);write()メソッドの注意点
1. ページが読み込まれた後にwrite()を使用すると、既存のコンテンツが上書きされてしまいます
2. セキュリティ上の理由から、モダンなWeb開発ではwrite()の使用は推奨されません
3. パフォーマンスの観点からも、他の手法の使用が推奨されます
まとめ
write()メソッドは古い手法であり、現代のWeb開発では避けるべきです。代わりに：
- innerHTML
- createElement()
- insertAdjacentHTML()
などの手法を使用することで、より安全で保守性の高いコードを書くことができます。
これらの代替手法を使用することで、エラーを回避しつつ、より効果的にHTML要素を操作することが可能です。
関連記事
新着記事
5
6
7
関連記事
5
6
7
60秒で完了