画面（フロントエンド）の作り方

Laravel は、裏側（バックエンド）の仕事を受け持つフレームワークです。ルーティング、バリデーション、キャッシュ、キュー、ファイルの保存など、Web アプリに必要な機能がそろっています。一方で、利用者が目にする画面（フロントエンド）も作る必要があります。このページでは、その作り方の選び方を説明します。

画面の作り方は大きく2つです。PHP を使って作るか、React・Svelte・Vue のような JavaScript のフレームワークを使って作るかです。

PHP で作る#

PHP と Blade#

昔の PHP アプリは、HTML の中に PHP の echo を混ぜて、データベースから取ったデータを画面に出していました。

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

Laravel でも、同じ考え方で画面を作れます。そのための道具が、ビュー（画面の見た目を書いたファイル）と Blade（Laravel のテンプレートの書き方）です。Blade は軽い書き方で、データの表示や繰り返しを短く書けます。

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

この作り方では、フォームを送ったり、ページの中で何かを押したりするたびに、サーバーから新しい HTML が届き、ブラウザがページ全体を描きなおします。いまでも、この簡単な Blade の作り方で十分なアプリはたくさんあります。

もっと動きのある画面がほしくなったとき#

利用者がアプリに求めるものは年々上がり、「もっとなめらかに動く画面」を作りたい人が増えました。そこで、最初から React・Svelte・Vue のような JavaScript のフレームワークで画面を作りはじめる人がいます。一方で、使い慣れた裏側の言語のまま、動きのある画面を作れる道具も生まれました。Rails（Ruby という言語のフレームワーク）の世界では、Turbo・Hotwire・Stimulus がそうです。Laravel の世界では、Laravel Livewire と Alpine.js が生まれました。

Livewire#

Laravel Livewire は、React・Svelte・Vue で作った画面のように、動きがあって新しい感じのする画面を、Laravel のまま作るためのフレームワークです。

Livewire では、画面の一部分を受け持つ Livewire の「コンポーネント」（何度も使う画面の部品）を作ります。コンポーネントは、画面から呼べるメソッドとデータを持てます。たとえば、数を数える「カウンター」は、次のように書けます。

<?php

use Livewire\Component;

new class extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }
};
?>

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

wire:click のような新しい HTML の属性を書くと、アプリの画面と裏側がつながります。コンポーネントの今の状態は、Blade の簡単な式で表示できます。

Livewire を使うと、Laravel の使い慣れた書き方のまま、動きのある Web アプリを作れます。Livewire を使う人は、ダイアログ（小さなウィンドウ）の表示のように、JavaScript が少しだけ要るところに、Alpine.js を「ふりかける」ように使うのが一般的です。

Laravel をはじめて使うなら、まずビューと Blade の基本を知ってから、Livewire の公式ドキュメントに進むとよいでしょう。

スターターキット#

PHP と Livewire で画面を作りたいなら、Livewire のスターターキットを使うと、アプリの出だしを早められます。

React・Svelte・Vue で作る#

Laravel と Livewire でも新しい画面は作れますが、React・Svelte・Vue のような JavaScript のフレームワークを使いたい人も多くいます。NPM（JavaScript の部品を入れる道具）にある、豊富な部品や道具を使えるからです。

ただ、Laravel とこれらを何の工夫もなく組み合わせると、いくつもの難しい問題が残ります。クライアントサイドのルーティング（ブラウザの中でページを切り替える処理）、データの受け渡し（ハイドレーション）、ログインの確認などです。ルーティングは、Next や Nuxt のようなフレームワークを使うと楽になります。しかし、データの受け渡しとログインの確認は、Laravel のような裏側のフレームワークと組み合わせるときには、やはり面倒です。

さらに、コードの置き場所が2つに分かれます。直すときも、新しい版を出すときも、デプロイ（本番のサーバーに置いて公開すること）のときも、2つの足並みをそろえる手間がかかります。乗りこえられない問題ではありません。ただ、公式ドキュメントは、効率がよくも楽しくもないやり方だとしています。

Inertia#

そこで Laravel には、両方のよいところを取る方法があります。Inertia は、Laravel のアプリと、React・Svelte・Vue の画面をつなぐ橋です。ルーティング・データの受け渡し・ログインの確認は Laravel のルートとコントローラーが受け持ち、画面は React・Svelte・Vue で作れます。しかも、コードは1つの置き場所にまとまります。

Inertia を入れたあとも、ルートとコントローラーはいつもどおり書きます。ただし、コントローラーが返すのは、Blade のテンプレートではなく、Inertia のページです。

<?php

namespace App\Http\Controllers;

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/show', [
            'user' => User::findOrFail($id)
        ]);
    }
}

Inertia のページは、React・Svelte・Vue のコンポーネントにあたり、ふつうは resources/js/pages に置きます。Inertia::render メソッドで渡したデータは、ページのコンポーネントの「props」（部品に渡す値）になります。

import Layout from '@/layouts/authenticated';
import { Head } from '@inertiajs/react';

export default function Show({ user }) {
    return (
        <Layout>
            <Head title="Welcome" />
            <h1>Welcome</h1>
            <p>Hello {user.name}, welcome to Inertia.</p>
        </Layout>
    )
}

このように、Inertia を使えば、React・Svelte・Vue の力をそのまま使いながら、Laravel の裏側と JavaScript の画面を軽くつなげます。

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

サーバーサイドレンダリング（サーバーで先に画面を作ってから返す方法）が必要なアプリでも、心配は要りません。Inertia はこれに対応しています。Laravel Cloud や Laravel Forge で公開すれば、Inertia のサーバーサイドレンダリングの処理を、いつも動かしておくのも簡単です。

スターターキット#

Inertia と React・Svelte・Vue で画面を作りたいなら、スターターキットで出だしを早められます。どのキットも、Inertia・React・Svelte・Vue、Tailwind（CSS のフレームワーク）、Vite を使って、裏側と画面のログインの流れを用意してくれます。

CSS と JavaScript をまとめる#

Blade と Livewire で作る場合も、React・Svelte・Vue と Inertia で作る場合も、たいてい CSS を本番向けのファイルにまとめる必要があります。React・Svelte・Vue を使うなら、コンポーネントも、ブラウザが読める JavaScript のファイルにまとめます。

Laravel は、既定で Vite を使って、これらをまとめます。Vite は、まとめるのがとても速い道具です。手元で開発しているあいだは、変更がほぼ一瞬で画面に映ります（この働きを HMR と呼びます）。新しく作った Laravel アプリには、スターターキットを使ったものも含めて、vite.config.js があります。このファイルが、Laravel 用の軽い Vite のプラグイン（機能を足す部品）を読みこみます。

Laravel と Vite をいちばん手早く始めるには、スターターキットから開発を始めます。ログインの画面と裏側が、最初から用意されます。

画面の作り方の比べ方#

関連するページ#

• ビュー
• Blade テンプレート
• CSS と JavaScript をまとめる（Vite）
• スターターキット