JavaScript：実行環境とconsole.log
1学習の目的
- JavaScriptを動かす場所を用意し、最初のコードを実行できるようになる。ブラウザさえあれば今すぐ始められることを確認する。
- console.log で値を確認する習慣を身につける。これが以降すべての章で「動いているか」を確かめる唯一の手段になる。
2基礎解説
| やりたいこと | 書き方 | 結果 |
|---|---|---|
| 文字を出す | console.log("こんにちは"); | こんにちは |
| 計算結果を出す | console.log(1 + 2); | 3 |
| 複数まとめて出す | console.log("点数", 82); | 点数 82 |
| 1行コメント | // メモ | 実行されない |
- 実行環境はブラウザにすでに入っている。インストール不要。F12（Macは ⌘ + option + I）で開発者ツールを開き、Consoleタブに書けばその場で動く。
- 文字列は " か ' で囲む。囲み忘れると変数名だと解釈されてエラーになる。
- 文の終わりの ;（セミコロン）は省略できるが、付ける前提で統一するのが安全。実務のコードはほぼ付いている。
- console.log はカンマで区切って複数の値を並べられる。区切りには自動で半角スペースが入る。
- コメントは // で行末まで、/* */ で複数行。コードを消さずに一時的に無効化する用途でもよく使う。
現場使用例：処理が想定どおり動いているかの確認、変数の中身の目視チェック、エラー箇所の切り分け。プログラマーが1日で最も多く書くコードと言ってよい。
console.log("Hello, World!"); // Hello, World!
// 計算した結果をそのまま出せる
console.log(3 * 7); // 21
// カンマで区切ると横に並ぶ（間に半角スペース）
console.log("合計", 120, "円"); // 合計 120 円
/* 複数行のコメントは
このように書く */
3基本ドリル（10問）
出力 == Hello, World!
console.log("Hello, World!"); と書く。文字列は引用符で囲む。
console.log("Hello, World!");
すべての始まりの1行。console はブラウザが用意している道具箱で、log はその中の「表示する」機能を指す。
A. F1 B. F12 C. Esc D. Tab 選択★☆☆無料
解答 == B
ファンクションキーの一番右あたり。
B
Macでは ⌘ + option + I。開いたらConsoleタブを選ぶと、その場でJavaScriptが書ける。
出力 == 56
掛け算の記号は * （アスタリスク）。
console.log(7 * 8);
数値は引用符で囲まない。囲むと文字列になり "7 * 8" がそのまま表示されてしまう。
console.____("JavaScript入門");
出力 == JavaScript入門
「記録する」という意味の英単語3文字。
log
console には log のほかに warn（警告）や error（エラー）もあり、開発者ツール上で色分けされて表示される。
A. 画面に表示される B. 実行されず無視される C. エラーになる D. 変数になる 選択★☆☆無料
解答 == B
スラッシュ2つで始まる行の意味。
B
コメントは人間のためのメモで、プログラムからは存在しないものとして扱われる。処理を一時的に止めたいときにも使う。
出力 == 合計 120 円
console.log(値1, 値2, 値3); のようにカンマで並べる。数値は引用符なし。
console.log("合計", 120, "円");
区切りには自動で半角スペースが入る。自分でスペースを書き足すと二重になるので注意。
console.log("1行目");
____ console.log("2行目");
console.log("3行目");
出力 == 1行目 / 3行目（2行）
行の先頭に付けて、その行を無効化する記号。
//
コードを消さずに無効化できるのがコメントアウトの利点。原因を切り分けるとき、1行ずつ無効化して試すのは実務でも日常的に使う手法。
A. こんにちは と表示される B. 変数だと解釈されエラーになる C. 空白が表示される D. 引用符が自動で補われる 選択★★☆無料
解答 == B
引用符で囲まれていない文字列は何として扱われるか。
B
引用符がないと「こんにちは という名前の変数」を探しに行き、存在しないので ReferenceError になる。文字列は必ず囲む。
出力3行。1行目 / 2行目 / 3行目
console.log を3回書く。1回ごとに改行される。
console.log("1行目");
console.log("2行目");
console.log("3行目");
console.log は1回呼ぶごとに改行される。改行文字を自分で書く必要はない。
出力 == 100 + 50 = 150
console.log("100 + 50 =", 100 + 50); と書く。左は文字列、右は計算式。
console.log("100 + 50 =", 100 + 50);
引用符の中は文字、外は計算という違いがはっきり出る問題。同じ「100 + 50」でも、囲めば文字列、囲まなければ計算される。
4実践シナリオ（5問）
「[開始] データ取得」「[完了] 3件を取得しました」「[終了] 処理を終えました」の3行を出力すること。件数の3は数値として渡すこと。 コーディング★★☆無料
出力3行が完全一致
2行目は console.log("[完了]", 3, "件を取得しました"); …とすると余分なスペースが入るので注意。カンマ区切りのスペースを計算に入れて組み立てる。
console.log("[開始] データ取得");
console.log("[完了]", 3 + "件を取得しました");
console.log("[終了] 処理を終えました");
カンマ区切りは間に半角スペースが入るため、「3件」のように詰めたい場合は + でつなぐ。実務のログ出力ではこの1文字の差が読みやすさを左右する。
出力 == りんご 3個 = 450円
カンマ区切りのスペースを考慮する。"りんご", 3 + "個 =", 150 * 3 + "円" のように組み立てられる。
console.log("りんご", 3 + "個 =", 150 * 3 + "円");
数値と文字列を + でつなぐと数値が文字列に変換されて連結される。この挙動はJavaScript特有で、次章の型の話につながる。
出力 == 税抜105円 → 税込116円
税込は 105 * 1.1。そのまま出すと 115.50000000000001 という値になるので、Math.round() で整数に丸める。
console.log("税抜105円 → 税込" + Math.round(105 * 1.1) + "円");
小数計算には誤差が出るのがコンピュータの宿命。105 * 1.1 の答えは 115.5 のはずだが、実際には 115.50000000000001 になる。金額計算では Math.round() で丸めるのが定石。
console.log("処理A");
console.log("処理B");
console.log("処理C");
そのうえで、なぜ無効化したのかを説明するコメントを1行追加すること。 コーディング★★★無料
出力 == 処理A / 処理C（2行）
行頭に // を付ける。説明のコメントも // で書く。
console.log("処理A");
// 処理Bは不具合調査のため一時的に停止
// console.log("処理B");
console.log("処理C");
「なぜ止めたか」を書き残すのが重要。理由のないコメントアウトは、後から見た人（と未来の自分）が消していいのか判断できず、コードに残り続ける。
① 10 + 3 ② 10 - 3 ③ 10 * 3 コーディング★★★無料
出力3行。10 + 3 = 13 / 10 - 3 = 7 / 10 * 3 = 30
左側の "10 + 3 =" は文字列、右側は計算式。カンマ区切りのスペースをそのまま活かせる。
console.log("10 + 3 =", 10 + 3);
console.log("10 - 3 =", 10 - 3);
console.log("10 * 3 =", 10 * 3);
同じ「10 + 3」が、引用符の中では文字として、外では計算として扱われているのがこの問題の核心。この区別が曖昧なままだと、以降すべての章でつまずく。
5仕上げ課題
商品：ノート（1冊 180円）を 3冊
商品：ペン（1本 120円）を 5本
消費税：10%
仕様：
① 見出し行を出す
② 各商品を「ノート 180円 × 3 = 540円」の形式で出す（金額は計算させる）
③ 区切り線を出す
④ 小計と税込合計を出す（税込は Math.round で整数に丸める）
⑤ コードの先頭に、何のコードかを説明するコメントを1行入れる
出力仕様（6行）：
=== 購入明細 ===
ノート 180円 × 3 = 540円
ペン 120円 × 5 = 600円
---
小計 1140円
税込 1254円
出力6行が完全一致
すべて + でつないで1つの文字列にすると、余分なスペースを気にせず組み立てられる。小計は 180 * 3 + 120 * 5、税込は Math.round(小計 * 1.1)。同じ計算を2回書くことになるが、次章で変数を学ぶとこれが解消される。
// 購入明細を計算して表示する
console.log("=== 購入明細 ===");
console.log("ノート 180円 × 3 = " + 180 * 3 + "円");
console.log("ペン 120円 × 5 = " + 120 * 5 + "円");
console.log("---");
console.log("小計 " + (180 * 3 + 120 * 5) + "円");
console.log("税込 " + Math.round((180 * 3 + 120 * 5) * 1.1) + "円");
console.log と四則演算だけで、実用的な明細が出せるようになった。
ただし今のコードには大きな不満が残っているはずだ。「180 * 3 + 120 * 5」という同じ計算を2回書いている。単価を変えたければ4箇所を直す必要があり、1箇所でも直し忘れれば数字が合わなくなる。
この問題を解決するのが次章の変数だ。値に名前を付けて1箇所で管理できるようになると、このコードは見違えるほど短く、直しやすくなる。「不便を体験してから道具を学ぶ」——この順番で進めていく。