Laravel - Blade テンプレート：初めてのガイド

こんにちは、Web開発者志望の方々！今日は、LaravelのBladeテンプレートエンジンの素晴らしい世界に飛び込みます。コードを書いたことがない方でも心配しないでください。この旅の親切なガイドとして私はあなたと一緒に一歩一歩進んでいきます。

Laravel - Blade Templates

Bladeとは？

BladeはLaravelの強力なテンプレートエンジンです。魔法のようなツールと考えてください。それが動的で再利用可能なHTMLテンプレートを作成する手助けをしてくれます。ウェブページの空白部分に実際のデータを埋めることができる超賢いアシスタントのようなものです。

Bladeを使う理由は？

簡単で学びやすい
コードをクリーンで読みやすくする
反復を避ける手助けをしてくれる（開発者は怠け者です。それは悪いことではありません！）

では、袖をまくって始めましょう！

Bladeテンプレートレイアウトを作成する手順

1. メインレイアウトを作成する

まず、メインレイアウトを作成します。これはあなたのウェブサイトの骨組みのようなもので、すべてのページで同じに保たれる部分を含みます。

resources/viewsディレクトリに新しいファイルlayout.blade.phpを作成します：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title')</title>
</head>
<body>
<header>
<h1>私の素晴らしいウェブサイト</h1>
</header>

<main>
@yield('content')
</main>

<footer>
<p>&copy; 2023 私の素晴らしいウェブサイト</p>
</footer>
</body>
</html>

これを分解してみましょう：

@yield('title')：これはBladeに「後で各ページのタイトルを埋める」と言っています。
@yield('content')：これは各ページの主要内容が入る場所です。

2. 子テンプレートを作成する

次に、私たちのレイアウトを使う子テンプレートを作成します。新しいファイルhome.blade.phpを作成します：

@extends('layout')

@section('title', 'ホームページ')

@section('content')
<h2>私の素晴らしいウェブサイトにようこそ！</h2>
<p>これはホームページの内容です。</p>
@endsection

ここで起こっていることは：

@extends('layout')：これはBladeに私たちのlayout.blade.phpファイルを使うように指示しています。
@section('title', 'ホームページ')：これは前に空白にしたタイトルを埋めます。
@section('content')：これはこのページのユニークな内容を入れる場所です。

3. データの表示

Bladeはデータの表示に非常に優れています。例えば、果物のリストを表示したいとします。私たちのhome.blade.phpを更新します：

@extends('layout')

@section('title', 'ホームページ')

@section('content')
<h2>私の素晴らしいウェブサイトにようこそ！</h2>
<p>これはホームページの内容です。</p>

<h3>私たちの果物セレクション：</h3>
@if(count($fruits) > 0)
<ul>
@foreach($fruits as $fruit)
<li>{{ $fruit }}</li>
@endforeach
</ul>
@else
<p>申し訳ありません、果物はすべて售り切れました！</p>
@endif
@endsection

この例では：

@ifと@else：これにより、テンプレート内で判断を下すことができます。
@foreach：これにより、果物のリストをループすることができます。
{{ $fruit }}：二重の角括弧はBladeに変数の値を表示するように指示します。

4. Bladeコンポーネントの使用

Bladeコンポーネントは、あなたのウェブサイトのLEGOブロックのようなものです。異なるページ間で再利用可能なピースです。シンプルなボタンコンポーネントを作成してみましょう。

新しいファイルresources/views/components/button.blade.phpを作成します：

<button class="btn btn-{{ $type ?? 'primary' }}">
{{ $slot }}
</button>

今、私たちはhome.blade.phpでこのボタンを使えます：

@extends('layout')

@section('title', 'ホームページ')

@section('content')
<h2>私の素晴らしいウェブサイトにようこそ！</h2>
<p>これはホームページの内容です。</p>

@component('components.button', ['type' => 'success'])
クリックしてね！
@endcomponent
@endsection

これは「クリックしてね！」というテキストと成功スタイルのボタンを作成します。

Bladeディレクティブのチートシート

以下是一些常见的Blade指令：

ディレクティブ	目的
@if	条件文
@else	@ifの代替
@elseif	代替条件
@foreach	配列をループ
@for	フォール
@while	ワイズ
@switch	スイッチステートメント
@yield	レイアウト内のセクションを定義
@section	レイアウトの内容を定義
@extends	使用するレイアウトを指定
@include	他のビューをインクルード
@auth	ユーザーが認証されているか確認
@guest	ユーザーがゲストであるか確認

记住，练习使完美！これらのディレクティブを試してみて、自分のテンプレートを作成してみてください。間もなく、あなたはBladeの忍者になり、HTMLをスムーズに切ることができるようになります！

私の教師経験から言えば、学ぶ最良の方法は実際に行うことです。では、私たちが学んだことを使ってシンプルなブログレイアウトを作成してみてください。まずはメインレイアウトを作成し、ホーム、アバウト、ブログ投稿のページを作成し、Bladeの強力な機能を使ってコードをクリーンでDRY（Don't Repeat Yourself）にします。

ハッピーコーディング、そしてBladeがあなたと共に進むことを祈っています！ ?

Credits: Image by storyset