1日目のゴールと全体の流れ
1日目のテーマは「JavaScriptに触ってみて、“動いた！”を体で感じること」です。
理解度は50％で十分。それよりも「自分の手で打ったコードが反応した」という経験を作りたい日です。
今日のゴールは三つです。
JavaScriptが何をする言語か、ざっくり説明できる。
ブラウザのconsoleを開いて、自分でコードを打って実行できる。
変数とconsole.logを使って、簡単なメッセージを表示できる。
ここまで行けたら、超初級1日目としては完璧です。
JavaScriptって何をするもの？
Webページに「動き」と「頭脳」を与える言語
JavaScriptは、Webページを「ただの紙」から「動くもの」に変えるための言語です。
HTMLが「骨組み」、CSSが「見た目」だとしたら、JavaScriptは「動き」と「頭脳」を担当します。
ボタンを押したら何かが変わる。
フォームに入力した内容をチェックする。
画面の一部だけが更新される。
こういう「ユーザーの操作に反応する動き」は、ほとんどJavaScriptがやっています。
今は難しいことは考えなくてよくて、「ブラウザの中で動く命令の集まり」と思っておけば十分です。
今日覚えるべきキーワードは3つだけ
1日目で意識してほしいのは、この3つだけです。
変数：値を入れておく「名前付きの箱」
console：結果を確認するための「メッセージ表示場所」
式：計算や文字列のつなぎ合わせなど、「値を生み出すもの」
この3つがわかると、「プログラムってこうやって組み立てるんだな」という感覚が見えてきます。
まずは「ブラウザでJavaScriptを動かしてみる」
開発者ツールのconsoleを開く
一番早くJavaScriptに触る方法は、ブラウザのconsoleを使うことです。
特別な準備は要りません。
ブラウザ（Chromeなど）で、どこでもいいのでWebページを開きます。
キーボードで F12 を押すか、右クリックして「検証」や「開発者ツール」を選びます。
開いた画面の上か下に「Console」というタブがあるので、それをクリックします。
下の方に「>」のようなマークと入力欄があれば、そこがJavaScriptを打ち込む場所です。
ここにまず、こう打ってみてください。
1 + 1
Enterを押すと、その下に 2 と表示されるはずです。
これが、あなたが書いた「最初のJavaScript」です。
console.logでメッセージを出してみる
次に、結果を「自分の言葉」で出してみましょう。
console.log("はじめてのJavaScript！");
Enterを押すと、下に
はじめてのJavaScript！
と表示されます。
ここで覚えてほしいのは、console.log(...) は「中身をconsoleに表示する命令」だということです。
プログラムの途中経過や結果を確認するときに、これを何度も使うことになります。
変数：値を覚えておく「名前付きの箱」
変数のイメージを言葉でつかむ
変数は、プログラムの中で値を覚えておくための「名前付きの箱」です。
例えば、人の年齢、点数、名前、メッセージなどを一時的に保存しておく場所です。
人間の会話で言うと、
「年齢は20です」
「じゃあ、その年齢に1を足して来年の年齢を計算しよう」
というやりとりを、プログラムの中でやるための仕組みが「変数」です。
letで変数を作る
JavaScriptでは、変数を作るときに let を使います。
consoleに次のように打ってみてください。
let age = 20;
console.log(age);
結果として 20 と表示されればOKです。
ここでやっていることは二つです。
let age = 20; で「ageという名前の箱を作って、20を入れる」。console.log(age); で「ageの中身を表示する」。
この「箱を作る」と「中身を見る」が、変数の基本です。
変数の中身を変えてみる
変数は「変えられる値」なので、あとから中身を変えられます。
let age = 20;
console.log(age); // 20
age = 21;
console.log(age); // 21
ここでの大事なポイントは、2回目は let を書かないことです。
最初の1回だけ let で「箱を作る」。
2回目以降は「その箱の中身を入れ替える」だけなので、age = 21; のように書きます。
数値と文字列を使ったシンプルな例題
数値の計算をしてみる
まずは、数値の計算からやってみましょう。
let a = 5;
let b = 3;
let sum = a + b;
console.log(sum);
結果は 8 になります。
ここでの流れを言葉にすると、
aという箱に5を入れる。
bという箱に3を入れる。
sumという箱に「a + bの結果」を入れる。
sumの中身を表示する。
という4ステップです。
「計算結果を変数に入れておく」というのは、今後何度も出てくる基本パターンです。
文字列（テキスト）を扱ってみる
次に、文字列（テキスト）を扱ってみます。
let name = "太郎";
console.log(name);
結果は 太郎 です。
文字列は "..." か '...' で囲みます。
どちらでも動きますが、最初のうちは "..." に統一しておくと迷いません。
文字列をつなげて文章を作る
数値と文字列を組み合わせて、文章を作ってみましょう。
let name = "太郎";
let age = 20;
let message = "私は " + name + " です。年齢は " + age + " 歳です。";
console.log(message);
結果は、
私は 太郎 です。年齢は 20 歳です。
のようになります。
ここでの重要ポイントは、「+ は数値の足し算だけでなく、文字列のつなぎ合わせにも使える」ということです。
JavaScriptでは、文字列同士を + でつなぐと、一つの長い文字列になります。
1日目のミニアプリ：自己紹介メッセージを作る
自分の情報を変数で持ってみる
今までの要素を組み合わせて、「自己紹介メッセージ」を作ってみましょう。
consoleに次のように打ってください。
let name = "花子";
let age = 25;
let hobby = "読書";
let message = "こんにちは！私は " + name + " です。年齢は " + age + " 歳で、趣味は " + hobby + " です。";
console.log(message);
結果として、
こんにちは！私は 花子 です。年齢は 25 歳で、趣味は 読書 です。
のようなメッセージが出れば成功です。
ここまで来ると、もう立派な「超ミニアプリ」です。
name / age / hobby という3つの変数に、自分の情報を入れる。
それらを + でつなげて、一つの文章（message）を作る。
その message を console に表示する。
これだけで、「データを持つ」「加工する」「表示する」というプログラミングの基本3ステップを全部通っています。
値を変えて遊んでみる
ここからは、少し遊んでみてください。
名前を変えてみる。
年齢を変えてみる。
趣味を2つにしてみる（例: "読書とゲーム"）。
文章の形を自分なりにアレンジしてみる。
「変数の中身を変えると、結果がどう変わるか」を体で感じることが、1日目で一番大事な部分です。
1日目のまとめと、明日へのつなぎ
今日やったことを、短く整理します。
JavaScriptは「Webページを動かすための言語」で、ブラウザのconsoleからすぐ試せる。console.log(...) で結果やメッセージを表示できる。let で変数（値を入れておく箱）を作り、あとから中身を変えられる。
数値の計算や文字列のつなぎ合わせを、変数に入れて扱える。
自分のプロフィールメッセージを作る「超ミニアプリ」を書けた。
明日（2日目）は、ここに「もし〜なら（条件分岐）」と「よく使う処理に名前をつける（関数）」を足していきます。
そうすると、「いつも同じメッセージ」から、「状況によって変わるメッセージ」に一気に進化します。
最後に一つだけ。
今日の中で、「ちょっと楽しいかも」と感じた瞬間はどこでしたか？console.log で文字が出たときか、変数の値を変えて結果が変わったときか。
その「楽しい」と感じたポイントが、あなたとプログラミングの一番の接点です。
そこを大事にしながら、2日目に進んでいきましょう。
