この記事を読んで出来ること

バックエンドにPHPのフレームワークであるLaravelを、フロントエンドにJavaScriptのフレームワークであるReactを用いたウェブアプリ開発をするための環境構築。
※今回はmacOSを用いて環境構築を行っています。

Composerをインストールする

まずはLaravelをインストールために用いるComposerをインストールします。Composerとは、PHP開発で使用するライブラリやパッケージを管理するツールで、macOSではHomebrewでインストールすることが出来ます。インストールが完了してバージョン情報が表示されるか確認しておきましょう。

$ brew install composer
$ composer -V

Laravelプロジェクトを作成する

次に、composerを用いてLaravelプロジェクトを作成します。プロジェクトの作成にはcreate-projectを用います。

$ composer create-project laravel/laravel "プロジェクト名"
$ cd "プロジェクト名"

Reactを利用できるようにする

フロントエンドのフレームワークをReactに設定します。まずは、Reactを利用するために必要なlaravel/uiパッケージをインストールします。

$ composer require laravel/ui

そして最後にReactのインストールをします。この際、"--auth"と書くことでログイン機能もインストールしています。インストールが終わると、npmコマンドを実行するようにメッセージが出るのでその通りに実行します。

$ php artisan ui react --auth
$ npm install && npm run dev

ここまでの作業を終えると、resouce/js/components/Example.jsのコードがReactを用いたものになってることが確認できます。

Laravelの動作確認

以下のコマンドで開発用のローカルサーバを起動し、表示されるアドレスにアクセスします。

$ php artisan serve

インストールが正常に行われていたら、「Laravel」と書かれた初期ページが表示されます。ログイン機能もインストールしているため、右上には「LOGIN」「REGISTER」のリンクも表示されているはずです。

jsファイルの変更を監視する

サーバーは起動したままターミナル上で別のタブを開き、以下のコマンドを実行することでjsファイルが変更されたら自動的にコンパイルが行われます。開発時には "php artisan serve" とこちらのコマンドを実行しておくことでブラウザ上でウェブページを確認することが出来る。

$ npm run watch