Bladeテンプレート用の便利なメソッドが詰まったプラグイン「laravel-blade-directives」

Laravelフレームワークの Bladeテンプレートを編集する時に便利なプラグイン「laravel-blade-directives」の紹介です。
 

- Bladeファイル ( Laravel のテンプレートエンジン ) を編集する時に役立つ、Blade専用の ヘルパーが揃った プラグイン

laravel-blade-directives は プロジェクトルート上で ' composer ' コマンドを使って導入します。
( * PHPのバージョンが 5.6 以上の必要があります )

# プロジェクトルート上から composerコマンドを使って導入
composer require appstract/laravel-blade-directives

 
 続いて、プラグインの Service Providerの登録です。' config/app.php ' の ' providers ' 配列内に下記のクラスの namespace を追加します。 なお、Laravel 5.5ではパッケージが自動認識されるので追加の必要は ありません。

// config/app.php * Laravel 5.5 では必要ありません
Appstract\BladeDirectives\BladeDirectivesServiceProvider::class

laravel-blade-directivesは 導入されれば Bladeテンプレート上でそのまま利用出来ます。

* @istrue , @isfalse

' @istrue ', '  @isfalse ' は、 その名の通り 真偽判定をします。@istrue は変数の値が true の時に、@isfalseは値が false の時に 実行されます。

// @istrue()
@istrue($var)
   値が true の時に実行されます
@endistrue
// 一行で書く場合
@istrue($var, '値が true の時に表示されます')

// @isfalse()
@isfalse($var)
   値が false の時に実行されます
@endisfalse
// 一行で書く場合
@isfalse($var, '値が false の時に表示されます')

* @dd , @dump

' @dd ', ' @dump ' は変数をダンプするメソッドです。どちらも Laravelに用意されているメソッドですが、Bladeテンプレートから直接呼び出すことが出来ます。

@dd($var)

@dump($var)

 
' @dd ' メソッドは呼び出したところで処理 ( View のレンダリング ) が停止されますが、 ' @dump ' メソッドは変数がダンプされるのみで、その後の処理も 実行されます。

* @style, @script, @inline

 ' @style ' は、bladeタグで囲めば html の ' style ' タグがレンダリングされ、cssを直接記述できます。また、メソッドにすれば ' link ' タグが作成され、 ' public ' ディレクトリ内の cssファイルを読み込むことが出来ます。

// styleタグが作成され cssを直接記述する
@style
 body { background: black }
@endstyle
// アウトプット
<style>
  body { background: black }
</style>

// linkタグが作成され css ファイルが読み込まれる
@style('/css/app.css')
// アウトプット
<link rel="stylesheet" href="/css/app.css">

 ' @script ' は、bladeタグで囲めば ' script 'タグが作成され javascriptを記述できます。また、メソッドにすれば ' public ' ディレクトリ内の javascriptファイルを読み込むことが出来ます。

// script タグが作成される
@script
 console.log('hello world')
@endscript
// アウトプット
<script>
 console.log('hello world')
</script>

// public ディレクトリ内から '/js/app.js'を読み込み
@script('/js/app.js')
// アウトプット
<script src="/js/app.js"></script>

 ' @inline ' は上記 ' script ', ' style ' と違い、ファイル内のテキストを読み込むメソッドです。 ファイル内のコードが読み込まれ、blade内にアウトプットされます。

// public ディレクトリ内から js ファイルの読み込み
@inline('/js/test.js')
// アウトプット
<script>
// '/js/test.js'内のテキストがそのままbladeテンプレートに表示されます
</script>

// public ディレクトリ内から css ファイルの読み込み
@inline('/css/style.css')
// アウトプット
<style>
//  '/css/style.css'の内のテキストがそのままbladeテンプレートに表示されます
</style>

* @mix

 ' @mix ' は laravel-mixで cssやjs, react, vue ...etc などのアセットファイルを、 versioning でコンパイルした ファイルを呼び出す関数です。

@mix('/css/app.css')
// アウトプット
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">

@mix('/js/app.js')
// アウトプット
<script src="{{ mix('/js/app.js') }}"></script>

* @routeis , @routeisnot

 ' @routeis '  メソッドは Routeの ' name ' メソッド内の値と アクセスしているページが一致した時に実行されるメソッドです。また、反対の動きをする ' @routeisnot ' メソッドも用意されています。

// Routeファイル *web.php
Route::get('/test', function () {
    return view("detectTest");
})->name('testPage');

// Blade側
@routeis('testPage')
    アクセスしているページが 'testPage'の時に実行されます
@endrouteis

@routeisnot('testPage')
    アクセスしているページが 'testPage'じゃない時に実行されます
@endrouteisnot

* @repeat

' @repeat ' は指定回数分、処理を繰り返すメソッドです。

// 3回繰り返し
<ul>
@repeat(3)
 <li>Hello : {{ $iteration }}</li>
@endrepeat
</ul>
// アウトプット
<ul>
 <li>Hello : 0</li>
 <li>Hello : 1</li>
 <li>Hello : 2</li>
</ul>

* @fa

' @fa ' メソッドは font-awesome のアイコンを表示するメソッドです。font-awesomeのアイコンのコードを簡単に表示させることが可能です。

@fa('users')
// アウトプット
<i class="fa fa-users"></i>

 以上が laravel-blade-directives の紹介でした。今回は上記のメソッドの他にも 型を判定する ' @typeof 'メソッドや、クラスのインスタンスを判定する ' @instanceof 'メソッドも用意されています。

ポイントで役立つメソッドが用意されているので、Laravlプロジェクトで役立つ機会が多いと思われます。

GitHub : appstract/laravel-blade-directives