A Laravel（view） - user000422/0 GitHub Wiki

テンプレート（Blade テンプレートエンジン）

Laravelのビュー基本 … テンプレート > レンダリング > 表示（クライアント）

テンプレートファイルを作成 … resources/views/sample/sample_view.php
テンプレートは、コントロールフォルダを作成し、コントロールごとに分けるのが一般的

Bladeテンプレートファイル命名規約 … sample.blade.php （[名].blade.php）
Bladeのインデントはなぜ「半角スペース4つ」なのか。おそらくphpファイルだから…。

継承 … 共通で使用したいテンプレートを継承する機能
セクション … テンプレートページ内の区画（要素）
コンポーネント … さらに部品を独立させたもの ※Ver.7で記述方法が変わった。

よく使われる名前
index.blade.php layout.blade.php create.blade.php edit.blade.php

<html> <!-- Bladeテンプレート resources/views/sample/sample_view.blade.php -->
<body>

  <!-- 変数をテンプレートに埋め込む（二重かっこで変数名を囲む）-->
  <p>{{$sample}}</p>

  <!-- actionでコントローラーを実行 -->
  <form method="POST" action="/sample_post">
    {{ csrf_field() }} <!-- Laravelでは「CSRF対策」が必須のためformには「@csrf」の記述が必ず必要 -->
  </form>

<!-- if ディレクティブ 条件によって表示内容を制御 -->
@if ($sample_color === 'red')
  <p> Hello red </p>
@elseif ($sample_color === 'blue')
  <p> Hello blue </p>
@endif

<!-- for ディレクティブ 繰り返し -->
@foreach ($sample_array as $item)
  <!-- loop 繰り返しディレクティブ用変数 -->
  <!-- loop->index ループ回数を「0」からカウントする -->
@if (9 > $loop->index)
  <p> {{$item}} </p>
@endif
@endforeach

<!-- isset 定義済みでNULLではないこと-->
@isset($users)
    <p>変数は存在します。</p>
@endisset

</body>
</html>

<!-- ベースレイアウトの例 views/layouts/app.blade.php -->
<!-- 名称「app.blade.php」は、公式とmonicaで使用されているため確定にしてもよさそう -->
<html>
<head>
  <!-- @yield 指定セクションを埋め込む -->
  <title>@yield('sample_section_name')</title>

  <!-- css public/css ディレクトリを参照する -->
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
</body>
</html>
// ベースレイアウトを継承するテンプレート これが個別になる

// @extends ベースレイアウトを継承する
@extends('layouts.sample')

// @section 第1引数:セクション名, 第2引数:設定値
@section('sample_section_name', 'sample_value')

// コンポーネント読み込み x-[コンポーネント名]
<x-sample_component />
<!-- コンポーネント views/components/sample_component.blade.php -->
  <p>hello</p>

基本型（レイアウト共通化）

<!-- ベースレイアウト（views/layouts/app.blade.php） -->
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>@yield('title')</title>

        @yield('css')
    </head>
    <body>
        @yield('content')
    </body>
</html>
<!-- 個別のテンプレート -->

応用（テーブルパターン）

<table>
<!-- th割愛 -->
  @if (isset($items) && !empty($items))
  @foreach ($items as $item)
  <tr>
    <td>{{ $item->name }}</td>
    <td>{{ $item->email }}</td>
  </tr>
  @endforeach
  @endif
</table>

⚠️ **GitHub.com Fallback** ⚠️