TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start

TanStack Start 技術選定の裏側

Findy Lunch LT - 2025.05.13
TanStack Router徹底活用！3社の事例から見る最新のルーティング事情

Transcript

1. TanStack Start 技術選定の裏側 Findy Lunch LT - 2025.05.13 TanStack Router徹底活用！3社の事例から見る最新のルーティング事情 株式会社Awarefy 取締役CTO 池内 孝啓
2. 池内 孝啓 プロダクトエンジニア。 ITベンチャー数社を経て、2011年3月に株式会社ALBERTへ入社。2015年に執行役員とし て東証マザーズへのIPOを経験。2019年より現職。 AIメンタルパートナー「アウェアファイ」の開発・事業責任者として、2020年5月にプロ ダクトをローンチ。2023年4月、 「アウェアファイAI構想」を立ち上げ。 Go や Flutter、React などを得意とし、オープンソース・ソフトウェア関係のコミュニテ ィの立ち上げや運営にも関わる。著書に、 『改訂版 Pythonユーザのための Jupyter[実践] 入門』 、 『これからはじめる SQL 入門』などがある。 Takahiro Ikeuchi 取締役CTO
3. 心の問題は、自分について 「気づく」ことが大切です。 私たちについて 多くの人が、実は自分自身のことについてよく わかっていません。 例えば誰かに「怒り」を感じる時、その気持ちを 深く観察していくと本当は「理解されなかった悲し み」だったり「話が進まない不安」だったり「期 待を裏切られた落胆」だったりするかもしれませ ん。 そういった本当の自分に気づけば気づくほど、 無理に変わろうとしなくても、生きやすい自分 に変わっていくと言われています。 そういった気づき（Aware）を促進する（fy）サポ ートをしたい、という願いを込めて「Awarefy」と いう社名にしました。
4. 毎日に寄り添い、気づきを増やす。 AI技術を活用して気づき（自己理解）から行動変容まで 心の健康と成長を総合的にサポートします。 「アウェアファイ」は、AIなどのテクノ ロジーに、科学的なエビデンスのある 「認知行動療法」等に基づくアプローチ を取り入れたスマートフォンアプリで す。 日々の生活をより良い方向へ変えていく ためには、自分自身を振り返り、理解す ることが重要です。 アウェアファイには、AIと会話ができる AIチャットや、日々のできごとをテンプ レートに沿って書くとAIがフィードバッ クする機能、自分のコンディションや心 の状態をAIが分析する機能などを搭載。 AIを活用して自分自身を可視化すること で、考えや行動の幅を広げ、日々の生活 や周囲との関係性を改善していきます。 ファイ AIメンタルパートナー さん AIメンタルパトーナーアウェアファイについて
5. Agenda 1.TanStack Start とは 2.技術選定の背景 3.ふり返り
6. モチベーションと本日のゴール ReactメタフレームワークにNext.js 以外の選択肢があることを伝える Reactを採用するプロジェクトにおいて、Next.jsはメタフレームワークのデファクト・スタンダードとなっています。 しかし、 「どうやらそうらしい」というだけでNext.jsが採用されているケースもあるのではないでしょうか。 今回のLightning Talkでは、Reactメタフレームワーク 第三の選択肢 TanStack Start について取り扱います。 Next.jsを採用しない選択が増えることを期待するのではなく、有力な選択肢の幅が増えることを期待します。 TanStack Start 試してみようかな、と思ってもらえたら、本日の登壇の目標は達成です 🌟
7. TanStack Start とは 01
8. TanStack Start とは TanStack シリーズのフルスタック メタフレームワーク TanStack Router ベースの SSR 対応メタフレームワーク Server Functions や API Routes を備える Vercel、Netlify、Bun などの環境にデプロイ可能 β（2025年5月時点）
9. TanStack シリーズとは フロントエンド開発に役立つ信頼できる技術スタックが TanStack 非同期データフェッチ・状態管理ライブラリとして React Query が人気になる（2020年〜） この作者が Tanner @tannerlinsley さん React 以外のフレームワークからも利用できるように進化（2022年） Framework agnostic という考え方 TanStack Query の誕生 TanStack Form、TanStack Store、TanStack Table など 一貫した思想に基づき設計されたフロントエンド開発に役立つ技術スタック（≒ライブラリ群）として支持を 集めているのが TanStack シリーズです https://tanstack.com/
10. 余談 TanStack Form（フォーム実装） 比較 : React Hook Form, Conform TanStack Store（状態管理） 比較 : Jotai, Zustand, Recoil etc... このあたりはノールックで技術選定する前に 比較検討しておくとよさそう。
11. TanStack Start の特徴 ① 型安全にクライアントとサーバーをつなぐServer Functions サーバーサイドで実行する処理を定義するのが Server Functions https://tanstack.com/start/latest/docs/framework/react/server-functions
12. Server Functions - Server-side
13. Server Functions - Client side Server Functions をクライアントから 型安全に 利用することができる。
14. Server Functions - Middleware
15. TanStack Start の特徴 ② APIエンドポイントを実装する API Routes HTTP API Endpoint を実装できるのが API Routes。もちろんサーバーサイドで実行されるコードになる https://tanstack.com/start/latest/docs/framework/react/api-routes
16. Server Functions API Routes 外部公開 適さない ※ URLが不定、改善予定あり 適する ミドルウェア 利用可能 利用不可 ※ 予定あり 型の共有 バリデーション定義を つうじて可能 tRPCなどの併用が必要 ルート構築前の実行 可能 不可 Server Functions vs API Routes API Routes は時期尚早感 Server Functions に統合されていき そうな気がする ※ 個人の見解です
17. 技術選定の背景 02
18. 技術選定の背景 Webアプリをフルスクラッチ開発するタイミングで技術選定を実施 リプレース判断の背景 アウェアファイWebアプリケーションは元々 Next.js で実装されていた 元々特定の企画を実行するために準備したプロジェクトが発展したもので、今後のプロダクト発展を鑑みると それに耐えうるコードベースではないと判断 技術選定の基準 モバイル、Webフロントエンド、バックエンドの垣根なく実装を担当するフルスタックなチームを目指すにあ たり、各技術はデファクトに乗りつつも学習コストが低い、シンプルな設計にできることが大切
19. Architecture Decision Record (ADR) を記録したのが2月（新アプリローンチが4月末） フレームワーク、メタフレームワーク、状態管理、スタイリングライブラリなど全域にわたる技術選定を実施
20. 技術選定の背景 React以外の選択肢を摸索するも... そもそも Reactではなく Solid にいこうとしていた Solid Start で最初のプロトタイプを作成 Solid 自体の開発体験は極めてよかったが、UI コンポーネントのエコシステムの大きさが懸念に https://start.solidjs.com
21. これからの技術選定は、AIにいかに支援してもらうかを 重視すべきではないか
22. AIフレンドリーな技術選定とは 結局グローバルで大きな流れに乗っているかに尽きる AIが知っている = 情報が多いものが多い 流行っているAIプロダクトが採用しているものは強い v0（Next.js + shadcn-ui） 日本で流行っているから情報が多い、という基準はもう過去のもの 結局長いものに巻かれておくのがいいのか...（敗北感）
23. なぜNext.jsではなかったのか React以外の選択肢を摸索するも... ADRによると... Next.js : 過剰に多機能のため。Vercel ロックインを避けるため React Router : Remix, React Router 統合後の方向性が不透明のため SoidStart : Solidエコシステムが未成熟のため
24. なぜNext.jsではなかったのか TanStack Start はちょうどよい選択肢 一般 のご家庭 に必要なメタフレームワークの要件 CSR ファイルベースルーティング 場合により、SSR 複雑で多機能よりもシンプルで最小限 魔法による高速化よりもミニマルな最適化
25. 簡易比較 メタフレームワーク GitHub Starts 主な特徴/焦点 TanStack Start @tanstack/router: 9.9k 型安全なルーティング、クライアントファー スト、柔軟性、TanStackエコシステムとの統 合 Next.js @vercel/next.js 132k フルスタック、サーバーファースト、多機 能、Vercelエコシステムとの親和性 React Router @remix-run/react-router 54.8k Reactルーティングの標準、宣言的ルーティン グ、Remixフレームワークとの統合
26. 第三の選択肢として勢力拡大中 意外に（？）推されている（？）TanStack Start React公式 : Next.js, React Router v7 とならんで TanStack Start への言及あり https://react.dev/learn/creating-a-react-app shadcn-ui : セットアップに TanStack Start 関連手順あり https://ui.shadcn.com/docs/installation/tanstack Clerk（認証基盤）: 公式SDKあり https://clerk.com/docs/references/tanstack-react-start/overview Netlify : 公式スポンサー、デプロイ対応 https://docs.netlify.com/frameworks/tanstack-start/
27. ふり返り 03
28. 無事ローンチ！ https://app.awarefy.com Webフロントエンドの本格開発が初めての メンバーもキャッチアップし計画 どおり ローンチ SSR や Server Functions 周辺の仕様の整理 が必要だったものの特に大きな問題もなく 進行できた
29. TanStack Start を採用してみて 採用してよかった！ 開発体験はよかった（と思う） Server Functions や API Routes が正統進化すればどのチームにも薦められる仕上がり Next.js ではないこと React Server Components 統合の方向性が不透明 （けど要ります...?） 課題があるとすると...
30. ありがとうございました！