この頃のLaravelのView事情

こちらはアンテクアドベントカレンダー2021の記事です

https://adventar.org/calendars/6534

はじめに

さて、ここでは皆様はじめまして。

2021年の5月に入社したてほやほやの新入社員エンジニアのレイジー先生こと今山です。ホヤホヤと言ってよくなさそうなくらい時間は経っちゃってますが💦

普段はPHPのLaravelというフレームワークで作られたプロジェクトを色々あーでもないこーでもないとイジイジするお仕事をしています。

そんなわけで、Laravelの話でもはじめて行きたいと思います。

この頃のLaravel

https://readouble.com/laravel/

こちらのLaravelのドキュメントを見ると、今日(2021/12/02)時点ではバージョン8系が最新となっております。

僕が使い始めた頃は5系だったことを思うと、時が経つのは速いなあ感があります。

まあ、結局7系は触りそびれましたが……

8系のLaravelは動作保証されているPHPのバージョンが7.3.0になっていますが、割と勢いでPHP8とともに導入されることが多い印象があります。PHP本体にとってもLaravelにとってもバージョンが8で合わさるのはいい気分になりますよね。ならないですかね? まあ、両者とも8から大きな変化をもたらしているので、8と一緒に入れるのがいいのではないでしょうか?

Viewは大体2通りのパターンで実装してる気がする

別にLaravel8から、ってわけでもないのですが、このごろのLaravelのプロジェクトでは大きく分けて2通りの方法でViewの実装を行っているような気がします。

旧来のBladeテンプレートでガシガシ実装することもできるのですが、なるべくならよりモダンに行きたいものです。

1. Blade Component + Alpine.js + tailwindcss

こちらは、BladeはBladeなんですけど、VueJSチックにコンポーネント化して書こうぜ、ってやつです。

https://readouble.com/laravel/8.x/ja/blade.html#components

旧来はBladeテンプレートに @section とか @yield とかつかって内容を差し込んだりしてたと思うのですが、VueJS風に slot を使って書けちゃうんだぜってやつです。

書き方はドキュメントを参照してください。

そしてJSでちょっとした動きをつけたいときはAlpine.jsを使います。これもVueJSのscript部分風味に処理を書けるようになるJSのライブラリなんですが、jQueryで地獄みたいな思いをして実装しなくていいのでとっても楽でいいと思います。使い方は僕が以前Qiitaで書いた記事を参考にしてください。

https://qiita.com/layzy_glp/items/54c7d281f4000dfa8250

2. Inertia.js + VueJS

最近僕がプロジェクトでやっているやつです。

https://readouble.com/jetstream/1.0/ja/inertia.html

ドキュメントの方にはさもJetstream前提みたいな書き方されていますが、べつにJetstream使わなくてもInertiaは使えます。

これ、何なのかって言うと、VueJSのRouter部分をLaravel側で面倒見つつ、VueJSコンポーネントをBladeみたく使っちゃおうぜ!って感じのやつです。

こいつの何が最高にイカスかというと、Laravel側とVueJS側のAPIをInertiaが面倒見てくれるのでSPA実装によくあるAPI設計そのものから開放されるというところです。もちろん、CSRF対策なども勝手に面倒見てくれるので、もうなんていうかSPAやりたければこれ一択だね!って感じです。

おわりに

いかがでしたでしょうか?

具体的なコードを示しながらの記事はそのうちQiitaとかZennとかに書くかもしれませんが、今回はざっくり印象だけ書いてみました。

それではまた、次回は12/9(木)にお会いしましょう。See you!

TAGS使用タグ一覧