Laravel Herdの学習中(Laracast)。調べ物をメモったりなど。
Laravel HerdとLaracastで学習中
Laravel HerdとLaracast
マッチングアプリ風ゲームというか、ゲーミングマッチングアプリみたいなもんを作って銭を稼ごうなどと考えています。サーバーは昔ちょろっとかじってたphpがええかな、とか思いフレームワークはLaravelを選択。当初はDocker(Laravel sail)で開発の勉強をしていましたが、色々面倒だったのでLaravel Herdに乗り換えました。
Laravel Herdはphpなんかのバージョンも管理も楽だし、ローカル環境も汚れないんで良いね。
そして、Laracastで学習中です。Laracast(外部リンク)
調べ物ポイント
Laracastで色々やってるとphpのメソッドや機能なのか、bladeの特有の記述なのか、(講座で使ってる)Tailwindの記法なのか分からなくなるやつがちょこちょこ出てきやがった(なにやつ)。
そいつらをマルっとラフに並べてメモってみる。とりあえず以下のようなコード。
layout.blade.php
<x-nav-link href="/" :active="request()->is('/')">Home</x-nav-link>
<x-nav-link href="/about" :active="request()->is('about')">About</x-nav-link>
<x-nav-link href="/contact" :active="request()->is('contact')">Contact</x-nav-link>
nav-link.blade.php
@props(['active' => false])
<a class="{{ $active ? 'bg-gray-900 text-white': 'text-gray-300 hover:bg-gray-700 hover:text-white'}} rounded-md px-3 py-2 text-sm font-medium"
aria-current="{{ $active ? 'page': 'false' }}"
{{ $attributes }}
>{{ $slot }}</a>
調べてみたこと
-
<x-nav-link>
これはLaracast中の講座で作成したカスタムコンポーネントを用いる時のタグです。命名規則的なのがあるんかな?思ったらそうではなくて、<x-テンプレートの名前>って感じに書けるようです。いいね。 -
@props['active' => false]
これは変数$activeをデータの受け渡しに設定している記述であり、デフォルトではfalseだよとしている。 -
<a class="{{ $active ? 'bg-gray-900 text-white': 'text-gray-300 hover:bg-gray-700 hover:text-white'}} rounded-md px-3 py-2 text-sm font-medium"
aria-current="{{ $active ? 'page': 'false' }}"
ここは長いけど、簡単に言えば$activeがtrueの時は「bg-gray-900 text-white」falseの時は「text-gray-300 hover:bg-gray-700 hover:text-white」という風に書いてます。 -
aria-current="{{ $active ? 'page' : 'false'}}"
これは$activeがTrueなら、aira-currentがPageにFalseならFlaseになるということ。aria-currentとはアクセシビリティに関する記述のようです。例えばハンディキャップを抱えている人がスクリーンリーダーを使って読み上げなどをした時に、現在の要素がなんであるかなどを明確にする用途があるとか。ここではグローバルナビゲーションによく用いられる、Pageというステータスにしています。falseになると、どの項目も選択されていない、ということらしい。うむ、分からん。 -
$attributes
こいつは受け渡す変数や要素に変更や加工の必要がない時に使える便利なやつ。クラス(Tailwindで見た目を変える)やaria-currentについてはこちらから値を変えるけども、他の事項については変える必要がない。例えばどこにルーティングしてるのかとか。だから$attributesを。 -
$slot
このケースにおける、「slot」はナビゲーションバーの文字列は受け渡した方(つまり、layout.balde.php側)で自由に変えてもええんやで。スペース開けとくでな。という感じにしたいので、$slotにしている。多分、もっと色々な用途で頻出してくると思うので、それは次の調べ物で。
Discussion