Tech Starlog

Laravel View（Blade）の基本的な使い方

投稿日：2026/01/14

Laravelでは、画面表示をView（Bladeテンプレート）で管理します。
Controllerは「データを準備する役割」、Viewは「画面を描画する役割」を担い、役割を分離することで保守性の高いアプリケーションを構築できます。

本記事では、LaravelのView（Blade）の基本的な使い方について解説します。

Viewとは？

Viewとは、ユーザーに表示するHTMLを管理するファイルです。

Laravelでは、resources/views配下に配置された
.blade.phpファイルがViewとして扱われます。

Viewの役割は次のとおりです。

  • 画面レイアウトの定義
  • データの表示
  • 条件分岐・繰り返し表示

一方で、次のような処理はViewには書きません。

  • データベースアクセス
  • ビジネスロジック
  • 複雑な計算処理

Viewを表示する基本

Viewファイルを作成する

以下のファイルを作成します。

resources/views/posts/index.blade.php

中身はシンプルなHTMLで問題ありません。

<h1>サンプル一覧</h1>
<p>Laravel Viewのサンプルページです。</p>

ControllerからViewを表示する

Controllerで view() 関数を使ってViewを返します。

public function index()
{
    return view('samples.index');
}

view('samples.index') は、
resources/views/samples/index.blade.php を意味します。

ControllerからデータをViewへ渡す

Controllerで取得したデータを、Viewに渡すことができます。

public function index()
{
    $samples = Post::latest()->get();

    return view('samples.index', compact('samples'));
}

View側では、変数として参照できます。

<h1>記事一覧</h1>

<ul>
    @foreach ($samples as $sample)
        <li>{{ $sample->title }}</li>
    @endforeach
</ul>

{{ }} はHTMLエスケープされるため、XSS対策として安全です。

よく使うBlade構文

変数の表示

{{ $sample->title }}

HTMLをそのまま出力したい場合（※信頼できるデータのみ）：

{!! $sample->body !!}

条件分岐（if）

@if ($samples->isEmpty())
    <p>記事がありません。</p>
@endif

繰り返し（foreach）

@foreach ($samples as $sample)
    <p>{{ $sample->title }}</p>
@endforeach

レイアウトを共通化する

共通レイアウトを作成する

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>@yield('title')</title>
</head>
<body>
    <header>ヘッダー</header>

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

    <footer>フッター</footer>
</body>
</html>

子Viewからレイアウトを継承する

@extends('layouts.app')

@section('title', 'サンプル一覧')

@section('content')
    <h1>記事一覧</h1>
@endsection

レイアウトを共通化することで、
ヘッダーやフッターを1か所で管理できます。

Viewでやってはいけないこと

  • DBアクセスを書く
  • 複雑な条件分岐・計算を書く
  • Serviceを直接呼び出す

Viewは 「表示専用」 に徹することが重要です。

まとめ

  • Viewは画面表示専用のレイヤー
  • Controllerからデータを受け取って表示する
  • Blade構文で条件分岐・繰り返しが書ける
  • レイアウトを共通化すると保守性が向上する
⬅️ 記事一覧へ戻る