JavaScript/Next.js/React/TypeScript/編集部ピックアップ

非表示なのに状態とDOMを保持！React 19.2の新機能「Activity」コンポーネントとは

by MESCIUS-dev
普段のお仕事に役立つ普遍的なプログラミングTIPSや、業界で注目度が高い最新情報をお届けする「編集部ピックアップ」。
今回はReact 19.2で追加された新機能「Activity」コンポーネントをご紹介します。

はじめに

ReactではWebアプリケーションのパフォーマンス改善や開発体験の向上を目的として、多くのアップデートが行われてきました。最近のバージョン「19.2」のアップデートでも、新機能であるActivityコンポーネントが追加されました。これまで不便だったコンポーネントの再レンダリングの問題を解消する機能で、UXやパフォーマンスの改善につながります。

今回は、Reactに新しく追加されたActivityコンポーネントを解説していきます。これまでの問題点を補うActivityコンポーネントの特長を解説し、実用例を交えた使い方を紹介していきます。

Activityコンポーネントとは

ReactのActivityコンポーネントは、UIの表示にかかわらず状態を保持できるコンポーネントで、React 19.2のアップデートで追加された新機能の1つです。

従来、UIの表示を切り替えるときには、下記のコードのように表示状態を示す変数を使った条件付きレンダリングによって実装されてきました。

{isVisible && <Page />}

しかし、条件付きレンダリングによる実装方法ではコンポーネントの扱いにおいて次のような問題がありました。

  • 表示に切り替わるまではレンダリングされない
  • 再表示されてもユーザーの入力や操作した内容は復元されない

UI表示の切り替えは、コンポーネントの再構築によって行われるため効率的とは言えませんでした。コンポーネントが生成されるまでデータ取得などの前準備が行われなかったり、コンポーネントの破棄によってUIの状態もリセットされたりと不便な問題を抱えていました。

Activityコンポーネントはこれらの問題を解消する機能で、対象コンポーネントを内包するように使用します。例えば、下記のようにvisibleとhiddenの2つの表示モードを切り替えるように記述します。

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

Activityコンポーネントは非表示であってもバックグラウンドでレンダリングされ、それ以降もコンポーネントは破棄されずにUI状態も保持されます。そのため、操作も状態もリセットされないインタラクティブなUIを簡単に実装することが可能になりました。

なお、Activityコンポーネントには新たなモードが追加予定で、今後もアップデートによる改善が期待できます。

Activityコンポーネントの特長

UIの状態を維持できる

Activityコンポーネントを使用すると、子要素の表示状態にかかわらず、加えられた変更が保持されます。

条件付きレンダリングの場合、非表示だとコンポーネントが破棄されるため、フォームに入力された内容や操作された内容もその時点でリセットされていました。ActivityコンポーネントではUIをdisplay: noneによって画面から隠すことで非表示にしているため、破棄や再生成という負担のかかる処理を行う必要がなくなりました。

この特性は、タブのようなページの一部を切り替えるUIにおいてUX向上につながります。

レンダリングの効率化

Activityコンポーネントは非表示であっても事前にレンダリングしておくことができます。

hiddenに設定したActivityコンポーネントは、他のコンポーネントよりも優先度は下がりますがレンダリングは実行されます。そのため、データ取得や外部とのやり取りなど時間のかかる処理でも、先んじて完了させておくことができます。なお、hiddenモードではuseEffectは実行されないため、事前に完了させておきたい処理は含まない方がよいでしょう。

隠れているUIでも、事前に準備を完了させておけばすぐに表示ができるため、ユーザーの待機時間を減らすことにつながります。

Activityコンポーネントを使ってみよう

ここからは、Next.jsを使ってActivityコンポーネントの実用例を解説していきます。Node.jsを導入していない方は、次節のインストールに進みましょう。

Node.jsのインストール

Node.jsの公式サイトにアクセスします。

ページ下部に表示されているOSとアーキテクチャを選択し、左の緑色のボタンをクリックしてインストーラーのダウンロードを行います。

  • macOSの場合は、「macOSインストーラー」
  • Windowsの場合は、「Windowsインストーラー」
Node.js — Node.js®をダウンロードする
出典：Node.js — Node.js®をダウンロードする（2025年10月29日閲覧）

ページ上部にバージョン（2025年10月時点の推奨版は「v24.21.0（LTS）」）の選択肢がありますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版（Currentの付いたバージョン）は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。

インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。

インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。

  • macOSの場合は、「ターミナル」アプリ
  • Windowsの場合は「PowerShell」または「コマンドプロンプト」

以下のコマンドを実行し、結果を確認します。

node -v
npm -v

実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。

Activityコンポーネントを使ったWebアプリケーションの作成

Next.jsで、Activityコンポーネントを使ったWebアプリケーションを作成していきます。コマンドラインで以下のコマンドを実行し、Next.jsプロジェクト（ここではactivity-example）を作成します。

npx create-next-app@latest activity-example

? Would you like to use the recommended Next.js defaults? » - Use arrow-keys. Return to submit.
>   Yes, use recommended defaults - TypeScript, ESLint, Tailwind CSS, App Router, Turbopack
    No, reuse previous settings
    No, customize settings

次に、プロジェクト内に次の3つのファイルを作成します。

  • app/example/page.tsx
  • app/example/Sidebar.tsx
  • app/example/style.css
'use client';
import { Activity, useState } from 'react';
import './style.css';
import Sidebar from './Sidebar';

export default function App() {
  const [isShowingSidebar, setIsShowingSidebar] = useState(true);

  return (
    <div id="root">
      <Activity mode={isShowingSidebar ? 'visible' : 'hidden'}>
        <Sidebar />
      </Activity>

      <main>
        <button onClick={() => setIsShowingSidebar(!isShowingSidebar)}>
          Toggle sidebar
        </button>
        <h1>Main content</h1>
      </main>
    </div>
  );
}
import { useState } from 'react';

export default function Sidebar() {
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <nav>
      <button onClick={() => setIsExpanded(!isExpanded)}>
        Overview
        <span className={`indicator ${isExpanded ? 'down' : 'right'}`}>
          ▲
        </span>
      </button>

      {isExpanded && (
        <ul>
          <li>Section 1</li>
          <li>Section 2</li>
          <li>Section 3</li>
        </ul>
      )}
    </nav>
  );
}
body {
    height: 275px;
    margin: 0;
}
#root {
  display: flex;
  gap: 10px;
  height: 100%;
}
nav {
  padding: 10px;
  background: #eee;
  font-size: 14px;
  height: 100%;
}
main {
  padding: 10px;
}
p {
  margin: 0;
}
h1 {
  margin-top: 10px;
}
.indicator {
  margin-left: 4px;
  display: inline-block;
  rotate: 90deg;
}
.indicator.down {
  rotate: 180deg;
}

作成できたら、プロジェクトディレクトリに移り、ローカルサーバーを起動しましょう。

cd activity-example
npm run dev

起動が完了したら、ブラウザでhttp://localhost:3000/exampleにアクセスしてみましょう。

このページでは、「Overview」をクリックするとメニューが開閉し、「Toggle sidebar」をクリックするとサイドバーが開閉します。「Overview」をクリックした後に、「Toggle sidebar」でサイドバーを閉じ、再びサイドバーを開いてみましょう。

一度非表示になったサイドバーを開き直しても、そのサイドバー内部にあるメニューの開閉状態が復元されていることが確認できます。

さいごに

ReactのActivityコンポーネントは、UIの内部状態を保持したまま非表示にできる機能です。UI状態の保持と事前レンダリングの効果により、条件付きレンダリングでは実装が難しかったUXを簡単に実現できるようになりました。Activityコンポーネントには今後の機能拡張も検討されており、活用の幅が広がっていくことが期待できます。

メシウスではReactをはじめとした様々なJavaScriptフレームワークと一緒に使えるJavaScriptライブラリを提供しています。

メシウスのJavaScriptライブラリ

無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。

＼  この記事をシェアする  ／