ソフトウェア・開発」カテゴリーアーカイブ

Laravel 9 + Vue 3で作る8割Laravelの知識で行けるSPA

LaravelにはVue.jsを使ったSPAでありながらルーティングやバリデーション処理などはLaravelのルーティングをそのまま利用して実装できる仕組みが有ります。この仕組みはVueフロントエンドとLaravelの間のやり取りをしてくれる 「Inertia.js」で実現されています。これを実際の社内プロダクトで利用して十分実用的でしたので紹介したいと思います。

  • ルーティング→Laravelの仕組みをそのまま利用できる。一部だけ要御調整(後述)。
  • バリデーションと結果のエラー表示→Laravelの仕組みをそのまま利用できる。各フォーム項目内容を集めてPOSTするようなコードを自分で書く必要は無く普通のHTMLフォームを描くだけで内部的にAjaxな通信になってくれます。
  • ビュー作成→Vueコンポーネントとして作成、コンパイルの仕組みなども用意してくれる。Bladeテンプレートエンジンで作るテンプレートはほぼ不要。
  • 必要なVueの知識: ルーティングなどVueを補助するツールに対する別のツールへの理解は不要。代わりにInertia.jsについての知識は要確認

Windows環境でのLaravel開発はWSL2で

Laravel自体がそうなのですが、Windows(というよりはNTFS?)ネイティブ環境での動作がファイルI/Oの関係から遅いです。これはWSL2 + Ubuntuを導入したうえでWSL2管理下のパスにプロジェクトを置いておくする事で高速になります。

PHPやMySQLサーバーなどをDockerコンテナでまとめて用意してくれる「Laravel Sail」で用意した場合はWSL2 + Ubuntu + Dockerという環境になりますが、この場合もプロジェクトは /home/<ユーザー名>/xxx などWSL2管理下に配置しておきましょう(/mnt/c/ など/mnt/経由でWindows管理下のパスにアクセスすると非常に遅くなります)。WSL管理下のパスに置いた場合でもPhpStorm等の開発ツールは問題なくプロジェクトを開く事が出来ます。

参考: https://readouble.com/laravel/9.x/ja/sail.html

Laravel BreezeでのInertia.jsの導入

LaravelにはTOPページ、ログインページ、登録ページ、ログイン後TOPページなどをまとめてさくっと作ってくれる「Larvel Breeze」という機能が有り、これにオプションを付け加える事で Laravel + Inertia.js の環境を作ってみる事が出来ます。Vueコンポーネントをコンパイルする仕組みも一緒に用意してくれるのでVueでのSPAを作った事が無い人でもVueをリアクティブなDOM操作ができるjQueryのようなポジションで利用していた人でも比較的簡単に実装可能です。

参考: https://readouble.com/laravel/9.x/ja/starter-kits.html#laravel-breeze

php artisan breeze:install
php artisan migrate
npm install
npm run dev

Inertia.jsが実際にどういう動きをするのか、どう使えばいいのかは Inertia.js 自体のドキュメントを見ると分かりやすいです。

参考: Inertia.js – The Modern Monolith

上記のドキュメントを確認しつつ、Laravel Breezeで作成された最小限のプロジェクトを参考リンクの情報と併せて見てみる事で全体のイメージがつかめるかと思います。

この時、CSSフレームワークはデフォルトでは Tailwind CSSが利用されています。Bootstrapなどとは大きく考え方が異なるCSSフレームワークですが、コンポーネント部品としてボタン、その他フォーム、ボックス、ヘッダなど部品を作っていく際に、コンポーネントを素早くスタイリングするのに最適化された使用感になっており、余裕が有れば合わせてTailwind CSSも試してみるといいかもしれません。

Tailwind CSS
→角丸にする、サイズはこう、レイアウトはこうといった見た目のスタイリングを高速に簡単に組み合わせていく事に特化したCSSフレームワーク。
→再利用性・共通化はコンポーネント化すること対応。フォームであれば form-control クラスを付けるBootstrapとは異なり、先に作成したフォーム「コンポーネント」を使っていく感じの使用感。

参考:

Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

単一ファイルコンポーネント | Vue.js

SFC <script setup> | Vue.js

エラー処理ハンドリング

適切にVue + Inertia.js側でエラー処理を行うためにLaravel側の例外ハンドラーの調整が必要です。以下を参考に対応します。

参考: https://inertiajs.com/error-handling

終わりに

これでLaravel + Inertia.js + Vue 3 でフロントエンドでVueコンポーネントで作られたビューを主体としたSPAをサクサク作っていく事が出来ます(作りました)。ご興味が有ればぜひ触ってみてネット上の情報を増やしていきましょう。

CodeIgniter 4.2.0 で導入された新しい自動ルーティングについて

CodeIgniter 4.2.0 がリリースされ、それと共に新しい自動ルーティング機能が導入されました。

Version 4.2.0 — CodeIgniter 4.2.0 documentation

CodeIgniter 3.0 ~ 4.1.9 スタイルの自動ルーティングは確かに Symfony や Laravel などと比べるとGETやPOSTなどHTTPメソッドを区別したルーティングは行われておらず、ゆるい分例えばPOSTを想定した処理にGETでアクセスしてCSRF対策を回避できる可能性などが有りました(もっともPOST専用のコントローラメソッドならPOST以外をはじくような処理を今まで書いていたとは思います。書いていますよね?)。

CodeIgniter 4.2.0 で新しく導入された新自動ルーティング機能ではこの辺りを改め、POSTでアクセスするべき処理はPOSTで動く事を明確にするような改修が行われています。

ただ、ここで旧自動ルーティングを利用している場合に、新自動ルーティングに移行した場合と設定ファイルでのルーティング(自動ルーティング機能オフ)に移行した方が良いかのポイントが有ったのでここに残しておきます。

既に設定ファイルを使ってルーティングしている場合

設定ファイルのままで問題有りません。設定ファイルで定義するのが結局最も意図しない動きが起きない(=安全)な実装になります。

大文字小文字を区別するURLを構成している

自動ルーティングを利用する場合クラス名は先頭のみが大文字である事が求められます。大文字が含まれるURLを構成している場合はそこにクラス名をフィットさせられないので、設定ファイルでルーティングしましょう。

_remap でのルーティングを行っている

新自動ルーティングではコントローラーメソッドとURL(URI)の関係を1対1とするために_remapでのルーティング調整が廃止されています。設定ファイルでのルーティングに移行しそちらでカバーしましょう。

同じコントローラメソッド内でHTTPメソッドによる分岐を行っている

設定ファイルでのルーティングに移行しましょう。設定ファイルのルーティングであればGETとPOSTを両方同じコントローラメソッドで受け付けるようなルーティングが可能です。

ここまでどれも該当しない場合

新自動ルーティングを使っても良いですし、設定ファイルに移行してもどちらでもいいと思います。

設定ファイルに移行する場合

旧自動ルーティング・新自動ルーティング・設定ファイルでのルーティングのいずれを利用している場合においても、以下のコマンドを実行することで既存のルーティングを一覧表示する事が出来ます。

php spark routes

ここで出力されたルート一覧をExcelやスプレッドシートに貼り付け、区切り文字を | に設定し列に分割、移行リストとして1つ1つ設定に移植してきましょう。この際、旧自動ルーティングは <クラス名>::__construct や <クラス名>::index も(旧自動ルーティングでは有効な)ルートとして出力してきます。前者を削除し、後者も不要であればリストから削除しましょう。残りが設定ファイルへ移植するべきルーティングです。

設定ファイルへの移行が済んだら自動ルーティングの設定を無効化しましょう。コントローラメソッド内で目的のHTTPメソッド以外をはじくような処理を入れている場合、今後はデッドコードになるので併せて削除してもいいと思います。

RHELのApplication Streamsは一部が長期サポートらしい

表題の通りなんですが、RedHat Enterprise Linux のApplication Streamsで提供される一部のパッケージで長期サポートが提供されているようです。Application Streamsで提供されるパッケージはOSと同じサポート期間ではない短いサポート期間になる代わりに随時新しいバージョンにも対応していく形式ですが、特定のバージョンに限っては長きにわたっての利用が可能になります。

Red Hat Enterprise Linux 8 Application Streams Life Cycle – Red Hat Customer Portal

Application StreamRelease DateRetirement DateRelease
php 7.4Nov 2020May 20298.3
postgresql 12Feb 2020May 20298.1.1
git 2May 2019May 20298.0.0
httpd 2.4May 2019May 20298.0.0
mariadb 10.3May 2019May 20298.0.0
ruby 2.5May 2019May 20298.0.0
引用。2020年12月03日時点の内容。

一部のバージョンでサポート期間が公式をはるかに超え長くなっている事が分かります。例えばRHEL8.3と共にリリースされたPHP 7.4では2029年中頃までサポートされるようです。

そもそもApplication Streamsとはなんぞやという方は過去記事を参照の事。