ReactでWebサイトを作る基本の流れを解説！初心者でも理解できる実践ガイド

こんにちは、とまだです。

「JavaScriptは少し分かるけど、Reactって難しそう...」

そんな風に感じていませんか？

実は私も最初は同じような不安を抱えていました。

でも大丈夫です。

Reactの基本的な考え方さえ理解すれば、効率的にWebサイトを作れるようになります。

今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、ReactでWebサイトを作る流れを解説します。

Reactとは何か？レゴブロックのような開発スタイル

Reactを一言で表すなら「レゴブロック」です。

小さなパーツを組み合わせて、大きな作品を作っていく。

それがReactの開発スタイルなんです。

コンポーネントという考え方

Reactでは画面の一部分を「コンポーネント」と呼びます。

たとえばWebサイトを家だとすると。

• ヘッダー = 屋根
• ナビゲーション = ドア
• コンテンツエリア = 部屋
• フッター = 基礎

このように、各パーツを独立して作ります。

そして最後に組み合わせるだけ。

だから修正も簡単です。

屋根だけ直したいなら、屋根のコンポーネントだけ触ればいい。

他の部分には影響しません。

なぜ企業でReactが選ばれるのか

実際の開発現場でReactが人気な理由は主に3つあります。

まず、再利用性です。

一度作ったボタンコンポーネントは、サイト全体で使い回せます。

次に、チーム開発のしやすさ。

担当を分けやすいので、複数人での開発がスムーズです。

最後に、豊富な情報源。

困ったときの解決策が見つかりやすいんです。

開発環境を整えよう

ReactでWebサイトを作るには、まず道具を揃える必要があります。

料理で言えば、包丁やまな板を用意する段階ですね。

必要なものは2つだけ

開発に必要なのは以下の2つです。

• Node.js（JavaScriptを動かすための環境）
• テキストエディタ（VS Codeがおすすめ）

Node.jsをインストールすると、npmという便利な道具も一緒についてきます。

これは「材料を自動で集めてくれる買い物係」みたいなものです。

プロジェクトの作成は3行で完了

ターミナルで以下のコマンドを実行します。

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

たったこれだけで、Reactの開発環境が整います。

ブラウザが自動で開いて、初期画面が表示されるはずです。

もし表示されなくても慌てなくて大丈夫。

http://localhost:3000にアクセスしてみてください。

最初のコンポーネントを作ってみる

さあ、実際にコンポーネントを作ってみましょう。

コンポーネントは「画面の部品」だと思ってください。

シンプルな挨拶コンポーネント

src/App.jsを開いて、以下のように書き換えます。

import React from "react";

function App() {
  const message = "Reactの世界へようこそ！";

  return (
    <div>
      <h1>{message}</h1>
      <p>一緒に楽しく学んでいきましょう。</p>
    </div>
  );
}

export default App;

このコードのポイントは{message}の部分です。

JavaScriptの変数を画面に表示できるんです。

コンポーネントを分割してみる

次は、ヘッダー部分を別のコンポーネントに切り出してみましょう。

新しいファイルsrc/Header.jsを作成します。

import React from "react";

function Header() {
  return (
    <header>
      <h1>私のWebサイト</h1>
      <nav>
        <a href="/">ホーム</a>
        <a href="/about">概要</a>
      </nav>
    </header>
  );
}

export default Header;

これで、ヘッダー部分が独立したパーツになりました。

他のページでも使い回せます。

複数ページを作る：React Routerの活用

Webサイトには複数のページが必要ですよね。

でもReactは基本的に1ページのアプリケーション。

そこで登場するのがReact Routerです。

React Routerのインストール

まずは必要なパッケージをインストールします。

npm install react-router-dom

これで準備完了です。

ルーティングの設定

App.jsを以下のように修正します。

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

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

export default App;

これで、URLに応じて表示するコンポーネントが切り替わります。

まるでテレビのチャンネルを変えるような感覚ですね。

外部データを取得して表示する

実際のWebサイトでは、APIからデータを取得することがよくあります。

天気予報サイトなら気象データ。

ECサイトなら商品データ。

そんなデータの取得方法を見てみましょう。

useEffectフックを使ったデータ取得

以下は、ユーザー一覧を取得する例です。

import React, { useEffect, useState } from "react";

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <p>読み込み中...</p>;
  }

  return (
    <div>
      <h2>ユーザー一覧</h2>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

ポイントはuseEffectの使い方です。

コンポーネントが表示されたタイミングで、自動的にデータを取得します。

取得中は「読み込み中...」と表示。

ユーザーを待たせない工夫も大切ですね。

実務で気をつけたいポイント

実際の開発現場では、以下の点に注意が必要です。

フォルダ構成は最初に決める

プロジェクトが大きくなると、ファイルが散らかりがちです。

最初からルールを決めておきましょう。

よく使われる構成の例を紹介します。

• components/ - 共通で使うコンポーネント
• pages/ - 各ページのコンポーネント
• utils/ - 便利な関数など
• styles/ - CSSファイル

このように整理しておくと、後から探しやすくなります。

エラー処理を忘れずに

APIからのデータ取得は失敗することもあります。

必ずエラー処理を入れましょう。

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error("データの取得に失敗しました");
    }
    return response.json();
  })
  .catch(error => {
    console.error(error);
    // エラー表示の処理
  });

エラーが起きても、ユーザーに分かりやすく伝えることが大切です。

パフォーマンスにも配慮する

コンポーネントが増えてくると、動作が重くなることがあります。

以下の対策を検討しましょう。

• 不要な再レンダリングを防ぐ
• 画像の最適化
• コード分割の活用

特に、モバイルユーザーのことを考えると重要です。

よくある質問と回答

Q: Reactは難しくないですか？

最初は戸惑うかもしれません。

でも基本的な考え方はシンプルです。

「画面をパーツに分けて組み立てる」

これだけ覚えておけば大丈夫です。

Q: どのくらいで習得できますか？

個人差はありますが、基本的な使い方なら1〜2週間で身につきます。

毎日少しずつ触ることが大切です。

Q: 他のフレームワークとどう違いますか？

Reactの特徴は「学習曲線が緩やか」なこと。

少しずつ理解を深められます。

また、求人も多いので実務に活かしやすいです。

今日から始められる第一歩

ReactでWebサイトを作る基本的な流れを解説しました。

環境構築からコンポーネント作成、ルーティング、データ取得まで。

実は、これだけでも簡単なWebサイトは作れます。

まずはcreate-react-appでプロジェクトを作ってみてください。

そして、小さなコンポーネントから始めましょう。

挨拶を表示するだけでも立派な第一歩です。

Reactの世界は広大ですが、一歩ずつ進めば必ず理解できます。

困ったときは公式ドキュメントやコミュニティを頼ってください。

きっと親切な先輩エンジニアが助けてくれるはずです。