Single Directory Componentsについて

こんにちは、スタジオ・ウミの池田です。2023年6月にリリースされたDrupal10.1より、Single Directory Componentsという新しいコアモジュールが、試験的モジュールとして導入されました。2024年6月にリリース予定のDrupal10.3では、安定版としてDrupalコアに取り込まれることが決定しています。この機能は、これまでのテーマ開発の流れを大きく変える可能性を秘めています。当記事では、Single Directory Componentsの基本的な概念・使い方について紹介したいと思います。

Single Directory Componentsとは？

Single Directory Components（以下、SDC）は、Drupal10.1より導入されたコアモジュールです。モジュール名にある通り、コンポーネントを構成するファイル群（Twigテンプレート・CSS・JavaScript）を一つのディレクトリにまとめて管理できるようにするモジュールです。ここでいうコンポーネントとはUIコンポーネントのことで、WEBサイト上で使用するボタン・テキストフィールド・カードなどを指します。 Drupal10.1, 10.2においては、SDCはまだ試験的モジュールという位置付けのため、本番使用はお勧めできませんのでご注意ください。

ディレクトリ構成

SDCは、テーマまたはモジュールのディレクトリ内に設けたcomponentsディレクトリ内に作成します。下記がボタンとカードの2つのコンポーネントを作成した場合のディレクトリ構成の例です。

|- themes
  |- custom
    |- my_theme
      |- components
        |- button
          |- button.component.yml (required)
          |- button.twig (required)
          |- button.css
          |- button.js
        |- card
          |- card.component.yml (required)
          |- card.twig (required)
          |- card.css
          |- card.js

.component.ymlと.twigの2ファイルのみ、必須のファイルです。.component.ymlは、コンポーネントの名称やコンポーネントを呼び出す際に渡すことができるプロパティなどを定義する設定ファイルで、テーマやモジュールでいうところの.info.ymlのような役割を担っています。 また、CSSもJavaScriptもファイル名がコンポーネント名になっていることに注目してください。ファイル名にコンポーネント名を使用することで、CSSとJavaScriptを読み込む設定を記述することなく、自動的に読み込まれる仕組みになっています。つまり、従来のテーマ開発では.libraries.ymlにCSSとJavaScriptを読み込む設定を記述する必要がありましたが、SDCを使えばそれが不要になります。さらに、コンポーネントのCSSとJavaScriptはそのコンポーネントが使用されているページでのみ読み込まれるため、無駄なファイル読み込みが発生せずパフォーマンス向上に寄与します。

SDCを使用しない場合のディレクトリ構成

SDCを使用しない場合のディレクトリ構成と比較してみたいと思います。下記がディレクトリ構成の例です。（簡略化しているため、実際はもっと複雑な構成になります）

|- themes
  |- custom
    |- my_theme
      |- css
        |- button.css
        |- card.css
      |- js
        |- button.js
        |- card.js
      |- templates
        |- button.html.twig
        |- card.html.twig
      |- my_theme.libraries.yml

通常、ファイル種別ごとにディレクトリを分けて管理するため、各コンポーネントの実装を変更したい時、ディレクトリを跨いでTwigテンプレート・CSS・JavaScriptのファイルをそれぞれ探して編集する必要があります。つまり、コンポーネントを構成する各ファイルが散らばっているため、見通しが悪くなってしまうのです。上記の例はコンポーネントが2つしかありませんが、実際のWEBサイト開発ではコンポーネント数は何十にも及びます。数が増えるほど開発効率・保守性が落ちてきます。 また、SDCでコンポーネントをシングルディレクトリにまとめることで再利用性も高まります。つまり、コンポーネント単位で簡単に他サイトへ移植できます。コンポーネントのディレクトリを丸ごとコピーして持っていけば良いわけです。受託開発でWEBサイト開発を行っている事業者の方は、毎度の開発で似たようなコンポーネントを実装していないでしょうか。そのような場合、SDCによって開発工数を削減できるかもしれません。

実際にコンポーネントを作ってみよう！

ボタンコンポーネントの実装を例に、SDCを用いたコンポーネント実装方法をご紹介したいと思います。

前提

• Drupal10.1以降のDrupalがインストールされていること
• SDCモジュールが有効化されていること
• カスタムテーマが作成されていること

手順

1. カスタムテーマのディレクトリ内に、componentsディレクトリを作成します。

   |- themes
     |- custom
       |- my_theme
         |- components

2. componentsディレクトリ内に、buttonディレクトリを作成します。
3. buttonディレクトリ内に、button.component.ymlファイルを作成します。ファイルの中身は下記の通り記述してください。propsはコンポーネントを呼び出す際に渡すことができるプロパティの情報です。例として作成するボタンコンポーネントでは、ボタンの表示に使用するテキスト（text）・ボタンをクリックした際に遷移するリンク先URL（url）・ボタンの色（color）を定義します。

   name: Button
   props:
     type: object
     required:
       - text
       - url
     properties:
       text:
         type: string
         title: Text
       url:
         type: string
         title: URL
       color:
         type: string
         title: Color
         enum:
           - primary
           - secondary

4. buttonディレクトリ内に、button.twigファイルを作成します。ファイルの中身は下記の通り記述してください。button.twigでは、button.component.ymlで定義したプロパティの情報を変数として使用できます。

   {%
     set classes = [
       'button',
       color ? 'button--' ~ color,
     ]
   %}
   <a href="{{ url }}" class="{{ classes|join(' ') }}">{{ text }}</a>

5. buttonディレクトリ内に、button.cssファイルを作成します。ファイルの中身は下記の通り記述してください。CSSセレクタとして使用しているクラス名は、button.twigで記述しているaタグに付与されたクラス名に対応しています。colorプロパティの値が「primary」か「secondary」かで、ボタンの色が切り替わるようにスタイルを記述しています。

   .button {
     display: inline-block;
     padding: 10px;
     border: none;
     border-radius: 4px;
     color: black;
     text-decoration: none;
     font-weight: 500;
     appearance: none;
     cursor: pointer;
   }

   .button--primary {
     background-color: navy;
     color: white;
   }

   .button--secondary {
     background-color: maroon;
     color: white;
   }

コンポーネントの作成は以上です。

作成したコンポーネントを使ってみよう！

最後に、前述で作成したコンポーネントを呼び出してみます。コンポーネントを表示したい任意の場所（たとえば、page.html.twig）に下記のコードを追記してください。include関数を使い、第1引数に「テーマ名:コンポーネント名」でコンポーネントを指定し、第2引数に各プロパティの値を指定します。

   {{ 
     include('my_theme:button', {
       url: '/sample',
       text: 'Sample',
       color: 'primary',
     })
   }}

ブラウザで確認すると、キャプチャの通り紺色のボタンが表示されることを確認できたと思います。

次に、プロパティの値を変更してみましょう。textを「Test」、colorを「secondary」に変更して、表示を確認します。

   {{ 
     include('my_theme:button', {
       url: '/sample',
       text: 'Test',
       color: 'secondary',
     })
   }}

キャプチャの通りボタンのテキストと色が変わったことを確認できたと思います。

まとめ

SDCの基本的な概念・作り方・使い方をご紹介しました。SDCはReactやVueなどのフロントエンドフレームワークにおけるコンポーネントの概念を参考にして作られているため、それらのフレームワークを普段から使用されている方には馴染みのある仕組みかと思います。Drupalが他のフレームワークの良いところを積極的に取り入れ進化し続けていることを感じられ、魅力的な新機能だと思いました。引き続き、SDCの実用化を検討していきたいと思います。