Bladeでビューを作る

前回はURLと処理をつなぐルーティングと、コントローラーへの分離を学びました。今回は「ユーザーに見せる画面（HTML）を作る」ことに集中します。これが Blade? テンプレートです。

Bladeとは

Blade? はLaravel専用のビュー? テンプレートエンジンです。ファイルの拡張子は .blade.php で、HTMLの中にPHPの処理を埋め込めます。

Bladeファイルはすべて resources/views/ フォルダに置きます。

最初のBladeファイルを作る

resources/views/ の中に users というフォルダを作り、index.blade.php というファイルを新規作成します。

作成場所：

myapp/
└── resources/
    └── views/
        └── users/          ← フォルダを新規作成
            └── index.blade.php  ← ファイルを新規作成

resources/views/users/index.blade.php の内容：

<!-- 📁 resources/views/users/index.blade.php（新規作成） -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー一覧</title>
</head>
<body>
    <h1>ユーザー一覧</h1>
    <p>ここに一覧を表示します</p>
</body>
</html>

コントローラーからビューを返す

app/Http/Controllers/UserController.php を開いてください。index メソッドを次のように書き換えます。

// 📁 app/Http/Controllers/UserController.php
// index メソッドを書き換える

public function index()
{
    return view('users.index');  // ← 文字列を返す代わりにビューを返す
}

view('users.index') とはどのファイルを指しているのでしょうか？

users.index → resources/views/ から見て users/index.blade.php
フォルダの区切りは**ドット（.）**で表します
.blade.php の部分は書かなくてよい

ブラウザで http://localhost:8000/users を開くと、「ユーザー一覧」という見出しが表示されます。

データをビューに渡す

コントローラーから変数をビューに渡すには、view() の第2引数に配列を渡します。

// 📁 app/Http/Controllers/UserController.php
// index メソッドを書き換える

public function index()
{
    $users = ['Alice', 'Bob', 'Charlie'];  // ← 渡したいデータ

    return view('users.index', ['users' => $users]);
    //                          ↑ 'キー名' => 変数  という形で渡す
}

['users' => $users] と書くと、ビュー側で $users という名前の変数として受け取れます。

resources/views/users/index.blade.php を次のように書き換えます。

<!-- 📁 resources/views/users/index.blade.php（書き換え） -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー一覧</title>
</head>
<body>
    <h1>ユーザー一覧</h1>
    <ul>
        @foreach ($users as $user)
            <li>{{ $user }}</li>
        @endforeach
    </ul>
</body>
</html>

{{ $user }} は変数の値をHTMLとして出力するBladeの書き方です。PHPの echo に相当します。

Blade の制御構文

繰り返し：@foreach

@foreach ($users as $user)
    <p>{{ $user }}</p>
@endforeach

データが空のときに別のメッセージを出すには @forelse が便利です。

@forelse ($users as $user)
    <li>{{ $user }}</li>
@empty
    <li>ユーザーはまだいません</li>
@endforelse

条件分岐：@if

@if (count($users) > 0)
    <p>{{ count($users) }}人のユーザーがいます</p>
@else
    <p>ユーザーはまだいません</p>
@endif

@if〜@else〜@endif は普通のPHPの if と同じ意味です。Bladeでは <?php ?> を書かずにすっきり書けます。

レイアウトで共通部分をまとめる

ページが増えるたびに <html>〜</html> を毎回書くのは大変です。Bladeのレイアウト機能で共通部分を1か所に集めましょう。

① 親テンプレート（レイアウト）を作る

resources/views/layouts/ フォルダを作り、その中に app.blade.php を新規作成します。

myapp/
└── resources/
    └── views/
        ├── layouts/          ← フォルダを新規作成
        │   └── app.blade.php ← ファイルを新規作成
        └── users/
            └── index.blade.php

resources/views/layouts/app.blade.php の内容：

<!-- 📁 resources/views/layouts/app.blade.php（新規作成） -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@yield('title', 'MyApp')</title>
</head>
<body>
    <header>
        <a href="/">MyApp</a>
    </header>

    <main>
        @yield('content')
    </main>
</body>
</html>

@yield('content') は「ここに子テンプレートの内容を埋め込む」というプレースホルダーです。'content' は名前なので、後で子側から指定します。

@yield('title', 'MyApp') の 'MyApp' は、子側でタイトルを指定しなかった場合のデフォルト値です。

② 子テンプレートでレイアウトを使う

resources/views/users/index.blade.php を次のように書き換えます。

<!-- 📁 resources/views/users/index.blade.php（書き換え） -->
@extends('layouts.app')

@section('title', 'ユーザー一覧')

@section('content')
    <h1>ユーザー一覧</h1>
    <ul>
        @forelse ($users as $user)
            <li>{{ $user }}</li>
        @empty
            <li>ユーザーはまだいません</li>
        @endforelse
    </ul>
@endsection

命令	意味
`@extends('layouts.app')`	`resources/views/layouts/app.blade.php` を親として使う
`@section('title', '...')`	`@yield('title')` の場所にタイトルを埋め込む
`@section('content') ～ @endsection`	`@yield('content')` の場所にHTMLを埋め込む

エスケープについて

{{ $value }} はXSS攻撃を防ぐため、< や > などのHTMLの特殊文字を自動でエスケープ（無害化）します。ユーザーが <script> と入力しても、そのまま文字として表示されてスクリプトは実行されません。

HTMLをそのまま出力したい場合（信頼できるデータのみ）は {!! $value !!} を使います。ユーザーの入力値には絶対に使ってはいけません。

まとめ

この回でやったこと：

resources/views/ に .blade.php ファイルを作ってビューを定義した
コントローラーの view('users.index', [...]) でデータを渡した
{{ $var }}・@foreach・@if でデータを表示・制御した
resources/views/layouts/app.blade.php を共通レイアウトにした
@extends と @section で子テンプレートがレイアウトを継承した

次回はいよいよデータベース? を使います。マイグレーション? でテーブルを作り、データを保存できるようにしましょう。