このシリーズについて
「JavaScript入門」第2回です。前回は実行環境を整えました。今回は、最初のプログラムを書いて、JavaScriptが上から順番に実行されることを確認します。
前提条件: JavaScript入門 #1 - 開発環境と実行方法 が完了し、
node main.jsを実行できること。
今回作るもの
学習用ファイル hello.js を作り、文字を出力します。
Hello Worldの目的は、文法を覚えることではなく、書いたコードが実際に実行される流れを確認することです。
Step 1: ファイルを作る
作業フォルダに hello.js を作ります。
console.log("Hello, World!");
ターミナルで実行します。
node hello.js
次の出力になれば成功です。
Hello, World!
Step 2: 複数行を出力する
JavaScriptは、基本的に上から下へ順番に実行されます。
console.log("1行目");
console.log("2行目");
console.log("3行目");
出力は次の順番になります。
1行目
2行目
3行目
この性質は、条件分岐やループに入る前の基本です。
Step 3: コメントを書く
コメントは、実行されないメモです。コードの意図を短く残すために使います。
// 1行コメント
console.log("コメントは実行されません");
/*
複数行コメントです。
長い説明を書くときに使います。
*/
console.log("ここは実行されます");
コメントは便利ですが、コードを読めばわかることを繰り返し書く必要はありません。
Step 4: セミコロンを確認する
JavaScriptでは、行末のセミコロンは多くの場合省略できます。ただし、入門段階では付ける書き方で統一すると読みやすくなります。
console.log("セミコロンあり");
console.log("このシリーズでは基本的に付けます");
ポイント: JavaScriptには自動セミコロン挿入がありますが、最初は「文の終わりに ;」と覚えると安全です。
Step 5: 値をそのまま表示する
console.log は文字列だけでなく、数値や計算結果も表示できます。
console.log(100);
console.log(10 + 5);
console.log("10 + 5");
出力は次のようになります。
100
15
10 + 5
ダブルクォートで囲むと文字列として扱われます。囲まない場合は式として評価されます。
よくあるエラー
| エラー | よくある原因 | 確認する場所 |
|---|---|---|
SyntaxError: Invalid or unexpected token | クォートの閉じ忘れ | " や ' の対応 |
ReferenceError | 文字列をクォートで囲んでいない | console.log(Hello) になっていないか |
| 変更が反映されない | ファイルを保存していない | VS Codeの保存状態 |
エラーが出たら、まず一番上のエラーメッセージと行番号を見ます。
次のステップ
JavaScript入門 #3 - 変数letとconst で、値に名前を付けて使う方法を学びます。
まとめ
console.log は、JavaScript学習で最もよく使う確認手段です。文字列、数値、計算結果を出力しながら、コードが上から順番に実行されることを確認しました。
