Alpine.js を使うとか使わないとかで記事を探してたら出てきた。
よくわからないけど動的インターフェイスをコンポーネント化できるらしいので試してみる。
クイックスタート
ドキュメント通りに進める。
インストール
# モジュールインストール
composer require wire-drupal/wire
# モジュール有効化
drush en wire
# コンポーネント作成コマンド
drush generate wire
コマンドを叩くと以下の内容のやり取りがある
Module machine name [app]: (システム内部名称)
➤ counter
Wire label [Example]: (モジュール一覧画面のラベル)
➤ Counter
Wire ID [counter]: (多分 twig とかで使用するときようのID)
➤
Wire class [Counter]: (Class名)
➤
Inline template [No]: (Yes にすると PHP で HTML(twig)を直書きできる. Twig を使いたいから基本Noで良さそう)
➤
Would you like to inject dependencies? [No]: (DIするサービスはあるかどうか)
➤
Wire ID や Wire class はシステム内部名称に合わせて自動で補完してくれる。
DI は Yes とするとその後 DIするサービスを入力できる機能まで付いていた。
ファイルの中身
対話が終わると以下２つのファイルがカスタムモジュールディレクトリ下に生成された。
Counter.php
/**
* Implementation for Counter Wire Component.
*
* @WireComponent(
* id = "counter",
* label = @Translation("Counter"),
* )
*/
class Counter extends WireComponent {
public function render(): ?View {
return View::fromTpl('counter');
}
}
counter.html.twig
<div>
...
</div>
なぜか info.yml が生成されなかったので手動で作って有効化する必要があった。
コンポーネントを Twig ファイルに含める
twig ファイルで wire() 関数を呼び出すことでコンポーネントを使用できる。
{{ wire('counter') }}
コントローラーのレンダリング配列に #type と #id を指定することで表示することもできる。
カウンター機能を追加
一旦コピペで確認
Counter.php
class Counter extends WireComponent {
public int $count = 0;
public function increment() {
$this->count++;
}
public function render(): ?View {
return View::fromTpl('counter');
}
}
counter.html.twig
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ count }}</h1>
</div>
結果
まとめ
- vue でいう script を PHP で書いて template は twig っぽい感じで書ける。
- テンプレート側のイベントをリッスンしてPHPで更新やらできるっぽいので対話型のサイトも簡単に作成できそう。
- alpinejs が読み込まれてるけど書き方ちょっと違うし、これは一体なんなんだろう。謎が深まった。