Slide 1

Slide 1 text

Full TypeScriptな構成を支えるRemixの実態 株式会社Acompany マッケイ

Slide 2

Slide 2 text

I’m ... マッケイ @mackay_1503 U 株式会社Acompany U なんでもやるエンジニF U フロント、バック、デザイン、PdM..q U TypeScript以外は触れませa U 最近、車を購入しました

Slide 3

Slide 3 text

Acompanyについて 企業間のデータ連携を安全に実現する
 データクリーンルーム 組織のプライバシーガバナンスを強みに
 プライバシーガバナンスSaaS

Slide 4

Slide 4 text

Remix、ぶち込んでみました。 企業間のデータ連携を安全に実現する
 データクリーンルーム 組織のプライバシーガバナンスを強みに
 プライバシーガバナンスSaaS

Slide 5

Slide 5 text

Remixとは i Reactをベースとしたフルスタックフレームワーg i Full TypeScriptで開発が可D i クライアント/サーバーコードをワンストップで管 i Web標準にそって開発ができ i UIドリブンな開発体験を提供

Slide 6

Slide 6 text

Why Remix...? q プロダクトの立ち上げフェーズで、エンジニアが1人..P q React(Next.js)とTypeScriptなら書け% q とにかく動くものを作る必要があっs q Next.jsのApp Routerもまだ正式リリース q Remixなにそれめっちゃ面白そう

Slide 7

Slide 7 text

` プロダクトの立ち上げフェーズで、エンジニアが1人..9 ` React(Next.js)とTypeScriptなら書け ` とにかく動くものを作る必要があっb ` Next.jsのApp Routerもまだ正式リリースÀ ` Remixなにそれめっちゃ面白そう 7

Slide 8

Slide 8 text

使ってわかったRemix クライアント/サーバーコードの
 見通しが良% 状態管理がパワフ1 拡張性が高い \Full TypeScript最高/ Data Fetch server code Data Mutation server code Client code (Pure React)

Slide 9

Slide 9 text

使ってわかったRemix % クライアント/サーバーコードの
 見通しが良 % % 拡張性が高い 状態管理がパワフ6 https:// / / mackay.me note 123 (app/index.tsx) (app/route/note.tsx) (app/route/note.$id.tsx) Loader Data Loader Data Loader Data State

Slide 10

Slide 10 text

使ってわかったRemix ) クライアント/サーバーコードの
 見通しが良# ) 状態管理がパワフ ) 拡張性が高い 利用可能なランタイム ) Nod` ) Dens ) Cloudflare Pages(?p ) Cloudflare Workers(?) 利用可能なバックエンドFW ) Expres™ ) fastifm ) hons ) ...

Slide 11

Slide 11 text

Next.jsじゃダメなんですか? y どちらかでなければならないことは無g y どちらも完成度は高いフレームワークであ8 y 基本的にはNext.jsを使っておけば間違いはないと思0 y でも、たまにはRemixのことも思い出してあげてください。

Slide 12

Slide 12 text

おわりに ‰ Full TypeScriptな構成としてRemixはアG ‰ Web標準に忠実に設計されているので、MDNを読めば解決する問題が多v ‰ 新鋭フレームワークなのに、(いい意味で)思想はレガシ ‰ ↓ zennに記事も書いているので、ぜひ参考に!

Slide 13

Slide 13 text

Happy Hacking