Blade で画面を組み立てる

前のページでは、1枚の HTML をビューに書きました。でも、ページが増えるたびに <html> や <head> を書くのは大変です。Blade（ブレード。Laravel のテンプレートの書き方）を使うと、どのページにも共通の「枠」を1つの部品にして、中身だけを書けます。このページでは、メモ帳アプリの共通の枠と、メモの一覧のページを作ります。データベースはまだ使わず、決めうちのメモを表示します。

共通の枠（レイアウト）を作る#

resources/views の中に components というフォルダを作り、その中に layout.blade.php を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'メモ帳' }}</title>
</head>
<body>
    <header>
        <a href="/memos">メモ帳</a>
    </header>
    <hr>

    <main>
        {{ $slot }}
    </main>
</body>
</html>

resources/views/components に置いたビューは、コンポーネント（何度も使う画面の部品）になります。ファイル名が layout なので、<x-layout> というタグで呼び出せます。

• {{ $slot }} には、<x-layout> と </x-layout> のあいだに書いた中身が入ります
• {{ $title ?? 'メモ帳' }} は、「$title が渡されていればそれを、無ければ メモ帳 を出す」という意味です。?? は PHP の書き方です

メモの一覧のページを作る#

resources/views の中に memos というフォルダを作り、その中に index.blade.php を作ります。

<x-layout>
    <x-slot:title>メモの一覧</x-slot>

    <h1>メモの一覧</h1>

    @if (count($memos) === 0)
        <p>メモはまだありません。</p>
    @else
        <ul>
            @foreach ($memos as $memo)
                <li>{{ $loop->iteration }}. {{ $memo }}</li>
            @endforeach
        </ul>
        <p>全部で {{ count($memos) }} 件です。</p>
    @endif
</x-layout>

上から順に見ていきましょう。

• <x-layout> … </x-layout> で全体を囲むと、さっき作った枠の {{ $slot }} の場所に、この中身が入ります
• <x-slot:title>メモの一覧</x-slot> は、枠の $title に「メモの一覧」を渡します。ブラウザのタブに出る題名になります
• @if … @else … @endif は、PHP の if と同じです。@ で始まるこうした命令をディレクティブと呼びます
• @foreach ($memos as $memo) … @endforeach は、PHP の foreach と同じです。配列の中身を1つずつ取り出して、くり返します
• $loop->iteration は、@foreach の中で使える「いま何回目か」（1 から数える）です

ルートを足す#

routes/web.php に、/memos のルートを足します。いまは、決めうちのメモを3つ渡します。

Route::get('/memos', function () {
    $memos = ['牛乳を買う', '数学の宿題をする', '図書館に本を返す'];

    return view('memos.index', ['memos' => $memos]);
});

view('memos.index') の .（ドット）は、フォルダの区切りです。resources/views/memos/index.blade.php を表す、という意味になります。

http://localhost:8000/memos を開くと、次のように表示されます。

メモ帳
────────
メモの一覧
・1. 牛乳を買う
・2. 数学の宿題をする
・3. 図書館に本を返す
全部で 3 件です。

試しに、ルートの $memos を []（からっぽの配列）にして開き直すと、「メモはまだありません。」に変わります。確かめたら、3つのメモに戻しておきましょう。

よく使う Blade の書き方#

全部のディレクティブは Blade テンプレートに、部品とレイアウトのくわしい作り方は Blade コンポーネントとレイアウトにまとめています。

次に読むページ#

• データベースの表を作る