はじめに
前回はLaravelの「Model」を解説し、Eloquent ORMを通じてデータベースを操作する方法を学びました。
今回はView編と題して、LaravelにおけるViewの使い方をもう少し具体的に掘り下げます。
Bladeテンプレート の基本から、レイアウトの共通化、フォームを通じた入力まで順に見ていきましょう。
本記事はLaravelにおけるMVCを解説する全4部構成の記事の「第3部：View編」です。
Viewの役割
LaravelにおけるViewの役割はシンプルです。
- ユーザーに見せる画面を担当
- ロジックを極力持たず、表示専用にするのが理想
ControllerがModelからデータを取得し、それをViewに渡して表示する流れが基本です。
LaravelにおけるViewの基本構造
-
配置場所：
resources/views/ -
ファイル拡張子：
.blade.php（Bladeテンプレートエンジン） -
呼び出し方：Controllerから
view('ファイル名')
例：
return view('posts.index', ['posts' => $posts]);
この場合、resources/views/posts/index.blade.php が表示され、$posts がビューに渡されます。
Bladeテンプレートの基本機能
Bladeはシンプルで扱いやすいテンプレートエンジンです。
ここではよく使う機能を押さえます。
1. 変数の表示
<h1>{{ $title }}</h1>
※ {{ }} は自動的にHTMLエスケープされます。
2. 繰り返し
@foreach ($posts as $post)
<div>{{ $post->title }}</div>
@endforeach
データが空の場合も考慮するなら @forelse を使います。
@forelse ($posts as $post)
<div>{{ $post->title }}</div>
@empty
<p>投稿はありません</p>
@endforelse
3. 条件分岐
@if ($post->is_public)
<p>公開中</p>
@else
<p>非公開</p>
@endif
レイアウトの共通化
アプリ全体で共通のヘッダーやフッターを使う場合、レイアウトを定義して効率化します。
共通レイアウト（layouts/app.blade.php）
<html>
<body>
<header>ヘッダー</header>
<main>
@yield('content')
</main>
<footer>フッター</footer>
</body>
</html>
個別のビュー（posts/index.blade.php）
@extends('layouts.app')
@section('content')
<h1>投稿一覧</h1>
@foreach ($posts as $post)
<div>{{ $post->title }}</div>
@endforeach
@endsection
こうすることで、レイアウト修正は1箇所で済み、再利用性が高まります。
さらに小さな部品は @include で読み込むことも可能です。
@include('components.post', ['post' => $post])
フォームによる入力受付
Viewは「表示」だけでなく「入力受付」の役割も持ちます。
フォームを使ってデータを送信し、Controllerで処理されます。Controllerの後は、最終的にModelを通じてDBに保存されます。
投稿フォーム（View）
<form action="{{ route('posts.store') }}" method="POST">
@csrf
<label>タイトル</label>
<input type="text" name="title" value="{{ old('title') }}">
<label>本文</label>
<textarea name="body">{{ old('body') }}</textarea>
<button type="submit">保存</button>
</form>
-
@csrf… CSRF対策,Laravelのフォームには必須 -
old()… バリデーションエラー時に入力値を保持できる
フォーム送信後の処理やバリデーションの流れについては、次回の Controller編 で詳しく解説します。
まとめ
- Viewは「ユーザーに見せる部分」に特化
- Laravelでは Bladeテンプレート を利用し、安全かつ効率的にViewを記述できる
- Viewはフォームを通じてユーザー入力を受け取り、Controller → Modelへとつなぐ役割も持つ
次回は「Controller編」として、Viewから受け取ったリクエストをどのように処理し、ModelやViewを橋渡しするのかを解説していきます。
宣伝
くすりの窓口ではエンジニアを積極採用中です！
ご興味のある方は下記リンクよりお問い合わせください！
学生向け
中途向け