Reactでマルチページアプリを構築する方法：初心者から上級者向けガイド

2024-05-21

React でマルチページアプリを構築する方法

Reactは、シングルページアプリケーション (SPA) の構築に広く使用されている JavaScript ライブラリです。しかし、React を使用してマルチページアプリケーション (MPA) を構築することも可能です。

MPA は、複数の HTML ページで構成される Web アプリケーションです。各ページは独自の URL を持ち、ブラウザの履歴とブックマークが個別に機能します。一方、SPA は単一の HTML ページで構成されており、JavaScript を使用してページ間を動的に遷移します。

MPA は、SEO に優れている、複数のデバイスで動作しやすい、コードをモジュール化しやすいなどの利点があります。一方、SPA は、ユーザーエクスペリエンスが滑らかで、コードを整理しやすいなどの利点があります。

React で MPA を構築するには、いくつかの方法があります。

ルーティングライブラリを使用する

最も一般的な方法は、ルーティングライブラリを使用することです。ルーティングライブラリは、URL とコンポーネントをマッピングし、ユーザーが URL にアクセスしたときに適切なコンポーネントをレンダリングするのに役立ちます。

React で人気のルーティングライブラリには、次のものがあります。

これらのライブラリはそれぞれ異なる機能と利点を持つため、プロジェクトのニーズに合わせて適切なライブラリを選択する必要があります。

HashRouter は、React Router に付属するコンポーネントで、ハッシュフラグメントを使用して URL を処理します。ハッシュフラグメントは、URL の # 記号の後に続く部分です。

HashRouter を使用すると、単純な MPA を簡単に構築できます。ただし、BrowserRouter (React Router の別のコンポーネント) ほど機能が豊富ではありません。

独自のルーティングシステムを構築する

高度な制御が必要な場合は、独自のルーティングシステムを構築することもできます。これはより複雑なタスクですが、アプリケーションのニーズに完全に一致するルーティングシステムを作成することができます。

各ページのコンポーネントを作成する

ルーティングライブラリを選択したら、各ページのコンポーネントを作成する必要があります。コンポーネントは、React によってレンダリングされる UI 要素です。

各コンポーネントは、そのページに表示するコンテンツを定義する必要があります。コンポーネントは、他のコンポーネントをネストしたり、データを受け渡したり、イベントを処理したりすることができます。

複数のコンポーネント間でデータを共有する必要がある場合は、いくつかの方法があります。

props: 親コンポーネントから子コンポーネントにデータを渡すために使用できます。
state: コンポーネントの内部状態を管理するために使用できます。
Context: 複数のコンポーネント間でデータを共有するために使用できるグローバルなストレージです。
Redux: ステート管理のためのライブラリです。

アプリケーションをビルドしてデプロイする

すべてのコンポーネントを作成してデータを共有したら、アプリケーションをビルドしてデプロイする必要があります。

ビルドプロセスは、JavaScript コードを圧縮し、本番環境用の準備を整えます。デプロイプロセスは、アプリケーションを Web サーバーにアップロードします。

例

次の例は、React Router を使用してシンプルな MPA を構築する方法を示しています。

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
};

export default App;

この例では、Home と About という 2 つのコンポーネントがあります。

Home コンポーネントは、/ パスにアクセスするとレンダリングされます。

React は、MPA を

React でマルチページアプリを構築するサンプルコード

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h1>ホーム</h1>
      <p>これはホーム画面です。</p>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>概要</h1>
      <p>これは概要ページです。</p>
    </div>
  );
};

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

ReactDOM.render(<App />, document.getElementById('root'));

package.json

{
  "name": "multipage-app",
  "version": "0.1.0",
  "description": "React multipage app example",
  "main": "index.js",
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

このコードは、次のディレクトリ構造に配置する必要があります。

multipage-app
├── package.json
├── index.js

このコードを実行するには、次のコマンドを実行します。

npm start

ブラウザで http://localhost:3000 にアクセスすると、以下のようになります。

/ にアクセスすると、「ホーム」ページが表示されます。

このコードはごく基本的な例であり、実際のアプリケーションでは、より多くのコンポーネント、データフェッチング、スタイリングなどが必要になります。

React でマルチページアプリを構築するその他の方法

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';

const Home = () => {
  return (
    <div>
      <h1>ホーム</h1>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>概要</h1>
    </div>
  );
};

const App = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </HashRouter>
  );
};

export default App;

このコードは、BrowserRouter を使用する例とほぼ同じですが、HashRouter を使用しています。

独自のルーティングシステムを構築するには、次の手順に従う必要があります。

URL パターンを定義する。
各 URL パターンに対応するコンポーネントを作成する。
URL が変更されたときに適切なコンポーネントをレンダリングするロジックを作成する。

import React, { useState } from 'react';

const Home = () => {
  return (
    <div>
      <h1>ホーム</h1>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>概要</h1>
    </div>
  );
};

const App = () => {
  const [currentPath, setCurrentPath] = useState('/');

  const handleURLChange = (event) => {
    setCurrentPath(event.target.pathname);
  };

  return (
    <div>
      <nav>
        <a href="/" onClick={handleURLChange}>ホーム</a>
        <a href="/about" onClick={handleURLChange}>概要</a>
      </nav>

      {currentPath === '/' && <Home />}
      {currentPath === '/about' && <About />}
    </div>
  );
};

export default App;

この例では、useState フックを使用して、現在の URL を追跡しています。 URL が変更されると、handleURLChange 関数が呼び出され、currentPath ステートが更新されます。

currentPath ステートに基づいて、適切なコンポーネントがレンダリングされます。

このコードは、独自のルーティングシステムを構築する方法のほんの一例です。ニーズに合わせてカスタマイズできます。

React で MPA を構築するには、ルーティングライブラリを使用する方法以外にも、いくつか方法があります。

最良の方法は、プロジェクトのニーズと要件によって異なります。

その他の検討事項

SEO: MPA は、SPA よりも SEO に適している場合があります。これは、各ページに独自の URL があるためです。
パフォーマンス: MPA は、SPA よりもパフォーマンスが優れている場合があります。これは、各ページが個別のチャンクとしてロードされるためです。
ユーザーエクスペリエンス: SPA は、MPA よりもユーザーエクスペリエンスが優れている場合があります。これは、ページ間の遷移が滑らかでシームレスであるためです。

これらの要因をすべて考慮して、プロジェクトに最適な方法を選択することが重要です。

javascript node.js reactjs