web開発で欠かせないJavaScript
webアプリケーションで動きをつけるならJavaScriptがまだまだ主流かと思います。
ただ、あまりにもできることが多く何でもかんでもJavaScriptに頼る開発もなんだかなと思うところもあり、今回はLaravelでフロント側に頼りきらず全画面共通のコンポーネントを作成する方法を紹介したいと思います。
環境
言語 : PHP 7.3.18
フレームワーク : Laravel 6.18.43
サンプル
今回はQiitaのような記事投稿ができるサービスを作っている前提で、サイドバーに項目を設けて既読の記事があれば通知を出すような機能を作ってみたいと思います。
・サイドバーは全画面共通でどの画面からも開くことができる
・各項目の横に既読があれば通知を出す
モック：
View Composer
Laravelにはすごく便利なView Composerが存在しそれを使えばすごく簡単にモックの様な共通処理を作成することができます。
使い方はドキュメントを見ればすぐにわかりますが、今回は汎用性も兼ね備えた実装をしたいと思います。
Providerを追加する
まずは以下コマンドでProviderを作成します
php artisan make:provider ViewServiceProvider
後々このProviderに最終的な処理を記述します。
Interfaceを作成する
そして、Interfaceを作成しておきます。
View composerを使うためにはcomposerメソッドにターゲットとなるview,composeメソッドが必須になるのでそのメソッドが実装されたクラス名を引数に指定します。なのでそれらを作成するメソッドを必須メソッドとして管理しておきます。
composeメソッドについて後々説明します。
また、使用したいbladeファイルは複数指定が可能なので、PHPDocでarrayが使用可能なのも記述しておきます。
<?php
declare(strict_types=1);
use Illuminate\View\View;
interface ViewComposer
{
/**
* @return string|array
*/
public static function getTargetComponents();
/**
* @param View $view
*/
public function compose(View $view): void;
}
具象クラスを実装する
先ほど作成した抽象クラス(Interface)の具象クラスを実装します。
getTargetComponentsメソッドは対象としたいviewを返す, composeメソッドにはbladeファイルで使用したい変数とデータを返すように実装していきます。
<?php
declare(strict_types=1);
use Illuminate\View\View;
class SidebarCompose implements ViewComposer
{
public static function getTargetComponents(): string
{
return 'parts.sidebar';
}
/**
* @param View $view
*/
public function compose(View $view): void
{
$view->with('countPer', APIなどで取得した各項目ごとの件数データなど);
}
}
今回使用したいのはサイドバーなので、parts/sidebar.blade.phpの様なディレクトリ構造を想定してparts.sidebarと指定します。
composeでwithメソッドの中に第一引数に変数を, 第二引数に変数に格納するデータを指定します。
Providerで使える様にする
一番最初に作成したViewServiceProviderに実際に使えるように処理を追記します。
declare(strict_types=1);
use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;
use PrtimesAdmin\View\Composers\SidebarCompose;
class ViewServiceProvider extends ServiceProvider
{
/**
* Register services.
*
* @return void
*/
public function register()
{
View::composer(SidebarCompose::getTargetComponents(), SidebarCompose::class);
}
}
Viewファサードを使用し、composerを呼び出します。
第一引数に、使用したいbladeファイルを指定するので、先ほど実装したSidebarComposeクラスからgetTargetComponentsを呼び、第二引数には呼び出すクラスを指定するのでclassをそのまま指定します。
composerメソッドは、第二引数に指定されたクラス名に実装されているcomposeメソッドを呼び出し第一引数に指定されたviewで適用できるようにしてくれます。
bladeファイルで作成した変数を使う
最後にblade側で変数を記述すれば実際に表示できる様になります。
<div>
.
.
.
<p>{{ $countPer }}</p>
</div>
JavaScriptに頼りきらないLaravel開発
今回紹介した機能はJavaScriptだと例えばページが読み込まれたときに表示するような処理が実装できるかと思います。
余裕があればそうすれば良さそうですね。
しかし、チーム開発をしているとフロント側の実装者が少なくフロントの工数をあまり使いたくない場合も出てくるかと思います。そんなときにJavascriptに頼らずバックエンドで実装してしまうのも手かと思います。