Apps

012-Login+Graph｜Step1_フロントエンド：Reactで環境構築

はじめに

本記事では、Reactを使用してログイン機能を実装するための開発環境を構築します。

Viteを用いたプロジェクトのセットアップから、必要なライブラリのインストールまでを解説します。

まずは環境を整え、スムーズに開発を進められるようにしましょう。

Reactとは

Reactは、Facebook（現Meta）によって開発されたJavaScriptライブラリです。

主にユーザーインターフェース（UI）の構築に特化しており、シングルページアプリケーション（SPA）やコンポーネントベースの開発を容易にします。

特徴

  1. コンポーネントベース
    • UIを小さな「コンポーネント」に分割して開発できる。
    • 再利用性が高く、保守がしやすい。
  2. 仮想DOM（Virtual DOM）
    • 仮想DOMを用いた差分更新により、高速なレンダリングを実現。
  3. 状態管理が容易
    • useState や useReducer などのReact Hooksを活用することで、コンポーネントの状態管理が簡単にできる。
  4. エコシステムが充実
    • react-router-dom によるルーティング
    • redux や react-query などの状態管理ライブラリ
    • Material UI などのUIコンポーネントライブラリ
    • これらの豊富なツールを活用できる。
  5. SPA（シングルページアプリケーション）向けの開発が容易
    • ページの再読み込みをせずに、スムーズな画面遷移が可能。

概要

Reactを用いたログイン機能の実装に向けて、まずは環境構築を行います。

手順としては、以下の流れで進めます。

  1. Viteを使ってReactプロジェクトを作成
  2. 必要なライブラリをインストール
  3. 開発環境のセットアップを完了し、動作確認

この準備を整えることで、ログイン機能の実装をスムーズに進められます。
次のセクションでは、具体的な手順を解説していきます。

Reactセットアップ

Reactを使用した開発環境を構築するため、以下の手順でセットアップを進めます。
本記事では create-react-app を使用してプロジェクトを作成します。

1. プロジェクトフォルダの作成

まず、作業ディレクトリを作成し、フロントエンドの開発を行うフォルダを準備します。

# プロジェクトのルートフォルダを作成
mkdir Test
cd Test

# フロントエンド用のフォルダを作成
mkdir frontend
cd frontend

2. Node.js のバージョン確認

React を動作させるために Node.js がインストールされているか確認します。

node -v

v18.x.x 以上が表示されていれば問題ありません。
もしインストールされていない場合は、Node.js公式サイト からダウンロードしてインストールしてください。

3. create-react-app を使用したReactのセットアップ

Reactアプリのひな形を作成するために、以下のコマンドを実行します。

npx create-react-app .

npx は一時的にパッケージを実行するコマンドで、create-react-app をインストールせずに使用できます。

実行後、必要なパッケージのインストールが開始され、完了するとReactアプリの基本構成が作成されます。

4. 必要なライブラリのインストール

ログイン機能を実装するために react-router-dom をインストールします。
このライブラリはページ遷移（ルーティング）を管理するために使用します。

npm install react-router-dom

また、react と react-dom のバージョンを最新に更新する場合は以下のコマンドを実行します。

npm install react@19 react-dom@19

5. 開発サーバーの起動と動作確認

セットアップが完了したら、開発サーバーを起動して正しく動作するか確認します。

npm start

ターミナルに表示されたURL（通常 http://localhost:3000/）にアクセスし、

以下のようなReactの初期画面が表示されれば成功です。

Reactを使うメリット

Reactは、フロントエンド開発において広く使用されているライブラリです。

その人気の理由として、以下のような 5つのメリット があります。

1. コンポーネント指向で開発しやすい

Reactは コンポーネントベースのアーキテクチャ を採用しています。

これにより、再利用性が高く、管理しやすいUI を構築できます。

✅ メリット

  • ボタンやナビゲーションバーなどを 独立したコンポーネント として作成できる
  • 必要な部分だけを修正すればよく、保守性が向上する
  • 企業レベルの大規模アプリケーションでも分業しやすい

🎯 例: 再利用可能なボタンコンポーネント

function Button({ text }) {
  return <button>{text}</button>;
}

// どこでも再利用可能
<Button text="ログイン" />
<Button text="登録" />

2. 仮想DOMによる高速なレンダリング

Reactは 仮想DOM（Virtual DOM） を使用し、効率的にUIを更新します。

✅ メリット

  • 必要な部分だけを更新 するため、パフォーマンスが向上
  • 直接DOMを操作するよりも レンダリングが速い
  • ユーザーの操作に対して、スムーズなレスポンスを実現

🎯 例: 仮想DOMによる差分更新

変更がある部分だけを更新するため、画面の再描画が最小限に抑えられます。

3. シングルページアプリケーション（SPA）が作りやすい

Reactでは react-router-dom を使うことで、ページ遷移をスムーズに実装できます。

従来のページ遷移のように 全体をリロードする必要がなく、高速に遷移 できます。

✅ メリット

  • ページの一部だけを更新 できるため、UX（ユーザー体験）が向上
  • サーバー負荷が減り、パフォーマンスが向上
  • react-router-dom を使えば、簡単にルーティングを実装可能

🎯 例: ルーティングの実装（react-router-dom 使用）

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

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

4. エコシステムが充実している

Reactは コミュニティが大きく、便利なライブラリが豊富 です。

例えば、以下のような 追加ライブラリを活用 することで、開発をより効率化できます。

✅ メリット

  • 状態管理 → Redux、Recoil で複雑なデータ管理をシンプルに
  • UIライブラリ → Material UI、Chakra UI で美しいデザインを簡単に実装
  • データフェッチング → React Query や Axios でAPI通信を効率化

🎯 例: Material UI を使ったボタンのデザイン

npm install @mui/material @emotion/react @emotion/styled
import Button from "@mui/material/Button";

function App() {
  return <Button variant="contained">ログイン</Button>;
}

5. React Hooksによる状態管理が簡単

Reactには useState や useEffect などのHooks が用意されており、

クラスコンポーネントを使わずに状態管理が可能 です。

✅ メリット

  • useState で簡単に コンポーネントの状態を管理 できる
  • useEffect を使うことで、ライフサイクル管理がしやすい
  • クラスコンポーネントより コードがシンプル になる

🎯 例: useState を使ったカウンター

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

Reactのまとめ

Reactを使うメリットは以下の5つです。

メリット説明
1. コンポーネント指向UIの再利用性が高く、開発しやすい
2. 仮想DOM必要な部分だけを更新し、高速なレンダリングが可能
3. SPA（シングルページアプリケーション）ページ遷移がスムーズで、ユーザー体験が向上
4. エコシステムの充実便利なライブラリが多く、拡張しやすい
5. React Hooks状態管理が簡単で、コードがシンプルになる

これらのメリットを活かしながら、ログイン機能の開発を進めていきましょう！

まとめ

ここまでの手順で、Reactの開発環境を create-react-app を使って構築しました。

  1. プロジェクトフォルダの作成
  2. Node.js のバージョン確認
  3. create-react-app を使ったReactのセットアップ
  4. react-router-dom のインストール
  5. 開発サーバーの起動と動作確認

次回は、実際にコンポーネントを作成し、ログインページを構築していきます！

-Apps