フロントエンド

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

はじめに

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

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

PHPの使用

PHPとBlade

過去において、ほとんどのPHPアプリケーションは、リクエスト中にデータベースから取得されたデータをレンダリングするPHPの`echo`文が散りばめられた単純なHTMLテンプレートを使用して、HTMLをブラウザにレンダリングしていました。

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

Laravelでは、ビューとBladeを使用して、このHTMLレンダリングのアプローチを依然として実現できます。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アプリケーションのフロントエンドとバックエンドを接続する`wire:click`などの新しいHTML属性を記述できます。さらに、シンプルなBlade式を使用してコンポーネントの現在の状態をレンダリングできます。

多くの人にとって、LivewireはLaravelでのフロントエンド開発に革命をもたらし、Laravelの快適性を維持しながら、モダンで動的なWebアプリケーションを構築できるようになりました。一般的に、Livewireを使用する開発者は、ダイアログウィンドウをレンダリングするためなど、必要な場合にのみJavaScriptをフロントエンドに「散布」するためにAlpine.jsも使用します。

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を使用して資産をバンドルします。Viteは非常に高速なビルド時間と、ローカル開発中のほぼ瞬時のホットモジュール置換(HMR)を提供します。当社のスターターキットを使用するアプリケーションを含む、すべての新しいLaravelアプリケーションには、ViteをLaravelアプリケーションで使いやすくする軽量なLaravel Viteプラグインを読み込むvite.config.jsファイルがあります。

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

LaravelとViteの使用方法に関する詳細なドキュメントについては、資産のバンドルとコンパイルに関する専用のドキュメントをご覧ください。