Laravel BreezeでReactを触ってみる【いつもはBladeの私が解説】

Laravel BreezeでReactを触ってみる Breeze
2024.01.10
※当サイトはアフィリエイト広告を掲載しています。

Laravelの通常のビュー部分は、Bladeです。とても使いやすく、私はずっとこれを使ってきました。これでも充分開発可能ですが、従来から存在するMPA（マルチページアプリケーション）が、クラシックというか、やぼったい感じがしています。

今年はReactやVue.jsも学ばなければなー、ということで、久々にLaravel×Reactをテスト環境にインストールしてみようと思います。

というのも昨年はPCを新しくしたので、いろいろといじって遊んでみようかなと。

LaravelではBladeばかりという、私と同じような状況にある方に、何か少しでも参考になることがあれば幸いです。

インストール

まずはインストールします。

前提

  • 本ページはWindows11 Professional環境で行っていますが、他の環境でも大差ありません。
  • Composerをインストールしていない場合は、事前にインストールしてください。Windows系へのインストールはこちらで書いてます。
  • 本ページではD:\www\larareact.localというディレクトリに、react-experimentというプロジェクトを作ろうと思います。以後、適宜読みかえてください。
  • 本ページではLaravel Breeze（付随してInertia）をインストールします。

プロジェクトディレクトリ作成

まず最初にD:\www\larareact.localというディレクトリを作成しました。この中にプロジェクトをインストールします。

そのためにこの場所でプロンプトを出しておきます。例えばWinowsなら、該当フォルダを「右クリック→ターミナルで開く」でOKです。

ターミナル、コマンドプロンプト、PowerShellなどなんでもかまいません。

インストール

以下のコマンドでLaravelをインストールします。最後のreact-experiment部分はプロジェクト名ですので、各自ご希望の文字に変えてください。

composer create-project --prefer-dist laravel/laravel react-experiment

作成したプロジェクトのディレクトリに移動します。

cd react-experiment

cd rと打った直後にShiftキーを押せば、自動的に補間されるので楽です。環境によっては、上記とちょっと違った補間をされるかもですがそれを優先してください。

その他各種インストール

Laravel Breezeと、それをReactオプションで使うためのコマンド、そしてnpmインストールを実行します。

composer require laravel/breeze
php artisan breeze:install react
npm install

動作確認

これで普通はOKなので、動作確認します。

起動

今後本格的に開発する可能性があるのでここではViteを使用しています。ただ動作確認したいだけの場合は、以下のコマンドでは無く、php artisan serveで充分です。

毎度おなじみの、以下のコマンドでViteを起動します。

npm run dev

私の場合、初期状態で以下の様になりました。

  VITE v5.0.11  ready in 187 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

  LARAVEL v10.40.0  plugin v1.0.1

  ➜  APP_URL: http://localhost

http://localhost部分で、Ctrl+クリックでアクセス可能です。

表示されない場合

私の場合、そのままでは表示されませんでした。なぜなら、すでにhttp://localhostで別にバーチャルホストを指定してあるからです。

その場合、面倒ですがバーチャルホスト指定を解除するか、新たにバーチャルホスト指定をします。

私の場合は後者を選択。ひいてはlarareact.localでバーチャルホスト設定し、D:\www\larareact.local\react-experiment\publicを公開ディレクトリとしました。

その場合、.envのAPP_URLを以下に書き換えます。

APP_URL=http://larareact.local

保存すると即座にViteが反応してくれますので、http://larareact.localでアクセスすると……

Lara
Lara

OKです！見た目は普段通りですが、Laravel×Reactで表示されています。

ビューの違いを見てみる

今回、Laravel Breezeを利用することで、ユーザー認証の機能＆コードも最初からついてきています。

私はReactにはあまり慣れていないため、このコードを大いに参考にすることができそうです。

通常のBladeとの構造の違いなど、まずはビュー部分のコードの違いを見ていきたいと思います。

viewsにはエントリポイントのみ

通常のBladeでは、resources/view/には多くのファイルが収まっているはずですが、今回はapp.blade.phpしかありません。

逆に言えば、ここがエントリポイントとしてシステムが動作します（記述が全てに反映される）。

Laravel×Reactの場合はこの場所ではなく、resources/js/をメインに開発することになります。

該当ディレクトリには、以下のようなディレクトリ・ファイルが存在します。

  • Components/(ディレクトリ)
  • Layouts/(ディレクトリ)
  • Pages/(ディレクトリ)
  • app.jsx
  • bootstrap.js

これらを見ていきましょう。ChatGPT大先生に教えてもらったことをまとめます。

Components/

Components ディレクトリは、再利用可能なUIコンポーネントを格納します。ボタン、インプットフィールド、ナビゲーションバーなど、アプリケーション全体で共通して使用される小さなコンポーネントが含まれます。

Bladeでも同様の思想があるので、分かりやすいですね。

例: Button.jsx, Header.jsx

Layouts/

Layouts ディレクトリは、ページのレイアウトを定義するコンポーネントを格納します。アプリケーションの異なるページに共通するレイアウト要素（例えばヘッダー、フッター、サイドバー）を定義するのに使用されます。

これもBlade同様です。

例: MainLayout.jsx, AdminLayout.jsx

Pages/

Pages ディレクトリは、アプリケーションの各ページに対応するコンポーネントを格納します。特定のページや機能に特化しており、Layouts や Components ディレクトリの要素を使用して構築されます。

要は各ページごと、１ページずつ作ることになりそうです。

例: HomePage.jsx, AboutPage.jsx

app.jsx

app.jsx は、アプリケーションのメインのJavaScriptエントリポイントです。Reactコンポーネントのルート、ルーティングの設定、グローバルなスタイルやコンテキストの設定など、アプリケーションの初期化に関連するコードが含まれます。

このファイルはアプリケーションの起動と挙動の基盤を提供するため、非常に重要になりそうです。

bootstrap.js

bootstrap.js は、アプリケーションのブートストラッププロセス、つまり初期化プロセスを管理するファイルです。ここで外部ライブラリの設定、環境設定、アプリケーションが必要とする前提条件の設定などが行われます。

デフォルトでは、axiosを利用する設定になっています。axiosとはHTTPリクエストを行うためのライブラリです。

例: Axiosの設定、Laravel Echoの設定など。

コントローラーの違いを見てみる

次に、コントローラーの違いを見てみます。基本的に、大きな違いはなさそうに見えますが、よく見ると処理の最後が変わっています。

ビューに返す部分の違い

通常、以下の様な書き方でビュー（Blade）を指定してコントローラーが終わります。

return view('posts.show', compact('post'));

しかしBreezeで同等のことをする場合、Inertiaのレスポンスメソッドであるrenderを使います。Bladeに変数を渡すかのごとく、Reactコンポーネントにpropsを渡すことが可能です。

return Inertia::render('Profile/Edit', [
    'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
    'status' => session('status'),
]);

なぜ？

Laravel Breeze インストール時、Reactオプションを選択すると、自動的にInertia.js（イナーシャ）がセットアップされます。

Inertia.jsは、LaravelとReactの間のシームレスなデータのやり取りを可能にするライブラリです。

通常はバックエンドとフロントエンドは別物ですよね！？

Inertia.jsのおかげで、それらの間で効率的な通信が行える。つまりフルスタック開発において（良くも悪くも）「いいとこ取り」のようなことができるようになります。

Inertiaは他にVueやSvelteなどにも対応しており、そちらで使うことも可能です。

まとめ

コードを見る限り、Bladeで利用する場合よりも、ぐっと難しくなりそうです。Reactの基本構文程度は理解しているつもりでしたが、ハードルを感じます。

とは言えある程度はコードが分かるので、何となくで開発を進めることもできそうです。……うーん。

  • 最初からLaravel×Reactで慣れていく
  • 先にReactの習熟度合いを高めてから進める

このどちらかで進めるかが難しい所ですね。まだ私は決めかねていますが、今は時間に余裕があるので、他に寄り道をしながら考えてみたいと思います。

個人的には、今回の方法とは別で、Next.js（Reactのフレームワーク）ベースにLaravel（API）と組み合わせるサイト構築にも興味があり、難易度など比べてみたいと思います。

自分なりに結論が出たらまた追記します。

コメント

タイトルとURLをコピーしました