前回の『いろんな方法でHello World!を表示する』が十分に内容を拾えているか分からなかったので、最近チマタで噂になっている「ChatGPT」で聞いてみることにしました。
私の考えを上回るスマートな回答が得られたので聞いてみてよかったです。
コンソールへの表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script>
console.log("Hello World!");
</script>
</body>
</html>
実行結果
※ブラウザの「JavaScriptコンソール」を開いてログを見ると表示されます。
用途: デバッグや開発中の出力。
出力先: ブラウザの開発者ツールのコンソール、Node.jsの標準出力など。
HTMLページへの表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
用途: ページの読み込み時に直接HTMLへ出力（非推奨だが、学習用としてはよく使われる）。
注意: ページ描画後に呼び出すと、既存のページ内容が消える可能性あり。
DOMの要素に代入して表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<div id="output"></div>
<script>
document.getElementById("output").innerText = "Hello World!";
</script>
</body>
</html>
用途: Webページ上に動的にテキストを表示。
推奨される方法: innerText または textContent を使う。
アラートボックスで表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script>
alert("Hello World!");
</script>
</body>
</html>
用途: ユーザーへの通知。基本的なダイアログ表示。
出力先: ブラウザのポップアップウィンドウ。
Node.js環境での表示
console.log("Hello World!");Node.js ではブラウザがないため、console.log が主な出力手段です。
※Node.js使ったことが無いから知らなかった。学んだ。
HTMLの属性やイベントから表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<button onclick="alert('Hello World!')">Click me</button>
</body>
</html>
用途: ユーザー操作に応じてメッセージを表示。
ブラウザのconfirm()やprompt()でも可能
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script>
confirm("Hello World"); // OK/キャンセル ダイアログ
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script>
prompt("Hello World"); // 入力付きダイアログ
</script>
</body>
</html>
Canvasへの描画（応用的）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<canvas id="myCanvas" width="200" height="50"></canvas>
<script>
const ctx = document.getElementById("myCanvas").getContext("2d");
ctx.font = "20px Arial";
ctx.fillText("Hello World", 10, 30);
</script>
</body>
</html>
用途: グラフィックスやゲームなど、キャンバス描画が必要な場面。
WebページのURLにクエリとして表示（やや特殊）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script>
window.location.href = "https://example.com/?message=HelloWorld";
</script>
</body>
</html>
実行結果
※ブラウザのURLの部分に表示されます。
ブラウザのタイトルに表示
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<script>
document.title = "Hello World";
</script>
</body>
</html>
実行結果
※ブラウザのページタイトルの部分(タブなど)に表示されます。
まとめ
console.log() | コンソール | 最も基本的な開発用出力 |
document.write() | HTML | 非推奨（学習目的ではOK） |
DOM操作 (innerText) | HTML | 推奨される画面表示方法 |
alert() | ブラウザ | ユーザーに通知 |
confirm() / prompt() | ブラウザ | 対話型 |
window.location.href | ブラウザ | URL操作 |
document.title | ブラウザ | ページタイトル表示 |
<button onclick=...> | HTMLイベント | ユーザー操作時 |
| Canvas API | グラフィックス | 応用的、ゲームや描画用 |
「WebページのURLにクエリとして表示」とかちょっとヒネッた答えもあって、読んでいて色んな知識が付く感じがして楽しめました。
AIに頼めばプログラミングの練習問題なんかも作ってくれるらしいので活用してみたいところです。
Reply