はじめに
前回の記事「準備はOK？開発環境を整えよう！JavaScriptを始めるための必須ツール」では、JavaScriptを学ぶ上で欠かせない開発環境のセットアップについて詳しく解説しました。Webブラウザの開発者ツール、Visual Studio Code（VS Code）、そしてNode.jsの導入と、それぞれの役割について理解を深めていただけたことと思います。これで、あなたのPCはJavaScriptのコードを受け入れる準備が万端です。
さあ、いよいよ待ちに待った瞬間です！プログラミング学習の最初の大きな一歩として、今回はJavaScriptのコードを実際に書いて、それがどのように動作するのかを体験してみましょう。プログラミングの世界では、新しい言語を学ぶ際に最初に書くコードとして「Hello, World!」というメッセージを表示するのが伝統となっています。これは、開発環境が正しく機能しているかを確認するシンプルながらも重要なステップであり、同時に「プログラミングの世界へようこそ！」という歓迎のメッセージでもあります。
本記事では、この「Hello, World!」を題材に、JavaScriptの最も基本的な書き方、HTMLファイル内でのJavaScriptの配置方法、そして開発者ツールの「コンソール」を使ってコードの実行結果を確認する方法を、初心者の方でも確実に理解できるよう、ステップバイステップで丁寧に解説していきます。
このガイドを読み終える頃には、あなたは自分の手でJavaScriptコードを書き、その結果をブラウザで確認できるようになっているはずです。これは、あなたがWeb開発者としてのキャリアをスタートさせる上で、非常に大きな達成感となるでしょう。Ping Tech Blogと一緒に、プログラミングの楽しさを実感する旅に出発しましょう！
「Hello, World!」とは？プログラミングの伝統
なぜ「Hello, World!」なのか？
プログラミングの世界に足を踏み入れたばかりの皆さんは、「なぜ最初のプログラムは『Hello, World!』なのだろう？」と疑問に思うかもしれません。この伝統は、1970年代にベル研究所のブライアン・カーニハン氏とデニス・リッチー氏が執筆したC言語の入門書に登場したのが始まりとされています。以来、多くのプログラミング言語の入門書やチュートリアルで、最初に学ぶべきプログラムとして「Hello, World!」が採用されるようになりました。
このシンプルなメッセージを表示するプログラムには、いくつかの重要な意味が込められています。
- 環境設定の確認: 「Hello, World!」を正しく表示できるということは、使用しているプログラミング言語のコンパイラやインタープリタ、そして開発環境が正しくセットアップされ、機能していることを意味します。これは、複雑なプログラムを書き始める前に、基本的な「動作保証」を得るためのシンプルなテストとなります。
- 学習の第一歩: プログラミング学習において、最初の小さな成功体験は非常に重要です。複雑なロジックを組む前に、まずは「自分の書いたコードが動いた！」という感動を味わうことで、学習へのモチベーションを大きく高めることができます。
- 言語の基本構造の理解: 「Hello, World!」は、その言語で最も基本的な出力方法や、プログラムの記述ルール（構文）を学ぶための最小限のコードです。これにより、言語の「Hello」を体験し、その後の学習の土台を築きます。
JavaScriptにおいても、この「Hello, World!」はプログラミングの旅の始まりを告げる、大切な通過点となります。
JavaScriptの基本的な書き方
JavaScriptのコードは、いくつかの方法でHTMLファイルに組み込むことができます。今回は、最も基本的な方法から見ていきましょう。
<script>タグの役割
HTMLファイルの中にJavaScriptのコードを記述するためには、<script>タグを使用します。このタグの中に書かれた内容は、WebブラウザによってJavaScriptコードとして解釈され、実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScriptの基本</title>
</head>
<body>
<h1>JavaScriptのコードを書いてみよう！</h1>
<script>
// JavaScriptのコードをここに書きます
</script>
</body>
</html>
```<script>`タグは、HTMLファイルの`<head>`セクション内、または`<body>`セクション内のどこにでも配置できますが、一般的には`<body>`タグの**閉じタグ（`</body>`）の直前**に配置することが推奨されています。
* **`<head>`内に配置する場合の注意点:**
* JavaScriptコードが実行される前にHTML要素がまだ読み込まれていないため、HTML要素を操作するコード（DOM操作）を書くとエラーになる可能性があります。
* Webページの表示がJavaScriptの読み込み・実行によってブロックされ、ユーザーがコンテンツを見るまでの時間が長くなる可能性があります。
* **`<body>`の閉じタグ直前に配置するメリット（推奨される理由）:**
* HTMLコンテンツが完全に読み込まれてからJavaScriptが実行されるため、JavaScriptがHTML要素を安全に操作できます。
* Webページの表示がJavaScriptの読み込みによってブロックされないため、ユーザーはより早くコンテンツを見ることができ、ユーザー体験が向上します。
#### 外部JavaScriptファイルの読み込み方法
大規模なWebサイトやアプリケーションでは、すべてのJavaScriptコードをHTMLファイル内に直接書くことはほとんどありません。コードが肥大化し、管理が難しくなるためです。代わりに、JavaScriptコードを別のファイル（通常は`.js`という拡張子）に記述し、それをHTMLファイルから読み込むのが一般的です。
外部ファイルを読み込むには、`<script>`タグの`src`属性を使用します。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部JavaScriptファイルの読み込み</title>
</head>
<body>
<h1>外部ファイルからJavaScriptを読み込んでみよう！</h1>
<script src="my-script.js"></script>
</body>
</html>この場合、my-script.jsというファイルにJavaScriptのコードが書かれていることになります。この方法も、先ほどと同様に<body>の閉じタグ直前に配置するのがベストプラクティスです。
JavaScriptのコメント
プログラミングコードには、そのコードが何をしているのか、なぜそのように書かれているのかを説明するための「コメント」を記述することができます。コメントは、プログラムの実行には影響せず、開発者がコードを理解しやすくするために使われます。
JavaScriptには2種類のコメントがあります。
- 単一行コメント:
//の後に続く行の終わりまでがコメントになります。// これは単一行コメントです。 console.log("Hello!"); // ここから行末までコメント - 複数行コメント:
/*から*/までの間がコメントになります。複数行にわたる説明や、一時的にコードを無効化（コメントアウト）したい場合に便利です。/* * これは複数行コメントです。 * この中に書かれた内容はすべて無視されます。 */ console.log("World!"); /* 短いコメントを同じ行に書くこともできます */
コメントは、未来の自分や他の開発者がコードを理解する上で非常に重要です。特に複雑なロジックや、特定の意図があるコードには積極的にコメントを残す習慣をつけましょう。
文の終わりを示すセミコロン（;）
JavaScriptでは、一つの命令（文）の終わりを示すためにセミコロン（;）を使用します。
console.log("最初のメッセージ");
console.log("次のメッセージ");JavaScriptのエンジンは、セミコロンがなくても多くの場合で自動的に文の終わりを推測してくれます（自動セミコロン挿入：Automatic Semicolon Insertion - ASI）。そのため、セミコロンを省略してもコードが動作することがあります。
しかし、**セミコロンは省略せずに記述することを強く推奨します。**その理由は以下の通りです。
- 可読性の向上: 明示的に文の区切りを示すことで、コードが読みやすくなります。
- エラーの防止: ASIは便利な機能ですが、JavaScriptのルールに従って自動挿入されるため、開発者の意図しない場所でセミコロンが挿入され、予期せぬバグを引き起こす可能性があります。明示的に書くことで、このような潜在的な問題を回避できます。
- コードの圧縮: コードを圧縮する際に、セミコロンが適切に記述されていないと、正しく圧縮できない場合があります。
プロフェッショナルな開発現場では、セミコロンを省略しないのが一般的な慣習です。学習の初期段階から、セミコロンをきちんと記述する習慣を身につけておきましょう。
コンソールにメッセージを表示しよう！console.log()
いよいよ、JavaScriptで「Hello, World!」を表示する具体的な方法を見ていきましょう。ここでは、Webブラウザの開発者ツールにある「コンソール」という機能を使います。
console.log()とは？
console.log()は、JavaScriptのコードからWebブラウザの開発者ツール（Developer Tools）の「Console（コンソール）」タブに、指定した情報を出力するための関数です。
「関数」とは、特定の処理を実行するための命令のまとまりのことです。console.log()は、開発者がプログラムの動作を確認したり、変数の中身を一時的に表示させたりする際に非常に頻繁に利用されます。これは、プログラムが意図した通りに動いているかを確認する「デバッグ」作業において、最も基本的なツールの一つとなります。
実際に書いてみよう！「Hello, World!」
それでは、実際にVS Codeを使ってHTMLファイルを作成し、JavaScriptコードを記述してみましょう。
- 新しいフォルダの作成: まず、PCの好きな場所に「
javascript-lesson3」のような新しいフォルダを作成してください。このフォルダの中に、今回のレッスンで使うファイルを保存します。 - HTMLファイルの作成: VS Codeを開き、「ファイル」→「新規ファイル」を選択し、作成したフォルダ内に「
index.html」という名前で保存します。そして、以下のHTMLコードを記述してください。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>初めてのJavaScriptコード</title> </head> <body> <h1>JavaScriptの学習へようこそ！</h1> <p>コンソールにメッセージが表示されるか確認してみましょう。</p> <script> // プログラミングの伝統「Hello, World!」をコンソールに出力します console.log("Hello, World!"); </script> </body> </html>ポイント:
<script>タグが<body>の閉じタグの直前に配置されていることを確認してください。 - ファイルを保存: VS Codeでファイルを保存します（
Ctrl+SまたはCmd+S）。 - ブラウザで開く: 保存した
index.htmlファイルを、ファイルエクスプローラー（Windows）やFinder（macOS）からダブルクリックして、Google ChromeなどのWebブラウザで開いてみてください。- Webページ自体は「JavaScriptの学習へようこそ！」という見出しと「コンソールにメッセージが表示されるか確認してみましょう。」という段落が表示されるだけです。まだ画面上には「Hello, World!」という文字は表示されません。
- 開発者ツールを開き、コンソールを確認: ブラウザでページを開いた状態で、以下のいずれかの方法で開発者ツールを開いてください。
- Windows/Linux:
F12キーを押す、またはCtrl + Shift + Iを押す。 - macOS:
Cmd + Option + Iを押す。 - 共通: ページ上で右クリックし、「検証」または「要素を検証」を選択する。
開発者ツールが開いたら、上部にあるタブの中から「Console（コンソール）」タブをクリックしてください。
![ブラウザの開発者ツールでコンソールタブが表示されているスクリーンショット]どうでしょうか？「Hello, World!」というメッセージが、黒い文字で表示されているのが確認できたでしょうか？ もし表示されていれば、おめでとうございます！あなたはJavaScriptで最初のコードを正しく実行できました。
- Windows/Linux:
さまざまな情報をコンソールに出力してみよう
console.log()は、文字列だけでなく、さまざまな種類の情報を出力することができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>コンソール出力の練習</title>
</head>
<body>
<h1>コンソール出力の練習</h1>
<p>開発者ツールを開いてコンソールを確認してください。</p>
<script>
// 文字列を出力
console.log("これは文字列です。");
// 数値を出力
console.log(123);
console.log(3.14);
// 計算結果を出力
console.log(10 + 5); // 15
console.log(20 / 4); // 5
// 真偽値（true/false）を出力
console.log(true);
console.log(false);
// 複数の情報をまとめて出力（カンマで区切る）
console.log("名前:", "山田", "年齢:", 30);
// 変数の中身を出力（変数は次回の記事で詳しく学びます）
let userName = "Ping太郎";
let userAge = 25;
console.log("ユーザー名:", userName, "年齢:", userAge);
</script>
</body>
</html>このファイルを保存してブラウザで開き、コンソールを確認してみてください。様々なデータがどのように表示されるかを確認できます。console.log()は、JavaScriptの学習を進める上で、コードの動作を理解するための強力な味方となるでしょう。
ブラウザの開発者ツールを使いこなそう（コンソール編）
先ほども使った開発者ツールは、Web開発者にとってまさに「相棒」のような存在です。特に「Console（コンソール）」タブは、JavaScriptのデバッグや学習において非常に重要です。
開発者ツールの開き方
主要なブラウザでの開き方は以下の通りです。
- Google Chrome / Mozilla Firefox / Microsoft Edge:
- キーボードショートカット:
F12キーを押す。 - または:
Ctrl + Shift + I(Windows/Linux) /Cmd + Option + I(macOS) を押す。 - または: Webページ上で右クリックし、「検証」または「要素を検証」を選択する。
- キーボードショートカット:
- Apple Safari:
- Safariメニューの「環境設定」→「詳細」タブで「メニューバーに"開発"メニューを表示」にチェックを入れる。
- その後、「開発」メニューから「Webインスペクタを表示」を選択する。
- または:
Cmd + Option + Iを押す。
コンソールの基本的な使い方
コンソールタブは、JavaScriptの実行結果だけでなく、Webページで発生したエラーや警告も表示してくれます。
- メッセージのクリア: コンソールにメッセージが増えすぎた場合、左上にある「クリア」ボタン（🚫のようなアイコン）をクリックするか、
Ctrl + L(Windows/Linux) /Cmd + K(macOS) で表示をクリアできます。 - エラーメッセージの確認: JavaScriptコードに文法ミスなどがあると、コンソールに赤い文字でエラーメッセージが表示されます。メッセージには、エラーの種類と、どのファイルの何行目でエラーが発生したか（例:
index.html:15）が示されます。これはバグを修正する上で非常に重要な情報です。![コンソールに表示されるエラーメッセージのスクリーンショット] - 警告メッセージの確認: エラーではないものの、推奨されない記述方法や潜在的な問題がある場合に、黄色い文字で警告メッセージが表示されることがあります。
- 直接コードを入力して実行する方法: コンソールの一番下にある入力欄にJavaScriptコードを直接入力して、Enterキーを押すことで、その場でコードを実行し、結果を確認することができます。これは、ちょっとしたJavaScriptの動作を試したい時や、特定の変数の値を確認したい時に非常に便利です。
// コンソールに直接入力して試してみよう 10 * 5; // Enterキーを押すと「50」と表示される "Hello" + " " + "JavaScript"; // Enterキーを押すと「"Hello JavaScript"」と表示される
alert()について（補足と注意点）
プログラミングの入門書や古いWebサイトの例で、alert()という関数を見たことがあるかもしれません。これは、ブラウザの小さなポップアップウィンドウにメッセージを表示する機能です。
// alert() の例（学習用、実務では非推奨）
alert("これはアラートメッセージです！");確かにalert()は手軽にメッセージを表示できますが、**現代のWeb開発ではほとんど使用されません。**その理由は以下の通りです。
- ユーザー体験の阻害:
alert()が表示されると、ユーザーはそのポップアップを閉じるまでWebページの操作が一切できなくなります。これはユーザーにとって非常にストレスとなり、Webサイトの使い勝手を著しく低下させます。 - 非同期処理のブロック: JavaScriptの多くの処理は非同期で行われますが、
alert()は同期的に動作するため、他の処理をブロックしてしまいます。 - デザインのカスタマイズ不可:
alert()の見た目はブラウザによって異なり、CSSなどでデザインをカスタマイズすることができません。
学習の初期段階で「とりあえずメッセージを表示したい」という場合には使えるかもしれませんが、実務でWebサイトやWebアプリケーションを開発する際には、alert()の代わりに、HTML要素を動的に操作してメッセージを表示する（例えば、画面下部に一時的に表示される通知メッセージなど）方法を用いるのが一般的です。console.log()は、開発者向けのメッセージ表示に特化した、より適切なツールであることを覚えておきましょう。
まとめ：開発環境を整え、学習の準備は万端！
本記事では、プログラミング学習の第一歩として、JavaScriptで「Hello, World!」をコンソールに表示する方法を学びました。
- 「Hello, World!」の意義: プログラミング学習の伝統であり、環境が正しく動作していることを確認する最初のステップです。
- JavaScriptの基本的な書き方: HTMLファイル内で
<script>タグを使って記述すること、コメントの書き方、セミコロンの重要性を理解しました。 console.log()の使い方: 開発者ツールのコンソールに情報を出力する基本的な関数であり、デバッグに不可欠なツールであることを学びました。- 開発者ツールのコンソール: エラーや警告の確認、直接コードの実行など、その強力な機能を確認しました。
これで、あなたはJavaScriptのコードを書き、その結果を自分で確認できる基本的な能力を身につけました。これは、Web開発者としてのあなたの旅の始まりにおいて、非常に大きな一歩です。
次回の記事「変数を使いこなそう！データの箱を理解する」では、プログラムでデータを一時的に保存するための「変数」という概念について詳しく学びます。これにより、より複雑な処理を記述するための基礎が築かれます。
Ping Technologiesは、あなたのエンジニアとしての成長と、Web開発の世界での輝かしい活躍を心から応援しています！
