【JavaScript入門】さまざまな出力方法

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

さまざまな出力方法

　JavaScript では、目的に応じてさまざまな方法で情報を表示・出力できます。ここでは、代表的な出力手段である console.log()、alert()、document.write() に加えて、DOM 操作による要素の書き換え方法を取り上げます。それぞれの特徴や使用例を見比べながら、用途にあった手法を身につけましょう。

１．`console.log()` による出力

　開発者ツールの Console タブに情報を表示する方法です。テスト用のメッセージや変数の値を手軽に確認できるので、デバッグ時によく使われます。

1.1. `console.log()` の使用例

【consoleLogSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>consoleLogSample.html</title>
</head>
<body>
    <h1>console.log() での出力例</h1>
    <p>ブラウザの開発者ツール(コンソール)を開いて結果を確認してください。</p>
    <script>
        // メッセージの宣言
        let greeting = 'コンソールへメッセージを送ります。';
        
        // console.log() で出力
        console.log(greeting);
        
        // 数値の出力も可能
        let price = 1200;
        console.log('現在の合計金額は', price, '円です。');
    </script>
</body>
</html>

実行結果

デバッグコンソールの出力

コンソールへメッセージを送ります。
現在の合計金額は 1200 円です。

console.log(greeting); は、変数 greeting の値をコンソールに表示します。
カンマ区切りで複数の値を並べると、そのまま連結されて出力されます。

２．`alert()` による出力

　ページ上にポップアップのダイアログを表示してユーザーにメッセージを伝える方法です。現在は煩わしさから使用機会が減っていますが、簡単な通知であれば利用することがあります。

2.1. `alert()` の使用例

【alertSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>alertSample.html</title>
</head>
<body>
    <h1>alert() での出力例</h1>
    <script>
        // 警告ダイアログを表示する
        alert('ようこそ！ これはアラートメッセージのサンプルです。');
    </script>
</body>
</html>

実行結果

alert('メッセージ'); で、メッセージをダイアログとして表示します。
ダイアログを閉じるまで、ユーザーは他の操作ができなくなる点に注意しましょう。

３．`document.write()` による出力

　HTML の読み込み途中で動的に文章やタグを挿入する方法です。読み込み順に合わせて出力されるため、場合によっては既存のページ構造を再度書き換えてしまうことがあります。使い所をよく考えて使用しましょう。

3.1. `document.write()` の使用

【documentWriteSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>documentWriteSample.html</title>
</head>
<body>
    これは通常の HTML 文字列です。
    <script>
        // HTMLタグを文字列として書き加える
        document.write('<h2>document.write() からの追加出力です。</h2>');
    </script>
    ここも通常の HTML 文字列です。
</body>
</html>

実行結果

スクリプト内で document.write() を呼び出すと、その時点で指定した内容をページに挿入します。
ページがすでに読み込みを終えている状態で使うと、ページの内容がリセットされる場合があります。

４．DOM 操作による出力

　DOM（Document Object Model）の要素を直接書き換えることで、より柔軟にページの内容を変更・追加する方法です。innerText や innerHTML などを活用して、表示したいテキストや HTML を操作します。

4.1. サンプル HTML と JavaScript

ファイル名を「domOutputSample.html」とします。

【domOutputSample.html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>domOutputSample.html</title>
    <script>
        // DOM の読み込み完了イベントを設定
        window.addEventListener('DOMContentLoaded', function() {
            // id="itemB" の要素から内部テキストを取得
            let selectedItem = document.querySelector('#itemB').innerText;

            // 取得したテキストを加工して HTML 文字列を作る
            let msg = '<em>「' + selectedItem + '」が特価セール中！</em>';

            // id="info" の要素の内部 HTML を書き換え
            document.querySelector('#info').innerHTML = msg;
        });
    </script>
</head>
<body>
    <ul>
        <li id="itemA">プリン</li>
        <li id="itemB">アップルパイ</li>
    </ul>
    <div id="info"></div>
</body>
</html>

実行結果

4.2. DOM 操作の流れ

手順	説明
1. DOMContentLoaded	ページの構造（DOM）が読み込み終わると呼び出されるイベント。これに処理を登録すると、要素操作が可能に。
2. `document.querySelector()`	CSS セレクタ（例：`#itemB`）を使って要素を取得。`innerText` で内部の文字列を取り出せる。
3. HTML文字列を作成	取り出した文字列を組み込んだ HTML タグを変数に格納。
4. `innerHTML` 書き換え	変更先の要素（`#info`）に対して、先ほど作成した HTML 文字列を代入。

まとめ

上記のように、JavaScript にはさまざまな出力方法があります。

console.log()：デバッグ用途や変数の中身の確認に便利。
alert()：シンプルな通知や確認ダイアログを表示したいときに使用。
document.write()：ページを読み込み中に動的にコンテンツを追加できるが、場合によっては既存の構造を置き換える危険がある。
DOM 操作：要素を直接選択して書き換える方法。HTML の再構築やユーザー操作に応じた動的な変更に適している。

用途やタイミングに合わせて適切な方法を選びながら、出力方法を活用していきましょう。

【JavaScript入門】さまざまな出力方法