1日目のゴールとテーマ
1日目のテーマは「JavaScriptで“コンピュータに命令する”感覚をつかむ」です。
いきなり難しいことはやりません。今日は、
JavaScriptってそもそも何者なのか
最小限の環境（ブラウザ＋開発者ツール）でコードを書く
変数・値・計算・メッセージ表示という“超基本”を体験する
ここまで行ければ十分です。
「JavaScriptって、思ったより怖くないな」と感じてもらうのが、1日目のゴールです。
JavaScriptはどこで動いているのか
ブラウザの中の“頭脳”としてのJavaScript
JavaScriptは、主に「ブラウザの中で動くプログラミング言語」です。
Chrome、Edge、Firefox、Safari…あなたが普段使っているブラウザの中には、
JavaScriptを実行する“エンジン”が入っています。
Webページがボタンを押したら動いたり、
フォームに入力した内容をチェックしたり、
アニメーションしたりするのは、ほとんどJavaScriptの仕事です。
つまり、JavaScriptは「Webページをただの紙から“動くアプリ”に変えるための言語」と言えます。
1日目の開発環境は「ブラウザだけ」でいい
まずはエディタもNode.jsもいらない
本格的にやるならVS CodeやNode.jsも使いますが、
1日目は「ブラウザだけ」で十分です。
理由はシンプルで、
インストール不要
すぐに試せる
失敗してもページをリロードすればリセットできる
からです。
開発者ツールのコンソールを開く
Chromeを例にしますが、他のブラウザでもほぼ同じです。
- ブラウザを開く
- 適当なWebページを開く（Googleでも何でもOK）
- キーボードで F12 を押すか、右クリック → 「検証」を選ぶ
- 画面の下か右に「開発者ツール」が出る
- 上のタブから「Console（コンソール）」を選ぶ
この「Console」と書かれたところに、JavaScriptのコードを直接打ち込んで実行できます。
今日はここを“練習場”として使います。
最初の一歩：コンソールにメッセージを出してみる
console.logで「しゃべらせる」
コンソールに、次の1行を打ってみてください。
console.log("こんにちは、JavaScript！");
Enterを押すと、その下にこう表示されるはずです。
こんにちは、JavaScript！
これが、あなたの「JavaScriptでコンピュータに命令した」最初の一歩です。
ここで押さえておきたいポイントは3つです。
console.log(...) は「コンソールにメッセージを出す命令」"..." で囲まれた部分は「文字列」と呼ばれる“文字のデータ”
命令は1行書いてEnterを押すと、その場で実行される
この console.log は、今後も「確認したいときの相棒」として何度も使います。
変数とは「名前をつけた箱」である
値を一時的に覚えておく場所
プログラミングでは、「値（数字や文字など）を一時的に覚えておく場所」が必要です。
それが「変数」です。
JavaScriptでは、変数を作るときに let をよく使います。
let name = "たろう";
console.log(name);
Enterを押すと、こう表示されます。
たろう
ここで起きていることを、かみ砕いて説明します。
let name = "たろう";
「name という名前の箱を作って、その中に ‘たろう’ という文字列を入れる」という意味です。
console.log(name);
「name という箱の中身をコンソールに表示して」という命令です。
重要なのは、「変数には名前がある」ということです。
この名前を通じて、あとから何度でもその値を使えます。
数字を扱ってみる：計算もできる
JavaScriptは計算機としても使える
コンソールで、次のように打ってみてください。
1 + 2
Enterを押すと、こう出ます。
3
これは「1 + 2 を計算して、その結果を表示した」だけです。
ここに変数を絡めてみましょう。
let price = 120;
let count = 3;
let total = price * count;
console.log(total);
結果はこうなります。
360
ここでのポイントを丁寧に見ていきます。
let price = 120;
price という箱に 120 という数字を入れています。
let count = 3;
count という箱に 3 を入れています。
let total = price * count;
price と count の中身を取り出して掛け算し、その結果を total に入れています。
console.log(total);
total の中身（計算結果）を表示しています。
このように、「変数に意味のある名前をつけて、計算に使う」というのが基本パターンです。
いきなり難しい式を書かなくていいので、「箱に入れて、取り出して、計算する」という感覚を大事にしてください。
文字列と数字を組み合わせて表示する
「合計は360円です」と言わせてみる
さっきの total を使って、もう少し“人間っぽい”メッセージを出してみましょう。
let price = 120;
let count = 3;
let total = price * count;
console.log("合計は" + total + "円です");
結果はこうなります。
合計は360円です
ここで重要なのは、「文字列と数字を + でつなぐと、1つの長い文字列になる」ということです。
"合計は" は文字列total は数字（360）"円です" も文字列
JavaScriptは、"合計は" + total を見たときに、
total を文字列に変換して "合計は360" にしてくれます。
さらに "合計は360" + "円です" で "合計は360円です" になります。
この「文字列と数字をつなげてメッセージを作る」というのは、
アプリを作るときにめちゃくちゃよく使うパターンです。
ちょっとだけ“アプリっぽく”：ユーザーから入力をもらう
promptで「入力してもらう」体験
ブラウザでは、prompt という関数を使うと、
小さな入力ダイアログを出して、ユーザーから文字を入力してもらえます。
コンソールに、次のように打ってみてください。
let name = prompt("あなたの名前を入力してください：");
console.log("こんにちは、" + name + "さん！");
Enterを押すと、ブラウザに小さなダイアログが出てきて、
「あなたの名前を入力してください：」と表示されます。
名前を入力してOKを押すと、コンソールにこう表示されます。
こんにちは、○○さん！
ここで起きていることを分解します。
prompt("あなたの名前を入力してください：");
ブラウザに入力ダイアログを出し、ユーザーが入力した文字列を返します。
let name = ...
その返ってきた文字列を name という変数に入れています。
console.log("こんにちは、" + name + "さん！");
name の中身を使って、挨拶メッセージを作って表示しています。
これだけで、「ユーザーから入力をもらって、それに応じてメッセージを変える」という
“アプリっぽさ”が一気に出てきます。
数字の入力を扱うときの注意点
promptの結果は「文字列」である
次のコードを試してみてください。
let a = prompt("数字を1つ入力してください：");
let b = prompt("もう1つ数字を入力してください：");
console.log(a + b);
例えば、最初に「2」、次に「3」と入力すると、
結果はこうなります。
23
「5」じゃないの？と思ったら、ここが大事なポイントです。
prompt は「文字列」を返します。
つまり、a も b も「数字っぽい見た目の文字列」です。
JavaScriptは "2" + "3" を「文字列の結合」として扱うので、
“23” という文字列になります。
数字として計算したいときはNumberで変換する
数字として足し算したいときは、
文字列を Number に変換する必要があります。
let aText = prompt("数字を1つ入力してください：");
let bText = prompt("もう1つ数字を入力してください：");
let a = Number(aText);
let b = Number(bText);
let sum = a + b;
console.log("合計は " + sum + " です");
ここでの重要ポイントを深掘りします。
Number(aText) は、「aText を数字として解釈しようとする」関数です。
“2” なら 2 になりますが、もし “abc” のような文字列だと NaN（Not a Number）という特別な値になります。
a と b は「本物の数字」なので、a + b はちゃんと足し算になります。
その結果を sum に入れて、メッセージとして表示しています。
1日目の時点では、「promptの結果は文字列」「数字として使いたいならNumberで変換する」
この2つだけ覚えておけば十分です。
1日目の小さな“ミニアプリ”を作ってみる
「お会計ミニアプリ」をコンソールで作る
ここまでの要素を組み合わせて、
コンソール上で動く小さな“お会計ミニアプリ”を書いてみましょう。
やりたいことはこうです。
単価を入力してもらう
個数を入力してもらう
合計金額を計算して表示する
コードはこうなります。
let priceText = prompt("商品の単価を入力してください（円）：");
let countText = prompt("個数を入力してください：");
let price = Number(priceText);
let count = Number(countText);
let total = price * count;
console.log("合計金額は " + total + " 円です。");
実行の流れを追ってみます。
- 単価を文字列として受け取る（priceText）
- 個数を文字列として受け取る（countText）
- Numberで数字に変換する（price, count）
- 掛け算して total を求める
- console.log でメッセージとして表示する
ここまでできたら、もう立派に「JavaScriptで小さなアプリを書いた」と言っていいです。
1日目で一番大事な感覚
「コンピュータは“箱”と“命令”で動く」
今日やったことを、あえてざっくり言い直すと、
値を入れる“箱”（変数）を作る
その箱に数字や文字を入れる
箱の中身を使って計算したり、メッセージを作ったりする
console.log で結果を確認する
という流れを何度も繰り返しただけです。
プログラミングは、難しい呪文ではなく、
「どんな箱が必要か」
「その箱に何を入れるか」
「その中身をどう組み合わせたいか」
を考えて、それをコードにしていく作業です。
1日目でここまで体験できていれば、
もうJavaScriptは“完全な未知のもの”ではなくなっているはずです。
1日目のまとめ
今日のポイントを短く整理すると、
JavaScriptはブラウザの中で動く言語で、開発者ツールのコンソールからすぐ試せる
console.log で「コンピュータにしゃべらせる」ことができる
let で変数（名前付きの箱）を作り、数字や文字列を入れて使い回せる
文字列と数字を + でつなぐと、メッセージを作れる
prompt でユーザーから入力をもらい、Number で数字に変換して計算できる
というところまで来ました。
次のステップ（2日目）では、
「条件分岐（もし〜なら）」や「繰り返し」を使って、
もう少し“アプリらしい動き”を作っていきます。
もし余裕があれば、
今日の「お会計ミニアプリ」に「税込み計算」や「割引」を足してみるのも、
とても良い練習になります。