PESPA と Remix が魅せる次世代のフロントエンド環境
大規模な環境に合わせた技術選定をするなら「React」という認識が生まれていますが、Next.js まで使うのかと言われると状況によるのかなと思います。
そこで Next.js とは異なるアプローチのフレームワーク「Remix」に触れていきます。また、 Remix が推している PESPA の理解を得ましょう。
Remix とは
Remix の公式サイトをスクロールしていくと、特徴が分かるのと同時にミームのようないろんな小ネタが仕込まれています。
Remix は、クライアントサイドとサーバーサイドのレンダリングを組み合わせ、高速なパフォーマンスを実現します。また、Remix は、リッチなプリロード機能、キャッシュ制御、ネットワークレベルのストレージ、データフェッチのための自動的なコード分割などの機能を提供しています。
ちなみに Remix は React Router の制作者が作られています。
PESPA とは
The Web’s Next Transition - Progressively Enhanced Single Page Apps (PESPAs)
PESPA の 「PE」 は Progressive Enhancement と言います。PESPA は Progressive Enhancement Single Page Application となり、これは Web 開発の手法の一つで、基本的な機能を持った Web サイトを作成し、その後に徐々に高度な機能やデザインを追加していく方法です。
PESPA の最大の特徴は、Multi-Page Application（MPA） のシンプルなメンタルモデルを利用しながら、SPA のような高度な機能も利用できる点です。また、PESPA は Progressive Enhancement を中心に据えたアプリケーション開発を行うことができ、JavaScript が有効でない状態でもアプリケーションが動作するようになります。
Remix はこの PESPA を先導しています。もちろん、Next.js などの他のフレームワークも追随しているため構築できないわけではありません。
Remix チュートリアルに触れて感じたこと
App Tutorial の方を触ってみましたが、やはりルーティングの取り扱いが印象的です。
npx create-remix@latestRemix のセットアップスクリプトを実行すると下記のようなディレクトリ構成になります。
remix-project
├── app
│ ├── entry.client.tsx
│ ├── entry.server.tsx
│ ├── root.tsx
│ └── routes
│ └── _index.tsx
├── package-lock.json
├── package.json
├── public
│ └── favicon.ico
├── remix.config.js
├── remix.env.d.ts
├── tsconfig.json
└── README.mdapp/routes 配下にファイルを置くことで、ファイル名に対応した URL ルートが作成されます。これを Nested Routing と呼びます。Nested Routing とは、親子関係を持つページ構造を作成する際に使用されるルーティング手法です。これにより、親ページが共通のレイアウトやコンポーネントを提供し、子ページがその中にさらにコンテンツを表示することができます。
app
├── root.tsx
└── routes
├── index.tsx
├── __auth.tsx
├── users.tsx
├── __auth
│ ├── login.tsx
│ ├── logout.tsx
│ └── signup.tsx
├── users
│ ├── $userId.tsx
│ └── new.tsx
└── etc上記のようにフォルダの入れ子構造を用いるパターンをよく見ると思います。これを Remix ではv1-route-conventionとされています。v2 ではファイルのドット(.)を使用して作成する手法が書かれています。
app
├── root.tsx
└── routes
├── _index.tsx
├── _auth.tsx
├── _auth.login.tsx
├── _auth.logout.tsx
├── _auth.signup.tsx
├── users.$userId.tsx
├── users.new.tsx
├── users.tsx
└── etcこのように書くことで各ルートファイルが同ディレクトリに収まることとなり、コードの整理が容易になり構造がわかりやすくなります。
| Matched Route | URL |
|---|---|
| _index.tsx | / |
| _auth.login.tsx | /login |
| _auth.logout.tsx | /logout |
| _auth.signup.tsx | /signup |
| users.$userId.tsx | /users/:userId |
| users.new.tsx | /users/new |
作成したルーティングを実際の URL に照らし合わせると上記のようになります。
ここで _auth.tsx や users.tsx が割り当てられていないように見えます。これらはレイアウトファイルと位置づけになり
| Matched Route | URL | Layout |
|---|---|---|
| _index.tsx | / | root.tsx |
| _auth.login.tsx | /login | _auth.tsx |
| _auth.logout.tsx | /logout | _auth.tsx |
| _auth.signup.tsx | /signup | _auth.tsx |
| users.$userId.tsx | /users/:userId | users.tsx |
| users.new.tsx | /users/new | users.tsx |
レイアウト周りを加えるとどのファイルがどこに適用されるかがわかりやすくなったと思います。
ちなみに users_.xxx.tsx のように書くと users.tsx ではなく root.tsx を見るよう変更することもできます。
まとめ
今回は、React の新たなフレームワークである Remix と、PESPA という Web 開発の戦術について説明しました。Remix は、ルーティング周りに特に強みを持ち、Nested Routing を用いることで、親子関係を持つページ構造を簡単に実現できます。また、PESPA は高度な SPA 機能と Progressive Enhancement の組み合わせで効率的な開発を可能にします。
Next.js が非常に人気のあるフレームワークであることは確かですが、Remix もまた、独自のアプローチで効率的なフロントエンド開発を実現しています。これからのフロントエンド開発において、Remix と PESPA は、新たな選択肢として非常に魅力的です。
最後に、Remix と PESPA を試してみることで、新しいフロントエンド開発の可能性を広げることができるでしょう。ぜひ一度、Remix を使ってプロジェクトを作成し、その特徴やメリットを体感してみてください。