Laravel初心者向け！2024年フロントエンド開発入門

Laravelは、バックエンドフレームワークです。
そして、現代のWebアプリケーションを構築するために必要な以下機能を提供します。

ルーティング
バリデーション
キャッシュ
キュー
ファイルストレージ

しかし、アプリケーションのフロントエンドについても考慮されています。
Laravelでアプリケーションを構築する際、フロントエンド開発に取り組む主な方法は二つあります。

PHPの利用
JavaScriptフレームワーク（Vue・React）の利用

これらを以下で説明していきます。
最後に、「アセットのバンドル」についても記載しています。

PHPの利用

PHPベースでの開発の場合、以下のキーワードがポイントになります。

PHP & Blade
Livewire
Starter Kits

それぞれを以下で説明します。

PHP & Blade

次のようなコードに見覚えはありませんか？

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

HTMLタグの中にPHPのコードが混入しているヤツです。
このHTMLレンダリングアプローチが、LaravelにおいてはビューとBladeを使用して実現できます。

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

Bladeは、非常に軽量なテンプレート言語です。
データの表示、データの反復処理などに便利で短い構文を提供します。

Bladeは、SmartyやTwigの仲間だと考えれば理解しやすいかもしれません。

Livewire

Laravel Livewireは、動的でモダンなフロントエンドをLaravelで構築するためのフレームワークです。
PHPのみでVueやReactのようなJavaScriptフレームワークの機能を実現します。

もう少し説明すると、開発者はPHPのみでコーディングができます。
裏ではLivewireにより、JavaScriptが自動的に生成されていると考えればイメージしやすいでしょう。

実際のコードを見れば、もっとイメージができるはずです。
例えば、シンプルなカウンター機能のコードを見てみましょう。

まず、カウンター機能用のコンポーネントと言うモノを用意します。

<?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');
    }
}

そして、その機能のコンポーネントに対応するテンプレートは次のように書かれます。
Livewireの利用では、Bladeを用いるのが前提となります。

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

Livewireにより、「wire:click」というHTML属性を書くことを可能になっています。
これにより、Laravelアプリケーションのフロントエンドとバックエンドを接続します。

多くの人にとって、LivewireはLaravelでのフロントエンド開発を革命的に変えました。
これにより、Laravelの快適な環境内でモダンで動的なウェブアプリケーションを構築できるようになります。

なお、Alpine.jsを用いれば独自にJavaScriptをコーディングすることが可能です。

Starter Kits

Starter Kitsは、PHPとLivewireによるフロントエンド開発を支援します。
具体的には、アプリケーションにとって欠かせない認証フローの部分が主な対象となります。

Starter Kitsでは、ユーザー登録を含む認証機能の部分を丸ごと用意してくれているということです。
バックエンドとフロントエンドを両方を含んでいます。

公式では、以下の二つのStarter Kitsが記載されています。

Jetstream
Breeze

Breezeは、Jetstreamの簡易版と言えるようです。

JavaScriptフレームワーク（Vue・React）の利用

LaravelとLivewireにより、モダンなフロントエンドを構築することが可能です。
それでも、VueやReactのようなJavaScriptフレームワークを利用する開発者は多くいます。

しかし、LaravelとVueやReactを組み合わせるのは決して簡単なことではありません。
クライアントサイドにおける以下のような複雑な問題を解決する必要が生じます。

ルーティング
データハイドレーション（データの受け渡し）
認証

さらに、開発者は二つの別々のコードリポジトリを維持する必要が出てきます。
しばしば、両方のリポジトリにわたるメンテナンス、リリース、デプロイメントを調整する必要があります。

これらの問題を解決する手段がLaravelには用意されています。
それが、Inertiaです。

Inertiaは、LaravelアプリケーションとモダンなVueまたはReactフロントエンドの間のギャップを埋めます。
VueやReactを使用して完全に機能するモダンなフロントエンドを構築しながら、
ルーティング、データハイドレーション、認証にLaravelのルートとコントローラーを利用できるようになります。

LaravelアプリケーションにInertiaをインストールした後、通常通りルートとコントローラーを書きます。
しかし、コントローラーから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::renderメソッドを使い、レンダリングするVue/Reactのコンポーネントを指定します。
その指定されたコンポーネントは、resources/js/Pagesディレクトリ内に保存されます。

<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>

「resources」ディレクトリについては、次の記事内で説明しています。