JavaScriptを書かずにフロントエンドをリッチにする、"Symfony UX" #PHP

Symfony Component Advent Calendar 2022の24日目の記事です。

最初に

SymfonyはPHPのフレームワークのひとつです。しかし、公式サイトの説明文には

Symfony is a set of PHP Components, a Web Application framework, a Philosophy, and a Community — all working together in harmony.
（SymfonyはPHPコンポーネントのセットで、Webアプリケーションフレームワークで、哲学、そしてコミュニティです。それらがハーモニーを奏でながら動作しています。）

と書かれている通り、PHPコンポーネントのセットで、たくさんのコンポーネントを提供しており、それらを組み合わせてひとつのフレームワークとして動作しています。Symfonyのコンポーネントは、Symfony上だけで動作するのではなく、他のPHPフレームワークやアプリケーションでも動作している強力なものが揃っています。

今回はそれらの中から、役立ちそうなもの・お薦めしたいものを紹介していきたいと思います。

※記事内ではautoloadのインポートは省略します。

JavaScriptを書かずにフロントエンドをリッチにする、"Symfony UX"

Symfony UXは、フロントエンド実装を効率的に行うコンポーネント群です。

インストール

今までのコンポーネントとは違い、Symfony UXをインストールということはできず、それぞれのコンポーネントをひとつずつインストールする必要があります。
また、Symfony UXコンポーネントはそれぞれJavaScriptライブラリが必要です。残念ながら、composerではpackages.jsonを更新してくれるものの、JavaScriptのライブラリはインストールできないので、yarnもしくはnpmを実行する必要があります。

# 例： chartjsインストール
composer require symfony/ux-chartjs

yarn install --force

これはなに

Webサイト・システムを開発する際、画面上でのユーザ体験（UX）をよくするためにはJavaScriptが不可欠です。
本来であれば、これらのJavaScriptはゴリゴリと開発していく必要があります。しかし、バックエンドで出力したHTMLにJavaScriptを組み込んでいくのは大変な労力が必要です。また、必要なJavaScriptライブラリの管理もとても困難です。

その労力を少しでも軽くするため、Symfony UXが生まれました。Symfony UXは、実現したいこと単位でコンポーネントが用意されており、それぞれの必要なJavaScriptライブラリの自動設定、UXを実現するためのJavaScriptの自動生成、UXに適切に値を渡すためのPHPクラスの提供を行います。

Symfony UXはStimulusをベースに作成されています。StimulusはHTMLタグに対して機能をバインドする作りとなっており、なんとReact, Vue, Angularなど他のJavaScriptフレームワークと共存が可能になっています。

主な種類

Symfony UXは現在13のコンポーネントが用意されています。厳密に種類が分かれているわけではありませんが、おおよそ4種類の機能にわけられます。

種類	概要
見た目系	JavaScriptライブラリを使い、画面の見た目を向上する
フォーム系	JavaScriptライブラリを使い、フォームの利便性を向上する
Twig系	Twigを拡張し、再利用性を向上する
統合系	別のJavaScriptフレームワークを統合し、開発効率を向上する

例：グラフ表示

例として、グラフ（正確にはチャート）を表示します。ux-chartjsは、Chat.jsを使ってグラフ表示するコンポーネントです。本来であれば、JavaScriptを書いてグラフを描画しますが、JavaScriptを書かずに描画できるようになります。

個人的にこのコンポーネントが一番Symfony UXを説明するのに向いてると思っています。

PHP側

ux-chartjsにはChartBuilderというクラスが用意されています。このビルダーを使ってChartオブジェクトを生成し、レスポンスにセットします。

ChartController.php


    public function show(ChartBuilderInterface $chartBuilder): Response
    {
        // グラフオブジェクトを生成する。（線グラフを生成）
        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);

        // データをセットする
        $chart->setData([
            'labels' => ['2022/01', '2022/02', '2022/03'],
            'datasets' => [
                [
                    'label' => '商品1',
                    'data' => [1000, 1500, 1200],
                    'borderColor' => ['rgba(255, 99, 132, 1)'],
                ],
                [
                    'label' => '商品2',
                    'data' => [2000, 1000, 1300],
                    'borderColor' => ['rgba(54, 162, 235, 1)'],
                ],
                [
                    'label' => '商品3',
                    'data' => [500, 1000, 1500],
                    'borderColor' => ['rgba(255, 206, 86, 1)'],
                ],
            ],
        ]);
        
        // オブジェクトをレスポンスにセットする
        return $this->render('index.html.twig', [
            'chart' => $chart,
        ]);
    }

Twig側

Twig側は、まずヘッダー部にSymfony UXが使えるようにする必要があります。

base.html.twig

<head>
    {% block stylesheets %}
        {{ encore_entry_link_tags('app') }}
    {% endblock %}
    {% block javascripts %}
        {{ encore_entry_script_tags('app') }}
    {% endblock %}
</head>

{{ encore_entry_script_tags('app') }}をjavascriptsブロックに入れることで、Symfony UX用のJavaScript、正確にはassetsディレクトリにあるJavaScriptを読み込んでくれます。

index.html.twig

<div>
<h2>ここにグラフを表示します。</h2>
{{ render_chart(chart) }}
</div>

続いてグラフ表示ですが、{{ render_chart(chart) }}を呼び出すだけでOKです。引数で渡しているchartは先ほどPHP側のレスポンスで用意したものです。
この記述だけで、何十行にもなるJavaScriptを出力してくれます。JavaScriptは一切書いてないですが、JavaScriptが書けました。

まとめ

今回はSymfony UXを紹介しました。個人的にはかなり注目のコンポーネントで、Symfonyのプロジェクトのみでリッチなコンテンツが作れるので、
分けるほどでもないのにフロントエンドとバックエンドが妙に分離してしまうようなプロジェクトを作らなくてもよくなりそうです。
（Symfony UXが抜群に火を吹くのは管理画面系の機能だと思います。）