JavaScript: JavaScriptの出力方法
最終更新：2026-10-13
プログラミング学習の第一歩は、プログラムに「話しかける」ことです。JSには4つの出力方法があり、それぞれに異なる用途があります。
1. console.log() — 開発者の親友
console.log()はブラウザのコンソール（F12 → Console）に内容を出力します。ユーザーには見えませんが、デバッグには欠かせないツールです。
これは圧倒的に最もよく使う出力方法です。バグの追跡也好検証也好、console.log()が頼りになるツールになります。
alert()はユーザーが「OK」をクリックして閉じる必要があるモーダルダイアログを開きます。ユーザーの作業フローを中断するため、本番環境で使うことはほぼありません。主に学習段階で登場します。
注意：デバッグ中にalert()をループ内に入れないでください。ダイアログを閉じるために何十回も「OK」をクリックしなければならなくなります — どうしてわかるかは聞かないでください。
2. document.write() — テスト専用
document.write()はHTMLドキュメントストリームに直接コンテンツを書き込みます。ページの読み込み完了後に呼び出すと、ページ全体が上書きされます — これはほぼ望ましい動作ではありません。簡単な実験にだけ使いましょう。
3. innerHTML — ページコンテンツの更新
innerHTMLが「ページに出力する」標準的な方法です。要素を選択してHTMLコンテンツを変更します。これはDOM操作の基礎であり、後ほど詳しく扱います。
▶ サンプル：console.log()でコンソールに出力
▶ 試してみよう▶ サンプル：alert()ダイアログ出力
▶ 試してみよう▶ サンプル：innerHTMLでページコンテンツを更新
▶ 試してみよう▶ サンプル：document.write()とその危険性
▶ 試してみよう❓ よくある質問
Q ユーザーはconsole.log()の出力を確認できますか？
A いいえ — 開発者ツールのコンソールに出力されます。ダッシュボードの裏側にある計器盤のようなもので、ドライバーには見えませんが整備士には不可欠です。重要な情報をconsole.logだけに入れないようにしましょう — ユーザーには見えません。
Q innerHTMLとtextContentの違いは何ですか？
A
innerHTMLはHTMLタグを解釈しますが、textContentはすべてをプレーンテキストとして扱います。例えば<strong>太字</strong>を設定した場合、innerHTMLは太字テキストを表示しますが、textContentはタグの文字列をそのまま表示します。テキストだけを変更する場合はtextContentの方が安全です — 注入されたスクリプトが誤って実行される心配がありません。Q なぜalert()は推奨されないのですか？
A ページをフリーズさせるためです — ユーザーはダイアログを閉じるまで何もできません。フォーム入力中に各フィールドの後ろにポップアップが表示される状況を想像してください — ひどい体験になるでしょう。
📖 まとめ
console.log()は主要なデバッグツール — ユーザーには見えないコンソールに出力するalert()はUIをブロックする — 学習時のみ使い、本番環境では使わないdocument.write()は読み込み後に呼び出すとページ全体を上書きする — 初期の実験にのみ適しているinnerHTMLはページコンテンツを更新する標準的な方法で、HTMLタグを解釈できる- 実際の開発では、99%の場合は
console.log()でデバッグし、innerHTMLでページを更新する - それぞれの方法には適切な場面がある — 正しく選べば、よりスマートに作業できる
📝 練習問題
- 初級：ボタンを持つページを作成し、クリック時に
console.log()であなたの名前と年齢を出力してください。 - 中級：
innerHTMLを使って順序なしリスト（3項目以上）を出力するページを作成してください。各項目は学習したプログラミング言語にしてください。 - 上級：4つの出力方法を比較するページを作成してください。4つのボタンを用意し、それぞれが4つの出力方法の1つに対応するようにします。クリックすると、ページ上の同じエリアにその方法の説明を表示してください（alertとdocument.writeはスキップして、innerHTMLでシミュレートしてください）。
