← Angular コース
85. 作業を小さく分解する — 動く状態を保ちながら進む
「お気に入り機能を作る」のような大きな仕事は、そのまま手を付けると必ず迷子になります。まず「①ボタンを置く ②クリックで状態を切り替える ③一覧に反映する ④保存する」のように、順番に積み上げられる小さなステップへ割ってから始めます。1ステップは「終わったら画面で動きを確かめられる」大きさが目安です。
小さく割る最大の理由は、1つ終わるごとにアプリを動く状態に保てることです。途中で壊れても「直前のステップまでは動いていた」と分かるので、疑う範囲が一気に狭まります。実務ではこの分解がそのままタスク一覧やコミットの単位になり、チームへの進捗共有やレビュー依頼もしやすくなります。
初学者の落とし穴は、頭の中で分解した気になって書き出さないことです。メモでもコード中のTODOコメントでもよいので必ず文字にしましょう。また「④保存する」から着手するなど順番を崩すと、動作確認できない時間が長くなります。画面で確かめられる順に並べるのがコツです。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// ── 「お気に入り機能を作る」を分解した例 ──
// 大きなままでは着手も確認もできないので、
// 「1つ終わるごとに画面で確かめられる」単位に割る。
//
// TODO(1): カードにお気に入りボタン(☆)を置く
// → 画面に☆が表示されればOK(まだ押しても何も起きない)
// TODO(2): クリックで on/off を切り替える(signalで状態を持つ)
// → 押すたびに ☆/★ が切り替わればOK
// TODO(3): お気に入り一覧ページに反映する
// → ★にした項目だけが一覧に並べばOK
// TODO(4): サーバーに保存する(HttpClientでAPI呼び出し)
// → リロードしても★が残っていればOK
//
// 各TODOが終わるたびにアプリは「動く状態」に戻る
サンプルコードで身につける(5本) →
学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。
公式ドキュメントで詳しく ↗