JavaScript 入門

JavaScript 最初のプログラム

これまでの章では、JavaScriptとは何か、なぜこれほど強力なのかを探求し、開発環境のセットアップも完了しました。いよいよ、実際にその設定を使って手を動かす時が来ました。

ほぼすべてのプログラミング言語において、伝統的な最初のプログラムは "Hello, World!" というメッセージを表示することです。この一見シンプルなタスクは非常に重要です。なぜなら、開発環境が正しく構成されており、基礎的なプログラムを正常に記述・保存・実行できることを確認できるからです。

この基本ステップをマスターすることで、コードがテキストエディタからWebページやブラウザ上のアクションへと変換される仕組みを理解する扉が開かれます。

1. console.log() 文

"Hello, World!" プログラムの核心となるのは、console.log() 文です。

これはJavaScriptにおける基礎的なコマンドであり、開発者がブラウザのデベロッパーコンソール（またはNode.jsなどの他のJavaScript環境）にメッセージ、変数、その他の情報を直接表示できるようにするものです。プログラムのフローを理解し、デバッグを行う上で不可欠なツールです。

1.1 console.log() とは？

console.log() は、console オブジェクトに属するメソッド（関数）です。console オブジェクトはブラウザのデバッグ用コンソールへのアクセス権を提供します。log メソッドは、コンソールにメッセージを出力することに特化しています。

これは、JavaScriptコードがその内部で何が起きているかをあなた（開発者）に「伝える」ための手段だと考えてください。

1.2 console.log() の構文

基本的な構文は非常に直感的です。

console.log(message);
  • console: コンソールオブジェクトを指します。ブラウザや他のJavaScript環境でグローバルに利用可能です。
  • .（ドット）: ドット演算子と呼ばれ、オブジェクトのプロパティやメソッドにアクセスするために使用されます。
  • log: console オブジェクトのメソッド（オブジェクトに関連付けられた関数）です。1つ以上のパラメータ（引数）を受け取り、それらをコンソールにプリントします。
  • (): この括弧の中に、記録したい情報を渡します。
  • message: 表示したいデータです。ストリング（文字列）、数値、変数、オブジェクト、あるいはほぼすべてのJavaScriptの値を指定できます。

注意： テキストを記録する場合、それが文字列リテラルであることを示すために、引用符（シングルクォート '' またはダブルクォート ""）で囲む必要があります。

1.3 なぜ "Hello, World!" なのか？

数十年にわたり、"Hello, World!" は無数のプログラマーの入門プログラムとして親しまれてきました。その目的はシンプルかつエレガントです。テキストエディタからコンパイラ/インタプリタ、そして出力デバイスに至るまでのツールチェーン全体が正常に動作しているかを検証することです。"Hello, World!" を表示できれば、基礎的なセットアップが強固であることを確信でき、より複雑なタスクへ進むことができます。

2. "Hello, World!" のためのファイル作成

最初のJavaScriptプログラムを実行するには、HTMLファイルとJavaScriptファイルの2つが必要です。HTMLファイルはWebページのコンテナ（入れ物）として機能し、そこにJavaScriptコードをリンクさせます。

2.1 ステップ 1：HTMLファイルの作成

テキストエディタ（VS Codeなど）を開きます。新しいファイルを作成し、index.html という名前で新しいフォルダ（例：my-first-program）に保存します。

<!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>ブラウザのコンソールを開いて "Hello, World!" メッセージを確認してください！</p>
    <script src="script.js"></script>
</body>
</html>

2.2 ステップ 2：JavaScriptファイルの作成

index.html と同じフォルダ内に、もう一つの新しいファイルを作成し、script.js という名前で保存します。ここにJavaScriptコードを記述します。

// script.js

// これは単一一行コメントです。この // 以降の内容は JavaScript によって無視されます。

// console.log() 関数はブラウザのデベロッパーコンソールにメッセージを出力するために使用されます。
// ここでは、文字列 "Hello, World!" を出力します。
console.log("Hello, World!");

2.3 ステップ 3：連携（リンク）の仕組みを理解する

index.html ファイル内の <script src="script.js"></script> という行に注目してください。

この行は極めて重要です。なぜなら、ブラウザに対して script.js ファイルに含まれるJavaScriptコードを読み込み、実行するように指示しているからです。ここでは src 属性を使って外部のJavaScriptファイルを指定しています。<script> タグについては次章で詳しく深掘りしますが、今は「この一行がHTMLとJavaScriptを繋いでいる」ということだけ理解しておけば十分です。

3. 最初のプログラムを書いて実行する

ファイルが準備できたら、すべてが期待通りに動作するか確認しましょう。

3.1 ステップ 1：ファイルが保存されているか確認

index.html と script.js が両方とも同じディレクトリ（フォルダ）に保存されていることを確認してください。

3.2 ステップ 2：ブラウザで index.html を開く

ファイルを保存したフォルダに移動し、index.html をダブルクリックします。これにより、デフォルトのWebブラウザでHTMLファイルが開きます。

ページ上には「私の最初の JavaScript プログラム」というタイトルとテキストが表示されますが、ページそのものには "Hello, World!" は表示されません。

3.3 ステップ 3：ブラウザのコンソールを開く

console.log("Hello, world!"); の出力を確認するには、ブラウザのデベロッパーコンソールを開く必要があります。

  • Google Chrome: ページ上の任意の場所を右クリックし、「検証 (Inspect)」を選択。表示されたパネルで「Console」タブをクリックします。
  • Mozilla Firefox: 任意の場所を右クリックし、「調査 (Inspect Element)」を選択。「コンソール」タブをクリックします。
  • Microsoft Edge: 任意の場所を右クリックし、「詳細設定 (Inspect)」を選択。「コンソール」タブをクリックします。
  • Safari (macOS): まず「開発」メニューを有効にします（設定 > 詳細 > メニューバーに"開発"メニューを表示）。その後、開発 > JavaScriptコンソールを表示を選択。

コンソールを開くと、そこに Hello, world! というメッセージが表示されているはずです。表示されていれば、おめでとうございます！最初のJavaScriptプログラムの作成と実行に成功しました。

4. 実践的な例とデモ

console.log() の使い方を拡張して、異なる種類の情報を出力してみましょう。

4.1 示例 1：複数の文字列を記録する

1つ以上の文字列を記録できます。script.js にもう一行追加してみましょう。

// script.js
console.log("Hello, World!"); // 最初のメッセージ
console.log("これは2番目の JavaScript メッセージです！"); // 新しいメッセージ

script.js を保存し、ブラウザで index.html をリフレッシュしてコンソールを確認してください。2つのメッセージがそれぞれの行に表示されるはずです。

4.2 示例 2：数値を記録する

console.log() はテキストだけでなく、数値も表示できます。数値の場合、引用符で囲む必要はありません。

// script.js
console.log("Hello, World!");
console.log("これは2番目の JavaScript メッセージです！");
console.log(123); // 数値を記録
console.log(3.14159); // 浮動小数点を記録

保存してリフレッシュし、コンソールを観察してください。数値が表示されているのがわかります。

4.3 示例 3：簡単な計算結果を記録する

基本的な算術演算の結果を直接記録することも可能です。

// script.js
console.log("Hello, World!");
console.log("これは2番目の JavaScript メッセージです！");
console.log(123);
console.log(3.14159);
console.log(5 + 3); // 加算の結果 (8) を記録
console.log(10 * 2); // 乗算の結果 (20) を記録

保存してリフレッシュし、コンソールに 8 と 20 が表示されていることを確認してください。これはJavaScriptが計算を行う能力を持っていることを示しており、console.log() はその結果を即座に確認するための優れた方法です。