Reactエコシステムは、さまざまなツールやフレームワークと連携することでさらに強力になります。本章では、Next.jsやRemixを活用したアプリケーション開発、React Nativeとのロジック共有、カスタムフックの設計、周辺ツールの活用方法について解説します。

1. Next.jsやRemixでのReact活用

Next.js

• 特徴:
  • サーバーサイドレンダリング (SSR) や静的サイト生成 (SSG) に対応したReactフレームワーク。
  • ファイルベースのルーティング。
  • 内蔵APIルートでバックエンド開発も可能。

基本的なプロジェクトセットアップ

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

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

export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return { props: { data } };
}

const Page = ({ data }) => {
  return <div>{data.message}</div>;
};

export default Page;

Remix

• 特徴:
  • サーバー中心のフレームワークで、データフェッチとレンダリングの統合。
  • React Routerをベースとした柔軟なルーティング。

基本的なプロジェクトセットアップ

npx create-remix@latest

ローダー関数を使ったデータフェッチ

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

export const loader = async () => {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return json({ data });
};

const Page = () => {
  const { data } = useLoaderData();
  return <div>{data.message}</div>;
};

export default Page;

2. React Nativeとの共有ロジックの構築

ロジック共有のアプローチ

• カスタムフック:
  • Webとモバイルで再利用可能なビジネスロジックを実装。

カスタムフック例

import { useState, useEffect } from "react";

export const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

ReactとReact Nativeでの使用

• React Web:

  import { useFetchData } from "./hooks/useFetchData";
  
  const App = () => {
    const { data, loading } = useFetchData("https://api.example.com/data");
  
    if (loading) return <p>Loading...</p>;
    return <div>{data.message}</div>;
  };
  
  export default App;

• React Native:

  import { useFetchData } from "./hooks/useFetchData";
  import { Text, View } from "react-native";
  
  const App = () => {
    const { data, loading } = useFetchData("https://api.example.com/data");
  
    if (loading) return <Text>Loading...</Text>;
    return <View><Text>{data.message}</Text></View>;
  };
  
  export default App;

3. カスタムフックの設計と再利用

カスタムフックの利点

• ロジックをコンポーネントから分離して再利用可能に。
• 状態管理やデータフェッチを簡潔に実装。

ユーザー入力の管理

import { useState } from "react";

export const useForm = (initialState) => {
  const [values, setValues] = useState(initialState);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  return { values, handleChange };
};

// 使用例
const Form = () => {
  const { values, handleChange } = useForm({ username: "" });

  return (
    <input
      name="username"
      value={values.username}
      onChange={handleChange}
    />
  );
};

4. エコシステムを支える周辺ツール

ESLint

• コードの品質を保つための静的解析ツール。
• 設定例:

  npx eslint --init

Prettier

• 一貫したコードフォーマットを適用。
• 設定例:

  yarn add --dev prettier
  echo "{\"singleQuote\": true}" > .prettierrc

Bundle Analyzer

• WebpackやViteなどでのバンドルサイズ分析。
• 使用例:

  yarn add --dev webpack-bundle-analyzer

---

Reactエコシステムの拡張により、より多機能で効率的なアプリケーションを構築できます。本章で紹介した技術やツールを活用し、エコシステムを最大限に活かした開発を進めましょう。