かつお/Webアプリ7期
【4章】Reactの基礎学習の振り返り
2026年06月02日
かつお/Webアプリ7期
2026年06月02日
・Webアプリ7期生の橋元 勝美です!長崎出身・東京在住、SESインフラエンジニア2年目です。 ・転職による年収UPと副業案件獲得を目標に、Web開発を学んでいきます💪 ・ビール・スポーツ観戦が好きです。仲良くしてください、よろしくお願いします!😊
見出しはありません
要約を生成中...
React 4章を終えて:省略記法の前に「冗長な書き方」を知る大切さ
ShiftBカリキュラムで React の4章を終えました。 書籍『これからはじめる React 実践入門』の必修箇所を進めながら、 コンポーネントや props、配列展開などを学んだ章です。
4章で一番強く感じたのは、
「省略された書き方を理解するには、まず冗長な書き方を知る必要がある」 ということでした。 学習の流れと、特に印象に残った気づきをまとめます。
期間は 約1週間(計20時間ほど)。進め方は次のステップで固定しました。
書籍の必修箇所を読み進める
サンプルコードを実際に動かす
コード内の変数・関数の役割と挙動を確認する
動きが説明できない箇所を調査する
生成AIには「答え」を聞かず、「自分の認識が合っているか」を検証する
前章(3章)でも書きましたが、AI に答えを丸投げせず、 「たぶんこう動いているはず」と自分の言葉で説明してから、AI に確認する スタイルを今回も継続しました。
... )で 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
});
冗長版は プロパティが増えるたびに手で書き足す必要があり、書き忘れると値が消える リスクがあります。
この比較を通して、「短く書けるから便利」ではなく、 「何が省略されているか」を説明できる ことが大切だと感じました。
「動けば良い」ではなく、他人(あるいは数ヶ月後の自分)が読める コードを書く意識を持ち始めました。 変数名・コンポーネント・props の渡し方など、 ひとつひとつの選択が読み手の負荷に直結することを実感しています。
これが今回の一番の学びでした。
React や JavaScript には便利な省略記法がたくさんあります。 しかし、いきなり省略形から入ると 「なぜそう書けるのか」が分からないまま使ってしまう 危険があります。
先ほどのスプレッド構文がまさにその例で、
冗長な書き方をいったん通ってから ...form を見ると、何が省かれているのか がはっきり見えました。
アロー関数の return 省略や分割代入も同じで、
「短く書く」ことより、「省略の理由を説明できる」 ことを優先したいと思いました。
次章は Web API を学びます。 React は Web 開発の土台になる部分なので、できる限り早く6章まで進んで、 アウトプット(手を動かして作る) の量を増やして理解度を上げていきたいです。
ただし、急ぐあまり「動くけど説明できない」状態にならないよう、 3章・4章で身につけた 「説明できるまで考える」 姿勢は崩さずに進めます。
4章で一番の学びは 「省略記法の前に冗長な書き方を知る」 こと
スプレッド構文・可読性・省略の理由を意識できるようになった
5章以降はアウトプット量を増やしつつ、「説明できる」基準は維持する
コメント
まだコメントはありません。