クラウドソリューション事業部の青山です。
今回、LaravelでJavaScript(React)を弄る環境が欲しかったので構築しました。
構築してみると意外と簡単に素早く構築できましたので、手順をまとめました。
この記事では項目を大きく3つに分けて手順をご説明いたします。
- Laravelのインストールまで
- JavaScript(React)の準備
- 実際にReactを使用するまで
Q. Laravel Sailとはなんですか？
A. LaravelについてDockerを意識せずに開発環境を操作できるコマンドラインインターフェイスです。そのためSailを使用することでLaravelを簡単に始めることができます
Sailは、Dockerの経験がなくても、PHP、MySQL、Redisを使用してLaravelアプリケーションを構築するための優れた出発点を提供します。https://readouble.com/laravel/10.x/ja/sail.html
1. Laravelのインストールまで
Laravelの公式サイトに沿って、インストール作業を行います。https://readouble.com/laravel/10.x/ja/installation.html
今回インストールしたLaravelのバージョンはv10.12.0です。
公式サイトに移動すると、Laravelの紹介の後、
まずPHPとComposerをインストール済みかどうかについて確認があります。
しかしローカルにPHPとComposerをインストールするのは手間ですし、
可能であればあまりローカルに直接インストールしたくありません。
そのため今回はDockerを使用します。
Docker上でLaravelを起動できれば、
ローカルにPHPやComposerをインストールする必要はありません。
また、コマンドひとつでDockerは起動できますし、
同時にLaravelも確認できる状態になるため今回の目的と合致しています。
公式サイトでDockerを使ったLaravelの始め方は記載があるので
そちらを参考に進めていきます。
公式サイトにも記載がありますが、先にDocker Desktopをインストールしておいてください。
(インストールしてDocker Desktopを実行状態にしておかないと、コマンドが実行されません)
https://www.docker.com/products/docker-desktop/
Docker Desktop がインストールできたら、
下記のコマンドでLaravelのプロジェクトをローカルに作成します。
プロジェクトを作成したいディレクトリに移動してコマンドを実行すると、
example-appというプロジェクト(Laravel起動に必要なファイルが入ったディレクトリ)が作成されます
このプロジェクトはDocker上でLaravelが起動するように
セッティング済みの状態です。
下記のコマンドは公式サイトからの引用です
curl -s “https://laravel.build/example-app” | bashhttps://readouble.com/laravel/10.x/ja/installation.html
もしプロジェクト名を変更したい場合は、example-appをlaravel-sail-testなどに書き換えてください。
exampleのままだとわかりにくいので、私はlaravel-sail-testに書き換えました。
ターミナルを開いてコマンド実行後、しばらく待つとインストールが完了します。
完了後、cdコマンドでプロジェクトのディレクトリに移動してから、
sailコマンドでDockerを起動します。
下記のコマンドは公式サイトからの引用です。
cd example-app./vendor/bin/sail uphttps://readouble.com/laravel/10.x/ja/installation.html
コマンド実行後、Dockerが起動したことで
同時に色々なアプリケーションの実行状態が
現在のターミナルの画面にはログとして表示されていると思います。
すでにLaravelは起動した状態ですので、Laravelにブラウザで接続して画面を確認します。
どこに接続したらよいかわからないため.envファイルを確認します。
APP_URL=が接続先のURLです。
私の環境の場合http://localhostでした。
接続先でLaravelが表示されることが確認できたら、
一旦Laravelのインストールは完了です。
ログの表示画面から抜けたい(つまりDockerを終了したい場合)はctrl + cで抜けることができます。
抜けると同時に起動中のDockerが終了するため、合わせてDocker上で
動いていたアプリケーションは同時に終了されます。
もし起動ログで画面を占有されたくない場合、
下記のコマンドで起動することで、
バックグラウンドで起動させておくことができます。
./vendor/bin/sail up -d
また現在のプロジェクトのコンテナについて状態が気になった場合は、
下記のコマンドで確認することができます。
./vendor/bin/sail ps
もしLaravelやその他のアプリケーションの起動ログが気になった場合は、
下記のコマンドで確認することができます。
下記コマンドはログを表示させているだけですので、
ctrl + cコマンドで抜けてもDockerは終了しません。
./vendor/bin/sail logs -f
Q. なぜsail up？
A. sailも内部的にDocker Composeを利用しています。sailは、公式の紹介に書いてある通り、Dockerの経験がなくても簡単かつ迅速にLaravel開発に進めることがコンセプトになっています。
そのためphp artisan serveなどsail artisan serve に置き換えられているコマンドが存在します
Sail’s simple CLI means you can start building your Laravel application without any previous Docker experience.https://github.com/laravel/sail
2. JavaScript(React)の準備
LaravelでJavaScriptを使用する場合、いくつかの方法について公式サイトにおいて記載があります。
- Laravel Livewire
- Vue／React
- Inertia
今回は「手軽にかつ迅速に」の趣旨に沿って選択します。
しかしフロントエンドですので、注目されていて人気のある技術を選択したいです。
VueやReactを選択できるといいですね。
さらにNext.jsなどの注目されている技術も合わせて使用できると嬉しいです。
そのため今後さらに触る領域を広げる可能性を考えて、
今回はInertiaを使用します。
Q. なぜInertiaなのですか
A. Laravel の Blade を使っているような感覚で、React を導入し、
SPA 開発を迅速に開始できるからです。InertiaはLaravelとReactを接続する役割を持っています
Laravel Breezeの、breeze:install artisanコマンドはVueやReactを選べます。
今回はReactを選択しましょう。
先にBreezeパッケージを入れる必要があります。コマンドは下記です
./vendor/bin/sail composer require laravel/breeze --dev
次に下記のコマンドでインストールを行います。
ここでReactを選択しておきます。
./vendor/bin/sail artisan breeze:install react --ssr
Q. –ssrはなんですか？
A. サーバーサイドレンダリングのことです。
BreezeはInertiaに対応しているため、Inertiaを使用することで、
Laravelのビューコンポーネントをサーバーサイドでレンダリングし、
クライアントに返すことができます。
BreezeによりInertiaを使用して、フロントエンドを構築するための基本的なファイルと設定が
自動的に生成され、素早く立ち上げることができるため使用しました
Next.jsを使用したい場合は下記のコマンドになりますが、
今回は紹介だけにとどめます。下記コマンドは今回は使用しません。
./vendor/bin/sail artisan breeze:install api
最後にテーブルのマイグレーションとTailwind CSS のビルドコマンドを実行しましょう。
Tailwindはnpmを使ってビルドする必要があリます。
テーブルのマイグレーションコマンド
./vendor/bin/sail artisan migrate
Tailwind CSS のビルドコマンド
1./vendor/bin/sail npm install1./vendor/bin/sail npm run devQ. Tailwindがここで出てくるのはなぜですか？
A. LaravelのCSSについてBootstrapからTailwind CSS に変更されたからです。
この変更により、柔軟にCSSを使いUIを作ることができるようになったようです
3. 実際にReactを使用してみる
http://localhost に接続すると、右上に Login と Register のボタンが増えていると思います。
認証機能は一旦置いておいて、最低限の確認が必要な、ビューとルーティングだけ確認しておきます。
Q.なぜ認証機能が追加されたのか？
A. Breezeを使うと認証に必要なルーティングやコントローラー、
ビューなどが自動生成されるためです
- ビュー
まず、ビューのファイルはresources/views/app.blade.phpです。
ホットリロードなので、コードを弄ると即座に
ブラウザに反映されるのがわかると思います。
- ルーティング
ルーティングは、routes/web.php で処理しています。
では、実際にReactファイルを作成してみます。
Reactファイルの格納場所は、resources/js/Pages/ です。
開いていただくと、Welcome.jsx などがすでに存在しているのがわかります。
Pages下 に Test.jsx を作成してみましょう。
表示する内容について、最も世界で有名な挨拶を記述します。
Test.jsx
1export default function HelloWorld() {
2 return (
3 <p>Hello World</p>
4 );
5}作成できたら、このままでは Test.jsx が表示されないので、
web.phpを編集しましょう。
まず現在のコードについて確認します。
接続されるとまず、Welcome.jsxが表示されるようになっているのがわかると思います。
これをTest.jsx が表示されるように編集します。
web.php
1Route::get('/', function () {
2 return Inertia::render('Welcome', [
3 'canLogin' => Route::has('login'),
4 'canRegister' => Route::has('register'),
5 'laravelVersion' => Application::VERSION,
6 'phpVersion' => PHP_VERSION,
7 ]);
8});編集後は下記になります。
web.php
1Route::get('/', function () {
2 return Inertia::render('Test');
3});web.phpの編集ができました。
最後に、先ほど行ったビルドを再度行いましょう。
1./vendor/bin/sail npm install1./vendor/bin/sail npm run devビルドが終わったら、http://localhost に接続してください。
- Hello World が表示されているはずです。
以上でLaravelインストールからReactの使用までが終わりました。
実際にやってみると案外、インストールからJavaScript(React)の使い始めまで
素早く進めることがわかっていただけたと思います。
Laravelの方でまとめて必要な機能をインストールしてくれるのは、
とりあえず触りたい時にはありがたいです。
LaravelでJavaScript(React)を触ってみたい方は
意外と簡単に始められるのでぜひ始めてみてください