2023/12/15の勉強会で発表されたものです。

1. Drupalでフォームの代わりに
SPA (React) を表示させる話
執筆者：トビウオ

2. なぜSPA？
• 普通のテンプレートエンジンより自由度が高い
• Drupalの標準だとtwigでテンプレートを書く
• PHPによる処理を待たずに画面を表示できる
• 「描画している裏で読み込み」の実装が容易

3. DrupalとSPAとの連携方法
• 方法１：Drupalをヘッドレスサーバーとして運用
• JSON:APIモジュールによる、エンティティの
CRUDを容易に提供できる
• 独自のControllerを作成し、定義したREST API
をSPA側から使用できる

4. DrupalとSPAとの連携方法
• 方法２：Drupalの1フォームとしてSPAを運用
• Drupalに元々あったモジュールシステムやCSS
、設定フォームなどを流用できる
• 前述したJSON:APIやREST APIは同様に利用で
きる

5. 方法2でフォームを構築
• Reactで書かれたフ
ロントエンドをマ
ウントするための
フォームを作成
• HTML部分を<div
id=“root”></div>と
定義しておく

6. 方法2でフォームを構築
• libraries.ymlで、先ほどのフ
ォームから参照する
JavaScriptとCSS (SPAをビ
ルドして得られる成果物) を
設定しておく
• SPAをビルドした成果物を、
設定したディレクトリ内に配
置すること

7. 方法2でフォームを構築
• Reactは仕様上、id=“root”であるタグを基準に画面を書
き換えるので、先ほどのフォームで定義したコード (右
の画像) が効いてくる

8. 方式2におけるテクニック
• window.drupalSettingsオブジェクト
• この値は (SPA含む) JavaScriptから参照できる
• Drupal側から参照・設定することもできる
• REST APIを介さずにアクセスできて便利
• https://www.drupal.org/docs/drupal-
apis/javascript-api/javascript-api-overview

9. 方式1・2に共通したテクニック①
• JSON:APIモジュール
• エンティティ情報に対するCRUDが提供される
• 癖がある挙動も多いので注意
• https://www.drupal.org/docs/core-modules-and-
themes/core-modules/jsonapi-module

10. 方式1・2に共通したテクニック②
• Controllerを実装してREST APIを提供
• 実装する手間は掛かるが、Drupalが管理するデ
ータを自由に操作できる
• Drupalフォームと処理を共通化させたい場合は
工夫が必要 (後述)

11. Drupalフォームと処理を共用する場合
• Drupalフォームは次のオブジェクトを使用でき
るが、SPAフォームだと代替する必要がある
• (ContentEntityForm由来の) $this->entity
• 引数で渡されるarray $form
• 同じく引数で渡されるFormStateInterface
$form_state

12. Drupalフォームと処理を共用する場合
• $this->entity
1. EntityTypeManagerInterface型の
$entityTypeManagerをDIで引っ張ってくる
2. $entityTypeManager-
>getStorage($entity_type_id)-
>load($entity_id)の戻り値で取得できる

13. Drupalフォームと処理を共用する場合
• $form
1. $formはタダの配列なので、Drupalフォーム
の方で参照していた値を再現すればいい
2. 再現のために必要な値は、REST APIなので
Request $requestなどから拾ってくる

14. Drupalフォームと処理を共用する場合
• $form_state
1. $form_stateの値セットは、$formと同様
に上手いこと再現する
2. REST APIで使う場合、Redirectを無効
化した特殊な型を定義しておくと便利

15. Drupalフォームと処理を共用する場合
• $form_state