SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

フロントエンド開発における定番ライブラリ「React」の最新バージョン解説

フロントエンドの定番ライブラリ「React」バージョン18の新機能を紹介──Strictモードと新フックに注目!

フロントエンド開発における定番ライブラリ「React」の最新バージョン解説 第2回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本記事では、動的なWebページを構築するフロントエンド開発にとって定番ともいえるライブラリー「React」の最新版であるバージョン18について、新機能を紹介していきます。前回はWebページの「並行レンダー」をベースに、画面更新の優先度指定や不要な画面更新の抑制などの機能を紹介しました。今回は潜在的な問題点を洗い出すStrictモードへの機能追加と、新たなフックについて紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 Reactは、動的なWebページのインターフェースを構築するためのJavaScriptライブラリーで、Facebookとオープンソースコミュニティによって開発が続けられています。

図1 Reactの公式ページ
図1 Reactの公式ページ

 Reactは2022年3月にメジャーアップデートであるバージョン18(以下「React 18」がリリースされ、現在の最新バージョンは18.2.0です。React 18の概要は公式ブログ記事で紹介されています。

図2 React 18を紹介する公式ブログ記事
図2 React 18を紹介する公式ブログ記事

 本記事では、前回に引き続き、React 18で導入された改良や新機能を紹介します。

対象読者

  • 新バージョンでReactを体験してみたい方
  • すでにReact開発に従事していて、新機能を知りたい方
  • Reactの最新動向を追っておきたい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

  • Windows 10 64bit版
  • React 18.2.0
  • Node.js v18.16.1
  • Microsoft Edge 114.0.1823.67

 サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後「npm run start」コマンドを実行して、「http://localhost:3000」をWebブラウザーで表示します。本記事内ではReact 18の新機能に関する本質的な部分を抽出して説明するので、それ以外の実装は各サンプルコードを参照してください。

潜在的な問題点を洗い出すStrictモードへの機能追加

 ReactのStrictモードは、開発中にアプリケーションの潜在的な問題点を洗い出すツールです。React 18ではこのStrictモードに機能が追加されました。

 Reactの将来バージョンでは、より効率の良い表示を行うため、同じ状態(ステート)を保ったままコンポーネントを非表示(アンマウント)、再表示(再マウント)できるようになる予定です。この場合コンポーネントでは、表示・非表示時に実行される追加処理(「副作用」と呼ばれます)が複数回実行されても大丈夫なようにしておく必要があります。この確認のため、React 18のStrictモードでは、すべてのコンポーネントを表示する際に、内部的に「マウント→アンマウント→再マウント」と実行されるようになります。

 Strictモードは、適用する場所を<React.StrictMode>タグで囲むことで利用できます。ReactのCLI「create-react-app」で生成したプロジェクトでは既定で、Webページ全体のコンポーネント(Appコンポーネント)にStrictモードが適用されています(リスト1)。

[リスト1]Strictモードの適用(p001-strict/src/index.js)
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>  {/* Strictモードここから */}
    <App />
  </React.StrictMode> {/* Strictモードここまで */}
);

 Strictモードの動作を、図3のサンプルで表示します。このサンプルはStrictモードで実行すると、リストに同じ文言が2行表示されますが、Strictモードを解除すると1行だけ表示されます。

図3 Strictモードのサンプル(p001-strict)
図3 Strictモードのサンプル(p001-strict)

 図3のサンプルのAppコンポーネントはリスト2の通りです。

[リスト2]図3のサンプルのAppコンポーネント(p001-strict/src/App.js)
function App() {
  useEffect(() => {
    // 副作用の実行 ...(1)
    console.log('副作用の実行');
    // 副作用が1回だけ実行されることを意図した処理 ...(1a)
    // 複数回実行されるとつじつまが合わない
    const li = document.createElement('li');
    li.textContent='Galaxy S23 Ultra';
    document.getElementById('effect-area').appendChild(li);
    return () => {
      // クリーンアップの処理 ...(2)
      console.log('クリーンアップ')
      // 複数回実行に対応するためのクリーンアップ ...(2a)
      // const elem = document.getElementById('effect-area');
      // elem.children[elem.childElementCount - 1].remove();
    }
  });
  return (
    <div>
      <h3>React 18 Strictモード</h3>
      <ul id="effect-area"></ul>
    </div>
  );
}
export default App;

 リスト2のuseEffectフックの引数に与えた関数で、副作用の実行処理(1)を指定します。また、その関数内でreturnする関数でクリーンアップの処理(2)を指定します。副作用では(1a)の処理でリストに1行追加しますが、副作用が複数回実行されると、その回数だけリストに行が追加されてしまいます。副作用の処理に対応するクリーンアップ処理(2a)は、ここではコメントアウトされています。

 そのため、index.jsでリスト1の通りStrictモードが設定されている場合、(1a)の処理が2回実行されて、リストに2行表示されます。この時コンソールログを見ると、「副作用の実行→クリーンアップ→副作用の実行」の順番で実行されていることがわかります(図4)。

図4 リスト1、2をStrictモードで実行したときのログ(p001-strict)
図4 リスト1、2をStrictモードで実行したときのログ(p001-strict)

 index.jsで<React.StrictMode>タグを削除すると、リスト2のコンポーネントは想定通りリストが1行だけになります。この時のコンソールログは「副作用の実行」が1回だけ出力されます(図5)。

図5 リスト1、2を非Strictモードで実行したときのログ(p001-strict)
図5 リスト1、2を非Strictモードで実行したときのログ(p001-strict)

 しかし、この状態ではReactの将来バージョンで不具合を起こすかもしれません。リスト2(2a)のクリーンアップ処理を有効にすると、Strictモードでも想定通りの動作となり、将来発生しうる不具合を事前に抑止できます。

 なおStrictモードは、開発環境で直接実行した場合のみ効果が発生し、本番ビルドには影響を与えません。

次のページ
React 18で導入された新たなフック

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
フロントエンド開発における定番ライブラリ「React」の最新バージョン解説連載記事一覧
この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18019 2023/08/01 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング