初心者でもわかるwebサイトとreactの基本設計完全ガイド

はじめに

本書の目的

本ドキュメントは「webサイト react」に関する検索キーワードの分析と調査結果をもとに、Reactを使ったWebサイト制作の基本と実践を分かりやすくまとめたものです。開発環境の準備から、コンポーネント設計、ルーティング、データ取得、スタイリングまで、制作の流れを順を追って解説します。

対象読者

• Reactをこれから学ぶ初心者
• HTML/CSSとJavaScriptの基礎はあるが、実際の制作手順を知りたい方
• 小規模〜中規模のWebサイトをReactで作りたい中級者

本書で学べること

• 開発環境の構築方法と基本操作
• コンポーネント単位で考える設計のコツ
• 複数ページ実装の流れとルーティングの使い方
• 外部APIからのデータ取得と状態管理の基本
• CSSやUIライブラリを使った見た目の作り方

使い方の目安

章ごとに実例とコード例を示します。まずは手を動かしながら読み進めると理解が深まります。必要に応じてサンプルを写して試してください。

前提条件

基本的なHTML/CSSとJavaScriptの知識、Node.jsとnpmの基本操作があるとスムーズです。これらが不安な方は、先に基本を確認してから進んでください。

Reactとは何か、そしてWebサイト制作での役割

Reactとは

Reactはユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。画面の部品を小さな「コンポーネント」に分けて作ります。ボタンや見出し、カードといった部品を独立して作り、必要な場所で組み合わせる考え方です。

コンポーネントの利点

コンポーネントは再利用できます。例えば同じデザインのボタンを複数ページで使う場合、一度作れば何度でも使えます。変更も一箇所で済むため保守が楽です。状態（ボタンが押されたかなど）をコンポーネント単位で管理できます。

Webサイト制作での主な役割

Reactは画面の構造をはっきりさせ、部品ごとの役割分担を助けます。ユーザー操作に対して画面を素早く更新できるため、動きのあるUIに向きます。例として、検索結果の絞り込みやリアルタイムの表示更新が挙げられます。

Next.jsとの組み合わせ

Next.jsはReactベースのフレームワークで、ページの表示速度やSEOを改善する仕組みを持ちます。Reactのコンポーネント設計を活かしつつ、初期表示を速くすることでユーザーと検索エンジン両方に有利です。

どんなサイトに向くか

管理画面やSNS、ECサイトのように部品を組み合わせて動的に変わる画面が多いサイトに向きます。一方で、極めて単純な静的ページだけなら、Reactは過剰になることもあります。

開発環境の構築方法

前提と準備

まずNode.jsをインストールします。Node.jsはReactを動かすためのランタイムで、公式サイトから安定版を入手してください。インストール後、ターミナルで “node -v” と “npm -v” を実行し、バージョンが表示されることを確認します。

create-react-appによる始め方

もっとも手軽な方法はcreate-react-appです。次のコマンドで新しいプロジェクトを作成します。

npx create-react-app my-website
cd my-website
npm start

ブラウザが自動で開かなければ http://localhost:3000 にアクセスしてください。開発中はファイル保存で自動的に再読み込みされます。

Viteを使った高速な開発環境

高速な起動やホットリロードを重視する場合はViteを使います。手順は次の通りです。

npm create vite@latest my-react-website -- --template react
cd my-react-website
npm install
npm run dev

Viteは変更を素早く反映するため、開発の快適さが向上します。

エディタとパッケージ管理

コード編集はVisual Studio Codeを推奨します。拡張機能でLintやフォーマッタを入れると品質が保てます。npm以外にyarnやpnpmも使えますが、チームで統一してください。

トラブル対処のヒント

ポートが使われている場合は別のポート指定や既存プロセスの終了を試してください。依存関係で問題が出たらnode_modulesを削除して再インストールします。

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

目的と基本方針

コンポーネント設計では「役割を明確にして再利用する」ことを最優先にします。見た目だけを担当するコンポーネントと、データや振る舞いを担う部分を分けると保守しやすくなります。

役割ごとの分割例

• UIコンポーネント：ボタン、カード、ヘッダーなど見た目を返すのみ
• コンテナ（管理）コンポーネント：データ取得や状態管理を行い、UIコンポーネントに渡す

具体例（ヘッダーは既に提示済み）を使うと、Header.jsxはいつでも他ページで使えます。

ファイル構成の提案

• src/
• components/ // 小さな再利用部品
• pages/ // ページ単位（Home.jsx, About.jsx）
• layouts/ // 共通レイアウト（HeaderやFooterを配置）

props と state の使い分け

propsは外から受け取る読み取り専用の値です。stateはそのコンポーネント内で変わる値を持ちます。例：Headerが現在のページ名を表示するなら、親からpropsで渡すと良いです。

ページの組み立て方（簡単な例）

// src/App.jsx
import React from 'react';
import Header from './components/Header';
import Home from './pages/Home';

function App(){
  return (
    <div>
      <Header />
      <main>
        <Home />
      </main>
    </div>
  );
}
export default App;

このようにHeaderやFooterをレイアウトに置き、mainにページを差し替えるだけで複数ページに対応しやすくなります。

命名と小さな注意点

• コンポーネント名は大文字で開始（Header, UserCard）
• 1ファイルに1コンポーネントを基本にする
• 再利用を見越してprops設計を行うと後で楽になります

以上の方針で設計すると、拡張やテストがしやすい構成になります。

複数ページの実装とルーティング

概要

Reactは単一ページ（SPA）で動作しますが、見かけ上は複数ページにできます。代表的な方法がReact Routerです。インストールは次の通りです：

npm install react-router-dom

基本的な使い方

アプリをRouterで包み、RoutesとRouteでパスを定義します。例：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home/>} />
    <Route path="/about" element={<About/>} />
  </Routes>
</BrowserRouter>

動的ルート

ユーザー詳細などは/users/:idのようにし、コンポーネント内でuseParams()でidを取得します。

ネストされたルート

共通レイアウトを作り、子ルートをネストします。レイアウト内で<Outlet/>を置くと子が表示されます。

リンクと注意点

ページ遷移は<Link to="/about">を使い、ブラウザの再読み込みを避けます。ルートは一元管理すると見通しが良く、必要に応じて遅延読み込み（lazy）も検討してください。

データ取得と状態管理

はじめに

動的なコンテンツは外部APIからのデータで成り立ちます。ここでは取得方法と情報を保持する方法をわかりやすく説明します。

基本：useStateとuseEffect

例のようにuseStateでデータと読み込み状態を持ち、useEffectでフェッチします。非同期処理はasync/awaitかPromiseで書けます。読み込み中はローディング表示を出すと親切です。

エラーハンドリング

ネットワークエラーや不正な応答に備え、エラー用のstateを用意します。try/catchで例外を受け取り、ユーザーに分かりやすいメッセージを表示します。

中断とクリーンアップ

コンポーネントがアンマウントされる前にリクエストを中断するとメモリ漏れを防げます。AbortControllerを使うか、フラグで処理を止めます。

カスタムフックで再利用

fetch処理をカスタムフックにまとめると可読性と再利用性が上がります。例：useFetch(url)はデータ・loading・errorを返します。

状態管理（ローカルとグローバル）

コンポーネント内の状態はuseStateで十分です。複数ページや多くのコンポーネントで共有する場合はContextやRedux、軽量なZustandなどを検討します。

キャッシングとライブラリ

SWRやReact Queryは自動キャッシュ・再検証・フォールバックを提供し、ネットワーク負荷を減らします。初めは基本を押さえ、必要に応じて導入するとよいです。

スタイリングとUIの構築

はじめに

Reactでは見た目を作る方法が複数あります。ここではCSS Modules、Tailwind CSS、Material UI（MUI）を例に、それぞれの特徴と使い方、実践のコツをやさしく説明します。

CSS Modules（ローカルスコープ）

特徴：クラス名がコンポーネント単位でスコープされるため、スタイルの競合を防げます。
例（Hero.module.css）:

.hero { padding: 4rem; text-align: center; }
.title { font-size: 2rem; }
.cta { background: #0b69ff; color: white; padding: 0.6rem 1rem; }

上記は質問のHeroコンポーネントと組み合わせて使います。ファイル名を.module.cssにするだけで有効です。

Tailwind CSS（ユーティリティファースト）

特徴：事前定義のクラスで高速にレイアウトを組めます。例えばボタンならclassName=”bg-blue-600 text-white px-4 py-2 rounded”のように記述します。細かなカスタムは設定ファイルで拡張します。

Material UI（コンポーネントライブラリ）

特徴：完成度の高いコンポーネントを使えます。例：

import Button from '@mui/material/Button';
<Button variant="contained">詳細を見る</Button>

テーマを使えば色や間隔を統一できます。

レスポンシブとアクセシビリティ

レスポンシブはCSSのメディアクエリやTailwindのブレークポイントで対応します。ボタンには明確なラベルとフォーカススタイルを付け、色だけで情報を伝えないようにします。

実践のコツ

• 小さなコンポーネント単位でスタイルを分ける
• グローバルな色や間隔は変数（CSS変数やテーマ）で管理する
• まずは読みやすさと操作性を優先する

この章の内容を元に、自分のプロジェクトに合う方法を試してみてください。