Single Directory Components（SDC）を使ってみた：Drupal CMSでコンポーネント駆動開発を体験する

はじめに

Drupal CMS 1.xに標準搭載されたSingle Directory Components（SDC）は、フロントエンド開発の新しいパラダイムをもたらします。従来のDrupalテーマ開発では、テンプレート（.twig）、スタイルシート（.css）、JavaScript（.js）、設定ファイル（.yml）が異なるディレクトリに散在していました。SDCはこれらを単一のディレクトリにまとめることで、コンポーネント指向の開発を実現します。

本記事では、実際にSDCを使ってHeroコンポーネントを作成し、Layout Builder（レイアウトビルダー）で配置するまでの流れを体験します。

SDCとは：基本概念と利点

Single Directory Componentsの基本構造

SDCでは、1つのコンポーネントに必要なすべてのファイルを同じディレクトリに配置します。

web/themes/custom/mytheme/components/
└── hero/
    ├── hero.component.yml    # メタデータとプロパティ定義
    ├── hero.twig            # Twigテンプレート
    ├── hero.css             # スタイルシート（オプション）
    ├── hero.js              # JavaScript（オプション）
    └── README.md            # ドキュメント（オプション）

SDCがもたらす主要な利点

開発効率の向上：関連ファイルが1か所にまとまり、ナビゲーションが簡単になります。
DXの改善：Drushによる自動生成でボイラープレートを削減し、Styleguideモジュールによる即時プレビューが可能です。
将来への投資：Experience Builderとの統合やSite Templatesでの再利用が可能な設計システムを構築できます。

実践：HeroコンポーネントをDrushで作成

事前準備とSDCの有効化

# SDCモジュールの有効化
drush en sdc -y

# Styleguideモジュールのインストール（オプション）
composer require drupal/sdc_styleguide
drush en sdc_styleguide -y

Drushを使ったコンポーネント生成

# コンポーネントの生成
drush generate single-directory-component

# 対話型プロンプトへの回答例
# Component name: Hero Section
# Component machine name: hero
# Make component available to Layout Builder?: yes

生成されたファイルの確認

Drushコマンドにより、以下のファイルが自動生成されます。

hero.component.yml:

name: 'Hero Section'
description: 'A hero section with background image and CTA'
props:
  properties:
    title:
      type: string
      title: 'Title'
      default: 'Welcome to Our Site'
    background_image:
      type: string
      title: 'Background Image URL'
      default: ''
    cta_text:
      type: string
      title: 'CTA Button Text'
      default: 'Get Started'
third_party_settings:
  layout_builder:
    allow: true

hero.twig:

<section class="hero" {% if background_image %}style="background-image: url('{{ background_image }}');"{% endif %}>
  <div class="hero__container">
    <h1 class="hero__title">{{ title }}</h1>
    {% if cta_text %}
      <a href="#" class="hero__cta">{{ cta_text }}</a>
    {% endif %}
  </div>
</section>

Layout Builderでの配置と設定

Layout Builderの有効化

# コンテンツタイプでLayout Builderを有効化
drush config:set node.type.page.third_party_settings.layout_builder enabled 1 -y

UIでの配置手順

コンテンツタイプの設定：管理画面から構造 > コンテンツタイプ > ページ > レイアウトを管理で「レイアウトビルダーを使用」にチェックします。
セクションの追加：「セクションを追加」をクリックしてレイアウトを選択します。
ブロックの追加：「ブロックを追加」から「コンポーネント」カテゴリの「Hero Section」を選択します。
プロパティの設定：タイトル、背景画像URL、CTAボタンテキストなどを設定します。

バリエーションの活用

hero.component.ymlにバリエーションを追加することで、異なるスタイルを提供できます。

variants:
  dark:
    label: 'Dark Theme'
  minimal:
    label: 'Minimal Style'

対応するCSSクラスを追加することで、バリエーションに応じたスタイリングが可能です。

Styleguideでのプレビュー

Styleguideモジュールを導入すると、/admin/styleguideでコンポーネントのプレビューが可能になります。サンプルデータを使用してダミーコンテンツなしでUIとアクセシビリティを確認できます。

ベストプラクティス

プロパティスキーマの活用：型定義と必須項目を明確にすることで、開発時のエラーを防げます。
アクセシビリティの考慮：適切なrole属性とaria-labelを使用します。
パフォーマンスの最適化：遅延読み込みやIntersection Observer APIの活用を検討します。

Experience Builderとの統合（将来展望）

SDCは将来のExperience Builderの基盤技術です。現在のSDCコンポーネントは、Experience Builderがリリースされた際にそのまま利用可能になる予定です。

まとめ

Single Directory Components（SDC）は、Drupal CMSにおけるフロントエンド開発を根本的に改善する技術です。Drushコマンドによる効率的な生成、Layout Builderとの統合、柔軟なバリエーション実装により、開発効率の向上と保守性の改善を実現できます。今すぐSDCを使い始めて、モダンなコンポーネント駆動開発を体験してください。

参考リンク

カテゴリ

DrupalCMS機能

タグ

活用