テックコード -web関連の情報サイト- 
1. Reactとは？
Reactは、Facebookによって開発されたJavaScriptライブラリで、ユーザーインターフェース（UI）の構築に特化しています。コンポーネントベースのアーキテクチャを採用しており、コードの再利用性や保守性が高いことが特徴です。Reactを使うことで、動的なウェブサイトやシングルページアプリケーション（SPA）の開発が容易になります。
2. 環境のセットアップ
2.1 Node.jsとnpmのインストール
Reactを使った開発を始めるには、まずNode.jsとnpm（Node Package Manager）をインストールします。これにより、Reactの依存関係やライブラリを管理できるようになります。
- Node.jsの公式サイト（https://nodejs.org/）からインストーラーをダウンロードし、インストールを進めます。
- インストール後、ターミナル（コマンドプロンプト）で以下のコマンドを実行し、インストールが正常に行われたか確認します。
node -v
npm -v
これでNode.jsとnpmのバージョンが表示されれば、インストールは成功です。
2.2 Create React Appのインストール
次に、Reactプロジェクトを簡単に始めるためのツール「Create React App」をインストールします。このツールを使うことで、面倒な設定なしにReactプロジェクトをすぐに立ち上げることができます。
ターミナルで以下のコマンドを実行します。
npx create-react-app my-app
my-appはプロジェクトの名前です。任意の名前に変更できます。コマンドが実行されると、自動的にReactのテンプレートが作成され、必要な依存関係がインストールされます。
3. プロジェクトの構成と基本的なコーディング
3.1 プロジェクトディレクトリの構成
Create React Appで作成されたプロジェクトのディレクトリ構成は次のようになっています。
my-app/
├── node_modules/
├── public/
├── src/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── serviceWorker.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock
src/ディレクトリ: プロジェクトのメインコードが含まれます。ここでコンポーネントを作成・編集します。public/ディレクトリ: 静的ファイル（例：画像やHTMLファイル）を格納します。package.json: プロジェクトの依存関係やスクリプトが記載されたファイルです。
3.2 基本的なコンポーネントの作成
Reactでは、UIの一部を「コンポーネント」として定義し、それらを組み合わせてページ全体を構築します。まず、基本的なコンポーネントを作成してみましょう。
src/ディレクトリに、新しいファイルHello.jsを作成し、以下のコードを記述します。
import React from 'react';
function Hello() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default Hello;
このコンポーネントをApp.jsにインポートし、使用します。
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
</div>
);
}
export default App;
これで、ブラウザに「Hello, React!」というテキストが表示されるはずです。コンポーネントは再利用可能なUIの部品であり、アプリケーションのさまざまな場所で再利用できます。
4. React Routerを使ったページの遷移
シングルページアプリケーション（SPA）では、ページ全体をリロードすることなく、ページ遷移を行うことが求められます。Reactでは、React Routerというライブラリを使ってこれを実現します。
4.1 React Routerのインストール
まず、React Routerをプロジェクトにインストールします。
npm install react-router-dom
4.2 基本的なルーティングの設定
次に、React Routerを使って複数のページを設定します。
App.jsを次のように編集します。
import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Hello from './Hello';
import About from './About';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Hello />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;
src/ディレクトリにAbout.jsファイルを作成し、以下のコードを追加します。
import React from 'react';
function About() {
return (
<div>
<h1>About Page</h1>
<p>This is the about page of our React application.</p>
</div>
);
}
export default About;
これで、/（ホーム）と/aboutの2つのルートが設定され、リンクをクリックすることでそれぞれのページに遷移できるようになります。
5. ステートとイベントハンドリング
Reactの強力な特徴の1つに、コンポーネントのステート（状態）を管理する機能があります。ステートを使うことで、ユーザーの入力や操作に応じてUIを動的に変更することができます。
5.1 ステートの基本
次に、ステートを使った簡単なカウンターアプリケーションを作成します。
App.jsを次のように編集します。
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
export default App;
この例では、useStateフックを使用してcountというステートを作成し、setCount関数でその値を更新しています。ボタンをクリックすると、countの値が1ずつ増加し、それに応じて表示される数値も変わります。
6. コンポーネントのライフサイクルと効果の管理
Reactでは、コンポーネントのライフサイクルを通じて、特定のタイミングでコードを実行することができます。これを管理するために、useEffectフックを使用します。
6.1 useEffectフックの基本
次に、useEffectを使って、コンポーネントがマウント（表示）された際にAPIリクエストを送る例を見てみましょう。
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
{data ? <p>Data: {JSON.stringify(data)}</p> : <p>Loading...</p>}
</div>
);
}
export default App;
このコードでは、useEffectを使って、コンポーネントが初めてレンダリングされた際にAPIリクエストを送り、その結果をステートに保存しています。ステートが更新されると、UIも自動的に再レンダリングされます。
7. デプロイと公開
Reactアプリケーションの開発が完了したら、実際にウェブ上に公開する手順に進みます。デプロイの方法はいくつかありますが、ここでは最も一般的な方法を紹介します。
7.1 GitHub Pagesを使ったデプロイ
- プロジェクトのルートディレクトリで以下のコマンドを実行して、プロジェクトをビルドします。
npm run build
buildディレクトリが生成されるので、その内容をGitHubリポジトリにプッシュします。- GitHubのリポジトリ設定で「Pages」セクションに移動し、
mainブランチの/rootディレクトリを選択して保存します。 - 数分後、GitHub Pagesにプロジェクトがデプロイされ、公開されたURLでアクセスできるようになります。
まとめ
以上が、Reactを使ったWebサイト制作の基本的な手順です。Reactは、コンポーネントベースのアプローチと豊富なエコシステムにより、効率的かつ柔軟にウェブサイトを構築することができます。今回紹介した内容を基に、実際のプロジェクトに取り組んでみてください。ステート管理やルーティング、API連携など、さらに高度な機能を活用することで、より複雑でインタラクティブなウェブアプリケーションの開発が可能になります。
また、SEOの観点からも、しっかりとしたコンテンツや技術を駆使することで、Google検索での上位表示を目指すことができます。質の高いコンテンツとユーザーフレンドリーな設計を心掛けて、プロジェクトを成功させてください。
