Upgrade to Pro — share decks privately, control downloads, hide ads and more …

最近流行りのRemixとは何か

46416ca30dd69584c16460dde1b4dc3e?s=47 ryubb
February 26, 2022

 最近流行りのRemixとは何か

46416ca30dd69584c16460dde1b4dc3e?s=128

ryubb

February 26, 2022
Tweet

More Decks by ryubb

Other Decks in Programming

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