はじめに

はじめに
PHPの使用
Vue / Reactの使用
- Inertia
  - サーバーサイドレンダリング
- スターターキット
アセットのバンドル

Laravelは、ルーティング、バリデーション、キャッシング、キュー、ファイルストレージなど、現代のWebアプリケーションを構築するために必要なすべての機能を提供するバックエンドフレームワークです。しかし、私たちは開発者に美しいフルスタック体験を提供することが重要だと考えており、アプリケーションのフロントエンドを構築するための強力なアプローチを含んでいます。

Laravelを使用してアプリケーションを構築する際のフロントエンド開発には主に2つの方法があり、どのアプローチを選択するかは、PHPを活用してフロントエンドを構築したいのか、VueやReactなどのJavaScriptフレームワークを使用したいのかによって決まります。以下でこれらのオプションについて説明し、アプリケーションのフロントエンド開発に最適なアプローチを選択できるようにします。

PHPの使用

PHPとBlade

過去には、ほとんどのPHPアプリケーションは、リクエスト中にデータベースから取得したデータをレンダリングするPHP echoステートメントを交えたシンプルなHTMLテンプレートを使用して、ブラウザにHTMLをレンダリングしていました：

<div>
   <?php foreach ($users as $user): ?>
   Hello, <?php echo $user->name; ?> <br />
   <?php endforeach; ?>
</div>

Laravelでは、このHTMLをレンダリングするアプローチは、ビューとBladeを使用して依然として実現可能です。Bladeは、データを表示したり、データを反復処理したりするための便利で短い構文を提供する非常に軽量なテンプレート言語です：

<div>
   @foreach ($users as $user)
   Hello, {{ $user->name }} <br />
   @endforeach
</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「コンポーネント」を作成します。たとえば、シンプルな「カウンター」コンポーネントは次のようになります：

<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
   public $count = 0;
   public function increment()
   {
   $this->count++;
   }
   public function render()
   {
   return view('livewire.counter');
   }
}

そして、カウンターの対応するテンプレートは次のように記述されます：

<div>
   <button wire:click="increment">+</button>
   <h1>{{ $count }}</h1>
</div>

ご覧のとおり、Livewireを使用すると、Laravelアプリケーションのフロントエンドとバックエンドを接続する新しいHTML属性（wire:clickなど）を書くことができます。さらに、シンプルなBlade式を使用してコンポーネントの現在の状態をレンダリングできます。

多くの人にとって、LivewireはLaravelでのフロントエンド開発を革命的に変え、現代的で動的なWebアプリケーションを構築しながらLaravelの快適さを保つことを可能にしました。通常、Livewireを使用する開発者は、ダイアログウィンドウをレンダリングするために必要な場合などに、Alpine.jsを使用してフロントエンドに「スプリンクル」JavaScriptを追加します。

Laravelに不慣れな方には、ビューとBladeの基本的な使用法に慣れることをお勧めします。その後、公式のLaravel Livewireドキュメントを参照して、インタラクティブなLivewireコンポーネントでアプリケーションを次のレベルに引き上げる方法を学んでください。

スターターキット

PHPとLivewireを使用してフロントエンドを構築したい場合は、BreezeまたはJetstreamのスターターキットを活用してアプリケーションの開発を迅速に開始できます。これらのスターターキットは、BladeとTailwindを使用して、アプリケーションのバックエンドとフロントエンドの認証フローをスキャフォールディングしますので、次の大きなアイデアの構築をすぐに始めることができます。

Vue / Reactの使用

LaravelとLivewireを使用して現代的なフロントエンドを構築することは可能ですが、多くの開発者は依然としてVueやReactのようなJavaScriptフレームワークの力を活用することを好みます。これにより、開発者はNPMを介して利用可能なJavaScriptパッケージやツールの豊富なエコシステムを活用できます。

しかし、追加のツールなしでLaravelとVueまたはReactを組み合わせると、クライアントサイドのルーティング、データの水和、認証など、さまざまな複雑な問題を解決する必要があります。クライアントサイドのルーティングは、NuxtやNextのような意見を持ったVue / Reactフレームワークを使用することで簡素化されることが多いですが、データの水和と認証は、Laravelのようなバックエンドフレームワークとこれらのフロントエンドフレームワークを組み合わせる際に依然として複雑で厄介な問題です。

さらに、開発者は2つの別々のコードリポジトリを維持する必要があり、しばしば両方のリポジトリ間でメンテナンス、リリース、デプロイを調整する必要があります。これらの問題は克服できないものではありませんが、私たちはそれがアプリケーションを開発するための生産的または楽しい方法ではないと考えています。

Inertia

幸いなことに、Laravelは両方の世界の最良の部分を提供します。Inertiaは、Laravelアプリケーションと現代のVueまたはReactフロントエンドのギャップを埋め、VueまたはReactを使用して本格的で現代的なフロントエンドを構築しながら、ルーティング、データの水和、認証のためにLaravelのルートとコントローラーを活用できるようにします — すべて単一のコードリポジトリ内で。このアプローチにより、LaravelとVue / Reactの両方の完全な力を享受しながら、どちらのツールの機能も損なうことなく利用できます。

InertiaをLaravelアプリケーションにインストールした後は、通常通りルートとコントローラーを記述します。ただし、コントローラーからBladeテンプレートを返す代わりに、Inertiaページを返します：

<?php
namespace App\Http\Controllers;
use App\Http\Controllers\Controller;
use App\Models\User;
use Inertia\Inertia;
use Inertia\Response;
class UserController extends Controller
{
   /**
     * Show the profile for a given user.
   */
   public function show(string $id): Response
   {
   return Inertia::render('Users/Profile', [
   'user' => User::findOrFail($id)
   ]);
   }
}

Inertiaページは、通常、アプリケーションのresources/js/Pagesディレクトリに保存されるVueまたはReactコンポーネントに対応します。Inertia::renderメソッドを介してページに渡されるデータは、ページコンポーネントの「props」を水和するために使用されます：

<script setup>
import Layout from '@/Layouts/Authenticated.vue';
import { Head } from '@inertiajs/vue3';
const props = defineProps(['user']);
</script>
<template>
   <Head title="User Profile" />
   <Layout>
   <template #header>
   <h2 class="font-semibold text-xl text-gray-800 leading-tight">
   Profile
   </h2>
   </template>
   <div class="py-12">
   Hello, {{ user.name }}
   </div>
   </Layout>
</template>

ご覧のとおり、Inertiaを使用すると、フロントエンドを構築する際にVueまたはReactの完全な力を活用でき、Laravel駆動のバックエンドとJavaScript駆動のフロントエンドの間に軽量のブリッジを提供します。

サーバーサイドレンダリング

アプリケーションがサーバーサイドレンダリングを必要とするため、Inertiaに飛び込むことに不安がある場合でも心配はいりません。Inertiaはサーバーサイドレンダリングサポートを提供しています。また、Laravel Forgeを介してアプリケーションをデプロイする際には、Inertiaのサーバーサイドレンダリングプロセスが常に実行されていることを簡単に確認できます。

スターターキット

InertiaとVue / Reactを使用してフロントエンドを構築したい場合は、BreezeまたはJetstreamのスターターキットを活用してアプリケーションの開発を迅速に開始できます。これらのスターターキットは、Inertia、Vue / React、Tailwind、およびViteを使用して、アプリケーションのバックエンドとフロントエンドの認証フローをスキャフォールディングしますので、次の大きなアイデアの構築をすぐに始めることができます。

アセットのバンドル

BladeとLivewireを使用してフロントエンドを開発するか、Vue / ReactとInertiaを使用して開発するかにかかわらず、アプリケーションのCSSを本番用のアセットにバンドルする必要があるでしょう。もちろん、VueまたはReactでアプリケーションのフロントエンドを構築することを選択した場合、コンポーネントをブラウザ用のJavaScriptアセットにバンドルする必要もあります。

デフォルトでは、Laravelはビートを使用してアセットをバンドルします。Viteは、ローカル開発中の超高速ビルド時間とほぼ瞬時のホットモジュール置換（HMR）を提供します。新しいLaravelアプリケーション、特に私たちのスターターキットを使用しているアプリケーションでは、Laravel Viteプラグインを読み込むvite.config.jsファイルが見つかります。これにより、LaravelアプリケーションでViteを楽しく使用できます。

LaravelとViteを使用して始める最も簡単な方法は、Laravel Breezeを使用してアプリケーションの開発を開始することです。これは、フロントエンドとバックエンドの認証スキャフォールディングを提供する最もシンプルなスターターキットです。

ViteをLaravelで利用するための詳細なドキュメントについては、アセットのバンドルとコンパイルに関する専用ドキュメントをご覧ください。