Laravel x Inertia.js 現代のモノリス によるお手軽 SPA 開発

Transcript

1. Laravel x Inertia.js "現代のモノリス"によるお手軽SPA開発 PHPカンファレンス福岡 2023 2023/06/24 tutida / 内田 大順 1
2. 自己紹介 内田 大順 Uchida Tomoyuki - ID - GitHub：tutida - Twitter：@_tutida_ - Work at - 株式会社 Fusic （フュージック） - プリンシパルエンジニア - Skill - 本日の資料 - https://speakerdeck.com/tutida/ - 最近のこと - 今日(6/24)が奥さんの誕生日と気づかずプロポーザルを申 し込んでいた 2
3. 01 最近の仕事で思うこと
4. 最近の仕事で思うこと 顧客がWebアプリに求める "普通" のUI/UXのレベルが上がってきている • 「インスタの◦◦◦◦みたいな動き方が理想です」 • 「Netflixの◦◦◦◦みたいな機能が欲しいです」 • 「条件を入れるごとに、自動的に絞り込んでほしい」 などなど 4
5. 最近の仕事で思うこと 顧客がWebアプリに求める "普通" のUI/UXのレベルが上がってきている • 「インスタの◦◦◦◦みたいな動き方が理想です」 • 「Netflixの◦◦◦◦みたいな機能が欲しいです」 • 「条件を入れるごとに、自動的に絞り込んでほしい」 などなど 5 UI/UXの要件を満たすため、SPAの構築の機会が増えている
6. 02 Laravel での SPA
7. Laravel での SPA API APIサーバ フロントの何か LaravelをAPIサーバとして利用すると 7
8. Laravel での SPA • バックエンド / フロントエンドが疎結合 • APIスキーマによる型制約やモック • それぞれの開発に集中できる API APIサーバ フロントの何か LaravelをAPIサーバとして利用すると 良い点 8
9. Laravel での SPA • バックエンド / フロントエンドが疎結合 • APIスキーマによる型制約やモック • それぞれの開発に集中できる API APIサーバ フロントの何か LaravelをAPIサーバとして利用すると 良い点 • APIスキーマ・リポジトリの管理 • 開発スピードの初速が出にくい • お互いの開発に無関心になりやすい 要検討 9
10. Laravel での SPA • バックエンド / フロントエンドが疎結合 • APIスキーマによる型制約やモック • それぞれの開発に集中できる API APIサーバ フロントの何か LaravelをAPIサーバとして利用すると 良い点 • APIスキーマ・リポジトリの管理 • 開発スピードの初速が出にくい • お互いの開発に無関心になりやすい 要検討 疎結合という甘美な響きの裏にはそれ相応のコストが潜む。 中小規模（予算, 人数）の場合、スケジュール・コストの面で見合わないことがある 10
11. Laravel での SPA 11 （SPAとして構築をしたいが、スケジュールとコストが見合わない...）
12. Laravel での SPA 12 （SPAとして構築をしたいが、スケジュールとコストが見合わない...） （もっと...気軽にSPA開発がしたい....っ!!! ）
13. Laravel での SPA 13 （SPAとして構築をしたいが、スケジュールとコストが見合わない...） （もっと...気軽にSPA開発がしたい....っ!!! ） そんな人にぜひ試してみてほしい。 疎結合とは正反対、現代のモノリス（The modern monolith）を提唱する Inertia.js
14. Laravel での SPA Inertia.js を使うと… 14
15. Laravel での SPA Inertia.js を使うと… • 直接 Vue などのJSコンポーネントを描画できる • セットした変数を JS 側で直接受け取れる 変数を直接渡せる 15 ・API必要なし ・JSONエンコード必要なし class UsersController { public function index() { $users = User::active() ->orderByName() ->get(['id', 'name', 'email']); return Inertia::render('Users', [ 'users' => $users ]); } } <script setup> import Layout from './Layout' import { Link, Head } from '@inertiajs/vue3' defineProps({ users: Array }) </script> <template> <Layout> <Head title="Users" /> <div v-for="user in users" :key="user.id"> <Link :href="`/users/${user.id}`"> {{ user.name }} </Link> <div>{{ user.email }}</div> </div> </Layout> </template>
16. Laravel での SPA Inertia.js を使うと… • 直接 Vue などのJSコンポーネントを描画できる • セットした変数を JS 側で直接受け取れる 変数を直接渡せる 16 ・API必要なし ・JSONエンコード必要なし まるでBladeファイルを書くように、フロントエンドの開発ができる！ class UsersController { public function index() { $users = User::active() ->orderByName() ->get(['id', 'name', 'email']); return Inertia::render('Users', [ 'users' => $users ]); } } <script setup> import Layout from './Layout' import { Link, Head } from '@inertiajs/vue3' defineProps({ users: Array }) </script> <template> <Layout> <Head title="Users" /> <div v-for="user in users" :key="user.id"> <Link :href="`/users/${user.id}`"> {{ user.name }} </Link> <div>{{ user.email }}</div> </div> </Layout> </template>
17. 03 Inertia.js
18. Inertia.js Inertia.js は Laravel8 から採用され Breeze で簡単にセットアップが可能 18 curl -s "https://laravel.build/laravel-inertia-vue-app?with=pgsql" | bash cd laravel-inertia-vue-app # Dockerコンテナ起動 ./vendor/bin/sail up -d # Breezeのインストール ./vendor/bin/sail composer require laravel/breeze --dev ./vendor/bin/sail artisan breeze:install vue # マイグレーションコマンド実行 ./vendor/bin/sail artisan migrate # Viteの開発サーバー起動 ./vendor/bin/sail npm install ./vendor/bin/sail npm run dev
19. Inertia.js 実際にインストールしたものがこちらに 19
20. Inertia.js どういう動きをしているか… 20
21. Inertia.js どういう動きをしているか… 21 ポイント① : Inertia が提供する <Link> コンポーネント ・<Link>をクリックすると 、通常の遷移を XHR 経由に変える ・ヘッダーに “X-Inertia : true” が付与される
22. Inertia.js どういう動きをしているか… 22 ポイント① : Inertia が提供する <Link> コンポーネント ・<Link>をクリックすると 、通常の遷移を XHR 経由に変える ・ヘッダーに “X-Inertia : true” が付与される ポイント② : Laravel は Inertia からのアクセスの場合、DOMではなくJSONを返す Laravel は ヘッダー “X-Inertia : true” が ・ない場合 : 定義されたViewをDOMとして返す ・ある場合 : DOMは返さず、setされた変数をJSON化して、JSONとして返す ※ https://github.com/inertiajs/inertia-laravel/blob/master/src/Response.php
23. Inertia.js どういう動きをしているか… 23 初回アクセス・アドレスバーから直接遷移した場合
24. Inertia.js どういう動きをしているか… 24 初回アクセス・アドレスバーから直接遷移した場合 REQUEST GET: http://example.com/dashboard Accept: text/html, application/xhtml+xml
25. Inertia.js どういう動きをしているか… 25 初回アクセス・アドレスバーから直接遷移した場合 < 普通のアクセスだから、DOMとデータ全部渡すぞ REQUEST GET: http://example.com/dashboard Accept: text/html, application/xhtml+xml
26. Inertia.js どういう動きをしているか… 26 初回アクセス・アドレスバーから直接遷移した場合 < 普通のアクセスだから、DOMとデータ全部渡すぞ REQUEST GET: http://example.com/dashboard Accept: text/html, application/xhtml+xml RESPONSE HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 <html> <head> <title>My app</title> <link href="/css/app.css" rel="stylesheet"> <script src="/js/app.js" defer></script> </head> <body> <div id="app" data-page='{"component":“Dashboard","props"...}'></div> </body> </html>
27. Inertia.js どういう動きをしているか… 27 ２回目以降に<Link>からアクセスした場合 import { Link } from '@inertiajs/vue3'; <Link :href="route('dashboard')">Dashboard</Link>
28. Inertia.js どういう動きをしているか… 28 ２回目以降に<Link>からアクセスした場合 <Link>経由だから、リクエストをXHRに変えたよ > X-Inertia ヘッダーもつけておいたよ > import { Link } from '@inertiajs/vue3'; <Link :href="route('dashboard')">Dashboard</Link>
29. Inertia.js どういう動きをしているか… 29 ２回目以降に<Link>からアクセスした場合 <Link>経由だから、リクエストをXHRに変えたよ > X-Inertia ヘッダーもつけておいたよ > import { Link } from '@inertiajs/vue3'; <Link :href="route('dashboard')">Dashboard</Link> REQUEST GET: http://example.com/dashboard Accept: text/html, application/xhtml+xml X-Requested-With: XMLHttpRequest X-Inertia: true X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
30. Inertia.js どういう動きをしているか… 30 ２回目以降に<Link>からアクセスした場合 < X-Inertia があるから、JSONで返すぞ <Link>経由だから、リクエストをXHRに変えたよ > X-Inertia ヘッダーもつけておいたよ > REQUEST GET: http://example.com/dashboard Accept: text/html, application/xhtml+xml X-Requested-With: XMLHttpRequest X-Inertia: true X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5
31. Inertia.js どういう動きをしているか… 31 ２回目以降に<Link>からアクセスした場合 < X-Inertia があるから、JSONで返すぞ <Link>経由だから、リクエストをXHRに変えたよ > X-Inertia ヘッダーもつけておいたよ > REQUEST GET: http://example.com/dashboard Accept: text/html, application/xhtml+xml X-Requested-With: XMLHttpRequest X-Inertia: true X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5 RESPONSE HTTP/1.1 200 OK Content-Type: application/json Vary: Accept X-Inertia: true { "component": "Dashboard", "props": { "canLogin": true, "canRegister": false, "laravelVersion": "10.13.5", "phpVersion": "8.2.7", "event": "phpconfuk2023" }, "url": "/dashboard", "version": "c32b8e4965f418ad16eaebba1d4e960f" }
32. Inertia.js どういう動きをしているか… 32 ２回目以降に<Link>からアクセスした場合 < X-Inertia があるから、JSONで返すぞ <Link>経由だから、リクエストをXHRに変えたよ > X-Inertia ヘッダーもつけておいたよ > < Dashboardコンポーネントだけを 受け取ったJSONの内容で書き換えるよ REQUEST GET: http://example.com/dashboard Accept: text/html, application/xhtml+xml X-Requested-With: XMLHttpRequest X-Inertia: true X-Inertia-Version: 6b16b94d7c51cbe5b1fa42aac98241d5 RESPONSE HTTP/1.1 200 OK Content-Type: application/json Vary: Accept X-Inertia: true { "component": “Dashboard", "props": { "canLogin": true, "canRegister": false, "laravelVersion": "10.13.5", "phpVersion": "8.2.7", "event": "phpconfuk2023" }, "url": "/dashboard", "version": "c32b8e4965f418ad16eaebba1d4e960f" }
33. Inertia.js Inertia.js を使うと… 33
34. Inertia.js Inertia.js を使うと… 34 API通信であることを意識せず、 Bladeファイルを書くようにSPA開発が出来るようになる
35. Inertia.js Inertia.js を使うと… 35 あえて、バックエンドとフロントエンドを密結合（モノリス）にする API通信であることを意識せず、 Bladeファイルを書くようにSPA開発が出来るようになる
36. 04 仕事で使って感じた メリット・デメリット
37. 仕事で使って感じた メリット・デメリット • 管理が楽 • SPAとは思えない開発速度 • それぞれの開発が見えやすい • エコシステム, Inertiaが用意しているコンポーネントが優秀 37 メリット
38. 仕事で使って感じた メリット・デメリット • 管理が楽 • • • 38 メリット ・APIスキーマ用、フロントエンド用のリポジトリなどの管理を気にせず、 １つのリポジトリ内でアプリケーションが完結する。 ・１つのリポジトリにアプリケーションがあるため、 CI/CD, E2E テストもMPAのLaravelと同様の手順で行える。
39. 仕事で使って感じた メリット・デメリット • • SPAとは思えない開発速度 • • 39 メリット ・変数の受け渡しがスムーズ APIスキーマを定義して…フロントと共有して…の必要がない。 ・Laravel側のルーティング, 認証などをそのまま使えるため、 フロント側は画面の作りにのみ集中できる。
40. 仕事で使って感じた メリット・デメリット • • • それぞれの開発が見えやすい • 40 メリット ・同じリポジトリ内で作業をしているため、バックエンド・フロントエンド担当 それぞれの作業で何をやっているのかよく分かる。 → 仕様・知見の共有面でも良かった。 ・簡単な修正ならお互いに直せる。（Ex. この値欲しい, ここの表示こうしたい、など）
41. 仕事で使って感じた メリット・デメリット • • • • エコシステム, Inertiaが用意しているコンポーネントが優秀 41 メリット ・Breeze で容易にセットアップが出来る。 ・Form, バリデーションとエラーの表示, ファイルアップロードなど、 SPAで面倒になりがちなところが Inertia.js 側で用意されている。
42. 仕事で使って感じた メリット・デメリット 42 デメリット（注意点） • Laravelの単体テストはAPIの方が書きやすい • APIスキーマによるモック, 型の恩恵は受けれない • Webアプリ以外を作ることになると、基本的に作り直し
43. 仕事で使って感じた メリット・デメリット 43 デメリット（注意点） ・（設計によるが）Controllerに画面表示に必要な変数を全てセットするため、 APIの場合と比べて単体テストがゴチャゴチャする。 → MPA方式の時と同様 ・Inertia 用のPHPUnitで実行できるAssertがあるため、埋め込みのJSよりはテストが書ける • Laravelの単体テストはAPIの方が書きやすい • •
44. 仕事で使って感じた メリット・デメリット 44 デメリット（注意点） ・（設計によるが）Controllerに画面表示に必要な変数を全てセットするため、 APIの場合と比べて単体テストがゴチャゴチャする。 → MPA方式の時と同様 ・Inertia 用のPHPUnitで実行できるAssertがあるため、埋め込みのJSよりはテストが書ける • Laravelの単体テストはAPIの方が書きやすい • • <?php use Inertia¥Testing¥AssertableInertia as Assert; class PodcastsControllerTest extends TestCase { public function test_can_view_podcast() { $this->get('/podcasts/41') ->assertInertia(fn (Assert $page) => $page ->component('Podcasts/Show') ->has('podcast', fn (Assert $page) => $page ->where('id', $podcast->id) ->where('subject', 'The Laravel Podcast') ->has('seasons', 4) ->has('seasons.4.episodes', 21) ->has('host', fn (Assert $page) => $page ->where('id', 1) ->where('name', 'Matt Stauffer') ) ) ); } }
45. 仕事で使って感じた メリット・デメリット 45 デメリット（注意点） ・APIスキーマがあれば…という場面は実際何度もあった ・フロントエンドがモックサーバで開発が出来ない ・リクエスト, レスポンス, モデルの型チェック → 16:30～ Urata Daiki のレギュラートークの内容でカバー ・長期的, 大人数で開発する際には、APIスキーマがあるべきと改めて思った • • APIスキーマによるモック, 型の恩恵は受けれない •
46. 仕事で使って感じた メリット・デメリット 46 デメリット（注意点） ・「そうだ、これスマホアプリにもしよう！」となっても、 APIサーバとしては構築がされていないので、結構な作り直しになる（実際なりかけた） ・近い未来の展望に、APIサーバとしての稼働が必須であれば、やめた方がよさそう • • • Webアプリ以外を作ることになると、基本的に作り直し
47. 05 まとめ
48. まとめ Inertia.js • バックエンドとフロントエンドをあえて密結合（モノリス）にする • 複雑さを感じることなく、スピーディーにSPAを構築するためのプラグイン 向いていると感じたユースケース • MVPのように、まずはスピーディーに動くアプリケーションを作る場合 • データ構造はシンプルだが、画面の動きはリッチにしたい場合 • 中小規模（予算, 人数）のアプリケーション お気軽SPA開発をぜひ体験してみてください！ 48 対応しているバックエンド 対応しているフロントエンド
49. ご清聴いただきありがとうございました Thank You We are Hiring ! https://recruit.fusic.co.jp/