Reactで初めてのWebサイトを作る方法: 基本の構成や実装の手順を解説

フロントエンド開発•2025/1/28

はじめに

皆さんはフロントエンド開発に興味をお持ちではないでしょうか。 JavaScriptを使った動的なページを作りたいと思ったときに、よく耳にするのがReactです。 Reactはコンポーネントを組み合わせて画面を構築するという考え方で、多くの企業で採用されています。しかし初心者の方にとっては「何をどう準備し、どのようにページを組み立てていけばいいのか」が分かりにくいかもしれません。そこで本記事では、Reactを使ってWebサイトを作る手順を、実務での活用例と紐付けながら説明します。

一度Reactを学んでしまえば、コンポーネントを使い回して効率的に開発を進められる点が大きな魅力です。実際のプロジェクトにおいても、再利用可能なコードを多く作れるため、保守性に優れた構造になりやすいでしょう。

この記事を読むとわかること

Reactを使ったWebサイト開発の基本的な流れ
必要なツールや環境の準備方法
コンポーネントとルーティングの考え方
外部データを取得して画面に表示する仕組み
Reactを実務で活用する際のポイントや注意点

Reactとは

ReactはJavaScriptライブラリの一つで、コンポーネントという単位でUIを組み立てる仕組みが特徴です。他のフレームワークでは、画面全体を大きく一括で制御しがちですが、Reactでは画面の一部をひとまとまりと見なして、それをパーツのようにして作っていきます。こうすることで、コードの見通しがよくなり、更新が必要な部分だけを効率的に再描画できるのです。

実務の現場では、会社サイトや管理画面のフロントエンド部分など、多岐にわたる場所でReactが使われています。理由は、チームで開発する場合でもコンポーネント単位で分担しやすく、パフォーマンス面も保ちやすいからです。

Reactの活用シーンは幅広く、静的なサイトというよりは動的なユーザーインタラクションが多いサイトで特に力を発揮します。たとえば、フォーム入力の自動補完やリアルタイムで表示が変わるダッシュボードなどです。もちろん、一般的なコーポレートサイトやブログにも応用できますが、Reactの真価は「ユーザーアクションに応じて画面が素早く変化する」ような場面で感じられるでしょう。

なぜReactでWebサイトを作るのか

フロントエンドの開発にはさまざまな選択肢がありますが、その中でもReactが選ばれる理由はいくつかあります。まず、Reactはコンポーネント志向の設計により、同じUI要素を何度も再利用できます。一度作ったパーツを複数ページで使い回せるため、大規模なサイトでも作業量が増えにくいです。

また、宣言的なプログラミングスタイルも特徴です。 UIの状態を明確に定義することで、複雑な更新処理をReact側に任せられます。実務では、要件の変更やデザインの微調整が頻繁に起こりますが、Reactなら特定のコンポーネントを修正するだけで、全体の整合性を保ちやすいでしょう。

さらに大きなメリットとして、Reactのコミュニティは活発です。公式のドキュメントやサンプルコードが充実しており、実務で遭遇しやすい問題も先人が解決済みであるケースが多いです。こういった豊富な情報源があると、開発のリスクを下げることにもつながります。

必要な環境と準備

ReactでWebサイトを作るには、Node.jsとnpm（もしくはyarnなどのパッケージマネージャ）があると始めやすいです。 Node.jsを導入すると、ターミナルでnpmコマンドが使えるようになります。そして、Reactの開発をサポートするためのツールとして、create-react-appなどのセットアップキットが存在します。

以下のように、ターミナルでcreate-react-appを使って初期プロジェクトを作ることがよく行われます。


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

このコマンドを実行すると、Reactのひな形が生成されます。そのまま実行すれば、ブラウザ上で「Hello World」に相当する初期画面が確認できるでしょう。このプロジェクトには、開発時に欠かせないビルドやテストに関する仕組みがある程度整っているので、初心者の方でもスムーズに入れるはずです。

一方で、実務の場合は独自のフォルダ構成を採用するケースもあります。たとえば、ページ（画面）単位でフォルダを分けたり、共通コンポーネントをcomponentsというフォルダにまとめたりすることが多いです。小規模な個人プロジェクトでは、とりあえずcreate-react-appのデフォルト構成でも十分でしょう。

もしチーム開発を視野に入れているなら、フォルダを細かく分けすぎないように気をつける必要があります。過剰に階層を深くすると、コンポーネントを探すだけで一苦労になるからです。

コンポーネントの基本

Reactにおけるコンポーネントは、JSXと呼ばれる拡張文法でUIを定義します。 JavaScriptの中でHTMLのような構文を使えるので、見た目とロジックをひとまとまりに記述できる点が特徴です。

コンポーネントは大きく二種類に分けられます。 1つ目は、ユーザーの入力や状態管理を行うクラスコンポーネント。 2つ目は、よりシンプルに書ける関数コンポーネントです。最近は関数コンポーネントが主流で、Hooksという仕組みによって状態管理やライフサイクルフックを実現することが増えています。

簡単な例を見てみましょう。 src/App.jsに以下のようなコードを書き、コンポーネントを定義します。


import React from "react";

function App() {
  const greeting = "こんにちは、Reactへようこそ！";

  return (
    <div>
      <h1>{greeting}</h1>
      <p>Reactのコンポーネントを使ってWebサイトを作りましょう。</p>
    </div>
  );
}

export default App;

function App()が、1つのコンポーネントとして機能します。このコンポーネントは<App />というタグのように扱うことができ、画面上に見出しやテキストを表示する役割を持ちます。 JSXの中で{greeting}と書くと、JavaScriptの変数を表示できます。

実務でも、このようにコンポーネントを分割することで保守性や再利用性を高めています。たとえば、ナビゲーションバーをNavBarというコンポーネントに切り出せば、ほかのページでも使い回しが容易になるでしょう。

ルーティングの導入

複数ページをReactで作る場合は、React Routerなどのルーティングライブラリを使うと便利です。通常、シングルページアプリケーションとして作成するときは、URLを切り替えても実際には1つのページが動いています。しかしReact Routerを導入すると、擬似的に複数ページを行き来するように表現できます。

コードの例を挙げると、react-router-domをインストールした後、App.jsやindex.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;

このコードでは、/のパスにアクセスしたときにHomeコンポーネントを表示し、/aboutではAboutコンポーネントを表示します。単純に画面を切り替えるだけでなく、IDを含む動的パラメータや、クエリ文字列に応じた条件分岐も行えます。実務では、商品の詳細ページやユーザーのプロフィールページなど、URLに応じて異なる情報を表示することがよくあるでしょう。

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

Reactを使う利点として、APIとの連携がしやすいことも挙げられます。実際のビジネスシーンでは、サーバー側のデータベースと通信して在庫情報を確認したり、外部サービスのAPIから情報を取得したりするケースが多いです。

Reactで外部データを扱う場合は、通常fetch関数やaxiosといったHTTPクライアントを使います。以下はシンプルな例です。


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

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

  useEffect(() => {
    // APIからユーザー一覧を取得する
    fetch("https://example.com/api/users")
      .then(response => response.json())
      .then(data => {
        setUsers(data);
      })
      .catch(error => {
        console.error("データ取得時にエラーが発生しました:", error);
      });
  }, []);

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

export default UserList;

ここでは、ReactのHooksであるuseEffectを使って、コンポーネントが表示されるタイミングでデータを取得しています。取得したデータはusersという状態（state）に保存され、画面を再描画してリストとして表示します。エラーが発生した場合も、コンソールにメッセージを出すことでトラブルシューティングしやすくなるでしょう。

実務での活用シーンと注意点

実務では、チームごとに独自のコーディング規約や設計方針が存在します。 Reactを導入する場合でも、ただ機能を実装するだけでなく、メンテナンス性を高める工夫が必要です。たとえば、コンポーネントは役割ごとに適度な粒度で分割すると管理が楽になります。

一方で、コンポーネントが細かすぎると、ファイルが増えすぎて把握しづらくなることもあります。チームで話し合い、「どのレベルでコンポーネント分割をするか」を事前に決めておくとよいでしょう。また、スタイリングに関しては、CSS Modulesやstyled-components、あるいはSassなど、多種多様な手段があります。プロジェクトの目的や要件に合う手段を選ぶことが大切ですね。

複雑なコンポーネントを無理に共通化しようとすると、かえって可読性が下がることがあります。共通化と個別化のバランスを考えることが必要です。

実務的には、React単体だけでなく、タスクランナーやテストツールと組み合わせて効率化を図ります。たとえば継続的インテグレーションの仕組みを使い、コードがプッシュされるたびに自動テストを回すように設定するケースも多いです。こうした運用面を整えることで、開発スピードを保ちながら品質を維持しやすくなるでしょう。

運用・保守のポイント

Reactで作ったWebサイトを運用する段階になると、デプロイ先をどうするかが話題になることがあります。静的ホスティングサービスやクラウドプラットフォームなど、選択肢はいろいろです。実務では、アプリケーションの規模や要求されるパフォーマンスに応じて最適な手段を選びます。

運用フェーズに入ると、リリース後に発生する機能追加やデザインの修正に柔軟に対応する必要があります。 Reactなら、ビルド済みのコードをアップデートするだけで反映されるため、デプロイ作業自体は比較的スムーズです。ただし、APIの仕様変更やバックエンドの状況にも気を配る必要があります。

保守面では、コンポーネントが膨大になったときに「どこを修正すればいいのか」が分かりにくくなりがちです。一つのアプローチとして、ディレクトリ構造を整理し、読み手がどのフォルダを覗けば必要なコンポーネントが見つかるかを明確にしておくことが挙げられます。また、命名規則を統一することで、衝突や混乱を減らすことも重要でしょう。

実務の現場では、運用中に発生するバグ対応や性能チューニングも大切な課題になります。状態を多く持つコンポーネントでは、無駄な再描画を抑制する仕組みやメモ化などが必要になる場合もあります。こうした部分をきちんと理解しておくと、後から最適化しやすくなるでしょう。

まとめ

ここまで、Reactを使ったWebサイトの作り方の流れを見てきました。初心者でも取り組みやすいツールとしてcreate-react-appを紹介し、コンポーネントの基本やルーティング方法、外部データの扱い方などを解説しました。

Reactの魅力は、開発効率と保守性を両立しやすい点にあると考えられます。ただし、コンポーネントの分割や共通化、フォルダ構成など、チームやプロジェクトごとの最適解を探る必要があります。

皆さんがReactを使ってWebサイトを制作する際に、本記事の内容が手がかりになればうれしいです。実際の業務に近い場面を想定しながら試行錯誤してみると、Reactの柔軟な特性を実感できるでしょう。