サイトを更新しています。 数日間、レイアウトや翻訳に不具合が出ることがあります。ドキュメントは引き続きご利用いただけます。表示が崩れている場合は、後ほど再読み込みしてください。

ドキュメント
L Laravel ✓ L intervention/image ✓
10.x ✓
🇷🇺 Русский ✓🇪🇸 Español ✓🇯🇵 日本語 ✓
ログイン
ホーム Laravel 10.x フロントエンド

フロントエンド

10.x 2026年3月7日

#はじめに

Laravelは、ルーティング、バリデーション、キャッシュ、キュー、ファイルストレージなど、モダンなウェブアプリケーションを構築するために必要な機能をすべて提供するバックエンドフレームワークです。しかし、開発者に強力なフロントエンド構築の手法を含む美しいフルスタック体験を提供することも重要だと考えています。

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テンプレートを使ってこのようにフロントエンドを構築するのに適しています。

#期待の高まり

しかし、ウェブアプリケーションに対するユーザーの期待が高まるにつれて、多くの開発者はより洗練されたインタラクションを持つ動的なフロントエンドを構築する必要性を感じています。そのため、一部の開発者はVueやReactのようなJavaScriptフレームワークを使ってフロントエンドを構築し始めています。

一方で、慣れ親しんだバックエンド言語を使い続けたい開発者は、主にバックエンド言語を活用しつつモダンなウェブアプリケーションの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はwire:clickのような新しいHTML属性を使ってLaravelアプリケーションのフロントエンドとバックエンドをつなげます。また、Bladeの簡単な式でコンポーネントの現在の状態をレンダリングできます。

多くの人にとって、LivewireはLaravelでのフロントエンド開発を革新し、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フロントエンドの橋渡しをし、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
{
    /**
     * 指定されたユーザーのプロフィールを表示します。
     */
    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アプリケーション、特にスターターキットを使った場合は、Laravel用の軽量なViteプラグインを読み込むvite.config.jsファイルが含まれており、LaravelアプリケーションでのViteの利用が快適です。

LaravelとViteを使い始める最も速い方法は、フロントエンドとバックエンドの認証スキャフォールドを提供する最もシンプルなスターターキットであるLaravel Breezeを使って開発を始めることです。

Примечание

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

← 前へ
ディレクトリ構成