【ITニュース解説】Jopi Rewrite: Server-Side React using the Page Router

システムエンジニアを目指す初心者にとって、ウェブ開発の世界は広大で、新しい技術が次々と登場する。この記事では、特にReact.jsという人気の高いJavaScriptライブラリを使ったウェブサイト構築に焦点を当て、その性能と開発効率を大きく向上させる技術、「Jopi Rewrite」フレームワークと「React SSR（Server-Side React）」、そして「Page Router」の仕組みについて解説する。これらを学ぶことで、より高速で検索エンジンに強いウェブサイトを効率的に作る方法の基礎が理解できるだろう。

まず、React SSRについて詳しく見ていこう。通常、React.jsのようなJavaScriptライブラリで構築されたウェブサイトは、ブラウザ側でJavaScriptが実行されてからコンテンツが生成される。この方式では、ページの読み込みが遅くなったり、Googleなどの検索エンジンのクローラーがページのコンテンツをうまく読み取れないという問題が発生することがあった。React SSRは、この問題を解決するための技術だ。ウェブサイトのコンテンツをブラウザではなく、サーバー側でReact.jsを使ってHTMLとして事前に生成する。これにより、ユーザーがページにアクセスした際に、すでに完成されたHTMLがすぐに表示されるため、ページの初期表示速度が格段に向上する。また、検索エンジンのクローラーもHTMLを直接読み込めるようになるため、ウェブサイトが検索結果に表示されやすくなるという大きなメリットがある。HTMLが読み込まれた後も、ブラウザでJavaScriptが実行されることで、そのHTMLは通常のReact.jsコンポーネントとして完全にインタラクティブな状態に切り替わる。最初に表示される静的なページが、その後すぐに操作できる動的なページに変わるようなもので、ユーザーはサーバーから送られたページを即座に見て、その間にブラウザがすべてのインタラクティブな要素を準備するため、待ち時間をほとんど感じることなくスムーズな体験が得られる。

次に、Jopi Rewriteというフレームワークに注目する。これは、Node.jsやBun.jsといったJavaScript実行環境上で動作するサーバーフレームワークだ。Jopi Rewriteは、React.jsを使ったウェブ開発において強力な機能を提供することを目的に作られている。特に、後述するPage Routerのような高レベルAPIを使うことで、ウェブサイトの構築や特定機能の有効化が非常に簡単になるように設計されている点が特徴だ。また、より細かな制御が必要な開発者向けには、低レベルAPIも用意されており、柔軟な開発が可能になっている。

そして、この記事の核となる機能の一つが「Page Router」だ。これは、ウェブサイトのURL構造と、開発者が管理するファイルのフォルダ階層とを直接対応させる仕組みだ。例えば、「/products」というURLにアクセスすると、reactPages/productsというフォルダ内のファイルが読み込まれる、といった具合だ。このPage Routerのおかげで、新しいページをウェブサイトに追加し、それを特定のURLに紐付ける作業が非常に直感的になる。具体的には、新しいURLに対応させたいサブフォルダを作成し、その中にindex.page.tsxという名前のファイルを作成するだけでよい。このindex.page.tsxファイルが、そのURLにアクセスしたときに表示されるコンテンツを定義する場所になる。

実際にプロジェクトを作成する手順を見ていこう。まず、Node.js（バージョン22.19以降）またはBun.jsがインストールされている環境を用意する。Jopi Rewriteは最新のプラットフォーム機能を利用するため、新しいバージョンが必須だ。次に、コマンドラインツールであるjopiを使ってプロジェクトのひな形を自動的に作成する。ターミナルでnpx jopi create react-ssr-routerというコマンドを実行するだけで、必要なファイル群がカレントフォルダに生成される。このひな形は、React.jsとPage Router機能を活用したウェブサイトの基本的な構造を含んでいる。プロジェクトフォルダの中身を見ると、package.json（プロジェクト設定ファイル）、tsconfig.json（TypeScript設定ファイル）、そしてソースコードを格納するsrcフォルダがある。このsrcフォルダの中には、アプリケーションのエントリーポイントであるindex.tsxや、認証情報を含むmyUsers.jsonなどがあるが、最も重要なのはreactPagesフォルダだ。

reactPagesフォルダは、ウェブサイトの各ページを定義する場所であり、そのフォルダ構造がURLに直接マッピングされる。例えば、reactPagesフォルダ直下のindex.page.tsxはウェブサイトのルートURL（例: http://127.0.0.1:3000）に対応し、reactPages/products/index.page.tsxは/productsというURL（例: http://127.0.0.1:3000/products/）に対応する。同様に、reactPages/login/index.page.tsxは/loginというURLに対応する形だ。

ここで、実際に新しいページを追加する方法を試してみよう。例えば、http://127.0.0.1:3000/userというURLでアクセスできるページを追加したい場合、reactPagesフォルダの中にuserという新しいサブフォルダを作成し、その中にindex.page.tsxファイルを作成する。このindex.page.tsxファイルには、以下のようなシンプルなReact.jsコンポーネントを記述するだけでよい。

export default function() { return <div><div>I'm a React.js page!</div><input type="button" value="Click me!" className="text-red-500" onClick={()=>alert("Clicked!")} /></div>}

このコードは、「I'm a React.js page!」というテキストと、「Click me!」というラベルのボタンを表示する。サーバーを起動し（npm install、npm run build、npm run startを実行）、http://127.0.0.1:3000/userにアクセスすると、このページが表示される。ここで重要なのは、ブラウザのJavaScriptを無効にしても、このページは正しく表示されるという点だ。しかし、ボタンをクリックしてもアラートが表示されないなど、インタラクティブな機能は動作しなくなる。これはReact SSRの特性であり、初期表示はサーバーが生成したHTMLで行われるが、その後のインタラクティブな動作にはブラウザ側のJavaScriptが必要となることを示している。開発中は、npm run watchコマンドを使うと、TypeScriptファイルをJavaScriptに自動変換し、変更をリアルタイムで反映させることができる。

さらに、ページにタイトルを設定したり、現在ログインしているユーザーの名前を表示したりする方法も提供されている。Jopi Rewriteが提供するjopi-rewrite-uiライブラリからusePageTitleとuseUserInfosというフックを利用する。usePageTitle("My page title")と記述することで、ブラウザのタブに表示されるページタイトルを設定できる。また、useUserInfos()を使うことで、ログイン中のユーザー情報（例えばfullName）を取得し、ページ内に表示することが可能だ。さらに、Jopi Rewriteは内部で「React Router」というライブラリも利用しており、ブラウザ側とサーバー側の両方で機能する。そのため、Linkコンポーネントを使って、例えば/loginページへ簡単にナビゲーションするようなリンクを設置することもできる。これは、シングルページアプリケーション（SPA）のようなスムーズなページ遷移を、サーバーサイドレンダリングと組み合わせることで実現できることを意味する。

Jopi Rewriteは、開発効率を高めるための便利な機能も多数備えている。その一つが「Tailwind CSS」の自動設定だ。Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、HTMLに直接クラス名を追加するだけでスタイルを適用できる。先ほどのボタンの例にあったclassName="text-red-500"がその一例だ。Jopi Rewriteは、このTailwind CSSを自動的に有効化し、設定してくれるため、開発者は環境構築の手間なくすぐにスタイリングを始められる。また、開発中の利便性を追求した「自動リフレッシュ」機能も搭載されている。これは、ページのコードを修正するたびに、開発中のブラウザが自動的にリロードされるというものだ。npm run start-devコマンドを実行することでこの機能が有効になる。特にBun.jsというJavaScript実行環境を使用すると、この自動リフレッシュが非常に高速に行われる。Node.jsではTypeScriptのコンパイルに約2秒かかるのに対し、Bun.jsではTypeScriptのコンパイルステップが不要なため、瞬時に変更が反映される。これは、ウェブサイトの見た目を調整する際に、開発体験を大幅に向上させる。

以上のように、Jopi Rewriteは、React SSRとPage Routerを核として、システムエンジニアの初心者が高速で検索エンジンに強いウェブサイトを効率的に構築できるよう設計された強力なフレームワークだ。プロジェクト作成からページの追加、そして各種開発支援機能まで、シンプルかつ直感的な方法でモダンなウェブ開発を進められる点が大きな魅力である。この解説を通じて、Jopi RewriteとReact SSRの基本的な考え方、そしてそのメリットが理解できたことを願う。このフレームワークを活用し、ぜひ自身のウェブ開発プロジェクトに挑戦してみてほしい。