【0からWEBサービスを作ろう】LaravelのBladeを使う
今回はWEBサービスにLaravelのテンプレートエンジンであるBladeを導入します。
Bladeを利用することで「継承機能」と「セクション定義機能」を利用することができます。
この二つを使うことでWEBサービス内のかなりの部分を共通化することができます。
Bladeの継承機能
色々なWEBサービスを見ていると、一つのWEBサービス内に含まれるページには共通の部分があり、共通のレイアウトで一部分だけが異なる場合が多数あります。このような実装をするには、全ページをコピペして作る方法があります。しかし、これだとヘッダー部分やフッター部分を修正する場合に修正量が膨大になります。
このような状況を解決するために「Bladeの継承機能」を利用します。
「Bladeの継承機能」はWEBサービス内のページの共通部分を定義しておき、各ページではそのレイアウトを継承することで、差分だけを記載することでページが完成します。
まずは、WEBサービスの共通部分を括り出したbase.blade.phpを定義します。
<!doctype html>
<html lang="ja">
<head>
<!-- 共通HTMLヘッダーおよび画面毎HTMLヘッダーの領域を定義 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>テクニカルブックス </title>
</head>
<body>
<div>
<!-- 共通ヘッダーおよび画面毎ヘッダーの領域を定義 -->
</div>
<div>
<!-- 共通コンテンツおよび画面毎コンテンツの領域を定義 -->
</div>
<div>
<!-- 共通フッターおよび画面毎フッターの領域を定義 -->
</div>
<div>
<!-- 共通モーダルおよび画面毎モーダルの領域を定義 -->
</div>
<div>
<!-- 共通scriptおよび画面毎scriptの領域を定義 -->
</div>
</body>
</html>
Bladeのセクション定義機能
Bladeの継承機能はBladeのセクション定義機能の利用を前提としています。セクション定義機能とは、レイアウト内に後でHTMLを埋め込めるように、事前に領域を確保しておく機能です。
<!doctype html>
<html lang="ja">
<head>
@section('head')
<!-- 共通HTMLヘッダーおよび画面毎HTMLヘッダーの領域を定義 -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" itemprop="description" content="@yield('description')">
<meta name="keywords" itemprop="keywords" content="@yield('keywords')">
<title>テクニカルブックス | @yield('title')</title>
@show
@section('css')
<!-- 共通CSSおよび画面毎CSSの領域を定義 -->
@show
</head>
<body>
<div>
@section('header')
<!-- 共通ヘッダーおよび画面毎ヘッダーの領域を定義 -->
@show
</div>
<div>
@section('content')
<!-- 共通コンテンツおよび画面毎コンテンツの領域を定義 -->
@show
</div>
<div>
@section('footer')
<!-- 共通フッターおよび画面毎フッターの領域を定義 -->
@show
</div>
<div>
@section('modals')
<!-- 共通モーダルおよび画面毎モーダルの領域を定義 -->
@show
</div>
<div>
@section('script')
<!-- 共通scriptおよび画面毎scriptの領域を定義 -->
@show
</div>
</body>
</html>
まとめ
今回はBladeの機能を使いました。Bladeの機能は他にも多数あり、使いこなすことで画面作成を効率的にすることができます。
@extends('layout.base')
@section('title', 'To Do')
@section('keywords', 'テクニカルブックス,TODO')
@section('description', 'サービス内で実装のTODOリスト')
@section('head')
@parent
@endsection
@section('css')
@parent
css
@endsection
@section('header')
@parent
header
@endsection
@section('content')
@parent
content
@endsection
@section('footer')
@parent
footer
@endsection
@section('modals')
@parent
modals
@endsection
@section('script')
@parent
script
@endsection