「プロフェッショナルWebプログラミングLaravel」の感想・備忘録6

プロフェッショナルWebプログラミング　Laravel

posted with ヨメレバ

エムディエヌコーポレーション 2022年03月28日頃

楽天ブックス

Amazon

Kindle

フロントエンド

フロントエンド

Laravel Mixとは

Webpackを簡単に使えるようにしてくれるライブラリ。
Laravel9.2からviteに変わったので、最新版ではLaravel Mixは使われない。
Laravelインストール直後はpackage.jsonにaxiosやpostcssが記述されているのでsail npm installでそれらをインストールしsail npm run devでコンパイルを実行する。

匿名コンポーネント

Laravel6まではBladeの継承機能を使っていたが、Laravel7からはコンポーネント機能が使えるようになった。
resorces/views/componentsの中に作成したbladeファイルは匿名コンポーネントとして<x-xxx>で呼び出すことができる。
componentsにディレクトリを作成した場合はドット区切りで指定する。
属性は文字列として渡される。
変数を渡したい場合は:title="$title"のように属性の前にコロンをつける。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <title>{{ $title ?? 'つぶやきアプリ' }}</title>
</head>
<body>
    {{ $slot }}
</body>
</html>

<x-layout title="TOP | つぶやきアプリ">
    <h1>つぶやきアプリ</h1>
        @auth
        〜以下省略〜
</x-layout>

登録フォームのコンポーネント化

resources/views/tweet/index.blade.phpを以下のようにし、layout/single、tweet/form/post、tweet/list、のコンポーネントに分ける。
（各コンポーネントの記述はここでは省略）

<x-layout title="TOP | つぶやきアプリ">
    <x-layout.single>
        <h2 class="text-center text-blue-500 text-4xl font-bold mt-8 mb-8">
            つぶやきアプリ
        </h2>
        <x-tweet.form.post></x-tweet.form.post>
        <x-tweet.list :tweets="$tweets"></x-tweet.list>
    </x-layout.single>
</x-layout>

Tailwind CSS

Laravel BreezeをインストールするとTailwind CSSもインストールされる。
resorces/layoutsの中のファイルを見ると
@vite(['resources/css/app.css', 'resources/js/app.js'])がある。
resources/css/app.cssは以下のようになっていて、Tailwind CSSが使えるようになっている。
@tailwind base; @tailwind components; @tailwind utilities;
テンプレート修正後はnpm run devでのコンパイルが必要。