【実践②】Activity を活かしたタブ型ワークスペース画面を実装する

[ryota-murakami]

背景

現在の app/tab/page.tsx は Activity コンポーネントの練習用として最小構成になっており、Home / Posts の切り替えだけを確認するサンプルになっている。

ただし、Activity の価値は単なる表示切り替えではなく、非表示の間も状態を保持したまま、現実的な UI を構成できることにある。練習としてはもう一段実践寄りにして、見た目もある程度整った画面に育てたい。

目的

/tab を、単なるデモではなく 実際の管理画面・作業画面らしいタブ UI に置き換える。

今回は Activity の性質が分かりやすいように、タブ切り替え後も入力途中の状態や UI 状態が保持される ことを主な学習テーマにする。

実装イメージ

「コンテンツ運用ワークスペース」風の 2 タブ画面を作る。

Tab 1: Overview

• サマリーカード（例: total posts, scheduled, drafts）
• 最近の更新一覧
• 期間フィルタや表示切り替えなど、ローカル state を持つ UI

Tab 2: Draft Editor

• 投稿タイトル入力
• 本文テキストエリア
• カテゴリ選択や公開設定
• 文字数表示、下書きステータスなどの補助 UI

この Issue で学びたいこと

• Activity による state 保持付きタブ切り替え
• タブを切り替えても、編集中フォームや選択状態が失われない体験
• 「単なる API 練習」ではなく、実画面に近い UI に落とし込む設計
• Tailwind / 既存トークンを使った、最低限プロダクト感のあるスタイリング

やること

1. /tab 画面の再設計

• ページ全体にヘッダー、説明文、タブナビゲーション、コンテンツ領域を持たせる
• 既存の Home / Posts プレースホルダーを、用途の見える画面に置き換える
• TabButton も見た目とアクセシビリティを改善する

2. Activity 前提の状態設計

• 各タブに、切り替え後も保持されると嬉しい state を明示的に持たせる
• 例:
  • Overview: 表示期間、並び替え、折りたたみ状態
  • Draft Editor: タイトル、本文、選択カテゴリ、トグル状態
• Activity を外したら困る理由が UI 上で分かる状態にする

3. スタイリング

• カード、入力欄、タブ、補助テキストを整える
• ライト / ダーク両対応
• 練習用でも雑に見えない程度の完成度にする

4. 余力があれば

• タブ切り替え時の軽いトランジション
• pending / inactive state の視覚表現
• モバイル幅でも破綻しないレイアウト調整

完了条件

• /tab が「練習用プレースホルダー」ではなく、現実的な用途を感じる画面になっている
• Activity によって、タブを跨いでもフォーム入力や選択状態が保持される
• タブ UI が見た目・アクセシビリティの両面で改善されている
• ライト / ダークで大きく破綻しない
• コードを読んだときに「なぜ Activity を使うのか」が分かる構成になっている

スコープ外

• サーバー保存
• 本物のデータ取得
• URL 同期
• 過度な抽象化や汎用コンポーネント化

補足

既存の #6 が「Optimistic + Router連携」の練習なら、この Issue は Activity を使った state 保持 UI の実践編 という位置づけにする。