この記事はZOZO Advent Calendar 2023 シリーズ9の6日目の記事です。
はじめに
こんにちは、前回投稿した"使ったことない技術を詰め合わせてアプリを開発した話"は目を通していただけましたでしょうか？？
今回はそこで登場したRemixについて、個人的にいいなと思ったことを書いていこうと思います！
※この記事は他のフレームワークと優劣をつけるなどの目的は一切ありません
Remixとは
RemixはReactのSSRフレームワークで、React Routerの制作者によってReact Routerを元に開発されています。
Remixはフルスタックフレームワークであり、RailsやLaravelなどで用いられていたMVCアーキテクチャのV(View)とC(Controller)を提供しM(Model)は開発者によって委ねられている形になっています。
ちなみに自分はPrisma + PlanetScaleをModelに採用しました。
良かったところ
Nested Routes
Nested Routesによって、レイアウトやページをネストすることができ、ヘッダーの共通化などが簡単に実装することができます。
これによって、
- データを並列にロードできる
(引用元: https://remix.run/)
- エラーの伝搬を留めることができる
(引用元: https://remix.run/)
- ページ遷移時などに再Fetchするデータを最小限に抑えることができる
などのメリットがあります。
(ちなみにこの機能はRemixの機能と言うよりはReact Routerの機能なのでReact+React Routerの構成でも利用できますし、Next.jsのApp Routerでも同等の機能が利用できます)
ページごとに実装を完結できる
Remixではルートファイルにloader(GETリクエストを受けるモジュール)と action(GET以外のリクエスト受けるモジュール)を持つ構成になります。
これによってナビゲーションとミューテーションのロジックを独立させることができ、ページごとに実装を完結させることができます。
これのおかげで、チーム開発でコードの全体像が把握できてない時や、初期段階で書いたコードの内容が曖昧な時でもそこまで気にすることなくページごとの実装に取り組むことができます。
機能が少ない
Next.jsと比較しての話になりますが、Remixは機能が少ないため選択肢に迷うことが少なくなります。
例えばレンダリング手法で言うとRemixはSSRのみなのに対して、Next.jsではSSR・SSG・ISRがあります。もちろん選択肢が多いのは悪いことではなく正しく使い分ければ素晴らしいものが完成することは承知しております。
しかし現状の自分の力量では正しく使い分けることはできずコードがカオスになっていくことはなんとなく想像がつきます。だからこそ機能の少なさはメリットだと感じました。
そしてその分学習コストも低いので、急遽フロントエンドの開発をしなくてはならなくなってしまったバックエンドエンジニアの方などにはオススメできるポイントだと思っています。
おわり
今回は実際に個人開発で触ったRemixについてよかったと思った部分を主観で書かせていただきました！
もちろん内容以外のメリットやデメリットもありましたので機会がありましたらその辺のことも書いてみたいと思います。
興味が湧きましたらぜひRemix触ってご自身の手でメリット・デメリット感じてみてください！
自分もRemixについてより深ぼっていくのはもちろん、要件に沿った適切な技術選定ができるように他のフロントエンドフレームワークにも触れていきたいと思います。
誤り等ございましたら、ご指摘いただけますと幸いでございます。
最後まで読んでくださりありがとうございました！