←マイページ登録 ←Twitter 最近流行りのRemixとは何か Presented by 橋本龍之介

←マイページ登録 ←Twitter 自己紹介 橋本龍之介 株式会社おてつたび フルスタックエンジンア エンジニア4年目 ○使用したことがある言語 PHP, JS, TS, Java, Python, Ruby ○使用したことがあるフレームワークやライブラリ FuelPHP, React, Vue, Play Framework, Django, Ruby on Rails ○その他 ReactとTSが大好き 最近はSwiftに挑戦中 超最近はRemixやSSR, エッジコンピューティングなど に触れている

←マイページ登録 Remixをご存知ですか？

←マイページ登録 ←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の方が正しい比較になるのかもと思いました

←マイページ登録 ←Twitter 今日話すこと 1. Remixの概念と哲学 2. Remixちょっとハンズオン 3. Remixの今後

←マイページ登録 ←Twitter 1. Remixの特徴と哲学

←マイページ登録 ←Twitter Remixの特徴① 1. Next.jsと同様、ファイルシステムルーティング a. ただし、NestedRoutingをサポート 2. SSG機能は提供せず、SSRのみをサポート 3. ViewとController層のみを提供 a. Model層は開発者に委ねられている b. UIベースなフレームワークならでは 4. クッキーとセッション管理機能を提供

←マイページ登録 ←Twitter Remixの特徴② Reactベースのフレームワークであることの意味 そもそも、「データ」の使われ方 1. アプリケーション（UI）を構築すること 2. 分析して何かの判断材料にすること Rails等のサーバーサイドのフレームワークはModel（データ）層中心の設計が なされるが、Webアプリケーションフレームワークである以上、View層へ最終的 にデータが渡される。 Reactベースであることにより、View層中心にアプリケーションを構築するの で、必然的にデータやロジックを構築することができる。

←マイページ登録 ←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

←マイページ登録 ←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

←マイページ登録 ←Twitter 2. Remixちょっとハンズオン

←マイページ登録 ←Twitter create-remixとファイル構成①

←マイページ登録 ←Twitter create-remixとファイル構成②

←マイページ登録 ←Twitter ページの追加とリンク①

←マイページ登録 ←Twitter ページの追加とリンク①

←マイページ登録 ←Twitter ページの追加とリンク②

←マイページ登録 ←Twitter ページの追加とリンク②

←マイページ登録 ←Twitter データの取得

←マイページ登録 ←Twitter データの取得

←マイページ登録 ←Twitter データの取得

←マイページ登録 ←Twitter 3. Remixの今後

←マイページ登録 ←Twitter ぶりぼんの考え ドキュメントを読み始めた頃は、これは来る！と思ったものの …… Next.jsや他のサーバーサイドフレームワーク同様、一つの選択肢でしかない Node.jsの知識がある程度必要で、 JS独自のライブラリ選定技術も必要。 他のフレームワークと比較したパフォーマンス計測が難しい。 つまり、開発者を選ぶフレームワークであると言える Remixのパフォーマンスが安定して出せることが一般論になり、 Fly.ioやCloudflareなどのRemix実行環境を簡 単に作成してくれるPaaSが増えることで、多くの開発者に使われるようになる …気がする Remixの今後

←マイページ登録 ←Twitter まとめ 1. UIベースのフレームワーク 2. フロントエンドかつバックエンドのフレームワーク 3. ファイルシステムルーティング a. NestedRoutingをサポート 4. SSG機能は提供せず、SSRのみをサポート 5. ViewとControllerの機能のみを提供し、Model層は公式から提供されてい ない 6. 素晴らしい技術で個人的には積極的に使いたいが、世の中を席巻するほ どではない

←マイページ登録 ←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

←マイページ登録 ←Twitter 仲間募集中！

←マイページ登録 ←Twitter 仲間募集中！ おてつたびでは、新しい旅の形を一緒に作っていく仲間を募集中です。 募集ポジションは以下の通りです。 ● iOSアプリエンジニア ● Webフルスタックエンジニア まずはカジュアルにお話ししましょう！ その後、おてつたびに興味を持っていただけたら、是非ご一緒しましょう。 Notion Wantedly iOS Wantedly フルスタックエンジニア

←マイページ登録 ←Twitter SNS SNSもやっています！ 今後はZennをメインに発信しつつ、noteやTwitterも活用しています。 フロントエンド中心に発信しているので、興味ある方は閲覧 && フォローをお 願いします！ Twitter Zenn note