JavaScript - Hello World プログラム

こんにちは、プログラミングを学びたい皆様！エキサイティングなJavaScriptの世界へようこそ。この旅のご案内を務められることに、私はとても嬉しく思います。プログラミングを教えてきた年月の中で、初めてのプログラムを書くことの気持ちを語ることはありません。それでは、一緒に最初のJavaScriptプログラムを作成しましょう。定番の「Hello World」です！

JavaScript - Hello World

JavaScriptで「Hello World」プログラムを書く

コーディングを始める前に、「Hello World」がプログラミングで何を意味するか話しましょう。これは「Hello World」というテキストを出力するシンプルなプログラムで、新しいプログラミング言語を学ぶ初心者の最初のステップとしてよく使われます。プログラミングの世界に「こんにちは」と言うようなものです！

さて、JavaScriptではこのプログラムを作成する方法がいくつかあります。それぞれの方法を探求し、このチュートリアルの最後に、あなたが複数の方法で「Hello World」と言えるようになることを約束します！

document.write()を使う

まずは最もシンプルな方法のdocument.write()から始めましょう。この関数は、HTMLドキュメントに直接コンテンツを書き込みます。

<html>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>

このコードで何が起こっているか説明します：

基本的なHTMLタグ(<html>と<body>)から始めます。
<script>タグを使って、ブラウザにJavaScriptを書き込む準備ができていることを伝えます。
スクリプトの中でdocument.write()を使ってメッセージを出力します。

ブラウザでこれを開くと、「Hello World!」がページに表示されます。シンプルですね？

alert()メソッドを使う

次はalert()メソッドです。これはメッセージを表示するポップアップボックスを作成します。

<html>
<body>
<script>
alert("Hello World!");
</script>
</body>
</html>

これを実行すると、「Hello World!」が表示されるポップアップボックスが現れます。あなたのプログラムがあなたに挨拶してくるようなものです！

console.log()を使う

次は少し「后台」寄りのconsole.log()を試みましょう。このメソッドはブラウザのコンソールにメッセージを印刷します。これは開発者がデバッグに使うツールです。

<html>
<body>
<script>
console.log("Hello World!");
</script>
</body>
</html>

これを実行するためには、ブラウザのデベロッパーツール（通常はF12キーを押して）を開き、コンソールタブを確認します。そこにはあなたの「Hello World!」メッセージが表示されます。

innerHTMLを使う

最後にinnerHTMLを見てみましょう。このプロパティを使うと、要素のHTMLコンテンツを設定できます。

<html>
<body>
<h1 id="greeting"></h1>
<script>
document.getElementById("greeting").innerHTML = "Hello World!";
</script>
</body>
</html>

これを分解すると：

<h1>要素を作成し、IDを「greeting」とします。
スクリプト内でdocument.getElementById("greeting")を使ってこの要素を見つけます。
そのinnerHTMLを「Hello World!」に設定します。

これを実行すると、「Hello World!」がページの見出しとして表示されます。

メソッドを比較する

これらのメソッドを見てきたので、便利な表にまとめましょう：

メソッド	可視性	使用用途
document.write()	ページ上に可視	クイックテストに便利ですが、本番では推奨されません
alert()	ポップアップボックス	ユーザーの注意を引く、デバッグ
console.log()	ブラウザコンソール	デバッグ、通常のユーザーには見えません
innerHTML	ページ上に可視	ページコンテンツを動的に変更

それぞれのメソッドにはその場合一つあります。開発者として成長する中で、どのメソッドを使うべきか学んでいくことでしょう。

私が教えてきた年月の中で、生徒たちは初めてコードが動いた瞬間に「Aha!」という瞬間を持つことがよくあります。ある生徒が初めての「Hello World」プログラムに非常に興奮し、すぐに「Hello Universe」に変更し、その後「Hello Multiverse」に変更したことを覚えています。那就是编程之美——一旦开始，你的想象力是唯一的限制。

覚えておいてください、すべての専門家もかつては初心者でした。鍵は練習と実験を続けることです。これらの例を修正してみてください——メッセージを変更したり、メソッドを組み合わせたり、HTMLスタイルを追加してみてください。コードを弄ることで、よりリラックスしてきます。

JavaScriptは無限の可能性を持つ強力な言語です。この「Hello World」プログラムはあなたのコーディング冒険の始まりに過ぎません。学びを続ける中で、あなたが何を作れるか驚かれることでしょう——インタラクティブなウェブサイトから複雑なアプリケーションまで。

では、JavaScriptの世界に「こんにちは」と言う準備はできましたか？あなたが次に何を作るのか、とても楽しみです！

Credits: Image by storyset

前のチュートリアル:

JavaScript - 文法

次のチュートリアル:

JavaScript - Console.log()