JavaScript の出力

Volardev 編集部 April 17, 2026

1. JavaScriptにおける表示の可能性

JavaScriptは、さまざまな方法でデータを「表示（アウトプット）」することができます。

innerHTML または innerText を使用して、HTMLエレメント内に書き込む。
document.write() を使用して、HTML出力に直接書き込む。
window.alert() を使用して、アラートボックスに書き込む。
console.log() を使用して、ブラウザのコンソールに書き込む。

2. innerHTML の使用

HTMLエレメントにアクセスするには、document.getElementById(id) メソッドを使用します。

id アトリビュートを使用してHTMLエレメントを特定し、innerHTML プロパティを使用してその内容を変更します。

コード例

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のWebページ</h1>
<p>私の最初の段落</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "<h2>ハロー・ワールド</h2>";
</script>

</body>
</html>

HTMLエレメントの innerHTML プロパティを変更することは、HTML内にデータを表示するための最も一般的な手法です。

3. innerText の使用

HTMLエレメント内のテキストのみを操作したい場合は、innerText プロパティを使用します。

コード例

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のWebページ</h1>
<p>私の最初の段落</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerText = "ハロー・ワールド";
</script>

</body>
</html>

HTMLタグを含めて要素を更新したい場合は innerHTML を使用します。
純粋なテキストのみを更新したい場合は innerText を使用します。

4. document.write() の使用

テスト目的であれば、document.write() を使用するのが便利です。

コード例

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のWebページ</h1>
<p>私の最初の段落。</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

注意： HTMLドキュメントが完全に読み込まれた（ロードされた）後に document.write() を実行すると、既存のHTMLがすべて削除されます。

コード例（上書きの例）

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のWebページ</h1>
<p>私の最初の段落。</p>

<button type="button" onclick="document.write(5 + 6)">試してみる</button>

</body>
</html>

document.write() メソッドは、あくまでテスト用途に留めるべきです。

5. window.alert() の使用

アラートボックスを使用してデータを表示することも可能です。

コード例

<!DOCTYPE html>
<html>
<body>

<h1>私の最初のWebページ</h1>
<p>私の最初の段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

JavaScriptにおいて window オブジェクトはグローバルスコープのオブジェクトです。そのため、変数やプロパティ、メソッドはデフォルトで window オブジェクトに属します。つまり、window キーワードの指定は任意（オプション）です。

コード例（windowを省略）

<script>
alert(5 + 6);
</script>

6. console.log() の使用

デバッグ目的では、ブラウザの console.log() メソッドを呼び出してデータを表示するのが一般的です。

※デバッグについての詳細は、後の章で詳しく解説します。

コード例

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>

7. JavaScriptのプリント機能

JavaScriptには、いわゆる「印刷オブジェクト」や「印刷メソッド」は存在しません。JavaScriptからプリンターなどの出力デバイスに直接アクセスすることはできません。

唯一の例外として、ブラウザの window.print() メソッドを呼び出すことで、現在のウィンドウの内容を印刷（プリントアウト）させることができます。

コード例

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">このページを印刷する</button>

</body>
</html>