Full TypeScriptな構成を支えるRemixの実態

Transcript

1. Full TypeScriptな構成を支えるRemixの実態 株式会社Acompany マッケイ
2. I’m ... マッケイ @mackay_1503 U 株式会社Acompany U なんでもやるエンジニF U フロント、バック、デザイン、PdM..q U TypeScript以外は触れませa U 最近、車を購入しました
3. Acompanyについて 企業間のデータ連携を安全に実現する
 データクリーンルーム 組織のプライバシーガバナンスを強みに
 プライバシーガバナンスSaaS
4. Remix、ぶち込んでみました。 企業間のデータ連携を安全に実現する
 データクリーンルーム 組織のプライバシーガバナンスを強みに
 プライバシーガバナンスSaaS
5. Remixとは i Reactをベースとしたフルスタックフレームワーg i Full TypeScriptで開発が可D i クライアント/サーバーコードをワンストップで管 i Web標準にそって開発ができ i UIドリブンな開発体験を提供
6. Why Remix...? q プロダクトの立ち上げフェーズで、エンジニアが1人..P q React(Next.js)とTypeScriptなら書け% q とにかく動くものを作る必要があっs q Next.jsのApp Routerもまだ正式リリース q Remixなにそれめっちゃ面白そう
7. ` プロダクトの立ち上げフェーズで、エンジニアが1人..9 ` React(Next.js)とTypeScriptなら書け ` とにかく動くものを作る必要があっb ` Next.jsのApp Routerもまだ正式リリースÀ ` Remixなにそれめっちゃ面白そう 7
8. 使ってわかったRemix  クライアント/サーバーコードの
 見通しが良%   状態管理がパワフ1 拡張性が高い \Full TypeScript最高/ Data Fetch server code Data Mutation server code Client code (Pure React)
9. 使ってわかったRemix % クライアント/サーバーコードの
 見通しが良 % % 拡張性が高い 状態管理がパワフ6 https:// / / mackay.me note 123 <App /> (app/index.tsx) <Note /> (app/route/note.tsx) <NoteDetail /> (app/route/note.$id.tsx) Loader Data Loader Data Loader Data State
10. 使ってわかったRemix ) クライアント/サーバーコードの
 見通しが良# ) 状態管理がパワフ ) 拡張性が高い 利用可能なランタイム ) Nod` ) Dens ) Cloudflare Pages(?p ) Cloudflare Workers(?) 利用可能なバックエンドFW ) Expres™ ) fastifm ) hons ) ...
11. Next.jsじゃダメなんですか？ y どちらかでなければならないことは無g y どちらも完成度は高いフレームワークであ8 y 基本的にはNext.jsを使っておけば間違いはないと思0 y でも、たまにはRemixのことも思い出してあげてください。
12. おわりに ‰ Full TypeScriptな構成としてRemixはアG ‰ Web標準に忠実に設計されているので、MDNを読めば解決する問題が多v ‰ 新鋭フレームワークなのに、(いい意味で)思想はレガシ ‰ ↓ zennに記事も書いているので、ぜひ参考に！
13. Happy Hacking