SPA on ララジャパン

SPAの開発を楽しくさせるInertia：Laravel Breeze + Inertia + Vue3 + Bootstrap5 + 日本語訳

Mon, 25 Apr 2022 05:55:31 +0900

再びSPA（シングルページアプリケーション）への挑戦です！　右のTAGSで「SPA」をクリックしてもらえばわかりますが過去にいくつか私のキャパ内でSPAに挑戦しております。しかし適用した技術がLaravelとの関連がまったくなかったり、完全にjQueryを脱却できなかったりと、どうも私の中ではしっくりこない。でも今度は違います。Inertia（イナーシャ）を使うからです。

Inertia

SPAと言えば、フロントエンドのReacdtJSやVueJSのようなjavascriptのフレームとバックエンドのapiで開発するものと思っていたのですが、Inertiaを使うとなんとLaravelのRouteやコントローラをそのまま使いSPAが可能となります。しかも、コントローラに使用するテンプレートはBladeの代わりにVueJSのコンポーネントとなります。HTMLの要素を含めてです。それゆえに、今まではBladeにおいてjQueryを使いボタンのクリックイベントとかでフロントエンドのプログラムをしていたところ、jQueryをまったく使わずにVueJSだけでプログラムできるのです。

ちなみに、Inertia、日本語直訳では「怠惰」。レイジーな私にぴったりで、これほどわくわくするものはありません。

スターターキット

このInertiaを簡単に体験してもらうために、hikaru氏の協力を得て以下の組み合わせのスターターキットを作成してみました。

Laravel Breeze

以前はLaravel UIというユーザー認証に必要な機能を含むスターターパッケージがありましたが、現在はその変わりにLaravel Breezeとなっています。ユーザーの登録、ログイン、ログアウト、パスワードリセットの対応の機能が含まれています。

Inertia

SPA対応のパッケージで、composerを通してのバックエンドのためのphpコード、npmを通してのフロントエンドのためのjavascriptが提供されています。

Vue ３

Inertiaのフロントエンドは先にも述べたようにReactJSやVueJSなどを採用しています。VueJSにおいてはバージョン２と去年にリリースされたバージョン３に対応しています。ここでは、Composition APIを使用してより理解しやすくなったバージョン３をコンポーネントに採用しています。

Bootstrap ５

超有名なCSSのフレームワークですが、バージョン５では従来のバージョンと異なり、jQueryに頼らず全て純のJavascriptで書かれています。ちなみに、Laravel Breezeでのインストールの選択においてInertiaを選択することが可能ですが、そこでインストールされるCSSフレームワークはTailwind CSSです。しかし、それはまた違うパラダイムゆえにここではお馴染みのBootstrapに書き換えています。

日本語版

最後に、日本語の開発者のために、Vueのコンポーネント、バリデーションなどにおいて日本語訳を提供しています。

インストール

以下、スターターキットのインストールの手順です。

まず以下のレポからクローンします。

$ git clone git@github.com:lotsofbytes/breeze-bootstrap.git

breeze-bootstrapというサブディレクトリーが作成されるます。この時点のmainブランチは英語版なので、dev-japanese-verにブランチに以下で変更します。

$ cd breeze-bootstrap
$ git checkout dev-japanesse-ver

以下はお馴染みのLaravelの設定です。

$ cp .env.example .env # .envを必要に応じて編集してください。
$ composer install
$ php artisan key:gen
$ npm install
$ php artisan migrate --seed

そしてウェブサーバーを立ち上げます。

$ php artisan serve

最初の画面です。

ユーザーを登録してみましょう。

エラーも表示されますね。登録が成功すると、ログイン後のダッシュボード画面になります。

Routeはどう変わった？

ブレードを使用するrouteの設定とInertiaを比較してみましょう。

これがお馴染みのブレード版です。

routes/web.php

...
Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', function () {
    return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Inertia版は、

routes/web.php

...
Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
...

基本的にview()がInertia::render()に代わっただけです。関数の引数は、ブレードからVueのコンポーネントとなっていて、ブレード同様に変数を渡すことが可能です。ちなみに、inertia()というヘルパーがあるので以下のようにも書けるようです。

Route::get('/dashboard', function () {
    return inertia('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

コントローラでの変更は？

今度はコントローラの部分、こちらはどう変わったのか、見てみましょう。

app/Http/Controllers/Auth/RegisteredUserController.php

...
class RegisteredUserController extends 
{
    /**
     * Display the registration view.
     *
     * @return \Inertia\Response
     */
    public function create()
    {
        return Inertia::render('Auth/Register');
    }

    /**
     * Handle an incoming registration request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\RedirectResponse
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => ['required', 'confirmed', Rules\Password::defaults()],
        ]);

        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        event(new Registered($user));

        Auth::login($user);

        return redirect(RouteServiceProvider::HOME);
    }
}

上はユーザー登録画面のコードですが、見ての通り、変わったのは入力画面表示においてInertia::render()となった部分だけです。情報保存のためのstore()メソッドは変更なしです。

フロントエンドのファイルはどこへ？

フロントエンドに関わるファイルは、ブレード版ではみなresources/viewsのディレクトリ下に収められていましたが、InertiaのVueコンポーネントのファイルはみなresouces/js下となります。こんな感じです。

resurces/js

.
├── app.js
├── bootstrap.js
├── Components
│   ├── ApplicationLogo.vue
│   └── ValidationErrors.vue
├── Layouts
│   ├── Authenticated.vue
│   └── Guest.vue
└── Pages
    ├── Auth
    │   ├── ConfirmPassword.vue
    │   ├── ForgotPassword.vue
    │   ├── Login.vue
    │   ├── Register.vue
    │   ├── ResetPassword.vue
    │   └── VerifyEmail.vue
    ├── Dashboard.vue
    └── Welcome.vue

ブレードがすべてなくなったわけではありません。大元として１つだけブレードファイルがあります。

resources/views/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ url(mix('css/bootstrap.css')) }}">
        <link rel="stylesheet" href="{{ url(mix('css/app.css')) }}">

        <!-- Scripts -->
        @routes
        <script src="{{ url(mix('js/app.js')) }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

@inertiaの部分に先のVueのコンポーネントから作成されたHTMLが入り込み、アクセスしたページにより内容が変わります。

Vueのファイルを変更したら

このスターターキットをインストールしたら、まずはVueのコンポーネントをいじってみたいはず。ブレードでは変更して保存したら、画面を更新すれば変更がすぐに反映されます。同様なことをしたいなら、以下のように、

$ npm run watch

を実行しておきます。この実行は通常のコマンドのようにすぐに終了するのではなく常に走り続けます。それゆえに、関わるファイルが変更されると自動的に、Laravel-mixを通してcssやjsファイルをコンパイルしてくれます。

そこで表示されたファイルは、publicのディレクトリ下のファイルとして保存されます。コンパイルが完了したら、ブレードと同様に画面を更新してcssやjsファイルを読み直すと変更が反映されます。

最終的には、以下の実行で最適化、最小化されたProduction Readyのファイルの作成が可能です。

$ npm run prod

最後に

Inertiaを使っての開発がより楽しくなるように、いろいろ将来の投稿を考えています。お楽しみに。

Turbolinks、POST成功後のリダイレクト

Sun, 15 Dec 2019 00:53:46 +0900

前回のTurbolinks、再びにおいて掲載した記事に、修正が必要なことに気づきました。登録フォームのPOSTでバリデーションエラーが出て同画面に戻るときは問題ないのですが、エラーがなく登録完了してホーム画面へリダイレクトされたときが問題です。

以下のように、画面はホーム画面の中身となっていますが、ブラウザのURLがhomeであるべきところ、registerのままでした。

これを修正するには、まずブレードのインラインのjsから、

resources/views/auth/register.blade.php

...
@section('script')

    $(document).on('turbolinks:load', function() {
      $("form").on("submit", function(event) {
        event.preventDefault();

        $.ajax({
          url: '/register',
          type: 'POST',
          dataType: 'html',
          processData: false,
          contentType: false,
          cache: false,
          data: new FormData($("form")[0])
        }).done(function(response, status, $xhr) {

          var redirect = $xhr.getResponseHeader('Turbolinks-Location');

          if (redirect) { // 投稿成功でリダイレクトしたとき
            Turbolinks.visit(redirect);
          } else { // バリデーションエラーのとき
            var referrer = window.location.href;
            Turbolinks.controller.cache.put(referrer, Turbolinks.Snapshot.wrap(response));
            Turbolinks.visit(referrer, { action: 'restore' });
          }
        });
      });
    });

@endsection

変更は、投稿で成功したときを認識して、Turbolinks.visit()をリダイレクト先でコールするところです。

さて、問題は投稿が成功したか否かをどう判定するか、です。

それには、サーバーサイドでPOSTが生成するレスポンスのヘッダーにリダイレクト先を含む項目を追加してクライアント（ブラウザ）にコミュニケートする必要があります。上の例では、ヘッダーにTurbolinks-Locationの項目に値があれば、リダイレクトが必要という条件文になりました。その情報がなければ、バリデーションエラーが発生したので同じ画面を表示します。

さて、POSTのレスポンスにこの特別なヘッダーの情報を追加するには、以下のようにコントローラを編集します。

app/Http/Controllers/Auth/RegisterController.php

namespace App\Http\Controllers\Auth;

use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Foundation\Auth\RegistersUsers;

// register()で使用される以下の２行の宣言が必要！
use Illuminate\Http\Request;
use Illuminate\Auth\Events\Registered;

class RegisterController extends Controller
{
    use RegistersUsers;
...
   /**
     * Handle a registration request for the application.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function register(Request $request)
    {
        $this->validator($request->all())->validate();

        event(new Registered($user = $this->create($request->all())));

        $this->guard()->login($user);

//  オリジナルのコード
//        return $this->registered($request, $user)
//                        ?: redirect($this->redirectPath());

        return response('success', 200)
            ->header('Turbolinks-Location', $this->redirectPath());

    }
}

RegistersUsersのトレイトで定義されている、register()メソッドをコピーペーストして上書きします。ヘッダーのTurbolinks-Locationには、リダイレクト先のURLが含まれることになります。ちなみに、response()で指定している、‘success’の文字列は使用しないのでなんでもよいです。空でも。

これで登録を実行すると、POSTのヘッダーには以下のように, Turbolinks-Locationは/homeの値となります。そして、その値が先のインラインのjsで抽出されて、Turbolinks.visit()に渡されてbodyタグの中身を取り換えてブラウザのURLを変更します。

HTTP/1.1 200 OK
Date: Fri, 13 Dec 2019 17:31:21 GMT
Server: Apache/2.4.38 (Fedora) OpenSSL/1.1.1b
X-Powered-By: PHP/7.2.16
Cache-Control: no-cache, private
Turbolinks-Location: /home
...

リダイレクト先には、Turbolinks-Locationというヘッダーの変数名を使用しましたが、他と重複がなければどんな名前でもよいです。サーバーとクラインとで一致している限り。

コントローラを編集しなければならない部分が残念ですが、たいした編集ではないので、私の中ではやはりサイトのSPA化ではまだまだコストパフォーマンスが大きい技術です。

Turbolinks、再び

Tue, 03 Dec 2019 00:44:58 +0900

ほぼ２年前にTurbolinksを紹介しました。全ページロードのウェブサイトを高速のSPA(シングルページアプリ)に変えてくれます。しかも、Laravelのフロントエンドのブレードやバックエンドのコントローラーをまったく変えることなしです。今回は、再びこのTurbolinksに戻って、まずcdnを使わずにnpmを使用してトランスパイルします。そして前回不可能と思っていたajaxによるフォームのPOST投稿もSPA化します。

SPA移行へのコストが非常に低いTurbolinks

ある程度大きな規模のプロジェクトを抱えていると、開発テクノロジー進歩によりプログラムを書き直す必要性が出てきます。それはまったく新しいデバイスへの対応（例：bootstrap）であったり、プログラムの管理性を高めるためのフレームワークの採用（例：Laravel）であったりします。プロジェクトが大きいほど、書き直しには時間とコストがかかります。スマホの対応ならお客さんにとっては理解されやすいですが、フレームワークの採用では外観は何も変わらないときもあるので、何か月（あるいは何年）もかけて書き直す必要性を説くのは大変です。

今回のSPAの採用も同じ状況です。SPAの採用の目的はユーザー体験の改善です。画面のリフレッシュが行われないのでページの遷移がスムーズで高速です。それだけで採用の説得は十分ですが、問題はSPAへ移行のためのコストが非常に高いことです。まず、すでにたくさんある、しかも新しいのが次々と登場する、SPAのJavascriptのフレームワークの中で、どれが有望性があるか長期的に管理されるかを見極めるために時間が必要なこと、さらにどれかに決めたらそれを学習して巧みになること、その上で既存のプロジェクトをSPAへ移行する開発です。これらを考慮すると、ReactJS, AngularJS, VueJSなどを採用してSPAに書き直すには莫大な時間、つまりコストがかかります。それらのフレームワークの経験に乏しい私が持つ小さい開発チームだと、特に。

そこで輝くのがTurbolinks!

Turbolinksを採用すると、ウェブページ内に同じサイト内のリンク、つまりがあると、そのリンクがクリックされたら、Turbolinksはajaxでそのページを取ってきてその中ののコンテンツを現在のページのものと取り換えます。は同じなので、全ページ更新とはならず、SPA特有のスムーズなページ遷移となります。しかも、ブラウザのURLはあたかも全ページ更新と同様に変更されるし、遷移したページ内のJavascriptも実行されます。さらに、ブラウザのWeb History APIを利用してキャッシュからの「戻る」ボタンで前のページの出力にも対応しています。これらは、既存のサーバーサイドのプログラムを変更することなく、次に説明する、npmでパッケージを追加するだけでできちゃいます。夢のような話と思いませんか？

npmでパッケージを追加

このTurbolinksを前回紹介したときは、

<html lang="ja">                                                                                                                                                                                                   
  <head>                                                                                                                                                                                                           
    <meta charset="utf-8">                                                                                                                                                                                         
    <title>Turbolinks</title>                                                                                                                                                                                      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.3/turbolinks.js"></script>    
..

のようにCDNを使う設定でした。

今回は、npmでパッケージを追加して（関連記事）して、npmでトランスパイルします。

まず、コマンドラインでパッケージの追加。

$ npm install turbolinks --save-dev

次に、bootstrap.jsに以下の行を追加して、このパッケージをロードします。

resources/js/bootstrap.js

...
var Turbolinks = require("turbolinks");
Turbolinks.start();

最後にトランスパイルの実行です（ライブバージョンは、npm run prod）。

$ npm run dev

これでホーム画面のリンクから以下の会員登録画面にアクセスすると、以下のようにすでにSPA化されています。画面の下は、FirefoxのInspectorのパネルですが、そこのxhrはXMLHttpRequest (XHR) のことでいわゆるajaxの実行のことです。

フォームの投稿のSPA化

さて、turbolinksは、リンクのようなGETに対しては自動にSPA化してくれますが、POSTは自動で対応していません。同じ登録画面で、入力して意図的にエラーを出すようにして、「Register」ボタンを押すと、以下のように通常の入力データの投稿のPOSTとエラーの出力のGETのアクションが起こります。

見ての通り、それらのアクションはajaxではありません。通常の全ページロードです。

turbolinksのレポのgithubサイトには、フォームの投稿後のリダイレクト、つまり入力が成功して違う画面に（例：ホーム画面）に飛ぶことに関して、ajaxを使用しての対応に関して書かれている部分があります。しかし、上のようにバリデーションエラーが発生して入力画面に戻りエラーを出力する場合は書かれていません。

つい最近まで、私も「そういうものなのか」「まあGETだけSPAになるだけでも結構」と思っていました。しかし、より調査したところ、Rubyではエラーの際に画面をレンダーするパッケージがある、ということを知りました。ちなみに、TurbolinksはRuby in Railsを開発したBaseCampが発明したものなので、とてもRubyとの仲が良い。

Rubyで可能なら、どこかにそれに対応するJavascriptの例があるのでは、と思い、以下にそれらしきディスカッションを見つけました。

https://github.com/turbolinks/turbolinks/issues/85#issuecomment-338784510

これをもとに、会員登録をSPA化してみます。

編集するのは以下のブレードです。

resources/views/auth/register.blade.php

...
@section('script')

    $(document).on('turbolinks:load', function() { // Turbolinksがロード完了のイベントにおいて、
      $("form").on("submit", function(event) {
        event.preventDefault();

        $.ajax({　// jqueryのajax関数
          url: '/register', // データ送信宛てのURL
          type: 'POST',
          dataType: 'html',
          processData: false,
          contentType: false,
          cache: false,
          data: new FormData($("form")[0])　// フォームのデータを送信
        }).done(function(response, status, $xhr) {
          if (response && ($xhr.getResponseHeader('Content-Type') || '').substring(0, 9) === 'text/html') {
            var referrer = window.location.href; //　現在のURLを取得
            Turbolinks.controller.cache.put(referrer, Turbolinks.Snapshot.wrap(response));　// キャッシュにレスのデータを入れる
            Turbolinks.visit(referrer, { action: 'restore' });　// キャッシュを呼び出す
          }
        });
      });
    });

@endsection

そして、このscriptのセクションは、レイアウトのブレードに入れ込みます。

resources/views/layouts/app.blade.ophp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <script type="module">
        @yield('script')
    </script>
...

これで再度、登録画面での入力エラーの実行をすると、

今度は、documentではなくxhrでの取得になっています。

さらに、登録成功のときは、以下のようにホーム画面への遷移もSPA化されています。

前回のVue.js：バックエンドのバリデーションを使うと、まったく同じ動作です。比べてみてください。

turbolinksで画面の表示をスピードアップ (2)