web制作とReactの基礎知識と実践活用法完全ガイド

はじめに

目的

この文書は、Reactを使ったWeb制作に必要な知識を分かりやすくまとめた入門ガイドです。基礎概念から開発環境の整え方、コンポーネント設計、ルーティング、Next.jsとの連携、スタイリング、実務で使われる技術スタックまでを扱います。初心者が学びやすく、中級者が振り返りやすい構成にしています。

対象読者

• HTML・CSS・JavaScriptの基礎を学んだ方
• Webアプリを作り始めたい方
• Reactの全体像を短時間で把握したい方

本書で扱う内容

1. Reactとは何か：特徴と利点を丁寧に説明します
2. 開発環境の構築：実際のコマンドと手順を示します
3. コンポーネント設計とページ構成：再利用しやすい設計を紹介します
4. ルーティングの実装：画面遷移の基本を扱います
5. Next.jsとの組み合わせ：静的・サーバーサイドの違いを解説します
6. スタイリング方法：CSSの書き方と管理法を比較します
7. 実装で使われる技術スタック：ツールやライブラリを紹介します

学習の進め方

• 小さな機能を作りながら学んでください。手を動かすことで理解が深まります。
• コンポーネント単位で考え、UIを分割して実装してください。
• エラーが出たらログを確認し、原因を一つずつ潰してください。

この章は入門の案内です。次章から具体的な概念と実践に入ります。

Reactとは何か

概要

Reactは、WebサイトやWebアプリの見た目（UI）を作るためのツールです。部分ごとに分けて作ることで、大きな画面でも整理して開発できます。例えば、共通のヘッダーやボタンを何度も使えます。

仮想DOM（Virtual DOM）

画面の更新を効率よく行う仕組みです。実際の画面に直接手を加えるのではなく、まずメモリ上の仮想的な木構造を更新し、差分だけを実際の画面に反映します。リストの一部だけ変わった場合でも、必要な部分だけを更新でき、動作が速くなります。

コンポーネントベース

UIを「部品（コンポーネント）」として設計します。ボタンや入力欄、カードなどを独立させ、再利用やテストをしやすくします。部品を組み合わせてページを作ると、変更が簡単になります。

stateとpropsの違い

stateはコンポーネント自身が持つ変化するデータ（例：カウンターの値）です。propsは親が子に渡す値で、子は受け取って表示や動作に使います。これによりデータの流れが分かりやすくなります。

利点と向き不向き

利点は、再利用性・保守性の向上と大規模開発での扱いやすさです。小さな単純ページではやや導入コストがかかることがありますが、対話的なUIや状態が多いアプリには向いています。

簡単な例（イメージ）

function Counter(){ const [n,setN]=useState(0); return <button onClick={()=>setN(n+1)}>{n}</button>; }
このように、部品として使える関数でUIを定義します。

開発環境の構築

必要なソフト

React開発にはまずNode.jsとパッケージマネージャー（npmまたはyarn）が必要です。Node.jsは実行環境、npm/yarnはライブラリ管理に使います。

インストール手順（簡単）

1. Node.js公式サイトからインストーラーをダウンロードしてインストールします。
2. ターミナルでnode -vとnpm -vを実行してバージョンを確認します。

プロジェクトの初期化

• Viteを使う方法（高速で軽量）:
• コマンド例: npm create vite@latest my-app -- --template react

• 変更を即座に反映するホットリロードが速く、開発がスムーズです。

• Create React Appを使う方法（設定不要で安心）:

• コマンド例: npx create-react-app my-app
• 設定を気にせずすぐコードを書けます。

推奨の追加設定

• エディタ: Visual Studio Codeを推奨します。
• コード整形: Prettier、静的解析: ESLintを導入するとコード品質が保てます。

開発サーバーの起動

プロジェクトディレクトリでnpm install後、npm run dev（Vite）またはnpm start（CRA）で開発サーバーが立ち上がります。ブラウザで確認し、保存すると自動で反映されます。

よくあるトラブルと対処

• パッケージのインストールでエラーが出たら、nodeのバージョンを確認し、npm cache clean --forceを試してください。
• ポート競合がある場合は別ポートで起動するか、既存のプロセスを終了してください。

コンポーネント設計とページ構成

概要

Reactサイトではコンポーネント設計とページ構成が土台です。役割を明確に分け、再利用できる部品を作ると保守が楽になります。

フォルダ例

• src/components/：共通部品（ボタン、カード、ヘッダーなど）
• src/pages/：ページ単位（Home、Aboutなど）
• src/layouts/：ページ共通レイアウト

単一責任の原則

コンポーネントは一つの役割だけ持たせます。見た目だけのPresentationalコンポーネントと、データ取得や状態管理をするContainerに分けると分かりやすいです。

具体例：Headerコンポーネント

ヘッダーはロゴ、ナビ、検索などを含みます。ロゴやナビは小さな子コンポーネントに分けて再利用します。

App（メイン）ファイルの考え方

Appでは大まかなレイアウトやルーティングを配置します。各ページには必要なプロバイダー（テーマや認証）を包みます。

スタイリング（CSS Modules）

CSS Modulesを使うとクラス名がスコープされ、名前衝突を防げます。例: import styles from “./Header.module.css”; className={styles.header}

ページ構成のコツ

ページは小さなセクションに分けてコンポーネント化します。テストや差し替えが容易になり、チーム開発でも効率が上がります。

ルーティングの実装

導入

Reactで複数ページ風の画面遷移を作るとき、react-routerを使うとURLとコンポーネントを簡単に結び付けられます。ルートごとに表示するコンポーネントを定義し、ブラウザの履歴に応じて切り替えます。

基本的な使い方

まずアプリ全体をBrowserRouterで囲みます。その中でRouteを並べてpathにURL、elementに表示するコンポーネントを指定します（react-router v6の例）。

例:

<Route path="/" element={\} />
<Route path="/about" element={\} />
<Route path="*" element={\} />

以前のバージョンではcomponentプロパティを使うことがありましたが、現在はelementにJSXを渡すのが一般的です。

動的ルートとパラメータ

ユーザー詳細など、URLの一部を変化させる場合は:でパラメータを定義します。コンポーネント内でuseParamsを使うと値を取得できます。

例: /users/:id → useParams().id

リンクと画面遷移

内部リンクはではなくLinkコンポーネントを使います。プログラム的に遷移するにはuseNavigateを使います。

<button className="bg-blue-500 text-white px-4 py-2 rounded">送信</button>

import styles from './Button.module.css';
<button className={styles.primary}>送信</button>

import Button from '@mui/material/Button';
<Button variant="contained">送信</Button>