「Drupal SDCについて紹介」2025/10/17の勉強会で発表されたものです。

2025/10/17の勉強会で発表されたものです。

1. Drupal SDC について紹介 2025/10/17 TaKo

2. はじめに SDC とは Single-Directory Components の略 Core の機能 10.3 以降システムに取り込まれ安定版に。 10.2 以前は試験的モジュールとして提供されていた。 Drupal の フロントエンド開発における問題点を解消 するために開発された機能

3. Drupal におけるフロントエンド開発の問題点 レンダリングとテーマのシステムが複雑 単一の要素に対するリソースが分散していて管理 / 保守のコストが高い 部分的なパーツの再利用性が低い PHP-Twig 間のデータ受け渡しが把握しづらい 様々なシステムが煩雑に影響し合っている などなど … → 学習コストが高い 、 開発負荷が高い 、 保守性が低い ことが課題 より簡素な仕組みへの移行が議論 → コンポーネント指向に寄ったサポートが検討 される 参考 Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews, client-side re-rendering) [#2702061] | Drupal.org https://www.drupal.org/project/drupal/issues/2702061 Single-directory components in core [#3313520] | Drupal.org https://www.drupal.org/project/drupal/issues/3313520 [discussion] Theme/render system problems [#1382350] | Drupal.org https://www.drupal.org/project/drupal/issues/1382350

4. Drupal におけるフロントエンド開発の問題点 再利用性の低さ 特定の UI 部品を別のテーマやプロジェクトで使い回すのが大変。 開発 / 修正の負荷が高い 関連するファイルがバラバラなため、 移植漏れや依存関係の問題 が起きやすい。 1 つの修正に複数のファイルを確認・編集する必要があり、 開発者の負担が大 に。 【 原因 】 コンポーネント関連リソースが点在 Twig テンプレート : templates/ CSS: css /components/ JS: js / アセットの定義 : my_theme.libraries.yml 前処理 : my_theme.theme ページ指向に近い開発が主で、 コンポーネント指向開発が高コスト ＊ページ指向 1 つのページが 1 つのソースファイルに対応 フォルダの構造 => ウェブサイトの構造になる考え方 参考 Unify & simplify render & theme system: component-based rendering (enables pattern library, style guides, interface previews, client-side re-rendering) [#2702061] | Drupal.org https://www.drupal.org/project/drupal/issues/2702061 Single-directory components in core [#3313520] | Drupal.org https://www.drupal.org/project/drupal/issues/3313520 [discussion] Theme/render system problems [#1382350] | Drupal.org https://www.drupal.org/project/drupal/issues/1382350

5. フロントエンド開発におけるコンポーネントとは ページを構成する 再利用可能な構成要素 のこと 同じ構造・同じスタイルの要素を使い回すイメージ 例 ) ヘッダー、フッター、ボタンなど。 再利用可能な部品を組み合わせて開発することを コンポーネント指向開発 などと呼称される

6. コンポーネント指向開発 コンポーネント = サイトのパーツ ボタン コンテンツカード サイトヘッダー ユーザ画像 サイトヘッダー Login 組合せて別のコンポーネント作ることもある 業界特報 Login 人気記事 最新 News 同じ構成・スタイルの パーツを再利用

7. コンポーネント指向開発 メリット 再利用による開発しやすさが向上 UI の一貫性 類似要素の再開発を減らせる 保守性が向上 修正箇所を少なくできる チーム開発の効率化 分業しやすい など デメリット 初期設計のコストが高い 必要な要素、分割する粒度などの考慮が必要 コンポーネントの粒度 細かすぎると管理が煩雑に 荒すぎると再利用性が損なわれる ネストが深すぎると複雑化 など

8. Drupal SDC でコンポーネント管理が楽に 関連ファイル を 1 つのディレクトリに集約 1 コンポーネント ＝ 1 ディレクトリ my_theme / ├── css / │ └── components/ │ └── chip.css # スタイルシート ├── js / │ └── components/ │ └── chip.js # JavaScript ├── templates/ │ └── components/ │ └── chip.html.twig # Twig テンプレート ├── my_theme.libraries.yml # アセットのライブラリ定義 └── my_theme.theme # テンプレートへの変数渡しなどの前処理 今までの構成 my_theme / └ components/ └── chip/ # ”chip“ コンポーネントのすべてがここに収まる。 ├── chip.component.yml # コンポーネントの定義（設計図） ├── chip.twig # Twig テンプレート ├── chip.css # スタイルシート（自動で読み込まれる） └── chip.js # JavaScript （自動で読み込まれる） SDC を利用した構成

9. SDC まとめ Drupal のフロントエンド開発における コンポーネント管理の煩雑さを解消 するために開発された機能 コンポーネントのリソースが一つのディレクトリに集約され、 管理が容易に。 開発コストが減少。 再利用性が向上。

10. SDC の使い方 Drupal 公式の QuickStart ガイドのサンプルで例示 https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart 使い方 コンポーネントの定義 Twig で HTML の構造を定義 CSS,JavaScript ファイルを作成 コンポーネントを利用する法方

11. SDC の使い方：コンポーネントの定義 name: Chip props: type: object properties: dismissable : type: boolean title: Dismissable description: ”true の場合、ユーザはチップをクリックして閉じることができる .” color : type: string title: Color description: “ チップに使用する背景色。 ’primary’ または ’secondary’.” enum : ['primary', 'secondary'] slots: content : title: Content description: “ チップの内容 .” my_theme /components/chip/ chip.component.yml 参考 Quickstart | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart Annotated example component.yml | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/annotated-example-componentyml#s-full-example 「 props 」 コンポーネントが受け取るデータを定義 例の場合、 ” dismissable ”, “color” が変数名 「 slots 」 コンポーネント内に HTML 要素などを挿入するための領域を定義 例の場合、 “content” が変数名 「 name 」 コンポーネントの論理名

12. SDC の使い方： Twig で HTML の構造を定義 {% set classes = [ 'chip', 'chip--color-' ~ color |clean_class , dismissable ? 'chip-- dismissable ', ] %} <div{{ attributes.addClass (classes) }}> {{ content }} </div> my_theme /components/chip/ chip.twig 参考 Quickstart | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart Annotated example component.yml | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/annotated-example-componentyml#s-full-example 赤字の部分が、 yml ファイルで定義した変数名と対応する

13. SDC の使い方： CSS,JavaScript ファイルを作成 以下のように、コンポーネントのスタイル・ JS を定義可能 my_theme /components/chip/ chip.css my_theme /components/chip/ chip.js ＊内容は割愛。公式ガイドを参照のこと https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart 参考 Quickstart | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart Annotated example component.yml | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/annotated-example-componentyml#s-full-example

14. SDC の使い方：コンポーネントの利用法方 {{ include( my_theme:chip ', { color : 'primary', dismissable : true, content : ’Chip の内容だよ！ ', }, with_context = false) }} 任意の Twig ファイルに以下のような記述を追加する . 参考 Quickstart | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart Annotated example component.yml | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/annotated-example-componentyml#s-full-example Twig の 関数 include() を使うことで指定した コンポーネントを別の Twig で利用することができる inculde ( テーマ名 : コンポーネント名 , { 変数 1: 値 1, 変数 2: 値 2, }, with_context = false)

15. SDC の使い方 ：コンポーネントの利用法方 node.html.twig の上部に追加してみると … 参考 Quickstart | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/quickstart Annotated example component.yml | Using Single-Directory Components | Drupal Wiki guide on Drupal.org https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/annotated-example-componentyml#s-full-example コンテンツタイトル … 省略 … view_mode ? 'node--view-mode-' ~ view_mode|clean_class , ] %} {{ attach_library (‘ my_theme /node') }} {{ include( my_theme:chip ', { color : 'primary', dismissable : true, content : ’Chip の内容だよ！ ', }, with_context = false) }} <article{{ attributes.addClass (classes) }}> {{ title_prefix }} … 省略 … my_theme /templates/ node.html.twig コンテンツの body