Laravelのテンプレートエンジンは、React、Vueなどのライブラリをサポートしていますが、そんな中でも多くの開発者が、簡単に再利用できるLaravelのBladeエンジンを支持しています。Bladeを使って、レイアウトの拡張、セクションの定義、データ駆動型コンテンツの生成が簡単に行えます。

今回の記事では、Bladeとは何か、どのように機能するのか、そしてLaravelアプリケーションをどのように強化できるかについてご説明します。

Laravel Bladeの使用に必要なこと

Laravel Bladeは、Laravelフレームワークのデフォルトのテンプレートエンジンです。変数、ループ、条件文、その他のPHPの機能をHTMLコードで直接使用することができます。Bladeを利用するには、Laravelプロジェクトのresources/viewsディレクトリに拡張子.blade.php のファイルを作成してBladeビューを定義し、好みの動的ページを構成します。

なぜBladeを使用するのか

Bladeの主な利点の1つは、モジュール化されたコード構成です。Bladeは、コードを再利用可能なモジュールに整理し、アプリケーションの残りの部分に影響を与えることなく、簡単に追加、削除、更新することができます。

Bladeではコードがカプセル化できます。関数のカプセル化により、テストやデバッグ、コードのメンテナンスが容易になります。整理されていないアプリケーションはすぐに管理が困難になるため、このアプローチは大規模なアプリケーションにとって大きなメリットです。

Bladeのテンプレートエンジンは、パフォーマンスが高く、実際に私たちがテストしたPHPフレームワークの中でも最速です。このエンジンは、全てのBladeビューをプレーンなPHPコードにコンパイルし、変更が加えられるまでキャッシュします。この手法によりレンダリングが速くなり、全体的なパフォーマンスの向上が期待できます。

Laravel Bladeの使用方法

それでは、Laravelアプリケーションを作成し、Bladeテンプレートの動作を体験してみましょう。Bladeレイアウトの定義と拡張、Bladeビュー間のデータの受け渡し、様々な制御構造の使用、独自のBladeの作成を行います。

前提条件

この説明を理解するには、以下が必要になります。

  • PHPに慣れていること
  • Composerのインストール（Composer がインストールされていることを確認するにはcomposer -Vを実行）

また、完全なコードをこちらで公開しています。

Laravelアプリケーションの作成方法

サンプルのLaravelアプリケーションを作成するには、以下を実行します。

composer create-project laravel/laravel my-app

ターミナル上の一連の指示に従って、アプリの作成を完了します。

次に、appディレクトリに入り、次のコマンドを実行します。

cd my-app
php artisan serve

ターミナルのリンクをクリックして、Laravelのウェルカムページをブラウザで開きます。

レイアウトの定義方法

レイアウトを使用すると、ウェブアプリケーションのセクションを複数のページで共有できるように設定できます。例えば、アプリケーションがページ間で一貫したナビゲーションバーとフッターを持つ場合、各ページで再度作成するよりも、一度だけ作成した方が効率的です。

順を追って説明する前に、次のスケルトンデモをご覧ください。

レイアウトなしでウェブサイトを作成するコードを以下に示します。ページごとにナビゲーションバーとフッターのコードを書くことになります。

<!-- Page 1 -->
<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>
<!-- Page 2 -->
<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

代わりに、レイアウトを使うことでアプリケーションを簡単に構築し、1つのコードブロックで同じコンポーネントを共有することができます。

<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

Once you’ve defined your layout, you can use it on any page you want:

<!-- Page 1 or Page n -->
<main-layout>
  Content for page n
</main-layout>

Laravelの古いバージョンでは、テンプレート継承を使ってレイアウトを作成する必要がありました。しかし、コンポーネント機能の追加により、堅牢なレイアウトをより簡単に作成できるようになりました。

Laravel Bladeで新しいレイアウトを作成するには、まずこのコマンドを実行してレイアウトのコンポーネントを作成します。

php artisan make:component Layout

このコマンドは、resources/views/ディレクトリのcomponentsというフォルダにlayout.blade.phpファイルを生成します。そのファイルを開き、次のコードを貼り付けます。

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

このコードにより、シンプルなナビゲーションバーとフッターを持つレイアウトコンポーネントが作成できます。slot関数は、レイアウトコンポーネントを拡張するときにメインコンテンツを渡す場所を定義します。

レイアウトの拡張方法

Bladeビューのコンポーネントは、<x-component-name>タグを使用して簡単にインポートできます。この方法は、先に作成したレイアウトコンポーネントにも適用されます。

レイアウト拡張を確認するには、デフォルトのresources/views/welcome.blade.phpファイルを開き、ファイルの内容を次のコードに置き換えます。

<x-layout>
  <div>
	<h1>Hello World!</h1>
	<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

ここでは、レイアウトコンポーネントを使用するようにウェルカムページを更新し、コンテンツとして見出し要素とダミーテキストを渡しています。変更を表示するには、先ほど開いたリンクを再読み込みします。

レイアウト定義により、コードがタイトルデータを渡さない場合には、デフォルトで「Example Website」というタイトルデータがレンダリングされます。このデータをビューの名前付きスロットとして、<x-slot name="slotName" />コード経由で渡すことができます（この例では、<x-slot name="title" /> ）。welcome.blade.phpファイルを以下のコードに変え、ページを再読み込みします。

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

次に、アプリの外観を改善するスタイリングを追加します。public/cssディレクトリ内にapp.cssファイルを作成し、このファイルのコードを貼り付けます。

これにより、http://127.0.0.1:8000/ でアプリケーションをプレビューすると、次のように表示されるはずです。

Hello world laravel
Hello world

バックエンドデータをインクルードする方法

前の例では、スロットを介してコンポーネントとビューの間でデータを簡単に共有しました。しかし、データベースやその他のリモートソースからデータを読み込むには、もっと良い方法があります。

ルータ定義から直接データを読み込み渡し、前の例で名前付きスロットに実行したようにアクセスします。そのためには、 routes/web.phpファイルを開き、その内容を次のコードに置き換えます。

<?php
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

上記のコードでは、"John Doe"という名前をウェルカムビューに渡すようにウェブルートを調整しています。次にBladeビューでこの値にアクセスします。

<div>
  Hello, {{ $name }}
  <!-- Outputs: Hello, John Doe -->
</div>

このメソッドを使用して、データベースからデータを読み込むことができます。たとえば、ToDoリストを含むToDoテーブルがあるとします。DBファサードを使用してこのToDoを読み込み、ビューに渡します。

<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

データベースがない場合は、静的なToDoの配列を渡すようにウェブエントリールートを変更することができます。routes/web.phpファイルを開き、デフォルトの(/)ルートを以下のコードに書き替えます。

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

welcome.blade.phpファイルの内容を以下のコードに置き換え、エンコードされたJSON配列としてTo-Doにアクセスします。

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
  <!-- Output:  ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
</x-layout>

コントロールショートカットの使用方法

Bladeテンプレートエンジンは、様々なデータタイプを条件付きでレンダリングする複数ディレクティブもサポートしています。例えば、ウェルカムビューに渡したto-dosの配列を繰り返し処理するには、welcome.blade.phpファイルに以下のコードを貼り付けて、foreachループを適用できます。

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

この変更により、以下のスクリーンショットのように、To-dosが順序なしの一覧としてレンダリングされるはずです。

順番なしのToDo一覧
順番なしのToDo一覧

条件文のブロックを作るには、@if、@elseif、@else、@endifディレクティブを使います。例えば以下の通りです。

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

welcome.blade.phpファイルの内容を上記のコードに置き換えます。各種if–elseディレクティブが、ToDo項目をカウントし、状況に応じカスタムメッセージを表示します。ToDoの配列に複数のタスクがある場合、ブラウザに「I have multiple tasks!」と表示されます。

サポートされているディレクティブは、Laravelの公式ドキュメントから確認することができます。

カスタム拡張機能の作り方

前の例と同じように、カスタムディレクティブを書くこともできます。試しにテキストを切り捨てるカスタムディレクティブを作ってみましょう。

まず、新しいサービスプロバイダを作成します。

php artisan make:provider TruncateTextServiceProvider

このコマンドは、app/Providers/TruncateTextServiceProvider.phpに新しいサービスプロバイダファイルを生成します。このファイルを開き、内容を次のように置き換えます。

<?php
namespace App\Providers;

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;

class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

このコードはBladeファサードをインポートし、@truncateという新しいカスタムディレクティブを定義するものです。このディレクティブは、$textと$lengthという2つの引数を受け取ります。Str::limit()メソッドを使用して、テキストを指定された長さに短縮します。

最後に、config/app.php設定ファイルのプロバイダの配列に追加して、サービスプロバイダを登録します。

'providers' => [
  // Other service providers
  App\Providers\TruncateTextServiceProvider::class,
],

カスタムディレクティブをBladeテンプレート（welcome.blade.php）で使用するには、@truncateで起動します。

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
  <!-- Outputs: Lorem ipsu... -->
</div>

まとめ

この記事では、Laravel Bladeを使用することで、ウェブアプリケーションのモジュール化された（繰り返しの利用に便利な）ビューを作成しながら、開発プロセスを効率化する方法をご紹介しました。しかし、Laravel開発の旅路はこれで終わりではありません。

アプリケーションをホスティングするインフラストラクチャは、ローカル開発プロセスと同様に大事な要素です。Laravelアプリケーションを次のレベルに引き上げるには、信頼性の高いホスティング環境が必要です。

Kinstaは、パフォーマンス、セキュリティ、スケーラビリティを考え最適化を続けています。アプリケーションの成長を後押しするホスティングソリューションです。LaravelアプリケーションをKinstaに早速デプロイして、ご自身でその違いをご体感ください。

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.