WEBエンジニアによるキンスレと技術系ブログ

今はまっているゲームと技術系の記事をメインに投稿を続けるブログ

ページ内リンク

【Laravel】Bladeテンプレートを導入して各画面の共通項目を効率的に定義する方法

今回はLaravelプロジェクトを作成後、Bladeテンプレートの導入方法についてまとめました。

Bladeテンプレートとは?

まずBladeとはMVCのViewに対応する画面表示用のファイルとなっています。
Bladeテンプレートを使用することで、画面タイトル・ヘッダー・フッターといったパーツを各画面で共通して利用することが出来ます。
Bladeテンプレートファイルを「親ビュー」テンプレートを利用するファイルを「子ビュー」と言ったりします。

ほとんどのWebページではBladeテンプレートを採用した方が効率的に開発が出来るはずです。
では早速Laravelプロジェクトを作成してBladeテンプレートを実装していきましょう。

Laravelのプロジェクトをまだ作成していない方は、下記の記事を参考にプロジェクトの作成を行いましょう。

www.raruspeer.com

親ビュー(Bladeテンプレートファイル)の作成

まずは下記ディレクトリにテンプレート用のファイルを作成しましょう。
プロジェクト作成時にはviewsディレクトリはありますので、layoutsディレクトリを作成するところからになります。

[ディレクトリ]
resources/views/layouts/
[ファイル名]
master.blade.php

<!doctype html>
<html>
    <head>
        <title>サンプルサイト:@yield('title')</title>
    </head>
    <body>
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

「@yield」と記載している部分が各ページによって変化します。

子ビュー(テンプレートを利用した画面)の作成

作成したテンプレートを利用する画面を作成しましょう。

[ディレクトリ]
resources/views/
[ファイル名]
sample.blade.php

@extends('layout.master')

@section('title', 'サンプルページ')

@section('content')

<p>サンプル画面だよ。</p>

@endsection

「@extends」でBladeテンプレートファイル「master」を利用することを定義しています。
「@section」で第1引数に指定した部分(「title」又は「content」)に各画面の内容を定義します。

ルーティング

作成した子ビューを画面で確認する為にルートの設定を行います。
今回はhttp://127.0.0.1:8000/sampleに接続した際に画面が表示されるように設定します。

[編集するファイル]
/routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

// 追加部分
Route::get('/sample', function () {
    return view('sample');
});

画面で確認

http://127.0.0.1:8000/sampleに接続して確認してみましょう。
エラーが出た場合はサーバーが立っているかパスが間違っていないかなどを確認しましょう。
サーバーが立ってない場合は、ターミナルにて今回のプロジェクトのディレクトリで「php artisan serve」コマンドを実行しましょう。

問題なく設定できていれば下記画面が表示されます。
f:id:raruspeer:20190203151432p:plain

まとめ

Bladeテンプレートを利用することで同じ処理を各画面で定義することなく効率的にLaravel開発が行えます。
新規でプロジェクトを作成した際はどの部分が共通項目になるかを考えBladeテンプレートを上手に利用していきましょう。

以上となります。
ありがとうございました。