【ITニュース解説】React × Laravelで簡単なWebアプリを作成する#2（React導入編）

LaravelとReactを連携させてWebアプリケーション開発を進める際、Reactをプロジェクトに導入する手順は非常に重要である。この手順は、システムエンジニアを目指す初心者にとって、フロントエンドとバックエンドの連携、開発環境の構築、JavaScriptツールの使い方を学ぶ良い機会となる。

まず、前回までにLaravelの実行環境が構築されていることを前提に、Webブラウザでhttp://localhost/にアクセスした際に表示されるページがどのように生成されているかを確認する。Laravelでは、通常、resources/views/welcome.blade.phpというファイルがHTMLのテンプレートとして機能し、その内容がブラウザに表示される。このファイルは、routes/web.phpというルーティング設定ファイルによって、ルートURL(/)へのアクセスがあった際に呼び出されるように指定されている。つまり、Laravelが初期状態で提供する画面は、Bladeと呼ばれるLaravel独自のテンプレートエンジンを使って作られたHTMLファイルが直接表示されている状態である。

次に、この既存のLaravel環境にReactを導入するための準備を進める。ReactはJavaScriptのライブラリであり、ブラウザ上で動作する。そのため、Reactのコードをブラウザが理解できる形に変換したり、複数のJavaScriptファイルを効率的に管理したりするためのツールが必要となる。この役割を担うのが、Node.jsという実行環境と、それに付属するnpm（Node Package Manager）というパッケージ管理ツールである。Laravelプロジェクトには、デフォルトでpackage.jsonというファイルが用意されており、これにはプロジェクトで利用するNode.jsのパッケージ情報が記述されている。npmが正しくインストールされているかを確認するためには、コマンドラインでnode -vやnpm -vを実行し、バージョン情報が表示されるかを確認する。もしインストールされていない場合は、Node.jsを公式サイトから導入する必要がある。

npmが利用できる状態であれば、まずはLaravelプロジェクトで必要なフロントエンド関連のパッケージを一括でインストールする。コマンドラインでnpm installを実行すると、package.jsonに記載されている全ての依存パッケージがダウンロードされ、node_modulesというディレクトリ内に配置される。このnode_modulesディレクトリには、React本体だけでなく、Reactのコードを効率的に開発するための様々な補助ツールも含まれている。

次に、React本体とその関連ライブラリをプロジェクトにインストールする。具体的には、npm install react react-dom @babel/preset-react --save-devというコマンドを実行する。reactはReactアプリケーションの中核となるライブラリで、ユーザーインターフェースを構築するための基盤を提供する。react-domは、Reactで作成したコンポーネントをウェブページのDOM（Document Object Model）に実際に描画するためのライブラリである。そして、@babel/preset-reactはBabelというJavaScriptのトランスパイラ（変換器）で使用される設定の一部で、Reactが採用しているJSXという記法を、通常のJavaScriptに変換するために必要となる。JSXはHTMLのような記述でJavaScriptコードの中にUIを記述できる便利な記法だが、ブラウザは直接JSXを理解できないため、Babelによる変換が必要となるのだ。--save-devオプションは、これらのパッケージが開発時にのみ必要であり、本番環境で実際に動作するアプリケーションには直接含まれないことをpackage.jsonに記録するために使われる。

Reactを導入したら、JSXを通常のJavaScriptに変換できるようBabelの設定を変更する。プロジェクトルートにあるbabel.config.jsファイルを開き、presetsという項目に@babel/preset-reactを追加する。この設定により、Babelはプロジェクト内のJSX構文を正しく認識し、ブラウザが解釈できるJavaScriptコードに変換する準備が整う。

さらに、フロントエンドのJavaScriptやCSSファイルを効率的にコンパイルするためのツールであるLaravel Mixの設定も変更する必要がある。Laravel Mixは、実体としてはwebpackという強力なモジュールバンドラーの機能を、Laravelユーザーが使いやすいようにラップしたものである。プロジェクトルートのwebpack.mix.jsファイルを開き、既存のJavaScriptコンパイル設定をmix.react('resources/js/app.js', 'public/js')のように修正する。この変更により、resources/js/app.jsを起点としてReactのコンポーネントを含むJavaScriptコードが処理され、最終的にpublic/js/app.jsという一つのファイルにまとめられて出力されるようになる。mix.reactメソッドを使用することで、Laravel MixはReact特有の要件（JSXの変換など）を自動的に考慮してコンパイル処理を行う。

これらの設定変更が完了したら、実際にReactのコードを記述する。プロジェクト内のresources/js/app.jsファイルを開き、内容をReactアプリケーションのエントリーポイントとなるように修正する。具体的には、reactとreact-domをインポートし、HTML要素にReactコンポーネントをマウントするコードを追加する。ReactDOM.render(<Example />, document.getElementById('app'));という記述は、ExampleというReactコンポーネントを、HTMLドキュメント内でIDがappと指定された要素の中に描画するという意味である。Laravelの初期プロジェクトには、resources/js/components/Example.jsという簡単なReactコンポーネントがすでに用意されているため、これをそのまま利用できる。

最後に、LaravelのBladeテンプレートファイルであるresources/views/welcome.blade.phpを修正し、作成したReactアプリケーションを組み込む。このファイルの中に、Reactアプリケーションがマウントされる場所として<div id="app"></div>という要素を追加する。そして、コンパイルされて生成されたJavaScriptファイル（public/js/app.js）をブラウザが読み込めるように、<script src="{{ mix('js/app.js') }}"></script>という記述を追記する。mix('js/app.js')はLaravel Mixが生成するファイルのパスを動的に取得するためのヘルパー関数である。

全ての準備とコードの修正が終わったら、フロントエンドのコードをコンパイルする。コマンドラインでnpm run devを実行すると、一度だけJavaScriptとCSSのファイルがコンパイルされ、publicディレクトリに出力される。もし開発中にコードの変更を自動的に監視し、変更があるたびに再コンパイルさせたい場合は、npm run watchコマンドを使用すると便利である。コンパイルが成功したら、Webブラウザでhttp://localhost/に再度アクセスしてみよう。以前のLaravelの初期画面ではなく、Reactで作成されたExampleコンポーネントが表示されていれば、Reactの導入と設定は成功である。ブラウザの開発者ツールを開き、「Elements」タブでdiv id="app"の中身を確認すると、Reactが生成したHTML構造が表示されていることが確認できる。

この一連の作業を通じて、バックエンドのフレームワークであるLaravelと、フロントエンドのUIライブラリであるReactがどのように連携し、Webアプリケーションを構築していくかの基本的な流れを理解できたはずである。Node.js、npm、Babel、Laravel Mixといったツールの役割も把握し、モダンなWeb開発におけるフロントエンド環境の重要性を認識することができた。これは、システムエンジニアとしてのキャリアをスタートさせる上で非常に貴重な経験となるだろう。