責務の分離が生みだす葛藤

責務の分離が生みだす葛藤「遷移」の責務が決まりません！株式会社アンティー・ファクトリー植野晋之介

自己紹介植野晋之介株式会社アンティー・ファクトリー所属ニックネーム：ウッディマークアップエンジニア → フロントエンドエンジニア

今日話したいこと設計思想の型がきれいに当てはまることはないから悩む

今日話したいこと 01 02 03 04 出発点：画面とルーティングを分けた設計問題：分離に集中して見落としたもの試行錯誤まとめと感想

出発点：画面とルーティングを分けた設計とあるWeb アプリの開発にてビジネスルールが未確定の段階で画面作成を行う画面プロトタイプを実装→ さわって協議先行して画面を作成、後からロジックの追加 → ビジネスロジックと技術的関心（画面）を分離する画面単位のテストを単純化（Storybook）
→ 画面からルーティングの責務を分離する

出発点：画面とルーティングを分けた設計ルーティングライブラリにTanstack Router を使用遷移先はルートツリー内で管理 TanStack Router Reactアプリ向けのルーティングライブラリルートやパラメーターの型を自動で推論してくれるファイルベースでルート階層を定義できる
ルーティング画面 1 2 3 4 5 6 7 8 9 10 src/ ├── （ルーティング）/ │ ├── __root.tsx │ ├── index.tsx │ └── posts/ │ ├── index.tsx │ └── $postId.tsx └── （画面）/ ├── PostListScreen.tsx └── PostDetailScreen.tsx

出発点：画面とルーティングを分けた設計 navigate() useNavigate()から取得、命令的に関数を呼び出して遷移（処理）を実行する画面 1 // 画面: 遷移先は知らない。操作の意図をコールバックとして渡すだけ。 2
function Screen({ onNavigateToDetail }) { 3 return ( 4 <h1>画面見出し</h1> 5 ... 6 <button onClick={onNavigateToDetail}>詳細へ</button> 7 ); 8 } ルーティング 1 // ルーティング側: 遷移先の決定をここに閉じ込める 2 function Route() { 3 const navigate = useNavigate(); 4 return <Screen onNavigateToDetail={ 5 () => navigate({ to: "/detail" }) 6 } />; 7 } ビジネスロジックもルーティングも責務を分離できた！画面コンポーネントはシンプルだ！🌟

問題：分離に集中して見落としたものボタン...？🤔 画面 1 // 画面: 遷移先は知らない。操作の意図をコールバックとして渡すだけ。 2 function Screen({
onNavigateToDetail }) { 3 return ( 4 <h1>画面見出し</h1> 5 ... 6 <button onClick={onNavigateToDetail}>詳細へ</button> 7 ); 8 } → 画面遷移はアンカー（<a>タグ）で実装するのが適切ホバー時のプリフェッチ状態の判定リンクに対するブラウザ標準機能 SEO, アクセシビリティ

悩む：テスト容易性と実装コストで試行錯誤 <a>タグに修正する Link 画面 <a> タグでのリンク遷移 + 型安全にパラメーターも渡せる 1 function
Screen({ onNavigateToDetail }) { 2 return ( 3 <h1>画面見出し</h1> 4 ... 5 <button onClick={onNavigateToDetail}>詳細へ</button> 6 ); 7 } 遷移先の情報を画面側でもつ必要があるテスト側で別途Router コンテキストの用意が必要 1 import { Link } from "@tanstack/react-router"; 2 3 function Screen() { 4 return ( 5 <h1>画面見出し</h1> 6 ... 7 <Link to="/detail">詳細へ</Link> 8 ); 9 }

試行錯誤コンポーネント注入 createLink()：<Link> と同じ型安全なナビゲーション機能を任意のコンポーネントに付与画面 1 // 画面側: 遷移先を知らない。渡された props(href・onClick
等)をそのまま <a> へ転送するだけ。 2 function DetailLink(props) { 3 return <a {...props} />; 4 } 5 6 function Screen({ detailLink: DetailLink }) { 7 return <DetailLink>詳細へ</DetailLink>; 8 } ルーティング 1 // ルーティング層: 遷移先(to)を注入した「本物のリンク」を作る 2 const DetailRouterLink = createLink(DetailLink); 3 4 function Route() { 5 return ( 6 <Screen detailLink={(props) => <DetailRouterLink to="/ detail" {...props} />} /> 7 ); 8 } 遷移先をルーティング層へ分離することはできたけど、、、

まとめと感想責務の分離はきれいに決まらないビジネスルールやプロジェクトの進行方法が影響するあとから変更しやすい実装も大事

Thank you！ご清聴ありがとうございました！

責務の分離が生みだす葛藤

責務の分離が生みだす葛藤

woody

Other Decks in Programming

Featured

Transcript