Remixの世界: Remixとは？ #1


## はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Remix に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

Remix に少しでも興味のある方は、ぜひご覧ください。

## フロントエンドの世界 2024 について

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

- [はじめに](#はじめに)
- [フロントエンドの世界 2024 について](#フロントエンドの世界-2024-について)
- [もくじ](#もくじ)
- [Remix とは？](#remix-とは)
- [Remix の Hello World](#remix-の-hello-world)
- [Remix のメリット・デメリット](#remix-のメリットデメリット)
- [参考記事](#参考記事)
- [おわりに](#おわりに)

## Remix とは？

Remix は、サーバーサイドレンダリング（SSR）を活用し、モダンなユーザー体験を提供するために設計されたフレームワークです。

[React](https://ja.react.dev/) をベースにしており、ルートごとにモジュール化された設計や、データのプリフェッチ機能、エラーハンドリング、フォームの最適化といった高度な機能を提供します。

(参考: [Remix](https://remix.run/))

## Remix の Hello World

Remix で Hello World を表示するミニマムなコード例です。

### 1. プロジェクトのセットアップ

Remix プロジェクトを始めるには、以下のコマンドを実行します。

```shell
npx create-remix@latest my-remix-app
cd my-remix-app
npm install
npm run dev
```

### 2. routes/index.jsx の編集

プロジェクトの `app/routes/_index.tsx` ファイルを以下のように編集します。

```tsx: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](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API)、フォーム送信については[FormData](https://developer.mozilla.org/ja/docs/Web/API/FormData)、そしてサーバーの状態管理には`Cookie`を用いる等 WEB 標準に即した設計になっており、Remix を学ぶ = WEB 標準を学ぶことで今後も応用が効きやすい知見となります。

(参考: [Remix で Web 標準を学んだ 1 年間 / First year with Remix](https://speakerdeck.com/nkzn/first-year-with-remix))

**2. React ベース**

既存の React 知識を活かして開発を進められるため、React や Next.js 開発者の学習コストが低いです。

**3. マルチランタイム**

アダプター機能を用いて [`Vercel`](https://vercel.com/)、[`Netlify`](https://www.netlify.com/)、[`Architect`](https://arc.codes/) などの `Node.js` サーバーはもちろん、[`Cloudflare Workers`](https://workers.cloudflare.com/) や [`Deno Deploy`](https://docs.deno.com/deploy/manual/) などの非 `Node.js` 環境でも実行する事が出来ます。

(参考: [HTTP バンドラーとアダプター](https://remix-docs-ja.techtalk.jp/discussion/introduction/#http%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9%E3%83%BC%E3%81%A8%E3%82%A2%E3%83%80%E3%83%97%E3%82%BF%E3%83%BC))

**4. 学習リソース**
Remix に関する記事やドキュメントもたくさん公開されており、日本語版公式ドキュメント的立ち位置の [Remix ドキュメント 日本語版](https://remix-docs-ja.techtalk.jp/)も存在するので学習リソースにはそこまで困らないでしょう。

### デメリット

1. **エコシステムの規模**
   `Next.js` に比べるとコミュニティやエコシステムの成熟度はまだ劣る部分があります。
   <br />
2. **企業採用率**
   今のところは `Next.js` に比べると企業での採用実績は少なく、`Remix` を活かした転職・就職の場が限定されてしまう可能性があります。

   ※ 筆者による採用媒体調査の結果なので事実と異なる可能性はあります。

## 参考記事

https://remix.run/docs/ja/main

## おわりに

最近は Next.js が多機能になり複雑化しているせいもあってか、ところどころで採用も増え始めている印象です。

これから技術選定をする方の選択の一つとして`Remix`は良さそうだなと思いました。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 8 記事目です。
次の記事はこちら [Remix の世界: プロジェクトのセットアップ #2](https://qiita.com/nuinteedev/private/f44b4a1ad5dcdf1c85af)