LaravelでのViewを初心者にもわかりやすく解説

はじめに

LaravelはPHPのフレームワークの中でも多くの人に利用されています。 その中でもViewの仕組みはアプリケーションの見た目をコントロールするうえで重要なポイントになるでしょう。 しかし、はじめてLaravelを触ると、「Viewとは何だろう?」と疑問を抱くかもしれません。 ここでは、LaravelのViewがどのような役割を果たし、どのように使いこなせばよいのかを整理してみます。

実務でLaravelを使う場面では、コントローラやデータベースとの連携はもちろんですが、見た目(UI)を正しく実装することも大切です。 このViewの仕組みを理解すれば、処理と画面表示をきちんと分離し、メンテナンス性や再利用性の高いコードを書くことができるでしょう。

この記事を読むとわかること

  • LaravelにおけるViewの役割
  • Bladeテンプレートの構文や使い方
  • ディレクトリ構成とViewの管理方法
  • コントローラとの連携で押さえるべきポイント
  • 実務での活用例

LaravelにおけるViewの基本的な役割

フレームワークを使うときは、表示部分(View)とデータ処理(Model)、それらを結びつける部分(Controller)を意識するのが基本的な考え方ですね。 LaravelではMVCアーキテクチャを採用していて、Viewはデータを見やすい形で利用者に提示する役割を担います。

コントローラが受け取ったデータをViewに渡し、その結果をHTMLとして生成してブラウザへ返すのが大まかな流れです。 たとえば、ユーザー情報を表示したい場合、コントローラでユーザー情報を取得し、そのデータをViewに渡します。 View側では取得したデータを配置するためのHTMLを組み立て、最終的に表示部分が完成する、というイメージですね。

このViewを効率よく書くために、LaravelではBladeテンプレートエンジンが提供されています。 Bladeを使うことで、シンプルな構文でロジックをHTMLに埋め込めるのが特徴です。

Bladeテンプレートの仕組み

LaravelのViewを語るうえで、Bladeは欠かせない存在です。 HTML内にPHPを直接書くよりも整った構文で書けるため、可読性と保守性が高まることが期待できます。 たとえば、変数を表示するときは{{ }}構文を用いることで、簡潔かつ安全に出力が行えます。

Bladeの大まかな流れを見てみましょう。 Bladeファイル(拡張子は.blade.php)を用意してHTMLを書き、その中に{{ $変数 }}@if@foreachなどのBlade専用ディレクティブを挿入します。 最終的には通常のPHPファイルにコンパイルされ、サーバー側で処理されてHTMLが生成される仕組みです。

たとえば、以下のようなwelcome.blade.phpファイルを作り、変数を埋め込むことができます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
  </head>
  <body>
    <h1>ようこそ、{{ $userName }}さん</h1>
    <p>こちらはBladeテンプレートのサンプルです。</p>
  </body>
</html>

テンプレートエンジンのメリットは、PHPのコードを直接書くよりも構文がわかりやすいことです。 さらに、XSS(クロスサイトスクリプティング)対策が標準でサポートされているのもポイントと言えるでしょう。

ビューの管理とディレクトリ構成

Laravelの新規プロジェクトを作成すると、resources/viewsディレクトリが用意されています。 このディレクトリ内に、.blade.phpファイルを配置していくのが基本のスタイルです。

名前空間で分けるようにフォルダを整理することで、規模が大きくなったときも探しやすくなります。 たとえば、ユーザー管理画面用のビューはresources/views/usersフォルダ、商品管理画面用のビューはresources/views/productsフォルダに置くなど、用途別に振り分ける方法がよく採られます。

整理しておかないとファイル数が増えたときに見通しが悪くなるので、できるだけ初期段階で方針を決めると良いでしょう。 コントローラで返すときのビューの指定では、.(ドット)でディレクトリをつなげます。 たとえば、resources/views/users/index.blade.phpを呼び出すなら、コントローラではreturn view('users.index');と書きます。

以下は、簡単なディレクトリ構成例です。

resources
└── views
    ├── layout
    │   └── app.blade.php
    ├── users
    │   ├── index.blade.php
    │   └── detail.blade.php
    └── products
        └── list.blade.php

このように配置しておくと、後でビューの管理がしやすくなるでしょう。

具体的なBladeの使い方

Bladeではさまざまなディレクティブが用意されています。 ここではよく使うものをいくつか紹介しましょう。

{{ $変数 }}

変数を出力します。

@if, @elseif, @else, @endif

条件分岐を扱います。

@foreach, @endforeach, @for, @endfor, @while, @endwhile

繰り返し処理を扱います。

@extends, @section, @yield

レイアウトファイルを継承するために使います。

レイアウト継承を例に見てみましょう。 共通デザインをlayout/app.blade.phpに定義し、各画面で継承するイメージです。

layout/app.blade.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>@yield('title')</title>
  </head>
  <body>
    <header>
      <h1>共通ヘッダー</h1>
    </header>

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

    <footer>
      <p>フッター部分</p>
    </footer>
  </body>
</html>

users/index.blade.php

@extends('layout.app')

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

@section('content')
<h2>ユーザー一覧</h2>
<ul>
  @foreach($users as $user)
    <li>{{ $user->name }}</li>
  @endforeach
</ul>
@endsection

このようにすることで、複数のページで共通のレイアウトを使いつつ、中身だけ切り替えられます。 Bladeを活用すると、重複するHTMLをまとめられるので、保守性が高くなるでしょう。

ビューとコントローラの連携

Laravelでは、ビューを返すときにreturn view('ファイルパス');という書き方をするのが基本です。 この際、コントローラからViewへデータを渡したい場合は、以下のように第二引数に連想配列で渡せます。

public function index()
{
    $users = [
        (object)['name' => '鈴木'],
        (object)['name' => '田中'],
        (object)['name' => '佐藤'],
    ];

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

users.indexというビューに対して、'users' => $usersという形でデータを渡しています。 受け取ったビュー側では{{ $users }}を利用したり、繰り返し処理を行うことでHTML表示ができるわけです。

また、コントローラからリダイレクトを行うときは、redirect()を使います。 どのタイミングでビューを表示し、どのタイミングでリダイレクトするのかが分かれるところなので、用途に応じて使い分けると良いでしょう。

実務での活用例

実務では、ログイン後のダッシュボードや商品一覧、各種入力フォームなど、さまざまな画面を作成することが多いでしょう。 ここでは、LaravelのViewを使ったフォームの例を簡単に見てみます。

@extends('layout.app')

@section('title', 'お問い合わせフォーム')

@section('content')
<h2>お問い合わせ</h2>

<!-- エラーメッセージ表示 -->
@if ($errors->any())
  <div>
    <ul>
      @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
      @endforeach
    </ul>
  </div>
@endif

<!-- フォーム本体 -->
<form action="/contact" method="POST">
  @csrf
  <label>名前:</label>
  <input type="text" name="name" value="{{ old('name') }}">

  <label>メールアドレス:</label>
  <input type="email" name="email" value="{{ old('email') }}">

  <label>内容:</label>
  <textarea name="message">{{ old('message') }}</textarea>

  <button type="submit">送信</button>
</form>
@endsection

このようにBlade上でフォームを書き、バリデーションエラーがある場合は$errorsからメッセージを取り出せます。 コントローラ側でバリデーションを行い、不正な入力があれば戻す、という流れですね。

もし実務で大型のUIを扱う場合は、レイアウトファイルをさらに細分化したり、コンポーネント化して再利用しやすくすることが多いです。

条件分岐や繰り返し処理が多い画面ではBladeのディレクティブを上手に利用することで、可読性を保ちやすくなります。

BladeディレクティブやViewに関する簡単な比較表

下記は、LaravelのView(Blade)でよく使うディレクティブや関連要素について、簡単に比較した表です。 用途ごとに見比べると、それぞれが持つ役割がより明確になるかもしれません。

ディレクティブ(または要素)用途メリット
{{ $変数 }}変数や文字列の表示エスケープ処理が自動で行われる
@if ~ @endif条件分岐HTML内に簡潔に書ける
@foreach ~ @endforeach繰り返し処理配列やコレクションをループで表示
@extendsレイアウトの継承共通部分をまとめて管理できる
@yield, @sectionレイアウトの特定部分を差し替え柔軟にページ固有の要素を追加できる
return view('xxx')コントローラからビューを返すデータを連想配列で渡しやすい

こうしたディレクティブを組み合わせることで、ひとつの画面をスッキリと記述できるでしょう。

まとめ

LaravelのViewは、Bladeテンプレートを使ってHTMLを効率よく生成するための仕組みです。 単なるHTMLの表示ではなく、レイアウトの継承や安全な変数埋め込みなどが簡潔に実装できるのが特徴といえます。

実務では、画面数が増えると同時にメンテナンスが大変になりがちです。 しかし、最初にディレクトリ構成を整えてビューを整理しておけば、保守性を高く保ちながら機能を追加していけるのではないでしょうか。 Bladeに用意されているさまざまなディレクティブも活用しつつ、コントローラとの連携をスムーズにしていくのがポイントです。

LaravelのViewを使いこなすことで、複数人での開発や大規模プロジェクトでもスムーズに画面を管理できるようになります。

Laravelをマスターしよう

この記事で学んだLaravelの知識をさらに伸ばしませんか?
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。