PHP

【完全攻略】JavaScriptゼロでリアルタイムUI！Laravel「Folio × Volt」超速チュートリアル

 

  1. 1. なぜ今 Folio + Volt か？
  2. 2. 環境準備クイックスタート
  3. 3. Folio：ページを置くだけルーティング
  4. 4. Volt：PHP + Blade 同居の SFC
  5. 5. CRUD デモ（Post モデル）
  6. 6. React/Inertia vs Volt 比較
  7. 7. 失敗しない Tips
  8. 8. Fly.io デプロイ手順
  9. 9. まとめ

1. なぜ今 Folio + Volt か？

Laravel 10（LTS）で正式サポートされた Folio と Volt は、

  • ファイルベースルーティング：Next.js のように resources/views/pages/ 配下にファイルを置くだけ
  • Livewire 3 の DOM 差分エンジンで SPA ライクに更新
  • JavaScript ほぼ 0 行 でもリアルタイム UI を構築

英語圏では 2024 夏の発表直後から爆発的人気となり、laracasts でも特集連載が組まれています。一方、日本語記事はまだ希少（Qiita/Zenn で数件）——今書けば SEO ブルーオーシャンです。

2. 環境準備クイックスタート（所要3分）

# 1) 新規 Laravel プロジェクト
composer create-project laravel/laravel folio-volt-demo
cd folio-volt-demo

# 2) 必要パッケージ
composer require livewire/livewire laravel/folio livewire/volt

# 3) Folio ルーティングをインストール
php artisan folio:install

# 4) 開発サーバ起動
php artisan serve
コマンド目的
folio:installFolio のサービスプロバイダ／Blade ディレクトリを設定
livewire/livewireLivewire 3 エンジンを導入（JS 架橋を内部で管理）
livewire/voltBlade + PHP が同居する「.volt.php」ファイルを解釈

3. Folio：ページを置くだけルーティング

Next.js と同様、フォルダ構造 = ルーティング規則です。例：

  • resources/views/pages/about.blade.php ⇒ /about
  • resources/views/pages/blog/[slug].blade.php ⇒ /blog/{slug}

3.1 動作確認

<!-- resources/views/pages/about.blade.php -->
<h1>Folio で作る About ページ</h1>
<p>URL は自動的に /about になりました。</p>

ファイル保存後、ブラウザで http://127.0.0.1:8000/about にアクセス → ページ表示。ルート登録は不要です。

4. Volt：PHP + Blade 同居のシングルファイル Livewire

Volt は .volt.php 拡張子の中に PHP ロジックを記述し、Blade と同居させる“シングルファイルコンポーネント”です。

4.1 カウンター例（JSゼロ）

<!-- resources/views/pages/counter.volt.php -->
@php
  use function Livewire\Volt\{state};
  state(['count' => 0]);
  $inc = fn() => ++$count;
@endphp

<button wire:click="$inc">+</button>
<span>{{ $count }}</span>

保存後 /counter へアクセスし、+ ボタンを連打 → 数字が即時更新。JavaScriptは 0 行。

4.2 仕組み

  • state()：Livewire のリアクティブ変数を宣言
  • wire:click：クリックイベントで PHP クロージャ $inc を呼ぶ
  • DOM 差分は Livewire が Ajax & Diff Patch で自動適用

5. CRUD デモ：投稿管理アプリを 100 行以下で

5.1 モデル & マイグレーション

php artisan make:model Post -m

<!-- database/migrations/xxxx_create_posts_table.php -->
Schema::create('posts', function (Blueprint $table) {
  $table->id();
  $table->string('title');
  $table->text('body');
  $table->timestamps();
});

php artisan migrate

5.2 一覧ページ posts/index.volt.php

<!-- resources/views/pages/posts/index.volt.php -->
@php
  use App\Models\Post;
  $posts = Post::latest()->get();
@endphp

<h1>Posts</h1>
<ul>
@foreach ($posts as $post)
  <li><a href="/posts/{{ $post->id }}">{{ $post->title }}</a></li>
@endforeach
</ul>
<a href="/posts/create">New Post</a>

5.3 作成フォーム posts/create.volt.php

<!-- resources/views/pages/posts/create.volt.php -->
@php
  use Livewire\Volt\{state, validate};
  state(['title' => '', 'body' => '']);

  $save = function () {
    validate([
      'title' => 'required',
      'body'  => 'required',
    ]);
    \App\Models\Post::create(['title' => $title, 'body' => $body]);
    return redirect('/posts');
  };
@endphp

<h2>Create Post</h2>
<form wire:submit.prevent="$save">
  <input type="text" placeholder="Title" wire:model="title"><br>
  <textarea wire:model="body"></textarea><br>
  <button>Save</button>
</form>
LOC(行)役割
3state でフォームデータをリアクティブ化
5–10バリデーション & 保存ロジックをクロージャで定義
12–18wire:model 双方向バインディング + wire:submit

これだけで SPA ライクな CRUD が完成。JavaScript は 1 行も書いていません。

6. React/Inertia vs Volt コード比較

機能React + InertiaVolt差分
Todo 追加145 LOC68 LOC-53%
バリデーションJS + API 呼び出しPHP クロージャ 1 行簡素
リアルタイム更新WebSocket or PollingLivewire 内蔵設定不要

Volt の方が圧倒的に行数が少なく、メンテナンスコストを削減できます。

7. 失敗しない実装 Tips

  • ページ階層とネスト：Folio では _ 付きディレクトリでレイアウト共有可。
  • Turbo & Volt 競合：Hotwire を併用する場合は form submit イベントを Livewire 優先に。
  • X‑SRF 対策： を Blade 内に必ず埋め込む。

8. Fly.io デプロイ（HTTPS 無料枠）

fly launch --postgresql
fly secrets set APP_KEY=$(php -r 'echo base64_encode(random_bytes(32));')
fly deploy
  • HTTPS 証明書は自動で付与
  • 初回無料クレジットで検証 OK

9. まとめ

Laravel Folio + Volt は JS フレームワーク不要で SPA 感 を実現する新潮流です。 日本語情報が少ない今こそ、業務アプリや PoC に早期導入し、開発スピードを 3 倍に高めましょう。

CRUD Folio JavaScriptゼロ Laravel PHP SPA Volt
こちらもおすすめ！！