最近流行りのRemixとは何か

Transcript

1. ←マイページ登録 ←Twitter 最近流行りのRemixとは何か Presented by 橋本龍之介
2. ←マイページ登録 ←Twitter 自己紹介 橋本龍之介 株式会社おてつたび フルスタックエンジンア エンジニア4年目 ◦使用したことがある言語 PHP, JS, TS, Java, Python, Ruby ◦使用したことがあるフレームワークやライブラリ FuelPHP, React, Vue, Play Framework, Django, Ruby on Rails ◦その他 ReactとTSが大好き 最近はSwiftに挑戦中 超最近はRemixやSSR, エッジコンピューティングなど に触れている
3. ←マイページ登録 Remixをご存知ですか？
4. ←マイページ登録 ←Twitter Remixとは 1. 2021/11/23にリリースされたReactベースのフレームワーク 2. react-routerの制作者であるMichael Jackson氏とRyan Florence 氏が開発 a. React Tesing libraryの作者でもあるKent C. Dodds氏も参画 3. フロントエンドのフレームワームでもあるが、サーバーサイドのフ レームワークである Next.jsとは違い、本当の意味での「フレームワーク」であると言える ※VSする場合はBlitz.jsの方が正しい比較になるのかもと思いました
5. ←マイページ登録 ←Twitter 今日話すこと 1. Remixの概念と哲学 2. Remixちょっとハンズオン 3. Remixの今後
6. ←マイページ登録 ←Twitter 1. Remixの特徴と哲学
7. ←マイページ登録 ←Twitter Remixの特徴① 1. Next.jsと同様、ファイルシステムルーティング a. ただし、NestedRoutingをサポート 2. SSG機能は提供せず、SSRのみをサポート 3. ViewとController層のみを提供 a. Model層は開発者に委ねられている b. UIベースなフレームワークならでは 4. クッキーとセッション管理機能を提供
8. ←マイページ登録 ←Twitter Remixの特徴② Reactベースのフレームワークであることの意味 そもそも、「データ」の使われ方 1. アプリケーション（UI）を構築すること 2. 分析して何かの判断材料にすること Rails等のサーバーサイドのフレームワークはModel（データ）層中心の設計が なされるが、Webアプリケーションフレームワークである以上、View層へ最終的 にデータが渡される。 Reactベースであることにより、View層中心にアプリケーションを構築するの で、必然的にデータやロジックを構築することができる。
9. ←マイページ登録 ←Twitter Remixの哲学 1. Server/Client Model サーバー・クライアント（ブラウザ）分離モデル 2. Web Standards, HTTP, and HTML HTTPやHTMLなどのWebの標準と一緒に 3. Progressive Enhancement 可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供するこ と 4. Don’t Over Abstract HTTPやJSなどの抽象化を行わない https://remix.run/docs/en/v1/pages/philosophy
10. ←マイページ登録 ←Twitter Remixの技術的な説明 1. Compiler コンパイラーであるが故に、どのようなサービスにでもデプロイすることが可能 2. HTTP Handler and Adapters 3. Server Framework 多くのRemix APIはサーバーの機能を提供する 4. Browser Framework Remix APIもReact APIもブラウザで動作する https://remix.run/docs/en/v1/pages/technical-explanation
11. ←マイページ登録 ←Twitter 2. Remixちょっとハンズオン
12. ←マイページ登録 ←Twitter create-remixとファイル構成①
13. ←マイページ登録 ←Twitter create-remixとファイル構成②
14. ←マイページ登録 ←Twitter ページの追加とリンク①
15. ←マイページ登録 ←Twitter ページの追加とリンク①
16. ←マイページ登録 ←Twitter ページの追加とリンク②
17. ←マイページ登録 ←Twitter ページの追加とリンク②
18. ←マイページ登録 ←Twitter データの取得
19. ←マイページ登録 ←Twitter データの取得
20. ←マイページ登録 ←Twitter データの取得
21. ←マイページ登録 ←Twitter 3. Remixの今後
22. ←マイページ登録 ←Twitter ぶりぼんの考え ドキュメントを読み始めた頃は、これは来る！と思ったものの …… Next.jsや他のサーバーサイドフレームワーク同様、一つの選択肢でしかない Node.jsの知識がある程度必要で、 JS独自のライブラリ選定技術も必要。 他のフレームワークと比較したパフォーマンス計測が難しい。 つまり、開発者を選ぶフレームワークであると言える Remixのパフォーマンスが安定して出せることが一般論になり、 Fly.ioやCloudflareなどのRemix実行環境を簡 単に作成してくれるPaaSが増えることで、多くの開発者に使われるようになる …気がする Remixの今後
23. ←マイページ登録 ←Twitter まとめ 1. UIベースのフレームワーク 2. フロントエンドかつバックエンドのフレームワーク 3. ファイルシステムルーティング a. NestedRoutingをサポート 4. SSG機能は提供せず、SSRのみをサポート 5. ViewとControllerの機能のみを提供し、Model層は公式から提供されてい ない 6. 素晴らしい技術で個人的には積極的に使いたいが、世の中を席巻するほ どではない
24. ←マイページ登録 ←Twitter 参考文献 • Remix公式ドキュメント https://remix.run/docs/en/v1 • Remix という 考え方 https://zenn.dev/kaa_a_zu/articles/fbd06ca2cc3b86 • Remix vs Next.js https://remix.run/blog/remix-vs-next
25. ←マイページ登録 ←Twitter 仲間募集中！
26. ←マイページ登録 ←Twitter 仲間募集中！ おてつたびでは、新しい旅の形を一緒に作っていく仲間を募集中です。 募集ポジションは以下の通りです。 • iOSアプリエンジニア • Webフルスタックエンジニア まずはカジュアルにお話ししましょう！ その後、おてつたびに興味を持っていただけたら、是非ご一緒しましょう。 Notion Wantedly iOS Wantedly フルスタックエンジニア
27. ←マイページ登録 ←Twitter SNS SNSもやっています！ 今後はZennをメインに発信しつつ、noteやTwitterも活用しています。 フロントエンド中心に発信しているので、興味ある方は閲覧 && フォローをお 願いします！ Twitter Zenn note