2023年に発売されたDrupal書籍の中から packt から発売された「Modernizing Drupal 10 Theme Development 」のレビューします。
Drupal テーマ関連は2016年に発売した「Drupal 8 Theming with Twig」 以降、新作はなくDrupal 10で待望の書籍です。
対象者
Drupal のフロントエンドとバックエンド向け。
構成
書籍は15章構成で以下のとおりです（和訳済み）。
- ローカル環境のセットアップ
- 新しいテーマの作成とビルドプロセスのセットアップ
- Drupal が HTML ページをレンダリングする方法
- デザインを Drupal コンポーネントにマッピングする
- ヘッダーとフッターのスタイルを設定する
- コンテンツのスタイル設定
- フォームのスタイリング
- ビューのスタイリング
- スタイリングブロック
- スタイルのメンテナンス、分類法、検索結果、および 403/404 ページ
- 単一ディレクトリコンポーネント
- カスタム Twig 関数とフィルターの作成
- テーマを構成可能にする
- パフォーマンスとアクセシビリティの向上
- 分離されたフロントエンドの構築
1. ローカル環境のセットアップ
Drupal をDocker、DDEV、Visual Studio Codeなどを使い、ローカル環境で動かす方法を説明しています。
デモサイトをGithubからクローンして、settings.phpの詳細な説明がされています。
Modernizing-Drupal-10-Theme-Development
2. 新しいテーマの作成とビルドプロセスのセットアップ
デフォルトテーマ、コントリビュート、購入したテーマ、カスタムした際のメリット・デメリットの指摘しています。Drupal 10 の新しいスターターキットの導入方法や Tailwind CSS や webpack、browsersync、BackstopJSやコーディング標準や継続的統合パイプラインなども学ぶことができます。
3. Drupal が HTML ページをレンダリングする方法
Drupal のレンダリングについて説明しています。テンプレートとは、レンダー配列、フック、CSSやJavaScriptの挿入方法、現状のjQueryの扱い、コントローラーのアクションについて学ぶことができます。
4. デザインを Drupal コンポーネントにマッピングする
グラフィックレイアウトからDrupalのコンポーネントに落とし込んでモックアップを作っていくかを説明しています。デザインシステム、デザイントークン、アトミックデザイン、Storybookなど内容は充実です。
5. ヘッダーとフッターのスタイルを設定する
前章からの続きでデモサイトのヘッダとフッターのスタイルを説明します。リージョン、ブロック、Twig の自動エスケープ
、テンプレートのオーバーライドや *.themeからテンプレートの前処理まで学ぶことができます。
6. コンテンツのスタイル設定
この章ではエンティティ、バンドル、フィールド、表示の管理、画像スタイル、メディア、分類法について説明しています。また、CKEditor 5 や WYSIWYG エディターをカスタマイズする方法、Paragraphモジュールのコンテンツ構築や管理を学べます。
7. フォームのスタイリング
Drupal のログインページのフォームからWebProfilerモジュールからコントローラーの確認、フォームの動きや構造、レンダリング配列、スタイル設定方法からログインページのカスタムについて学ぶことができます。
8. ビューのスタイリング
Viewsモジュールの説明に注視し、フォーマット、フィールド、フィルター、ページャー、テンプレートWebProfilerでテンプレートがどのようにレンダリングされるか学ぶことができます。
9. スタイリングブロック
Githubのサンプルコードから編集ブロックやテーマに適用される新しいブロックの対応、テンプレートに挿入、フィールド値の抽出、モジュールで定義されたブロック、テンプレートのオーバーライドを学ぶことができます。
10. スタイルのメンテナンス、分類法、検索結果、および 403/404 ページ
この章ではタイトル通りの内容でスタイル設定などを説明しています。検索についてはSearch API を使うことを勧めています。
11. 単一ディレクトリコンポーネント
Single Directory Components（SDC） モジュールについて説明しています。SDCのメリット、コンポーネント作成、オーバーライド、メタデータ、Storybookと統合することのメリット・デメリットの指摘などが学ぶことができます。
12. カスタム Twig 関数とフィルターの作成
Twig の新しいカスタム関数とフィルター定義の方法、テーマレイヤーでビジネスロジックの扱いを学ぶことができます。
13. テーマを構成可能にする
再利用性の向上にさせるテーマ構成管理、テーマ設定フォーム作成、サブテーマ作成、ライブラリの拡張・オーバーライドが学ぶことができます。
14. パフォーマンスとアクセシビリティの向上
Google Lighthouseで数値の改善、レスポンシブ画像などでサイトのパフォーマンス、アクセシビリティに改善方法を学ぶことができます。
15. 分離されたフロントエンドの構築
デモサイトをDrupalのAPI（RESTful Web Services、JSON:API）を利用し、Next.jsでノード・メディアの取得・表示するまで説明しています。
おわりに
久しぶりのDrupalのテーマ書籍でしたが、章によっては内容も充実して、新しい知見も得られました。
Drupalテーマを扱う方には、自身の構築方法がベストプラクティスなのか、またテーマ開発を考察する上で読んでおいていいでしょう。