Remixの概要や特徴、メリット・デメリットなど

Remix という React 系の新しいフレームワークについて、その概要や特徴、メリット・デメリットなどを詳しく解説します。

Remix とは

Remix は、React ベースの新しい Web アプリケーション フレームワークです。React 自体はコンポーネントベースのユーザーインターフェイス構築ライブラリですが、Remix はフルスタックのフレームワークとして、サーバーサイドレンダリング、ファイルベースのルーティング、データ取得の統一的な方法などを提供します。

Remix は、React コミュニティのエバンジェリストでもある Michael Jackson および Remix Software の開発チームによって作られました。2021 年末にベータ版がリリースされ、2022 年 11 月に v1.0 が正式リリースされました。

Remix の目的と狙い

Remix は、従来の React ベースの SPA (Single Page Application) の制約を取り除き、Web 標準と React の強みを最大限に活かすことを目指しています。具体的には以下のような目的があります。

• ウェブ標準に準拠し、ブラウザの機能を最大限活用する
• ウェブのパフォーマンスと UX を最適化する
• React を中心としたモノリシックな開発体験を提供する

Remix の目標は、1990 年代後半の伝統的なWeb 開発の利点(ページ遷移、ブラウザの履歴管理、ブックマーク可能な URL など)を最新の React ベースの開発体験と組み合わせることです。これにより、優れたパフォーマンス、開発者生産性、再利用性の高いコードを実現できると期待されています。

Remix の主要な機能

Remix の主な機能は以下のとおりです。

サーバーサイドレンダリング (SSR)

Remix では、アプリケーションのルートコンポーネントがサーバー上で事前にレンダリングされます。これによりアプリケーションの初期ロード時間が短縮され、検索エンジンの評価も向上します。

ファイルベースのルーティング

Remix ではルーティングがファイル構造に基づいて行われます。各ルートは、対応するコンポーネントファイルに関連付けられます。この方式により、アプリケーションの構造をより明確化できます。

ネストされたルーティング

Remix の routes フォルダに配置されるファイルは、ルートパスのネストに応じてネストされた構造になります。これにより、レイアウトコンポーネントの入れ子構造と UI コンポーネントを明示的に分離できます。

リソースルート

Remix ではリソースに対する処理をルートモジュールに集約し、明示的に記述することができます。リソースルートに関するコードは、対応するルートファイルに loader 関数と action 関数として記述されます。

• loader: リソースの取得に使用され、パラメータの読み取りやデータの取得、キャッシュなどの責務があります。
• action: データの変更(CRUD)に使用されます。ユーザーからの入力をサーバーサイドのロジックに渡し、それに応じてリソースを更新します。

これらの関数は従来の React ベースの SPA ではなく、Node.js によるサーバーサイド実装となるため、リソースの取得や変更をサーバーサイド中心に設計できます。

ルートハンドラ

上記の loader 関数と action 関数は、ルートハンドラという関数群の一部です。ルートハンドラはリソースやナビゲーションに関する様々なイベントに応じて呼び出されます。主なハンドラは以下の通りです。

• loader: リソースの取得に使用
• action: フォームの送信などのデータ変更に使用
• shouldRevalidate: リソースが古くなっているかどうかを判断
• handle: リクエストやレスポンスの処理に使用
• meta: メタ情報(OGP やタイトルなど)を設定

これらのハンドラはすべてサーバー側で実行されるため、クライアントサイドでリソースを取得する必要がなくなります。