JavaScript | 1 日 120 分 × 7 日アプリ学習：SPA風タブ切り替えアプリ

Web APP JavaScript
2026.03.13
スポンサーリンク
スポンサーリンク
  1. 2日目のゴールと今日やること
  2. なぜクラス化するのかを整理する
    1. 関数ベースの限界
    2. クラス化の狙い
  3. TabRouter クラスの骨組みを作る
    1. 最小構造
  4. URL hash から「状態」を取り出すメソッド
    1. getTabFromHash をメソッド化する
  5. 状態に応じて表示を切り替える render メソッド
    1. render の中身
  6. タブクリックで状態と URL を更新する
    1. イベントの紐付け
    2. クリック時の処理
  7. hashchange で「戻る / 進む」に対応する
    1. hashchange ハンドラ
  8. 再読み込み復元は「初期化時の hash 参照」で完了する
  9. 実際の使い方のイメージ
    1. HTML 側
    2. 初期化コード
  10. 今日いちばん深く理解してほしいこと
  11. 3日目のゴールと今日やること
  12. 画面遷移には「前後の処理」がつきものだと知る
    1. 単なるタブ切り替えと、画面遷移の違い
  13. TabRouter に「フック」を追加する発想
    1. フックとは何か
  14. beforeChange で「行っていいか？」を判定する
    1. 仕様を決める
    2. TabRouter に組み込む
  15. hash とクリックの両方から changeTab を通す
    1. クリック時
    2. hashchange 時
  16. 存在しない hash が来たときの扱いを決める
    1. 問題
    2. 解決策：有効なタブ名かどうかをチェックする
  17. 具体例：保存してない変更があるときに遷移を止める
    1. beforeChange の活用例
  18. 3日目の全体像を言葉でなぞる
  19. 今日いちばん深く理解してほしいこと
  20. 4日目のゴールと今日やること
  21. 「タブごとに専用のロジックがある」世界を想像してみる
    1. 現実のアプリで起きていること
  22. タブごとに「コントローラ」を持たせる発想
    1. 役割を分ける
  23. TabRouter に「タブコントローラ」を組み込む
    1. コントローラを受け取る
  24. onEnter / onLeave を呼び出す仕組み
    1. 共通の呼び出しメソッドを作る
    2. changeTab に組み込む
  25. 具体例で「タブコントローラ」のイメージを掴む
    1. ホームタブで「一度だけデータを読み込む」
    2. プロフィールタブで「フォームを初期化する」
  26. ネストしたタブ（タブの中にタブ）をどう考えるか
    1. よくある UI の例
    2. 設計の考え方
  27. URL hash を「階層的に使う」かどうか
    1. シンプルなやり方：外側だけ hash を使う
    2. もう一歩進めるとどうなるか（考え方だけ）
  28. 「画面遷移管理」と「URL hash」の関係をもう一度整理する
  29. 4日目のまとめ
  30. 5日目のゴールと今日やること
  31. 「画面遷移中」という状態をちゃんと持つ
    1. なぜ“遷移中”を意識する必要があるのか
  32. TabRouter に isTransitioning を追加する
    1. 状態フラグを持つ
  33. 遷移中は「新しい遷移を受け付けない」ようにする
    1. changeTab にガードを入れる
  34. onEnter を「非同期対応」にする
    1. なぜ async/await を入れるのか
    2. callControllerEnter を async にする
  35. ローディング表示を「状態」として扱う
    1. ローディングを“CSS だけ”でやらない理由
    2. タブごとのローディング状態を持つ
  36. onEnter からローディングを操作する例
    1. ホームタブでの例
  37. タブ切り替えにアニメーションを足す
    1. アニメーションも「状態」として扱う
    2. CSS のイメージ
    3. render を少し工夫する
  38. 「今どの画面か」を外からも分かるようにする
    1. currentTab を getter にする
  39. 5日目の全体像を言葉でなぞる
  40. 今日いちばん深く理解してほしいこと
  41. 6日目のゴールと今日やること
  42. 画面遷移と「グローバル UI」の関係を考える
    1. タブだけが UI じゃない世界
  43. TabRouter と通知コンポーネントを“ゆるくつなぐ”
    1. 通知コンポーネントを仮定する
    2. TabRouter の中で直接使わない、がポイント
  44. タブコントローラから通知を呼ぶ例
    1. 設定タブでエラーが出たとき
  45. 画面遷移と「アプリ状態（ログインなど）」の関係
    1. ログインしていないと入れないタブ
  46. beforeChange で「アプリ状態」を見る
    1. ログイン状態を持つ
    2. beforeChange でチェックする
  47. 画面遷移と「URL 設計」の関係をもう一段深く見る
    1. 今までは「タブ名 = hash」だった
  48. hash を「構造化された情報」として扱う発想
    1. 文字列ではなく“意味のあるパーツ”として見る
  49. 外側 TabRouter と内側 TabRouter の連携イメージ
    1. 外側の TabRouter
    2. 内側の TabRouter（設定タブの中）
  50. 6日目の全体像を言葉でなぞる
  51. 今日いちばん深く理解してほしいこと
  52. 7日目のゴールと今日やること
  53. 完成版のイメージを一度“上から”眺める
    1. どんな挙動になっているか
  54. 画面遷移管理の“中身”を言葉で分解する
    1. 画面遷移とは何をしているのか
  55. URL hash と状態の関係をもう一度はっきりさせる
    1. hash は“状態の外向き表現”
  56. 状態と表示の分離を、コードで再確認する
    1. 状態はどこにあるか
    2. 表示はどう決まるか
  57. タブ切替・履歴対応・再読み込み復元が“一本の線”でつながる瞬間
    1. タブをクリックしたときの流れ
    2. 戻る / 進むを押したときの流れ
    3. 再読み込みしたときの流れ
  58. 最後に、完成版 TabRouter の“要点だけ”をコードでまとめる
    1. コア部分だけ抜き出したイメージ
  59. 7日目の本質と、今のあなたの立ち位置

2日目のゴールと今日やること

2日目のテーマは
「1日目で作ったタブ切り替えロジックを“クラス化”して、どこでも再利用できる形にする」ことです。

昨日は関数ベースで
URL の hash を状態として扱い、
その状態に応じて表示を切り替える、という流れを作りました。

今日はそれを
TabRouter のようなクラスにまとめて、

「このナビとビューを渡せば、勝手に SPA 風タブになる」

という状態を目指します。

前へ
12
スポンサーリンク
タイトルとURLをコピーしました