ReactとRemixの違い

前書き

ReactとRemixは、どちらもJavaScriptでフロントエンドアプリケーションを構築するために使われますが、目的と機能が異なるため、構文や開発アプローチに大きな違いがあります。

1. React の特徴

React の基本

ReactはUIライブラリであり、アプリケーションのビュー（UI）を構築することに特化しています。
ルーティングやデータフェッチなどは提供されないため、必要に応じて外部ライブラリ（React Routerなど）を利用します。

基本構文

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

Reactの重要な特徴は、以下のフックを使用して状態管理やライフサイクル管理を行えることです。

• useState：コンポーネントの状態を管理する。
• useEffect：副作用を管理する（例：データフェッチ）。

2. Remix の特徴

Remix の基本

Remixはフルスタックフレームワークで、Reactを基盤としながら、次のような機能を内包しています：

• サーバーサイドレンダリング（SSR）
• ファイルベースのルーティング
• サーバーサイドでのデータ取得（Loader）
• フォーム処理のサポート（Action）

これにより、React単体では必要なライブラリや設定を簡略化し、統一的な開発体験を提供します。

基本構文

export default function Index() {
  return (
    <div>
      <h1>Hello, Remix!</h1>
    </div>
  );
}

3. 構文の違い

RemixとReactの主な違いを具体的な例を交えて解説します。

(1) ルーティング

React

React単体ではルーティング機能がなく、React Routerを使うことが一般的です。

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

Remix

Remixではファイルベースのルーティングを採用しているため、以下のようにディレクトリ構造がそのままルートになります。

routes/
├── index.jsx    // "/"
├── about.jsx    // "/about"

routes/index.jsx の中身：

export default function Index() {
  return <h1>Home Page</h1>;
}

(2) データフェッチ

React

ReactではuseEffectを使い、クライアントサイドでデータをフェッチします。

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return <div>{data ? <p>{data.message}</p> : <p>Loading...</p>}</div>;
}

Remix

Remixではloader関数を使用し、サーバーサイドでデータを取得してコンポーネントに渡します。

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export const loader = async () => {
  return json({ message: "Hello from the server!" });
};

export default function Index() {
  const data = useLoaderData();
  return <p>{data.message}</p>;
}

(3) フォーム処理

React

Reactではフォーム送信時の処理をクライアント側でハンドリングする必要があります。

import React, { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

Remix

Remixではフォーム送信をaction関数でサーバーサイドで処理します。

export const action = async ({ request }) => {
  const formData = await request.formData();
  const name = formData.get("name");
  return json({ success: true, name });
};

export default function Form() {
  return (
    <form method="post">
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

4. 機能とアプローチの違い

機能	React	Remix
ルーティング	React Routerを利用	ファイルベースのルーティング
データ取得	クライアント側で実装（useEffect）	サーバーサイドでloaderを使用
フォーム処理	クライアント側で制御	サーバーサイドでactionを使用
SSR/SSG	ライブラリ（例：Next.js）が必要	標準でサポート

5. ReactユーザーにとってのRemixの新しさ

• 統合された開発体験：ReactのUI設計に加え、サーバーサイドの処理やルーティングを簡単に実装可能。
• データフェッチとSSRの簡略化：サーバーサイドでのデータ管理が簡単になり、より効率的なアプリケーションが構築可能。

結論

RemixはReactの可能性を広げ、フルスタックな開発をシンプルにするフレームワークで、Reactの強力なUI構築能力を活かしながら、データ管理やSSRをシームレスに統合することで、開発の手間を大幅に削減できることがわかります。