フロントエンド
イントロダクション
Laravelは、ルーティング、バリデーション、キャッシュ、キュー、ファイルストレージなど、モダンなWebアプリケーションの構築に必要なすべての機能を提供するバックエンドフレームワークです。しかし、私たちは開発者に、アプリケーションのフロントエンドを構築するための強力なアプローチを含む、美しいフルスタック体験を提供することが重要であると信じています。
Laravelでアプリケーションを構築する際のフロントエンド開発には、主に2つの方法があります。どのアプローチを選択するかは、PHPを活用してフロントエンドを構築するか、VueやReactなどのJavaScriptフレームワークを使用して構築するかによって決まります。アプリケーションのフロントエンド開発に最適なアプローチについて十分な情報を得た上で決定できるよう、以下でこれら両方の選択肢について説明します。
PHPの使用
PHPとBlade
かつて、ほとんどのPHPアプリケーションは、リクエスト中にデータベースから取得したデータをレンダーするPHPのecho文を散りばめた単純なHTMLテンプレートを使用して、ブラウザにHTMLをレンダーしていました。
1<div>2 <?php foreach ($users as $user): ?>3 Hello, <?php echo $user->name; ?> <br />4 <?php endforeach; ?>5</div>Laravelでは、このHTMLをレンダーするアプローチは、ビューとBladeを使用することで現在でも実現できます。Bladeは非常に軽量なテンプレート言語で、データの表示、データの繰り返し処理などのための便利で短い構文を提供しています。
1<div>2 @foreach ($users as $user)3 Hello, {{ $user->name }} <br />4 @endforeach5</div>この方法でアプリケーションを構築する場合、フォームの送信やその他のページのインタラクションでは、通常、サーバーからまったく新しいHTMLドキュメントを受け取り、ページ全体がブラウザによって再描画されます。今日でも、多くのアプリケーションは、シンプルなBladeテンプレートを使用してこのようにフロントエンドを構築するのに完全に適しているかもしれません。
高まる期待
しかし、Webアプリケーションに対するユーザーの期待が成熟するにつれて、多くの開発者は、より洗練されたインタラクションを持つ、より動的なフロントエンドを構築する必要があることに気づきました。これを考慮し、一部の開発者はVueやReactなどのJavaScriptフレームワークを使用してアプリケーションのフロントエンドを構築することを選択します。
一方、使い慣れたバックエンド言語を使い続けたいと考える他の開発者たちは、好みのバックエンド言語を主に使用しながら、モダンなWebアプリケーションUIの構築を可能にするソリューションを開発してきました。例えば、Railsエコシステムでは、これによりTurbo Hotwire、Stimulusなどのライブラリが生まれました。
Laravelエコシステム内では、主にPHPを使用してモダンで動的なフロントエンドを作成する必要性から、Laravel LivewireとAlpine.jsが生まれました。
Livewire
Laravel Livewireは、VueやReactのようなモダンなJavaScriptフレームワークで構築されたフロントエンドのように、動的でモダン、そして生き生きとした感覚のLaravel搭載フロントエンドを構築するためのフレームワークです。
Livewireを使用する場合、UIの個別の部分をレンダーし、アプリケーションのフロントエンドから呼び出したり操作したりできるメソッドやデータを公開するLivewire「コンポーネント」を作成します。例えば、シンプルな「カウンター」コンポーネントは次のようになります。
1<?php 2 3namespace App\Http\Livewire; 4 5use Livewire\Component; 6 7class Counter extends Component 8{ 9 public $count = 0;10 11 public function increment()12 {13 $this->count++;14 }15 16 public function render()17 {18 return view('livewire.counter');19 }20}そして、カウンターに対応するテンプレートは次のように記述します。
1<div>2 <button wire:click="increment">+</button>3 <h1>{{ $count }}</h1>4</div>ご覧のとおり、Livewireではwire:clickのような新しいHTML属性を記述でき、Laravelアプリケーションのフロントエンドとバックエンドを接続します。さらに、シンプルなBlade式を使用してコンポーネントの現在の状態をレンダーできます。
多くの人にとって、LivewireはLaravelでのフロントエンド開発に革命をもたらし、Laravelの快適さの中に留まりながら、モダンで動的なWebアプリケーションを構築することを可能にしました。通常、Livewireを使用する開発者は、ダイアログウィンドウをレンダーする場合など、必要な箇所にのみJavaScriptを「振りかける」ためにAlpine.jsも利用します。
Laravelを初めて使用する場合は、ビューとBladeの基本的な使い方に慣れることをお勧めします。その後、公式のLaravel Livewireドキュメントを参照して、インタラクティブなLivewireコンポーネントでアプリケーションを次のレベルに引き上げる方法を学んでください。
スターターキット
PHPとLivewireを使用してフロントエンドを構築したい場合は、Livewireスターターキットを活用して、アプリケーション開発を迅速に開始できます。
ReactまたはVueの使用
LaravelとLivewireを使用してモダンなフロントエンドを構築することは可能ですが、多くの開発者は依然としてReactやVueのようなJavaScriptフレームワークの力を活用することを好みます。これにより、開発者はNPMを介して利用可能なJavaScriptパッケージとツールの豊富なエコシステムを活用できます。
しかし、追加のツールなしでは、LaravelとReactやVueを組み合わせると、クライアントサイドのルーティング、データのハイドレーション、認証など、さまざまな複雑な問題を解決する必要が出てきます。クライアントサイドのルーティングは、NextやNuxtのような独断的なReact/Vueフレームワークを使用することでしばしば簡素化されます。しかし、Laravelのようなバックエンドフレームワークとこれらのフロントエンドフレームワークを組み合わせる場合、データのハイドレーションと認証は依然として複雑で面倒な問題として残ります。
さらに、開発者は2つの別々のコードリポジトリを維持することになり、両方のリポジトリでメンテナンス、リリース、デプロイを調整する必要がしばしば生じます。これらの問題は乗り越えられないものではありませんが、アプリケーションを開発するための生産的で楽しい方法だとは思いません。
Inertia
ありがたいことに、Laravelは両方の世界の長所を提供します。Inertiaは、LaravelアプリケーションとモダンなReactまたはVueフロントエンドとの間のギャップを埋め、ルーティング、データハイドレーション、認証にLaravelのルートとコントローラを活用しながら、ReactまたはVueを使用して本格的でモダンなフロントエンドを構築することを可能にします。これらすべてを単一のコードリポジトリ内で行えます。このアプローチにより、どちらのツールの能力を損なうことなく、LaravelとReact/Vueの両方の全能力を享受できます。
LaravelアプリケーションにInertiaをインストールした後、通常どおりルートとコントローラを記述します。ただし、コントローラからBladeテンプレートを返す代わりに、Inertiaページを返します。
1<?php 2 3namespace App\Http\Controllers; 4 5use App\Http\Controllers\Controller; 6use App\Models\User; 7use Inertia\Inertia; 8use Inertia\Response; 9 10class UserController extends Controller11{12 /**13 * Show the profile for a given user.14 */15 public function show(string $id): Response16 {17 return Inertia::render('users/show', [18 'user' => User::findOrFail($id)19 ]);20 }21}Inertiaページは、通常アプリケーションのresources/js/pagesディレクトリ内に保存されるReactまたはVueコンポーネントに対応します。Inertia::renderメソッドを介してページに渡されたデータは、ページコンポーネントの「props」をハイドレートするために使用されます。
1import Layout from '@/layouts/authenticated'; 2import { Head } from '@inertiajs/react'; 3 4export default function Show({ user }) { 5 return ( 6 <Layout> 7 <Head title="Welcome" /> 8 <h1>Welcome</h1> 9 <p>Hello {user.name}, welcome to Inertia.</p>10 </Layout>11 )12}ご覧のとおり、Inertiaを使用すると、フロントエンドの構築時にReactまたはVueの全能力を活用しながら、Laravel搭載のバックエンドとJavaScript搭載のフロントエンドの間に軽量な橋渡しを提供できます。
サーバーサイドレンダリング
アプリケーションがサーバーサイドレンダリングを必要とするためInertiaの導入を懸念している場合でも、心配は無用です。Inertiaはサーバーサイドレンダリングのサポートを提供しています。そして、Laravel CloudやLaravel Forgeを介してアプリケーションをデプロイする場合、Inertiaのサーバーサイドレンダリングプロセスが常に実行されていることを保証するのは簡単です。
スターターキット
InertiaとVue/Reactを使用してフロントエンドを構築したい場合は、ReactまたはVueアプリケーションスターターキットを活用して、アプリケーション開発を迅速に開始できます。これらのスターターキットはどちらも、Inertia、Vue/React、Tailwind、およびViteを使用して、アプリケーションのバックエンドとフロントエンドの認証フローの雛形を作成するため、次の大きなアイデアの構築をすぐに始めることができます。
アセットのバンドル
フロントエンドをBladeとLivewireで開発するか、Vue/ReactとInertiaで開発するかにかかわらず、アプリケーションのCSSを本番環境対応のアセットにバンドルする必要があるでしょう。もちろん、VueやReactでアプリケーションのフロントエンドを構築することを選択した場合は、コンポーネントをブラウザ対応のJavaScriptアセットにバンドルする必要もあります。
デフォルトで、LaravelはアセットのバンドルにViteを利用します。Viteは、ローカル開発中に超高速のビルド時間とほぼ瞬時のホットモジュールリプレースメント（HMR）を提供します。私たちのスターターキットを使用しているものを含む、すべての新しいLaravelアプリケーションには、vite.config.jsファイルがあり、LaravelアプリケーションでViteを楽しく使用できるようにする軽量なLaravel Viteプラグインをロードします。
LaravelとViteを始める最も速い方法は、私たちのアプリケーションスターターキットを使用してアプリケーション開発を開始することです。これにより、フロントエンドとバックエンドの認証の雛形が提供され、アプリケーションを迅速に立ち上げることができます。
LaravelでViteを利用する方法に関するより詳細なドキュメントについては、アセットのバンドルとコンパイルに関する専用のドキュメントをご覧ください。