【3章】JavaScript基礎＋演習の振り返り

JavaScript 3章を終えて学んだ「AIに頼る前に考える」習慣

はじめに

ShiftBカリキュラムでJavaScriptの3章を終えました。 この章は配列メソッドや関数定義など、これから React に進むうえで土台になる範囲です。

振り返ると、技術そのものよりも 「AIとどう付き合うか」 を考えさせられた章でした。 同じ章に取り組む方の参考になればと思い、学習の流れと気づきをまとめます。

学習の流れ

1. Progate を2周(平日2時間 × 計8時間)

   • 基礎を押さえるため、まずは手を動かしてアウトプット中心で進めた

2. 演習課題に挑戦(約5時間)

   • 自力で考える時間を多めに確保

   • ただし、時間を区切ってドキュメントを参照する判断はもっと早めるべきだった

3. 説明できない箇所を AI で壁打ち

   • 「人に説明できない=理解していない」と捉え、自分の言葉になるまで深掘り

4. 演習課題を繰り返し解く

   • 定義された関数や値の動きをイメージできるまで反復

AIに頼る前に「考える時間」を取る理由

3章の演習で意識したのは、わからない瞬間にすぐAIへ聞かない ことでした。

ShiftBのぶべさんが繰り返し伝えているように、 AIがコードを書く時代になっても、最後に責任を持つのは人間 です。 だからこそ、自分の言葉で説明できるレベルまで考え抜く時間が欠かせません。

私が決めたルールは以下の3つです。

• まずは時間を決めて自力で考える(調べる前に手と頭を動かす)

• 詰まったら公式ドキュメントを参照(AIはまだ使わない)

• 解けた後、説明できない部分だけ AI に壁打ち

今回は「考える時間」に時間を使いすぎた感覚もありましたが、 ここは削るべきではない工程だと結論づけています。

つまずいたポイント:アロー関数のスコープ

3章で一番時間がかかったのが、次のようなコードでした。

const personInformation = (person, num) => person.find(({age}) => age === num);

一見シンプルですが、私はここで手が止まりました。

疑問に思ったこと

find のコールバック関数 ({age}) => age === num の中で使われている num は、 このコールバック関数の引数ではない。 なのに、なぜ中で使えるのか?

引数として宣言されていない変数が当たり前のように使われていて、 「これは本当に動くのか?」と一瞬不安になったポイントでした。

たどり着いた結論

アロー関数は、自分が定義された場所のスコープ(変数)を覚えている。

num は外側の personInformation の引数として受け取った値です。 内側の find のコールバック関数は、その外側のスコープに住んでいるので、 そこで宣言された num を自然に見にいける わけです。

イメージ図にするとこうなります。

┌─────────────────────────────────────────┐
│ personInformation の中                  │
│                                         │
│   person = [...]                        │
│   num = 30  ← この変数を覚えている      │
│                                         │
│   ┌──────────────────────────────────┐  │
│   │ find のコールバック関数            │  │
│   │                                  │  │
│   │   ({age}) => age === num         │  │
│   │                    ↑             │  │
│   │       外側の num を参照できる!    │  │
│   └──────────────────────────────────┘  │
└─────────────────────────────────────────┘

学び

コードが「動く」ことと「なぜ動くか説明できる」ことは別物だと痛感しました。 今回のように、引数として明示されていない値の正体を追いかける ことで、 スコープという仕組みに一段深く触れられた気がします。

この「外側の変数を覚えている」性質をここで腹落ちさせておくと後がスムーズになりそうです。

4章(React)に向けて

次章からは React に入ります。 JavaScript の理解が土台になるので、3章の演習は ウォーミングアップ として何度も解き直すつもりです。

意識すること:

• 手を動かして体に定着させる

• わからないことは、まず自分の言葉で言語化してから AI に聞く

• 「説明できる」を理解のゴールラインにする

まとめ

• 3章は 「AI に頼る前に自分で考える習慣」 を作る章だった

• つまずきポイント(スコープ)は React の理解にも直結する

• 4章は JavaScript の理解を土台に、手を動かして進める