jsやcssをページごとに読み込みたい。【Laravel】

Bladeファイルを使ってフロント部分を構築していて、jsとcssをページごとに読み込みたい時に使える方法です。

今までは、layoutのapp.bladeに記述(全ページで読み込まれる)か、body内に直接書いていたのですが、cssはhead内に、jsはhtml下部に埋め込みたい、と思ったのでどのような方法があるか調べてみました。

Laravelのテンプレートを使おう

上の例は少し雑な方法ですが、Laravelテンプレートの@sectionを使えばうまくできることは把握していました。

ただ作成していたプロジェクトでは、@sectionはlayout、mainを管理していて、@sectionを増やしてもいいけど追加したい時しか使わないから親要素を管理する必要もないしちょうどいいのないかなと思っていました。

pushとstack

そんな中でなんとなく調べて出てきたのが@push@stackです。

文字通り別のビューに対してpushすることができます。

公式にもこう書いていました。

Bladeを使用すると、別のビューまたはレイアウトのどこか別の場所でレンダできる名前付きスタックに入れ込めます。これは、子ビューに必要なJavaScriptライブラリを指定する場合、とくに便利です。

https://readouble.com/laravel/9.x/ja/blade.html

はい、まさに求めていたものでした🤩

小さな整理だけど後々響くかも、、、?

@push@stackを使ってjsとcssを読み込むように変更してみました。

今回は細かいところでしたが、個人的にはbladeファイルが見やすくなってとても満足です。

のちのちプロジェクトが大きくなって@sectionが増えてきたらやっといてよかったと思うかもしれません。笑

laravelを業務で使い始めてから結構経ちますが、たまに振り返ってみないと見落としている機能が結構ありそうなので、またどこかで振り返ってみようかなと思いました。笑

では!

参考にしたページ

このページを見つけて一発で理解した。

【Laravel】@pushディレクティブで要素を溜めて、任意の場所に定義した@stackディレクティブに出力する。

https://qiita.com/msht0511/items/4d9e1507c7ed039a7326