はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった Remix に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
Remix に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
Remix とは？
Remix は、サーバーサイドレンダリング（SSR）を活用し、モダンなユーザー体験を提供するために設計されたフレームワークです。
React をベースにしており、ルートごとにモジュール化された設計や、データのプリフェッチ機能、エラーハンドリング、フォームの最適化といった高度な機能を提供します。
(参考: Remix)
Remix の Hello World
Remix で Hello World を表示するミニマムなコード例です。
1. プロジェクトのセットアップ
Remix プロジェクトを始めるには、以下のコマンドを実行します。
npx create-remix@latest my-remix-app
cd my-remix-app
npm install
npm run dev
2. routes/index.jsx の編集
プロジェクトの app/routes/_index.tsx ファイルを以下のように編集します。
export default function Index() {
const name = "Remix";
return (
<div>
<h1>Hello {name}!</h1>
</div>
);
}
3. 動作確認
ブラウザで再度 http://localhost:5173 にアクセスすると、「Hello Remix!」と表示されます。
Remix のメリット・デメリット
メリット
1. WEB 標準に忠実
データ取得には Fetch API、フォーム送信についてはFormData、そしてサーバーの状態管理にはCookieを用いる等 WEB 標準に即した設計になっており、Remix を学ぶ = WEB 標準を学ぶことで今後も応用が効きやすい知見となります。
(参考: Remix で Web 標準を学んだ 1 年間 / First year with Remix)
2. React ベース
既存の React 知識を活かして開発を進められるため、React や Next.js 開発者の学習コストが低いです。
3. マルチランタイム
アダプター機能を用いて Vercel、Netlify、Architect などの Node.js サーバーはもちろん、Cloudflare Workers や Deno Deploy などの非 Node.js 環境でも実行する事が出来ます。
(参考: HTTP バンドラーとアダプター)
4. 学習リソース
Remix に関する記事やドキュメントもたくさん公開されており、日本語版公式ドキュメント的立ち位置の Remix ドキュメント 日本語版も存在するので学習リソースにはそこまで困らないでしょう。
デメリット
-
エコシステムの規模
Next.jsに比べるとコミュニティやエコシステムの成熟度はまだ劣る部分があります。
-
企業採用率
今のところはNext.jsに比べると企業での採用実績は少なく、Remixを活かした転職・就職の場が限定されてしまう可能性があります。※ 筆者による採用媒体調査の結果なので事実と異なる可能性はあります。
参考記事
おわりに
最近は Next.js が多機能になり複雑化しているせいもあってか、ところどころで採用も増え始めている印象です。
これから技術選定をする方の選択の一つとしてRemixは良さそうだなと思いました。
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 8 記事目です。
次の記事はこちら Remix の世界: プロジェクトのセットアップ #2