先生と生徒の会話形式で理解しよう

生徒

「Laravelで画面に文字を表示したいんですが、どうすればいいですか？」

先生

「Laravelでは、ビューという仕組みを使って、画面に内容を表示しますよ。」

生徒

「ビューって何ですか？どうやって作るんですか？」

先生

「ビューとは、HTMLを書く場所のことです。Blade（ブレード）というテンプレートも使えるので、一緒に学んでいきましょう！」

1. ビューとは何か？

Laravelで「ビュー」とは、画面に表示する内容を記述する部分のことです。HTMLを記述して、Webブラウザに見えるページを作る役割があります。ビューは、Laravelのフォルダの中では、resources/viewsという場所にあります。

例えば、Webページの「見た目」や「表示内容」はこのビューで管理されます。Laravelでは、Blade（ブレード）という専用のテンプレートエンジンを使って、より便利にビューを作ることができます。

2. Bladeテンプレートとは？

Blade（ブレード）テンプレートは、Laravelで使える特別なHTMLの書き方です。HTMLに少しだけPHPのような命令文を入れて、簡単に動的なページ（変化するページ）を作ることができます。

Bladeファイルの拡張子は、.blade.phpという少し変わった名前です。例えば、index.blade.phpのようになります。

3. ビューを作る手順

まずは、ビューのファイルを作りましょう。例として、helloというフォルダの中に、index.blade.phpというファイルを作ります。

ファイルの場所は次のようになります：

resources/views/hello/index.blade.php

このファイルの中に、HTMLを記述します。たとえば下のように書いてみましょう。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>はじめてのビュー</title>
</head>
<body>
    <h1>こんにちは、Laravel！</h1>
    <p>これはBladeテンプレートで作られたページです。</p>
</body>
</html>

4. コントローラからビューを表示する

作成したビューをブラウザで見るには、コントローラから表示するように設定します。

例えば、HelloControllerというコントローラの中に以下のようなコードを書きます：


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

ここでのhello.indexは、「resources/views/hello/index.blade.php」を意味しています。.blade.phpは書かなくて大丈夫です。

5. ルートでURLとコントローラをつなげる

コントローラでビューを表示するには、URLと結びつける必要があります。routes/web.phpに以下を追加します：


use App\Http\Controllers\HelloController;

Route::get('/hello', [HelloController::class, 'index']);

このルート設定により、/helloというURLにアクセスすると、HelloControllerのindexメソッドが実行され、その中でビューが表示される流れになります。

6. Laravelの開発サーバーで確認

Laravelの開発用サーバーを起動します。ターミナルで次のコマンドを実行しましょう。


php artisan serve

そして、ブラウザで以下のアドレスにアクセスします。


http://127.0.0.1:8000/hello

先ほど作成したBladeテンプレートの内容が表示されれば成功です！

7. Bladeで変数を表示する方法

Bladeテンプレートでは、PHPの変数も簡単に表示できます。コントローラ側で次のように値を渡してみましょう。


public function index()
{
    $name = '太郎';
    return view('hello.index', ['name' => $name]);
}

ビュー側では、次のように変数を表示できます：


<p>{{ $name }}さん、ようこそ！</p>

{{ }}で囲むと、その中の変数が表示されます。

8. Bladeの基本的な構文

Bladeには他にも便利な構文があります。以下は代表的なものです：

@if：条件分岐
@foreach：繰り返し処理
@extendsや@section：テンプレートの継承

これらを使うと、より効率的にページを作ることができます。

まとめ

Laravelでビューを表示する仕組みは、フレームワークの中でも特に触る頻度が高い大切な部分です。ビューは画面の見た目を担当し、Bladeテンプレートはそのビューをより柔軟に、そして効率よく扱えるようにする便利な存在です。 HTMLとLaravelの機能が自然に組み合わさり、動的な画面を簡単に構築できるようになるため、学び始めたばかりの方でも扱いやすいのが特徴です。今回の記事では、ビューの基本、Bladeテンプレートの役割、コントローラとの連携方法、ルート設定、変数の渡し方など、画面表示に必要な流れを一通り確認しました。

特にBladeテンプレートは、ただのテンプレートエンジンではなく、条件分岐や繰り返し、テンプレート継承など、多様な機能を自然な書き方で扱えるのが魅力です。ページごとに同じレイアウトを書かずに済むことでコードの重複を防ぎ、開発効率を大きく向上させることができます。また、変数埋め込みがシンプルに扱えるため、コントローラ側でデータを整え、ビューでそれをわかりやすく表示するという役割分担がより明確になります。

さらに、ビューを表示するためには、コントローラとルートの設定が密接に関係していることも学びました。「ビューを作ったのに表示されない」という初心者にありがちなトラブルも、ルート設定やメソッド名、ファイル名の対応関係を理解すれば簡単に解決できるようになります。開発サーバーを起動してブラウザで確認するサイクルは、Laravel開発における基本の流れであり、習慣として身につけておくとスムーズです。

また、以下のサンプルコードでは、Bladeでの変数表示、条件分岐、HTMLとの組み合わせなど、今回学んだ内容をまとめて確認できるようにしています。


<!-- resources/views/hello/sample.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>サンプルビュー</title>
</head>
<body>
    <h1>{{ $title }}ページへようこそ</h1>

    @if($user)
        <p>{{ $user }}さん、こんにちは！</p>
    @else
        <p>ゲストさん、ログインしていません。</p>
    @endif

    <h2>メッセージ一覧</h2>
    <ul>
        @foreach($messages as $message)
            <li>{{ $message }}</li>
        @endforeach
    </ul>
</body>
</html>

この例のように、Bladeでは「{{ }}」による変数表示、「@if」や「@foreach」などの制御構文を直感的に使うことができ、コントローラ側で渡したデータをわかりやすい形で画面に反映できます。また、ファイル構造も規則的であり、resources/views以下に配置することでLaravelが自動的に場所を認識してくれます。

ビューとコントローラの役割を正しく理解することで、Laravelの開発は一気に進めやすくなります。画面に表示する部分はビュー、処理の指示を出すのがコントローラという役割分担を意識し、それぞれを整理しながら作成することで、アプリ全体が見通しの良いものになります。 Bladeを使いこなせるようになると、Laravelでの開発はさらに楽しく、柔軟性の高いページ作成が実現できるようになります。

今後、フォーム入力やレイアウトの共通化、条件分岐・繰り返しの活用など、Bladeに備わっている多くの機能を学んでいくことで、 Webアプリケーションらしい動きのあるページをより自然に作成できるようになります。ぜひ今回の内容を基礎として、さまざまなビュー作成に挑戦してみてください。

先生と生徒の振り返り会話

生徒

「Bladeテンプレートってもっと難しいものだと思っていましたが、意外と自然に書けることがわかりました！」

先生

「そうですね。BladeはLaravelの大きな魅力の一つで、初心者にも扱いやすい工夫がたくさんあります。」

生徒

「ビューとコントローラのつながりも理解できて、どこで何を書くかがはっきりしてきました。」

先生

「その感覚はとても大事です。Laravelでは役割の分担を意識することで、コードの整理が自然にできるようになりますよ。」

生徒

「次はBladeの繰り返しやテンプレート継承にも挑戦してみたいです！」