Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStac...
Search
Takahiro Ikeuchi
May 12, 2025
Technology
1
450
TanStack Start 技術選定の裏側 / Findy-Lunch-LT-TanStack-Start
TanStack Start 技術選定の裏側
Findy Lunch LT - 2025.05.13
TanStack Router徹底活用!3社の事例から見る最新のルーティング事情
Takahiro Ikeuchi
May 12, 2025
Tweet
Share
More Decks by Takahiro Ikeuchi
See All by Takahiro Ikeuchi
AI長期記憶システム構築のための LLMマルチエージェントの取り組み / Awarefy-LLM-Multi-Agent
iktakahiro
3
1.3k
最新のAIツールは何を解決しようとしているのか - Python エンジニアが取り組むべき "越境" とは - / Python-Engineer-in-AI-Era
iktakahiro
1
970
AWS Step Functions と Amazon Bedrock で構築する 可用性の高いAIサービス / Awarefy-AI-AWS-Bedrock-Step-Functions
iktakahiro
1
920
Flutter アプリの将来のインフラ移行に備える 疎結合なソフトウェア・アーキテクチャ / Flutter code Architecture for Infrastructure Migration
iktakahiro
0
2.1k
[Amazon EKS on AWS Fargate] スタートアップの "次の3年" を支えるためのインフラ技術 / AWS DEV DAY EKS ON FARGATE
iktakahiro
2
1.6k
可視化からはじめる ITエンジニアの セルフ・アウェアネス入門 / self-awareness-for-software-engineers
iktakahiro
0
530
Python で学ぶ実践的なドメイン駆動設計とレイヤードアーキテクチャ / DDD and Onion Architecture in Python
iktakahiro
17
25k
Argon2 を用いたハッシュ生成機能を提供するライブラリを pub.dev に公開した話 / Flutter Plugin Argon2 algorithm
iktakahiro
2
980
持続可能なエンジニアであるための 3つの こころがまえ / Be a Sustainable Engineer
iktakahiro
4
3.1k
Other Decks in Technology
See All in Technology
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
310
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
400
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
140
20250718_ITSurf_“Bet AI”を支える文化とコストマネジメント
helosshi
0
110
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
200
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
0
130
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
740
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
24
7k
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
210
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
2
350
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
700
Featured
See All Featured
Practical Orchestrator
shlominoach
189
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Faster Mobile Websites
deanohume
308
31k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Writing Fast Ruby
sferik
628
62k
Adopting Sorbet at Scale
ufuk
77
9.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
840
Into the Great Unknown - MozCon
thekraken
40
1.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
For a Future-Friendly Web
brad_frost
179
9.8k
Transcript
TanStack Start 技術選定の裏側 Findy Lunch LT - 2025.05.13 TanStack Router徹底活用!3社の事例から見る最新のルーティング事情
株式会社Awarefy 取締役CTO 池内 孝啓
池内 孝啓 プロダクトエンジニア。 ITベンチャー数社を経て、2011年3月に株式会社ALBERTへ入社。2015年に執行役員とし て東証マザーズへのIPOを経験。2019年より現職。 AIメンタルパートナー「アウェアファイ」の開発・事業責任者として、2020年5月にプロ ダクトをローンチ。2023年4月、 「アウェアファイAI構想」を立ち上げ。 Go や
Flutter、React などを得意とし、オープンソース・ソフトウェア関係のコミュニテ ィの立ち上げや運営にも関わる。著書に、 『改訂版 Pythonユーザのための Jupyter[実践] 入門』 、 『これからはじめる SQL 入門』などがある。 Takahiro Ikeuchi 取締役CTO
心の問題は、自分について 「気づく」ことが大切です。 私たちについて 多くの人が、実は自分自身のことについてよく わかっていません。 例えば誰かに「怒り」を感じる時、その気持ちを 深く観察していくと本当は「理解されなかった悲し み」だったり「話が進まない不安」だったり「期 待を裏切られた落胆」だったりするかもしれませ ん。
そういった本当の自分に気づけば気づくほど、 無理に変わろうとしなくても、生きやすい自分 に変わっていくと言われています。 そういった気づき(Aware)を促進する(fy)サポ ートをしたい、という願いを込めて「Awarefy」と いう社名にしました。
毎日に寄り添い、気づきを増やす。 AI技術を活用して気づき(自己理解)から行動変容まで 心の健康と成長を総合的にサポートします。 「アウェアファイ」は、AIなどのテクノ ロジーに、科学的なエビデンスのある 「認知行動療法」等に基づくアプローチ を取り入れたスマートフォンアプリで す。 日々の生活をより良い方向へ変えていく ためには、自分自身を振り返り、理解す
ることが重要です。 アウェアファイには、AIと会話ができる AIチャットや、日々のできごとをテンプ レートに沿って書くとAIがフィードバッ クする機能、自分のコンディションや心 の状態をAIが分析する機能などを搭載。 AIを活用して自分自身を可視化すること で、考えや行動の幅を広げ、日々の生活 や周囲との関係性を改善していきます。 ファイ AIメンタルパートナー さん AIメンタルパトーナーアウェアファイについて
Agenda 1.TanStack Start とは 2.技術選定の背景 3.ふり返り
モチベーションと本日のゴール ReactメタフレームワークにNext.js 以外の選択肢があることを伝える Reactを採用するプロジェクトにおいて、Next.jsはメタフレームワークのデファクト・スタンダードとなっています。 しかし、 「どうやらそうらしい」というだけでNext.jsが採用されているケースもあるのではないでしょうか。 今回のLightning Talkでは、Reactメタフレームワーク 第三の選択肢 TanStack
Start について取り扱います。 Next.jsを採用しない選択が増えることを期待するのではなく、有力な選択肢の幅が増えることを期待します。 TanStack Start 試してみようかな、と思ってもらえたら、本日の登壇の目標は達成です 🌟
TanStack Start とは 01
TanStack Start とは TanStack シリーズのフルスタック メタフレームワーク TanStack Router ベースの SSR
対応メタフレームワーク Server Functions や API Routes を備える Vercel、Netlify、Bun などの環境にデプロイ可能 β(2025年5月時点)
TanStack シリーズとは フロントエンド開発に役立つ信頼できる技術スタックが TanStack 非同期データフェッチ・状態管理ライブラリとして React Query が人気になる(2020年〜) この作者が Tanner
@tannerlinsley さん React 以外のフレームワークからも利用できるように進化(2022年) Framework agnostic という考え方 TanStack Query の誕生 TanStack Form、TanStack Store、TanStack Table など 一貫した思想に基づき設計されたフロントエンド開発に役立つ技術スタック(≒ライブラリ群)として支持を 集めているのが TanStack シリーズです https://tanstack.com/
余談 TanStack Form(フォーム実装) 比較 : React Hook Form, Conform TanStack
Store(状態管理) 比較 : Jotai, Zustand, Recoil etc... このあたりはノールックで技術選定する前に 比較検討しておくとよさそう。
TanStack Start の特徴 ① 型安全にクライアントとサーバーをつなぐServer Functions サーバーサイドで実行する処理を定義するのが Server Functions https://tanstack.com/start/latest/docs/framework/react/server-functions
Server Functions - Server-side
Server Functions - Client side Server Functions をクライアントから 型安全に 利用することができる。
Server Functions - Middleware
TanStack Start の特徴 ② APIエンドポイントを実装する API Routes HTTP API Endpoint
を実装できるのが API Routes。もちろんサーバーサイドで実行されるコードになる https://tanstack.com/start/latest/docs/framework/react/api-routes
Server Functions API Routes 外部公開 適さない ※ URLが不定、改善予定あり 適する ミドルウェア
利用可能 利用不可 ※ 予定あり 型の共有 バリデーション定義を つうじて可能 tRPCなどの併用が必要 ルート構築前の実行 可能 不可 Server Functions vs API Routes API Routes は時期尚早感 Server Functions に統合されていき そうな気がする ※ 個人の見解です
技術選定の背景 02
技術選定の背景 Webアプリをフルスクラッチ開発するタイミングで技術選定を実施 リプレース判断の背景 アウェアファイWebアプリケーションは元々 Next.js で実装されていた 元々特定の企画を実行するために準備したプロジェクトが発展したもので、今後のプロダクト発展を鑑みると それに耐えうるコードベースではないと判断 技術選定の基準 モバイル、Webフロントエンド、バックエンドの垣根なく実装を担当するフルスタックなチームを目指すにあ
たり、各技術はデファクトに乗りつつも学習コストが低い、シンプルな設計にできることが大切
Architecture Decision Record (ADR) を記録したのが2月(新アプリローンチが4月末) フレームワーク、メタフレームワーク、状態管理、スタイリングライブラリなど全域にわたる技術選定を実施
技術選定の背景 React以外の選択肢を摸索するも... そもそも Reactではなく Solid にいこうとしていた Solid Start で最初のプロトタイプを作成 Solid
自体の開発体験は極めてよかったが、UI コンポーネントのエコシステムの大きさが懸念に https://start.solidjs.com
これからの技術選定は、AIにいかに支援してもらうかを 重視すべきではないか
AIフレンドリーな技術選定とは 結局グローバルで大きな流れに乗っているかに尽きる AIが知っている = 情報が多いものが多い 流行っているAIプロダクトが採用しているものは強い v0(Next.js + shadcn-ui) 日本で流行っているから情報が多い、という基準はもう過去のもの
結局長いものに巻かれておくのがいいのか...(敗北感)
なぜNext.jsではなかったのか React以外の選択肢を摸索するも... ADRによると... Next.js : 過剰に多機能のため。Vercel ロックインを避けるため React Router :
Remix, React Router 統合後の方向性が不透明のため SoidStart : Solidエコシステムが未成熟のため
なぜNext.jsではなかったのか TanStack Start はちょうどよい選択肢 一般 のご家庭 に必要なメタフレームワークの要件 CSR ファイルベースルーティング 場合により、SSR
複雑で多機能よりもシンプルで最小限 魔法による高速化よりもミニマルな最適化
簡易比較 メタフレームワーク 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フレームワークとの統合
第三の選択肢として勢力拡大中 意外に(?)推されている(?)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/
ふり返り 03
無事ローンチ! https://app.awarefy.com Webフロントエンドの本格開発が初めての メンバーもキャッチアップし計画 どおり ローンチ SSR や Server Functions
周辺の仕様の整理 が必要だったものの特に大きな問題もなく 進行できた
TanStack Start を採用してみて 採用してよかった! 開発体験はよかった(と思う) Server Functions や API Routes
が正統進化すればどのチームにも薦められる仕上がり Next.js ではないこと React Server Components 統合の方向性が不透明 (けど要ります...?) 課題があるとすると...
ありがとうございました!