【Laravel基礎学習4】Laravelのビューについて解説

laravelアイキャッチ Laravel
2019.10.16

こんにちは、かつコーチです。

Laravelの**View（ビュー）**は、アプリケーションのプレゼンテーション層を管理するための重要なコンポーネントです。

MVCアーキテクチャの一部として、Viewはユーザーに表示されるデータをテンプレート化して提供します。

Laravelのビューシステムはシンプルかつ柔軟で、主にBladeテンプレートエンジンを使用します。

以下で、ビューの詳細とBladeテンプレートエンジンについて解説します。

LaravelのViewの基本

Viewファイルの配置

Laravelでは、Viewファイルは通常resources/viewsディレクトリ内に配置されます。

これらのファイルはHTMLやBladeテンプレート構文を含み、

ユーザーに表示されるコンテンツを定義します。

  • 例：resources/views/welcome.blade.php というファイルがあれば、/welcomeのルートでこのビューを表示できます。
Route::get('/welcome', function () {
    return view('welcome');
});

Viewのレンダリング

Laravelでは、view関数を使用してビューをレンダリングします。

例えば、次のようにしてビューにデータを渡すことができます。

Route::get('/greet', function () {
    $name = 'John';
    return view('greet', ['name' => $name]);
});

ビュー側では次のようにしてデータを表示できます：

<!-- resources/views/greet.blade.php -->
<h1>Hello, {{ $name }}!</h1>

Bladeテンプレートエンジン

LaravelのBladeテンプレートエンジンは、PHPとHTMLを効率的に混在させるためのツールです。

Bladeは軽量で、開発者がビューを簡単に作成できるように、多くの便利な構文を提供しています。

Bladeの基本構文

  • 変数の表示: Bladeでは、{{ $変数名 }}を使用して変数をエスケープ表示します。エスケープされない表示には{!! $変数名 !!}を使用します。
<h1>Hello, {{ $name }}!</h1> <!-- エスケープされた表示 -->
{!! $htmlContent !!} <!-- エスケープなしでHTMLが表示される -->
  • 条件分岐: Bladeは標準のPHPのif文と同様に条件分岐が可能です。
@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Welcome, guest!</p>
@endif
  • ループ処理: Bladeでのループ処理は@foreach, @for, @whileなどを使用します。
<ul>
    @foreach ($items as $item)
        <li>{{ $item }}</li>
    @endforeach
</ul>
  • コメント: Bladeのコメントは{{-- コメント内容 --}}のように記述します。
{{-- これはBladeコメントです --}}

Bladeディレクティブ

Bladeテンプレートエンジンには、多くのディレクティブ（構文）が用意されており、

これによりコードの簡潔性や可読性が向上します。

一般的なディレクティブ

  • @if/@elseif/@else/@endif: 条件分岐を処理します。bladeコードをコピーする@if (count($users) > 0) <p>There are {{ count($users) }} users.</p> @else <p>No users found.</p> @endif
  • @foreach/@endforeach: 配列やコレクションをループします。bladeコードをコピーする@foreach ($users as $user) <li>{{ $user->name }}</li> @endforeach
  • @for/@endfor: 指定された回数だけ繰り返します。bladeコードをコピーする@for ($i = 0; $i < 10; $i++) <p>{{ $i }}</p> @endfor
  • @isset/@endisset: 変数が設定されているかどうかを確認します。bladeコードをコピーする@isset($name) <p>{{ $name }}</p> @endisset
  • @csrf: フォームの中でCSRFトークンを生成します。bladeコードをコピーする<form method="POST" action="/profile"> @csrf <!-- フォームの内容 --> </form>

レイアウトとセクション

Bladeにはレイアウトを再利用するための機能が組み込まれています。

これにより、例えばヘッダーやフッターなど、サイト全体で共通する部分を簡単に管理できます。

  • レイアウトの作成: 例えば、layouts/app.blade.phpというレイアウトファイルを作成し、共通のHTML構造を定義します。
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
</head>
<body>
    <header>
        <!-- ヘッダーの内容 -->
    </header>

    <div class="container">
        @yield('content')
    </div>

    <footer>
        <!-- フッターの内容 -->
    </footer>
</body>
</html>
  • セクションの定義と継承: 各ページでこのレイアウトを継承し、独自のコンテンツを挿入することができます。
<!-- resources/views/home.blade.php -->
@extends('layouts.app')

@section('title', 'Home Page')

@section('content')
    <h1>Welcome to the Home Page</h1>
@endsection

この例では、layouts.appのテンプレートを継承し、

@yield('title')や@yield('content')で指定された場所にコンテンツが挿入されます。

コンポーネントとスロット

Bladeには再利用可能なUIコンポーネントを作成するための仕組みが組み込まれています。

コンポーネントは特にモダンなフロントエンドフレームワークでよく使われるコンセプトで、

Laravelでも同様のアプローチが可能です。

コンポーネントの作成

  • まず、php artisan make:componentコマンドで新しいコンポーネントを作成します。
php artisan make:component Alert

これで、app/View/Components/Alert.phpというクラスと、resources/views/components/alert.blade.phpというBladeファイルが生成されます。

  • コンポーネントクラス: コンポーネントクラス内では、必要なデータやロジックを定義します。
namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;

    public function __construct($type = 'info')
    {
        $this->type = $type;
    }

    public function render()
    {
        return view('components.alert');
    }
}
  • コンポーネントビュー: resources/views/components/alert.blade.phpに、表示ロジックを記述します。
<div class="alert alert-{{ $type }}">
    {{ $slot }}
</div>

コンポーネントの使用

Bladeテンプレートでコンポーネントを次のように使用します。

<x-alert type="danger">
    This is a danger alert!
</x-alert>

ここで、$slotはコンポーネント内で定義されるデフォルトの内容を意味します。

Viewのキャッシュと最適化

Laravelは、Bladeテンプレートを最適化するために、

PHPコードにコンパイルされたビューをキャッシュします。

これにより、パフォーマンスが向上します。

Bladeキャッシュの手動クリア

Bladeテンプレートのキャッシュを手動でクリアするには、次のコマンドを使用します。

php artisan view:clear

Viewにおけるセキュリティ対策

Bladeテンプレートは、出力されたデータを自動的にエスケープします。

これにより、XSS（クロスサイトスクリプティング）攻撃からアプリケーションを保護します。

エスケープ機能

{{ $変数 }}で表示されるデータは、自動的にHTMLエスケープされるため、セキュリティが保たれます。

ユーザー入力など信頼できないデータをそのまま表示する場合も安全です。

まとめ

LaravelのViewシステムは柔軟で強力です。

特に、Bladeテンプレートエンジンの簡潔な構文やディレクティブを使うことで、

開発者はコードをシンプルに保ちながら効率的にUIを構築できます。

タイトルとURLをコピーしました