メインコンテンツまでスキップ

フロントエンド

はじめに​

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

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

PHP の使用​

PHP と Blade​

過去には、ほとんどの PHP アプリケーションは、リクエスト中にデータベースから取得されたデータをレンダリングするために、単純な HTML テンプレートと PHP の echo ステートメントを交ぜた方法で 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 "コンポーネント"を作成します。例えば、単純な "Counter" コンポーネントは次のようになります：

<?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でのフロントエンド開発を革新し、現代的で動的なWebアプリケーションを構築する際にLaravelの快適さの中で作業することを可能にしました。通常、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フロントエンドの間のギャップを埋め、Laravelのルートとコントローラを使用して、クライアントサイドのルーティング、データのハイドレーション、認証を行いながら、単一のコードリポジトリ内でVueやReactを使用して完全なモダンなフロントエンドを構築することができます。このアプローチにより、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を使用すると、LaravelベースのバックエンドとJavaScriptベースのフロントエンドの間に軽量なブリッジを提供しながら、フロントエンドを構築する際にVueまたはReactの全力を活用することができます。

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

アプリケーションがサーバーサイドレンダリングを必要とするために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.config.js ファイルが含まれており、Laravel アプリケーションで Vite を使用する際に便利な軽量の Laravel Vite プラグインが読み込まれています。

Laravel と Vite を使用してアプリケーションの開発を開始する最速の方法は、Laravel Breeze を使用してアプリケーションの開発を開始することです。Laravel Breeze は、フロントエンドとバックエンドの認証のひな形を提供することで、アプリケーションの立ち上げをスムーズにします。

注記

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