Reactでマルチページアプリを構築する方法：初心者から上級者向けガイド
React でマルチページアプリを構築する方法
Reactは、シングルページアプリケーション (SPA) の構築に広く使用されている JavaScript ライブラリです。しかし、React を使用してマルチページアプリケーション (MPA) を構築することも可能です。
MPA は、複数の HTML ページで構成される Web アプリケーションです。各ページは独自の URL を持ち、ブラウザの履歴とブックマークが個別に機能します。一方、SPA は単一の HTML ページで構成されており、JavaScript を使用してページ間を動的に遷移します。
MPA は、SEO に優れている、複数のデバイスで動作しやすい、コードをモジュール化しやすいなどの利点があります。一方、SPA は、ユーザーエクスペリエンスが滑らかで、コードを整理しやすいなどの利点があります。
React で MPA を構築する方法
React で MPA を構築するには、いくつかの方法があります。
ルーティングライブラリを使用する
最も一般的な方法は、ルーティングライブラリを使用することです。ルーティングライブラリは、URL とコンポーネントをマッピングし、ユーザーが URL にアクセスしたときに適切なコンポーネントをレンダリングするのに役立ちます。
React で人気のルーティングライブラリには、次のものがあります。
これらのライブラリはそれぞれ異なる機能と利点を持つため、プロジェクトのニーズに合わせて適切なライブラリを選択する必要があります。
HashRouter を使用する
HashRouter は、React Router に付属するコンポーネントで、ハッシュフラグメントを使用して URL を処理します。ハッシュフラグメントは、URL の # 記号の後に続く部分です。
HashRouter を使用すると、単純な MPA を簡単に構築できます。ただし、BrowserRouter (React Router の別のコンポーネント) ほど機能が豊富ではありません。
独自のルーティングシステムを構築する
高度な制御が必要な場合は、独自のルーティングシステムを構築することもできます。これはより複雑なタスクですが、アプリケーションのニーズに完全に一致するルーティングシステムを作成することができます。
各ページのコンポーネントを作成する
ルーティングライブラリを選択したら、各ページのコンポーネントを作成する必要があります。コンポーネントは、React によってレンダリングされる UI 要素です。
各コンポーネントは、そのページに表示するコンテンツを定義する必要があります。コンポーネントは、他のコンポーネントをネストしたり、データを受け渡したり、イベントを処理したりすることができます。
コンポーネント間でデータを共有する
複数のコンポーネント間でデータを共有する必要がある場合は、いくつかの方法があります。
- Redux: ステート管理のためのライブラリです。
- Context: 複数のコンポーネント間でデータを共有するために使用できるグローバルなストレージです。
- state: コンポーネントの内部状態を管理するために使用できます。
- props: 親コンポーネントから子コンポーネントにデータを渡すために使用できます。
アプリケーションをビルドしてデプロイする
すべてのコンポーネントを作成してデータを共有したら、アプリケーションをビルドしてデプロイする必要があります。
ビルドプロセスは、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 つのコンポーネントがあります。
Aboutコンポーネントは、/aboutパスにアクセスするとレンダリングされます。
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 にアクセスすると、以下のようになります。
/にアクセスすると、「ホーム」ページが表示されます。
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 を構築するには、ルーティングライブラリを使用する方法以外にも、いくつか方法があります。
最良の方法は、プロジェクトのニーズと要件によって異なります。
- ユーザーエクスペリエンス: SPA は、MPA よりもユーザーエクスペリエンスが優れている場合があります。これは、ページ間の遷移が滑らかでシームレスであるためです。
- パフォーマンス: MPA は、SPA よりもパフォーマンスが優れている場合があります。これは、各ページが個別のチャンクとしてロードされるためです。
- SEO: MPA は、SPA よりも SEO に適している場合があります。これは、各ページに独自の URL があるためです。
javascript node.js reactjs
