JavaScript徹底基礎 ― 読める・書けるを作る2ヶ月

1. 実験室を開くF12 → Consoleタブをクリックします。
2. 変数を作るconst name = "山田"; と打って Enter。続けて name と打つと「山田」が返ります。
3. 計算させるconst price = 180; → price * 3 で540が返ります。
4. 文字に埋め込む`${name}さんの合計は${price * 3}円` と打ちます。バッククォート (Shift + @) で囲むと、${ } の中に変数や計算を埋め込めます。これがテンプレート文字列で、今後ずっと使う主力です。
5. letとconstの違いを試すlet count = 1; count = 2; は通りますが、const x = 1; x = 2; はエラーになります。「あとで変わるものだけlet、基本はconst」が現場の定番です。

お題: コンソールで1問ずつ解きます。①自分の名前を入れた変数を作って表示する。②好きな数を2つ変数にして、足し算・掛け算を表示する。③「パン180円を4個買うと720円」という文をテンプレート文字列で組み立てる (数字は変数と計算で)。④"180" + 20 を実行して、結果がなぜ「18020」になるか考える。⑤Number("180") + 20 で直す。⑥〜⑩は④までの問題の数字や文章を、自分で差しかえて反復します。

仕様: 1から30まで数えて、3の倍数なら「Fizz」、5の倍数なら「Buzz」、両方の倍数なら「FizzBuzz」、それ以外は数字を表示します。一気に書かず、段階で育てるのがプロの組み立て方です。

1. まず数えるだけ

   for (let i = 1; i <= 30; i++) {
     console.log(i);
   }

   1〜30が出れば、繰り返しは完成です。
2. 3の倍数だけ特別あつかい

   for (let i = 1; i <= 30; i++) {
     if (i % 3 === 0) {
       console.log("Fizz");
     } else {
       console.log(i);
     }
   }

   % は「割った余り」です。余りが0 = 倍数、はこの先もずっと使う発想です。
3. 5の倍数も足すelse if (i % 5 === 0) の枝を足して「Buzz」を出します。
4. 両方の倍数を最初に判定するif (i % 15 === 0) を一番上に置いて「FizzBuzz」を出します。順番を最後にすると、先に「Fizz」に捕まって動きません。条件は厳しいものから先に書く ― これがこの例題の一番の教訓です。

お題: ①点数 (変数) が80以上なら「合格」、60以上なら「あと少し」、それ未満なら「再挑戦」と表示する。②1〜100の合計を計算する (合計用の変数を0で作り、forで足しこむ)。③九九の7の段を「7 × 1 = 7」の形で表示する。④1〜20のうち偶数だけ表示する。

let total = 0;
for (let i = 1; i <= 100; i++) {
  total = total + i;
}
console.log(total); // 5050

お題: 変数 me と cpu に「グー / チョキ / パー」のどれかを入れたら、「勝ち / 負け / あいこ」を表示するコードを書きます (画面はまだ不要、コンソールだけでOK)。月末制作の心臓部の先行練習です。

1. 関数を定義する

   function taxIncluded(price) {
     return Math.round(price * 1.1);
   }

2. 呼び出すtaxIncluded(180) → 198。taxIncluded(2980) → 3278。材料を変えれば何度でも働きます。
3. 引数を増やす税率も材料にして function taxIncluded(price, rate) に拡張し、taxIncluded(180, 0.08) (軽減税率) も計算できるようにします。
4. returnの意味を確かめるconst a = taxIncluded(500, 0.1); のように、返ってきた値は変数に受け取れます。「表示する (console.log)」と「返す (return)」の違いが、関数の一番大事な感覚です。

お題: ①名前を渡すと「◯◯さん、こんにちは!」を返す関数。②点数を渡すと「合格 / あと少し / 再挑戦」を返す関数 (演習2-Aの①を関数化)。③金額の配列ではなく、まず2つの引数の大きい方を返す関数 max2(a, b)。

お題: 自分がStep 3で書いた作品 (または月末制作の途中コード) から、「ほぼ同じ処理の繰り返し」を1か所見つけて、関数にまとめます。

1. データを作る

   const items = [
     { name: "メロンパン", price: 180, stock: 5 },
     { name: "クロワッサン", price: 220, stock: 3 },
     { name: "あんぱん", price: 160, stock: 0 }
   ];

2. 1件取り出すitems[0].name → 「メロンパン」。[番号] で行を、.名前 で項目を選びます。
3. 全部回す

   for (const item of items) {
     console.log(`${item.name}: ${item.price}円`);
   }

   for...of は「配列を1件ずつ取り出す」専用の書き方です。
4. 条件つきで集計する「在庫がある商品の合計金額」を、授業2の集計パターンで計算します。

   let total = 0;
   for (const item of items) {
     if (item.stock > 0) {
       total += item.price * item.stock;
     }
   }

お題: 例題の items に商品を2つ書き足してから、①商品名だけを全部表示する。②一番高い商品の名前を表示する。③在庫切れ (stockが0) の商品だけ表示する。④「全商品の平均価格」を計算する。

お題: ③ (在庫切り) を items.filter(...) で、① (名前一覧) を items.map(...) で書き直します。

1. HTMLを用意する

   <p>押した回数: <span id="count">0</span> 回</p>
   <button id="plus">+1</button>
   <script src="app.js"></script>

2. app.jsに3行の型を書く

   const countEl = document.querySelector("#count"); // ① つかむ
   let count = 0;
   
   document.querySelector("#plus").addEventListener("click", () => { // ② 待ち受ける
     count++;
     countEl.textContent = count; // ③ 書き換える
   });

3. 動かして、育てるボタンを押して数字が増えたら、「-1ボタン」「リセットボタン」を自分で足します。型の反復練習です。
4. 仕上げの一工夫10回以上で文字を赤くしてみます。if (count >= 10) { countEl.style.color = "red"; } ― 分岐と画面操作の合流点です。

お題: テキスト入力欄の下に「いま◯文字」とリアルタイム表示します。SNSの文字数表示と同じ仕組みです。

1. HTML: <textarea id="memo"></textarea> と表示用の span を置きます。
2. イベントは "input": クリックではなく、addEventListener("input", ...) で「入力のたび」に反応させます。
3. 文字数は .value.length: 入力欄の中身は .textContent ではなく .value で取るのが落とし穴ポイントです。

お題: ①ボタン3つで表示エリアの中身が切り替わる「タブ」。②入力欄の文字を li として一覧に追加していく「リスト追加」(ToDoアプリの前身です)。

お題: 例題のカウンターを、わざと3通りに壊して、エラー文を読んでから直します。①querySelector("#count") のIDを存在しない名前に変える。②変数名を1文字違いにする。③括弧を1つ消す。それぞれ、出たエラー名と意味を自分の早見表にメモします。