Githubが複雑なアプリケーションでWeb Componentsの開発を容易にするCatalystをリリース

原文(投稿日：2020/12/01)へのリンク

GitHubは先頃、Catalystの最初の主要なイテレーションをリリースした。これは、複雑なアプリケーションでWebコンポーネントを使用して開発するための一連のパターンと手法である。Catalystは小型化を目指しており、完全にバニラJavaScriptとWebコンポーネントで記述されたGitHub Webサイトに使用されている。

GitHub Catalystのドキュメントでは次のように説明している:

Catalystは、複雑なアプリケーション内でコンポーネントを開発するための一連のパターンと手法です。Catalystは、その中核として、Web Componentsの開発を容易にする関数の小さなライブラリを提供するだけです。ただし、ライブラリは実装の詳細です。コンセプトは私たち最大の関心事です。

jQueryの初期の頃、Webアプリケーションは、フレームワークによって提案された間接参照なしで作成されていた。開発者は、インタラクティブなDOM要素 (直接イベントバインディング) またはアンカーの祖先要素 (イベント移譲) にイベントハンドラを配置した。これらのハンドラはいくつかの作業を行い、場合によってはDOMを更新する。これは、更新する要素を見つけるためにDOMにクエリを実行することを意味した。今年初めのWeb Component SF Meetupでの講演で、CatalystのコアコントリビュータであるKristján Oddsson氏は、GitHubのバニラJavaScriptで単純な動作を実装する方法を説明した:

// Direct event binding
on('click', 'js-hello-world-button', function (event) {
  const button = event.currentTarget;
  // DOM Querying
  const container = button.closest('js-hello-world');
 
  const input = container.querySelector('js-hello-world-input');
  const output = container.querySelector('js-hello-world-output');

  output.textContent = `Hello, ${input.value}`
}

ページ上の対応するHTML:

<div class="js-hello-world">
  <input class="js-hello-world-input" type="text">
  <button class="js-hello-world-button">
    Greet
  </button>
  
  <span class="js-hello-world-output"></span>
</div>

以前のバニラJavaScriptアプローチはシンプルで抽象化されていないが、それでも大規模に使用すると欠点がある。Oddsson氏は講演の中でいくつか言及した。命名スキームが必要であり、DOMクエリは明示的であり、クラスはスコープされておらず、意図せずオーバーロードされる可能性がある。

Catalystは、Webコンポーネント標準の4つの脚の1つであるカスタム要素を活用して、純粋なバニラアプローチに関連する問題のいくつかを解決する。Catalystは最小限に抑え、Web標準を活用し、進歩的なエンハンスメントを優先する。ドキュメントの説明:

[私たちの実験]から、最初の原則にまで縮小された一連のパターンが出現しました。ページ上の要素を観察し、これらの要素またはその子が発行するイベントをリッスンし、要素の子にクエリを実行してそれらを変更または拡張します。

カスタム要素には、リスニングとクエリの問題をカバーする一連の data-* 属性が注釈として付けられる。次に、DOM MutationObserver APIを使用して、カスタム要素がページに表示 (または非表示) されたときに、動作をカスタム要素に自動的にバインドする。

data-target 属性を使用すると、命名スキーム (設定より規約アプローチ) に従ってカスタム要素の特定のプロパティにバインドできる。data-action 属性を使用すると、カスタム要素のインスタンス化時にメソッドをバインドできる。ドキュメントには、次の例が記載されている:

<hello-world>
  <input
    data-target="hello-world.name"
    type="text"
  >

  <button
    data-action="click:hello-world#greet">
    Greet
  </button>

  <span
    data-target="hello-world.output">
  </span>
</hello-world>

import { controller, target } from "@github/catalyst"

@controller
class HelloWorldElement extends HTMLElement {
  @target nameTarget: HTMLElement
  @target outputTarget: HTMLElement

  greet() {
    this.outputTarget.textContent =
      `Hello, ${this.nameTarget.value}!`
  }
}

ここで、hello-world.output は、クラス HelloWorldElement によって実装される HelloWorld カスタム要素のoutputTarget プロパティに関連している。前のHTMLコードのボタンに表示されている data-action="click:hello-world#greet" は、onclick イベントハンドラをボタンにバインドする必要があることを指定している。さらに、イベントハンドラが HelloWorld カスタム要素の greet メソッドであることを指定する。

Catalystは、TypeScriptデコレータを活用して、開発者のエクスペリエンスを向上させる。ただし、デコレータの使用はオプションである。カスタム要素はネイティブHTML要素を拡張し、進歩的なエンハンスメントを可能にする。

Catalystは、カスタム要素を使用したGitHubのウェブサイトの実装で使用される。GitHubは、そのWebサイトで使用されている17のカスタム要素をオープンソース化した。

Catalystは、MITライセンスの下で配布されるオープンソースソフトウェアである。フィードバックと貢献は歓迎されており、プロジェクトの行動規範と貢献ガイドラインに従う必要がある。