【4章】Reactの基礎学習の振り返り

React 4章を終えて:省略記法の前に「冗長な書き方」を知る大切さ

はじめに

ShiftBカリキュラムで React の4章を終えました。 書籍『これからはじめる React 実践入門』の必修箇所を進めながら、 コンポーネントや props、配列展開などを学んだ章です。

4章で一番強く感じたのは、

「省略された書き方を理解するには、まず冗長な書き方を知る必要がある」 ということでした。 学習の流れと、特に印象に残った気づきをまとめます。

学習の流れ

期間は 約1週間(計20時間ほど)。進め方は次のステップで固定しました。

1. 書籍の必修箇所を読み進める

2. サンプルコードを実際に動かす

3. コード内の変数・関数の役割と挙動を確認する

4. 動きが説明できない箇所を調査する

5. 生成AIには「答え」を聞かず、「自分の認識が合っているか」を検証する

前章(3章)でも書きましたが、AI に答えを丸投げせず、 「たぶんこう動いているはず」と自分の言葉で説明してから、AI に確認する スタイルを今回も継続しました。

印象に残った気づき

1. スプレッド構文( ... )で state を更新する

例えば、フォームの入力を state に反映する処理として以下のように書きました。

setForm({
    ...form,
    [e.target.name]: e.target.value
});

...form を使わず冗長に書くと、こうなります。

setForm({
    name: form.name,
    email: form.email,
    age: form.age,
    [e.target.name]: e.target.value
});

冗長版は プロパティが増えるたびに手で書き足す必要があり、書き忘れると値が消える リスクがあります。

この比較を通して、「短く書けるから便利」ではなく、 「何が省略されているか」を説明できる ことが大切だと感じました。

2. 可読性を意識したコードを書く

「動けば良い」ではなく、他人(あるいは数ヶ月後の自分)が読める コードを書く意識を持ち始めました。 変数名・コンポーネント・props の渡し方など、 ひとつひとつの選択が読み手の負荷に直結することを実感しています。

3. 省略記法を理解するには、冗長な書き方を先に知る

これが今回の一番の学びでした。

React や JavaScript には便利な省略記法がたくさんあります。 しかし、いきなり省略形から入ると 「なぜそう書けるのか」が分からないまま使ってしまう 危険があります。

先ほどのスプレッド構文がまさにその例で、 冗長な書き方をいったん通ってから ...form を見ると、何が省かれているのか がはっきり見えました。 アロー関数の return 省略や分割代入も同じで、 「短く書く」ことより、「省略の理由を説明できる」 ことを優先したいと思いました。

5章(Web API)に向けて

次章は Web API を学びます。 React は Web 開発の土台になる部分なので、できる限り早く6章まで進んで、 アウトプット(手を動かして作る) の量を増やして理解度を上げていきたいです。

ただし、急ぐあまり「動くけど説明できない」状態にならないよう、 3章・4章で身につけた 「説明できるまで考える」 姿勢は崩さずに進めます。

まとめ

• 4章で一番の学びは 「省略記法の前に冗長な書き方を知る」 こと

• スプレッド構文・可読性・省略の理由を意識できるようになった

• 5章以降はアウトプット量を増やしつつ、「説明できる」基準は維持する