31
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【PHP】Laravelのbladeテンプレートを理解する。

Posted at

個人用メモです。
以下のコードの各行が何をしているのかを理解する。

table.blade.php
<div class="p-article__table-wrap">
<table class="p-article__table {{ $classes }}">
  @if ($table->getColgroup())
  <colgroup>
    @if ($table->getColgroup())
      @foreach ($table->getColgroup()->getCols() as $col)
        <col width="{{ $col->getWidth() ?: 'auto'}}">
      @endforeach
    @endif
  </colgroup>
  @endif

  @include('mrgrpcv::items.items', ['items' => $items])
</table>
</div>

##目次

  1. bladeとは?
  2. bladeのメリット
  3. @アットマークの意味
  4. $の意味
  5. 二重波カッコ{{ }}の意味
  6. コメントアウト
  7. @foreach@endforeach
  8. アロー「->」の意味
  9. ダブルアロー「=>」の意味
  10. ?:の意味(三項演算子の省略形)
  11. @includeの意味
  12. 名前空間
  13. $classesの中身
  14. $classの元となる$itemServiceがどこからきているか?
  15. @injectの意味

##bladeとは?
ファイルの拡張子は.blade.php
bladeと呼びLaravel特有のファイル。ビューの作成に使われるテンプレート

bladeファイルの記述内容がブラウザに表示される。(Vue.jsの.vueファイルやtemplateに該当する)

ビュー(表示)のためのファイルのため、bladeビューと呼ばれる。

###bladeのメリット
基本的な書き方はHTMLと同じ。
HTMLタグと併せてPHPも使うことができる。

{{ $classes }}@if ($table->getColgroup())など。

HTMLの中で変数を使用したり、if文やfor文などを埋め込むことができる。


##`@`アットマークの意味 `@if`や`@foreach`などのアットマークはこれがphpの処理ということを示している。

blade.phpファイル特有の書き方で、HTMLの間にif文などのPHPを使いたい場合に、冒頭に@をつける。

@if@foreachなどアットマークがついた指示をディレクティブと呼ぶ

ディレクティブとは?
directiveは指令の意味。.blade.phpファイル内に@から始まるコードがあれば、PHPに変換せよという指令になる。


##`$`の意味 **変数**を表す。`$classes`や`$table`など。これらの変数は親ファイルから渡される。

親ファイルの中でこのtable.blade.phpをincludeした際に引数でデータを渡している。

親ファイル(item.blade.php)
@switch($itemService->getItemType($item->getType()))
  @case('table')
    @include('mrgrpcv::items.table', ['table' => $item->getTable(), 'items' => $item->getItems(), 'id' => $item->getId(), 'classes' => $classes])
    @break
@endswitch
@include抜粋
@include('mrgrpcv::items.table', [
  'table' => $item->getTable(), 
  'items' => $item->getItems(), 
  'id' => $item->getId(), 
  'classes' => $classes
  ]
)

mrgrpcv::items.table
名前空間mrgrpcvのitemsフォルダのtable.blade.phpファイルを呼び出し。

'table' => $item->getTable()
別のビューを呼び出したときに渡したデータ。
指定したファイルの中で、$tableという変数名でデータ$item->getTable()が利用できるようになる。


##二重波カッコ`{{ }}`の意味 値を表示する。

▼echoとの違い
{{ }}ならタグが文字列として出力できる。JS勝手に実行されることなく安心。(クロスサイトスクリプティングの防止)

echoはタグをHTMLタグとして処理する。<script>で囲まれた変数が渡されればその内容を実行してしまう。。。

tektektechさんの実例がわかりやすい。

###コメントアウト
{{ }}の記述はコメントアウトにも使われる。コメントアウトの場合は--でコメントを囲む。

{{-- コメント --}}


##`@if`と`@endif` 文の頭に`@`をつけると、HTML内でその文を使える。

処理内容は改行して記述。
終了するときは、@end文の名前とする。

@if(条件)
  処理
@else if(条件)
  処理
@else 
  処理
@endif

条件がtrueの場合に処理を実行。


##`@foreach`と`@endforeach` 考え方は`@if`と同じ。

foreach( 配列 as 変数): 処理
配列の要素を一つづつ取り出し、変数に格納する。処理の中でその変数を使える。


##アロー「->」の意味 インスタンスのもつプロパティやメソッドにアクセスしている。 ・`インスタンス->プロパティ/メソッド`

▼例
$table->getColgroup()

インスタンスが格納された変数$tableのメソッドgetColgroupを実行した戻り値が返る。


##ダブルアロー「=>」の意味 連想配列のキーと値を結びつける。`array()`または`[ ]`の中で使用することで連想配列を作成できる。

$arr = ['item' => 'a']

$items = "a";

#連想配列の作成
$arr = ['items' => $items];

#確認
var_export($arr);
array (
  'items' => 'a',
)

##`?:`の意味(三項演算子の省略形) 三項演算子の省略形。trueの場合に条件式の値をそのまま用いる。

▼通常の三項演算子
条件式 ? trueの場合の処理 : falseの場合の処理

▼省略形
条件式 ?: falseの場合の処理
 ┗ trueの場合は条件式の値をそのまま用いる。


<col width="{{ $col->getWidth() ?: 'auto'}}">
元の処理
@if ($col->getWidth())
  {{ $col->getWidth() }}
@else 
  auto
@endif

##`@include`の意味 `include('ファイルパス')`で指定した外部ファイルを読み込む。

第2引数は指定したファイルにデータを渡している。

@include('ファイル名', '変数名' => 渡すデータ)
 ┗ 変数名に$は不要。
 ┗ 指定ファイルで渡されたデータを使う場合は$変数名とする。

@include('mrgrpcv::items.items', ['items' => $items])

つまり、指定したファイルitems.blade.php内で、$itemsを使うと、このファイルで定義した$itemsを使うことができる。

###名前空間
ファイル名でmrgrpcv::items.itemsを指定している。
ダブルコロンは名前空間

これを外部のビューとして扱うためには、サービスプロバイダーのファイル(xxxServiceProvider.php)に、loadViewsFormメソッドとpublishesメソッドを使ってファイルの場所を登録する。

ServiceProvider.php
public function boot()
    {   
        $this->loadViewsFrom(__DIR__.'/../../views', 'mrgrpcv');
        $this->publishes([
            __DIR__.'/../../views' => resource_path('views/vendor/mrgrpcv'),
        ], 'mrgrpcv');
    }

例えば上記のように設定すると/viewsフォルダに入っているファイルをmrgrpcv::という名前空間で指定することができる。

後ろのファイル名は.blade.phpが省略された形。
ドットで繋がる場合はフォルダの中に入ったファイルを指す。

よって、mrgrpcv::items.itemsは、../../views/items/items.blade.phpを指す。

(参考)https://readouble.com/laravel/5.dev/ja/packages.html


##`$classes`の中身 `{{ $classes }}`で呼び出されている`$class`も親ファイルから渡されている。

item.blade.phpファイルが親にあたり、その中で@includeによりtable.blade.phpにデータが渡されている。

$classesはこの元ファイルの情報に定義されている。

item.blade.php
@inject('itemService', 'LaravelMicresArticle\Services\ItemService')

@php
  $classes = $itemService->getClasses($item);
@endphp


@include('mrgrpcv::items.table', [
  'table' => $item->getTable(), 
  'items' => $item->getItems(), 
  'id' => $item->getId(), 
  'classes' => $classes
  ]
)

###`$class`の元となる`$itemService`がどこからきているか?

$classは以下のように定義されている。

$classes = $itemService->getClasses($item);

$itemServiceインスタンスのメソッドgetClasses($item)で呼び出した値が入っている。

この$itemService@injectで渡されたインスタンスが格納された変数となっている。

@inject('itemService', 'LaravelMicresArticle\Services\ItemService')

###`@inject`の意味 `@inject`ディレクティブを使うと、指定したクラスから生成したインスタンスを格納した変数を使えるようになる。

@inject('変数名', 'クラス名')

ここでクラス名は'LaravelMicresArticle\Services\ItemService'

冒頭のLaravelMicresArticle\Services\はnamespace。ItemServiceがクラス名になる。

以下ファイルのclassを呼び出している。

ItemService.php
<?php

namespace LaravelMicresArticle\Services;
use Illuminate\Support\Facades\Blade;

class ItemService
{
    public function getClasses(object $item):string
    {
        $classes = 'article-item';
        if(!empty($item->getTypeDetails())){
            $classes .= ' ' . $item->getTypeDetails();
        }elseif($item->getType() == 1){
            $classes .= ' custom';
        }elseif($item->getType() == 99){
            $classes .= ' items';
        }
        if(method_exists($item, 'getBoxType')) $classes .= ' ' . $item->getBoxType();
        foreach($item->getClasses() as $class){
            if(method_exists($item, 'getClasses')) $classes .= ' ' . $class;
        }
        
        return $classes;
    }
}
31
36
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
31
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?