Reactで画面遷移を実装する方法

はじめに

Reactを使ってアプリケーションを作ろうとすると、まずは画面遷移の仕組みを押さえておきたいところではないでしょうか。

しかし、初めて取り組む皆さんにとっては、どのように画面を切り替えればよいのか迷うこともあるかもしれません。

とくにWebアプリケーション特有の「シングルページアプリケーション（SPA）」という概念を意識すると、慣れない言葉が増えるため戸惑いがちです。

そこでこの記事では、Reactにおける画面遷移の仕組みと実務での利用イメージを、できるだけわかりやすい言葉で説明していきます。

初心者の方でも具体的にイメージがつかみやすいように、コード例を挙げながら解説しているので、ぜひ参考にしてみてください。

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

• Reactにおける画面遷移の基本的な考え方
• シングルページアプリケーション（SPA）がなぜ使われるのか
• React Routerを活用したルーティング実装の流れ
• アニメーションやトランジションを使ったスムーズな遷移方法
• 実務での画面遷移に関する具体的なイメージ

Reactで画面遷移を行うメリット

Reactが登場する以前は、ページを切り替えるごとにサーバーからHTMLを取得して画面をリロードしながら操作する方法が一般的でした。

この方法でもシンプルなWebサイトであれば問題ありませんが、ユーザーの操作が多いWebサービスになると画面リロードの回数が増え、操作感が重く感じられやすくなります。

Reactでは、JavaScriptによる仮想DOMを活用して部分的な再描画を行います。

画面全体を都度読み込み直すよりもスムーズなユーザー体験を実現しやすいため、多くの場面で活用されています。

実際の業務でも、Reactを使ってSPAを作ることで、ユーザーが頻繁に操作を行うような管理画面やSNSに適したインタラクティブな仕組みが構築されることが多いです。

Reactアプリにおける画面遷移の仕組み

Reactはコンポーネントベースで画面を組み立てていきます。

1枚のHTMLページの中に、Reactが描画する領域（root要素など）を設け、そこにコンポーネントの集合体を表示させるイメージです。

見た目はページが複数に分かれているように感じても、実際にはひとつのページ内で必要なコンポーネントを切り替えながら表示しています。

これをSPA（Single Page Application）と呼ぶ場合があります。

画面を切り替えるような操作を可能にするには、コンポーネントの切り替えを管理する仕組み、つまりルーティングが必須となります。

ルーティングによって、URLと表示したいコンポーネントを関連付けたり、パラメータによってコンテンツを切り替えたりできます。

シングルページアプリケーション(SPA)とは

一般的に、ウェブサイトは複数のHTMLファイルを用意し、ページが切り替わるたびに新しいHTMLをサーバーから取得していました。

一方でReactを含むSPAは、基本的には1枚のHTMLファイルを使い、JavaScriptで画面を動的に更新します。

ページ全体のリロードを伴わずにコンテンツを切り替えるので、ユーザーはストレスを感じにくい操作感を得やすいです。

ただし、アプリが大規模になるとJavaScriptのファイルが大きくなる傾向があり、最初のロードが長くなることもあります。

そのため、本番運用ではコード分割やキャッシュの活用などを組み合わせ、パフォーマンス面にも気を使うことが多いです。

画面遷移が求められる主なケース

Reactを使って開発を進めていると、様々な画面遷移のパターンが必要になるでしょう。

例えば以下のような場面が考えられます。

• ユーザー情報一覧から詳細画面への切り替え
• ダッシュボードからログイン画面や設定画面への移動
• 商品一覧から商品詳細、そしてカート画面への連携

多くの場合、URLの末尾にIDなどを付け、どのデータを表示するかを動的に切り替えます。

これを支える仕組みが「React Router」などのルーティングライブラリです。

Reactの標準機能だけではURLによる画面切り替えが完備されていないため、外部ライブラリを使って導入していくのが一般的となっています。

React Routerによる画面遷移の基本

React Routerは、SPAでよく利用されるルーティングライブラリです。

URLとコンポーネントを関連付ける仕組みを提供し、ユーザーがあるURLにアクセスしたときに、対応するコンポーネントを画面に描画します。

また、リンクをクリックするとURLが切り替わり、それに応じてコンポーネントが差し替えられます。

ここでは、React Routerの導入と基本的な画面遷移の仕組みを見ていきましょう。

React Routerを導入する流れ

React Routerのインストールは、以下のようにコマンドを実行します。

コピー
npm install react-router-dom

もしくは、Yarnを使っている場合は

コピー
yarn add react-router-dom

で導入可能です。

導入後は、Reactアプリのルートとなるコンポーネント（たとえばApp.jsやindex.jsなど）でBrowserRouterを使います。

以下は簡単な例です。

コピー
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Users from "./pages/Users";
import UserDetail from "./pages/UserDetail";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />} />
        <Route path="/users/:userId" element={<UserDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

<BrowserRouter> は全体をラップするコンポーネントで、内部の <Routes> と <Route> によって具体的なパスと表示するコンポーネントを定義します。

ルーティングの基本

上記のコードでは、以下のようなルーティングが設定されています。

• / にアクセスすると Home コンポーネントが表示される
• /users にアクセスすると Users コンポーネントが表示される
• /users/:userId にアクセスすると UserDetail コンポーネントが表示される

<Link> コンポーネントを使えば、ページ遷移のためにaタグを使う代わりに、React Routerを通じてスムーズな画面遷移を行えます。

例えば、以下のように使います。

コピー
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/users">Users</Link>
    </nav>
  );
}

export default Navbar;

このようにすることで、リンククリック時にページ全体のリロードなしで、Reactが内部的にURLを切り替え、対応するコンポーネントを表示します。

動的パラメータ

ユーザーIDなど、ページごとに動的に情報を差し替えたいケースでは、URLにパラメータを含めるのが便利です。

先ほどの例では "/users/:userId" という指定をしていましたが、この :userId の部分がパラメータになります。

UserDetail コンポーネントでは、以下のように useParams フックを使うことで、URLパラメータの値を取得できます。

コピー
import React from "react";
import { useParams } from "react-router-dom";

function UserDetail() {
  const { userId } = useParams();

  return (
    <div>
      <h2>ユーザー詳細</h2>
      <p>ユーザーID: {userId}</p>
      {/* userIdをもとにAPIなどからユーザー詳細を取得して表示する */}
    </div>
  );
}

export default UserDetail;

これにより、例えば /users/123 にアクセスした場合は userId が "123" となり、対象のユーザー情報をAPIやストアから取得して描画できるわけです。

スムーズな画面遷移を実現するテクニック

React Routerでルーティングを実装すると、URLベースの画面遷移が簡単にできるようになります。

しかし、さらになめらかな切り替えやアニメーションを付けると、アプリケーションの使い勝手が向上します。

ここでは画面遷移をスムーズに見せるための主な方法を紹介します。

UIトランジションライブラリの活用

画面遷移時にコンポーネントがフェードイン・フェードアウトするなどのアニメーションを加える方法として、React Transition Group や Framer Motion などがよく使われます。

例えば React Transition Group を用いたサンプルコードは以下のようになります。

コピー
import React from "react";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import { Routes, Route, useLocation } from "react-router-dom";
import Home from "./Home";
import Users from "./Users";
import "./transitions.css";

function AnimatedRoutes() {
  const location = useLocation();

  return (
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        timeout={300}
        classNames="fade"
      >
        <Routes location={location}>
          <Route path="/" element={<Home />} />
          <Route path="/users" element={<Users />} />
        </Routes>
      </CSSTransition>
    </TransitionGroup>
  );
}

export default AnimatedRoutes;

CSSファイル（transitions.css）に、以下のようなクラスを定義しておくと、ページ切り替え時にフェードアニメーションがかかります。

コピー
.fade-enter {
  opacity: 0;
}
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

このように、画面が切り替わる瞬間にアニメーションを付与するだけで、ユーザーにとって見やすく、移り変わりがわかりやすいインターフェースを作りやすくなります。

実務では、ブランドイメージや操作感を大切にする場合、こういった小さな工夫が大きく役立つでしょう。

実務での活用事例

実務の現場では、以下のような流れで画面遷移を組み立てることが多いです。

コンポーネント同士の連携が複雑になりやすいので、あらかじめURL設計やコンポーネント設計を整理しておくとスムーズです。

1. URL設計

設計段階で、サービスに必要なURLパターンを洗い出します。 たとえば、ユーザー管理システムでは /users, /users/:userId, /users/:userId/edit のようにURL設計を行い、実際に扱うデータ単位で画面を分けていきます。

2. ルーティング設定

BrowserRouter と Routes を使い、設計したURLとコンポーネントの対応関係を定義します。 共通部分（ヘッダーやフッターなど）をレイアウトコンポーネントとして作り、ページ本体を差し替える方法もよく用いられます。

3. API連携・データ取得

各ページがマウントされたタイミング、またはユーザーの操作に応じて、APIを呼び出してデータを取得します。 取得したデータをコンポーネントの状態として持ち、画面表示に反映します。

4. 動的パラメータの利用

useParams などを活用してIDなどを受け取り、それに応じてデータを取得したり、表示内容を変化させたりします。 さらに、フォーム入力による編集や削除操作が必要な場合も、URLを使った区別（/edit, /delete など）でページを構成すると便利です。

5. アニメーションや状態管理との連携

画面切り替え時にアニメーションを追加して視覚的にわかりやすくしたり、Reduxなどの状態管理ライブラリと組み合わせてページ遷移間のデータをスムーズに受け渡したりします。

たとえば、大規模アプリケーションでは以下のようなディレクトリ構成を取ることがよくあります。

コピー
src/
  components/
    Header.jsx
    Footer.jsx
    ...
  pages/
    Home.jsx
    Users.jsx
    UserDetail.jsx
    ...
  routers/
    AppRouter.jsx
    ...
  assets/
    images/
    styles/
  ...

routers ディレクトリを用意してルート定義だけを管理すると、ルーティングに関わる部分が明確になります。

「画面遷移の仕組み」と「コンポーネントの設計」を切り分けることで、開発チーム内で役割分担がしやすくなる場合もあるでしょう。

まとめ

ここまで、Reactを使った画面遷移の考え方から実装例までを紹介してきました。

ReactではJavaScriptによる動的な描画を活用し、SPAのようにリロードを伴わない画面切り替えを実現できます。

また、React Routerなどのルーティングライブラリを使うことで、URLと表示コンポーネントをひも付けて扱えるようになり、ユーザーの操作性やメンテナンス性が高まります。

アニメーションを加えることで、見た目にもわかりやすい画面遷移を提供できるので、サービスの価値を高めることにもつながるのではないでしょうか。

皆さんもReactでアプリケーションを作る際には、ぜひ画面遷移の仕組みを押さえて、スムーズでわかりやすいインターフェースを目指してみてください。