INDEX
～
ad. 価格範囲を指定して商品を探せます
「Hello, World!」とは？
「Hello, World!」は、プログラミングを学び始める際に最初に作成することが多いプログラムです。
JavaScriptでは、画面に文字を表示したり、コンソールへ出力したりすることで、プログラムが正しく動作しているかを確認します。
「Hello, World!」を表示してみよう
次のボタンをクリックすると、「Hello, World!」という文字が表示されます。
プログラムの内容
HTML
<button onclick="showMessage()">
「Hello, World!」を表示
</button>
<div id="output"></div>
ボタンをクリックすると、onclickによってshowMessage()関数が呼び出されます。
id="output"の
は、メッセージを表示する場所です。
JavaScript
function showMessage() {
document.getElementById("output").textContent = "Hello, World!";
}
document.getElementById("output")で表示先の要素を取得し、textContentに文字列を代入して画面へ表示しています。
console.logで表示する方法
JavaScriptでは、画面ではなく開発者ツールのコンソールへ表示することもよくあります。
console.log("Hello, World!");
実行結果（コンソール）
Hello, World!
console.log()は、プログラムの動作確認やデバッグで頻繁に利用されます。
「Hello, World!」で学べること
| 内容 | 説明 |
|---|---|
| JavaScriptの実行 | JavaScriptが正しく動作することを確認できる。 |
| イベント処理 | ボタンのクリックで関数を実行できる。 |
| DOM操作 | HTMLの要素を書き換えて画面表示を変更できる。 |
| コンソール出力 | console.log()で実行結果を確認できる。 |
まとめ
- 「Hello, World!」はプログラミングの最初のサンプルとして広く使われている。
- JavaScriptでは画面やコンソールへ文字を表示できる。
- ボタンのクリックによって関数を実行できる。
document.getElementById()を使うとHTML要素を取得できる。textContentを使うと要素内の文字を変更できる。