Laravel Bladeで日付や金額の書式を統一する

こんにちは。Webページを作成している際に、日付や金額などの値を指定の書式に変換する処理を、何度も記述するのが面倒と感じることはありませんか？今回は面倒な書式変換処理を一か所にまとめる方法を解説していきます。

日付や金額の書式

日付や金額をWEBページに表示するときは、書式を指定して表示することが多いと思います。代表的な書式を下表にいくつか挙げてみます。

書式
日付ハイフン区切り（2022-01-01）,スラッシュ区切り（ 2022/01/01）、日本語（2022年1月1日）
金額３桁区切り(123,456)

これらを指定する際に、Bladeに直接記述すると、至る所で同じような変換処理を記述することになります。書式が一部違ってしまったり、変更が発生したときに修正する箇所が多くなり大変です。どこか１か所に記述し、呼び出す仕組みにすることで、上記の問題を解決することができます。今回はオリジナルのディレクティブを作成することで実現していきたいと思います。

ディレクティブを作成する

ディレクティブを作成していきます。今回はdatetime_jpというディレクティブを作成し、日付をyyyy年mm月dd日の書式に変換する処理を記述します。作成したディレクティブはBladeから以下のように呼び出します。

{{--日付型の変数を渡す--}}
@datetime_jp($date)

{{--以下が表示される--}}
2022年1月1日

ディレクティブはAppServiceProviderのbootメソッドに定義します。Blade::directiveメソッドで定義していきます。第一引数にディレクティブ名、第二引数はクロージャで定義し、結果はHTMLで返却します。

use Illuminate\Support\Facades\Blade;    


public function boot()
{
    Blade::directive('date_jp', function ($expression) {
        return "<?php echo ($expression)->format('Y年m月d日'); ?>";
    });
}

作成したdate_jpディレクティブを呼び出してみましょう。DateTime型の日付を引数に渡すと、日本語フォーマットで表示してくれます。

@php
    // DateTime型の値を生成
    $date = new DateTime('2022-01-01 00:00:00');
@endphp

<!-- ディレクティブ呼び出し -->
@date_jp($date)
↓
2022年01月01日

まとめ

今回は値を指定の書式に変換する処理を、ディレクティブにまとめる処理を紹介しました。１か所にまとめることにより、書式を統一しやすくなったり、書式の変更に強くなったりします。日付、金額などの汎用的なものは複数のプロジェクトで利用可能なので、どこかで作成しておくと後々便利だったりします。

今回はディレクティブにまとめる方法を紹介しましたが、ディレクティブ以外にもコンポーネントにまとめる方法も考えることができます。コンポーネントにまとめるとさらに拡張性が高くなります（少し大げさな仕組みになりますが）。書式の変換処理くらいは個人的にはディレクティブにまとめてもよいのかいと思っています。

Laravel

Posted by kobainmac