Laravel（PHPのフレームワークの１つ）CSS罠 ※CSSは当たっていても反映されないときがある件

Laravelは個人的に一番CSSが沼でした。

　私は、Progateと下の本から、HTML&CSSから、プログラミングを始めたのですが、その後、あるプログラミングスクールで約半年、PHP、Laravelを中心にプログラミングの学習カリキュラムを受けました。そのときに感じたというか、個人的に沼にはまり溺れたLaravelでCSSで当てるときの注意点をいくつか挙げます。なお、エディターはvisual Studio code（以下、VScode）を使っています。開発環境はXAMPP、Dockerと相性がいい？sailコマンドではなくartisanコマンドで基本やっています。（※artisanは「職人」という意味だそうです）

今後、Laravelを勉強を始められる方の参考にしていただけると幸いです。

なお、いずれも念頭に置くべきは

（１）Laravelのblade.php（実際に画面に映るHTMLにあたるファイル）にCSSを当てる場合は「足し算ではなく、時に引き算」が必要である

（２）Laravelには実は、こっそりTailwindCSSとかいう悪魔が潜んでいる

※コメントにありますように、Larave10 からは当てはまらない場合があります。ご了承ください（このQiitaを執筆時はLaravel9でした。）

（３）CSSのフレームワーク（のようなもの）を混在させるのは同時に使うのは極力避けた方が良い

※ちなみに自分はTailwindCSS（CSSのフレームワーク）を一度も勉強しておらず分かっているわけではありません

（４）CSSの不具合は「何らかの処理をする」コードとは異なりエラーとして出力されないことが多い （エラーメッセージが吐かれないことが多い）

（５）おまえ、どこにおんねん？という場合、大概componentにいる件

以下、自分が沼で溺れかけた具体的例です。

①背景色を上からベタ塗りしてくるbg-gray～で気分も灰色

Laravelでとりあえずターミナル開いて、以下のコマンドでプロジェクトを作ると、基本多くの人が使うであろうデフォルトのblade.php には、やたらと元からclass属性(attribution)がついています。
※composer（phpのパッケージ管理システム）を予めダウンロード＆インストールしてください
公式　https://getcomposer.org/

powershell (Windows) or zsh (Mac)

　composer create-project "laravel/laravel=10.*" 任意のファイル名　

そして、CSSやJSをつけるには基本、publicフォルダ内にcss、js、imagesフォルダを作り、そこにそれぞれstyle.cssや～.js、～.png等を入れて、CSSやJavascriptを当てますが、
（さらに、適用させるのには付け加えると基本asset()ヘルパー関数というのを使います）

welcome.blade.php や app.blade.php のbodyタグのすぐ下のdivタグ内の bg-gray-～　となっているクラス（下図赤丸参照）を消さないと、仮にpublicのフォルダにimagesフォルダを作って、CSSでbackgroundとかで背景を当てても、上から灰色１色にべた塗りされ、背景が全く変わりません。

（※bg-center　と書かれている物はbackgroud-position:center;の略なので、最初は消さない方が良いです）

しかも、「CSSは仮に上手くあたってなくても、あたっていても、特にエラーになるわけではないので」エラー表示はないというタチの悪さ。・・\（´д｀）/

（結果、最終的にはデベロッパーツール（＝検証ツール）しかエラーを見つける術を自分は見つけられなかったです）

※背景に例えば画像を挿れたい等、変えたい場合はとりあえず、bg-gray-～をまず消していきましょう

---

なお、WindowsでXAMPPとMYSQLを起動させた状態で、

php artisan serve

自分のPC内の仮想的なサーバーを立ち上げて、ターミナルにでてくる
「http://127.0.0.1:8000」
みたいなURLをクリックすると、こんな感じになります。（右の方がたぶん微妙に白いはず）

②自分含む真のよわよわエンジニアの味方Bootstarpとケンカし、Bootstrapを時々殺す暗殺者 「デフォルトTailwindcss」

そもそもしばらく、TailwindCSSがこんなところに潜んでいるなんて知りませんでした。(ﾟДﾟ)
（下図参照）

結果、Bootstrapのアコーディオン開かない問題が発生、開いてもすぐ閉じる(ﾟДﾟ)・・

TailwindCSSはたぶん現在モダンな技術と言われる部類にどちらかというと入ると思うので、Bootstrapを使う場合はこの３行をコメントアウトして、TailwindCSSを抹消して、Bootstrap（と自分のpublic⇒cssフォルダのstyle.css）を使うのが良いです。

③componentもclass多過ぎて、よく小文字を勝手に大文字にしようとしてくる件（uppercase属性）

今、現在私はPython３とJavaを中心に学習しつつ、時々Laravel復習&updateみたいな感じなのですが、

componentというのは、Pythonで言うところのモジュール作ってimportで差し込む、ときのモジュールみたいなやつ、要は、使えそうな部品を小分けにして挿入しやすいようにまとめてあるもののことを言います。（下図参照　※なおcomponentはデフォルトでも入っています。個人的によく使ったのは～buttonです）

日本語翻訳からなんとなく想像はつくかとは思うのですが、$attributes->merge([])というのは、配列の形式で（ここならbutton）に様々な属性を付与したいんだけど、楽に書きたいな(´д｀)というときに使われるやつみたいです。

例えば上図のコンポーネントを使うときにclassのvalueの「uppercase」をbuttonの文字部分に英語等の小文字を入れたい場合は削りましょう。

なお、他にも slotやらinclude やら「どこか別のパーツを差し込む」という作業がLaravelでは絡み合いまくります。もはやパズルゲームです。

④村八分的に相殺されるCSS⇒焼き討ちで対抗

これは何を言っているかというと、

①で述べたCSSを当てるときの原則に則ってCSSを当てたとしても、 上記同様に、デフォルトの何らかのCSSに相殺され、CSSが何も効いていない状態が起こる場合がある

ということです。その場合は残念ながら、邪魔をしているCSSをデベロッパーツールで炙り出して、不必要なデフォルトのCSSプロパティを消す必要があります

⑤おまえ、どこにおんねん？という場合、大概componentにいる件

例えば初期の段階の場合で

composer require laravel/breeze --dev
php artisan breeze:install

でBreezeのインストール、ユーザー認証設定・ログイン画面を作り、
自分PC内の仮想サーバーを立ち上げて、右上のログインリンクボタンを押すと

みたいな画面がでますが、
　上図のフォーム部分を自分オリジナルのデザインに差し替えたいなぁ(´д｀)°°〇みたいな状況が仮に出た場合、おまえらどこにおんねん？と探してみると、login.blade.php でも guest.blade.phpでもなく、結局いじるのが

componentの中のtext-input.blade.php やinput-label.blade.php の中

だったみたいなことがしばしばあります。

（app.blade.phpやguest.blade.phpだったりする場合もあります。）

なお、Breezeを入れるときに

---

余談：Laravelのエラーは実はstorageというフォルダのログフォルダにどんどんたまっていく件

私自身もそうでしたが、Laravelはエラーになるとエラー画面が出てくると、結構はっきりエラーメッセージを投げてくれる方だと思うのですが、実は

過去のエラーメッセージも含め、以下のlaravel.logというファイルに諸々貯まっていきます

そのため、例えば、自分はまだ3.5でしか試したことしかありませんが、これをChatGPTに投げたりすると、結構エラーの原因が見つかったりしました。

※当然プロンプトから個人情報（に繋がるような情報）は除くかテストデータに差し替えましょう。

よくお世話になった学習参考資料

・「Laravelの教科書」加藤じゅんこ著
https://www.amazon.co.jp/Laravel%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B310%E5%AF%BE%E5%BF%9C-%E5%8A%A0%E8%97%A4-%E3%81%98%E3%82%85%E3%82%93%E3%81%93/dp/480261408X
・同名サイト　https://textpro.addisteria.com/login
・加藤じゅんこさんの運営サイト「４０代からのプログラミング」https://biz.addisteria.com/

※注　私は特に加藤じゅんこさんの回し者垢ではありません。

最近見つけた＆知り合いの方にもらったLaravel関係の資料

・Laravel artisanコマンドメモ（https://qiita.com/zaburo/items/37768b743ed6d0e28bf5）
・Laravel学習帳（https://laraweb.net/）
・PHP|キュア子の開発ブログ（https://curecode.jp/tech/category/php/）
・【Laravel】サービスコンテナとは？２つの強力な武器を持ったインスタンス化マシーン。
（https://qiita.com/minato-naka/items/afa4b930a2afac23261b）
・【Laravel サービスコンテナ 中級編】メソッドインジェクションがしたい！
（https://qiita.com/kd9951/items/2328e2f8add9037bd990）