【ITニュース解説】🌐 Is React Really Single Page? Understanding Routing & Multiple Pages in SPAs

Reactは「シングルページアプリケーション（SPA）」と呼ばれるフレームワークだが、実際にアプリケーションを使っていると、複数のページがあるように見えることがある。この一見矛盾する状況は、どのように実現されているのだろうか。ここでは、Reactがどのようにして単一のHTMLページでありながら、ユーザーには多機能なウェブサイトのように見せているのかを詳しく解説する。

まず「シングルページアプリケーション」という言葉が本当に意味するところを理解することが重要だ。ReactのアプリケーションがSPAと呼ばれるのは、サーバーからたった一つのHTMLファイルしか読み込まないためである。通常、それはindex.htmlという名前のファイルだ。このファイルが一度ブラウザに読み込まれると、その後はページのコンテンツの変更やナビゲーションのほとんどが、JavaScriptによってクライアントサイド、つまりユーザーのブラウザ内部で行われる。Reactは、このindex.htmlの中に用意された特定のルート要素に対して、必要なコンポーネントを動的に生成し、表示する。そのため、ページ全体が再読み込みされることはなく、非常にスムーズなユーザー体験が提供される。ここでいう「シングルページ」とは、サーバーから取得するHTMLの「シェルが一つ」であるという意味であり、アプリケーションが複数の異なるビューやセクションを持てないという意味では決してない。

しかし、たとえ技術的に一つのHTMLページであっても、ユーザーはウェブサイトに対して特定の期待を持っている。例えば、ホームページには/home、ユーザープロフィールには/profile、設定画面には/settingsといったように、表示される内容に応じて異なるURLが存在することを望む。もしルーティングの仕組みがなければ、開発者は手動でコンポーネントの表示・非表示を切り替えなければならず、大規模なアプリケーションでは管理が非常に複雑になる。さらに重要な点として、ユーザーは特定の画面のURLをブックマークしたり、友人や同僚と共有したりすることができなくなる。これはウェブサイトとしての基本的な利便性を損なうことになる。

そこで登場するのが「ルーティング」という概念と、それを実現するライブラリ、例えばReact Routerだ。React Routerのようなルーティングライブラリは、ブラウザのURLの変化を常に監視している。URLが/profileに変わったことを検知すると、React Routerはそれに対応するプロフィール表示用のコンポーネントを動的にレンダリングし、画面に表示する。同時に、ブラウザの履歴も適切に更新するため、ユーザーはブラウザの「戻る」ボタンや「進む」ボタンを使って、これまでの閲覧履歴をたどることが可能になる。これら一連の動作は、ページ全体を再読み込みすることなく行われるため、SPA特有の高速で滑らかな操作感が維持される。

では、ReactのSPAが具体的にどのようにしてURLを変更し、見かけ上の「複数ページ」を実現しているのだろうか。その鍵を握るのは、ブラウザが提供するHistory APIという機能だ。JavaScriptはwindow.history.pushState()というメソッドを使うことで、ページの再読み込みを伴わずにブラウザのURLを変更できる。例えば、あるボタンをクリックするとwindow.history.pushState({page: 'profile'}, 'Profile', '/profile');というJavaScriptコードが実行されるとする。この結果、ブラウザのアドレスバーには/profileというURLが表示されるが、実際に新しいHTMLファイルがサーバーから読み込まれることはない。React Routerは、このURLの変更を検知して、事前に設定しておいた「/profile」に対応するプロフィールコンポーネントを即座にレンダリングする。

次に、ユーザーがブラウザをリフレッシュしたり、あるいはブラウザのアドレスバーに直接/profileと入力してアクセスした場合の挙動について説明する。この場合、ブラウザはサーバーに対して/profileというURLでリクエストを送る。しかし、SPAのサーバー設定では、どのようなURLでリクエストが来ても、常に唯一のindex.htmlファイルを返すように設定されているのが一般的だ。サーバーがindex.htmlを返すと、その中に記述されたReactアプリケーションが起動する。Reactアプリケーションが起動すると、React Routerが現在のブラウザのURLが/profileであることを読み取り、それに合致するプロフィールコンポーネントを動的に表示する。この仕組みがあるため、SPAではサーバー側で、すべての不明なルートリクエストをindex.htmlにフォールバックさせる設定が不可欠となる。これにより、ユーザーがどのURLからアクセスしても、アプリケーションが正しく初期化され、意図した画面が表示されるようになる。

これらのメカニズムを図式化すると、次のような一連の流れになる。ユーザーがウェブサイト内のリンクをクリックしたり、アドレスバーにURLを入力したりする。すると、ブラウザはpushStateなどのHistory APIを使ってURLを更新する。このURLの変更をReact Routerが検知し、そのURLに対応する正しいコンポーネントを動的にレンダリングして画面に表示する。同時に、ブラウザの履歴も更新されるため、ユーザーは「戻る」や「進む」ボタンを通常通り使える。これらすべてが、ページ全体の再読み込みなしに行われることで、ユーザーには非常に滑らかでインタラクティブなSPA体験が提供される。

まとめると、Reactが「シングルページアプリケーション」と呼ばれるのは、サーバーから読み込むHTMLファイルが一つであるという技術的な側面に由来する。しかし、この単一のHTMLページ内で、ルーティングライブラリとHistory APIを駆使することで、ユーザーインターフェース上ではあたかも複数の異なるページが存在するかのように見せかけることが可能になる。具体的には、ページの再読み込みをせずにURLを変更するpushStateというブラウザの機能を利用し、またユーザーがページをリフレッシュした際には、サーバーが常にindex.htmlを返し、その中でReact Routerが現在のURLを解釈して適切なコンポーネントを表示するという連携によって、この仕組みは成り立っている。したがって、Reactアプリケーションは「見た目は複数ページ、実体は単一HTMLページ」という特徴を持っていると言えるだろう。