@lit-labs/signals の発表：TC39 Signals の提案を Lit に統合

最新の Lit Labs パッケージである @lit-labs/signals のリリースを発表できることを嬉しく思います。このパッケージは、エキサイティングな新しい TC39 Signals の提案 の polyfill を Lit に直接統合します。このパッケージは、値が変更されたときにコンポーネントを自動的に更新する、共有された監視可能なシグナルを使用できるようにすることで、Web アプリケーションの状態を管理するための強力なリアクティブな方法を提供します。

シグナルはJavaScriptエコシステムで急速にコア機能になりつつあり、TC39の提案は、さまざまなライブラリやフレームワーク全体でシグナルと状態とリアクティビティを管理する方法を統合する可能性を秘めています。

提案はまだ初期段階ですが、今日からシグナルと @lit-labs/signals を試して、普遍的なリアクティビティプリミティブに基づいてコンポーネントとアプリを構築することがどのように機能するかを確認できます。

簡単に言うと、シグナルは値または計算を保持する監視可能なデータ構造です。シグナルの値が変更されると、それに依存するアプリのすべてのコンポーネントまたは部分が自動的に通知され、更新されます。これは、複数のコンポーネントが状態の変化を共有し、それに反応する必要があるUIで特に役立ちます。

1. 共有された監視可能な状態：シグナルは、複数のコンポーネント間で共有される状態を管理するのに最適です。あるコンポーネントがシグナルを更新すると、それを使用している他のすべてのコンポーネントも自動的に更新されます。
2. ピンポイント更新：シグナルを使用すると、シグナルに裏打ちされた値が変更されたバインディングのみを処理し、同じテンプレート内の他のバインディングをスキップすることで、パフォーマンスを向上させる可能性のある正確にターゲットを絞った再レンダリングが可能になります。
3. 相互運用性：シグナルの標準化は、さまざまなライブラリとフレームワークが相互運用可能なシグナルを使用できることを意味し、複雑なアダプターの必要性を減らし、互換性を向上させます。

Litは、軽量で高性能で宣言的なWebコンポーネントを構築するアプローチですでに知られています。しかし、Litは、再利用可能でカプセル化されたコンポーネントの構築を支援することに重点を置いています。Litはフレームワークではなく、データをモデル化したり、それを監視可能にしたりする方法を規定していません。

Litのリアクティビティは、デフォルトでは比較的浅いです。コンポーネントは、独自のリアクティブプロパティが変更されたときに自動的に更新されますが、ネストされたプロパティが変更されたときは更新されません。深いプロパティの変更に応答するには、手動の更新リクエスト、またはReduxやMobXなどの状態管理システムの統合が必要でした。

シグナルは、これらの状態管理システムと同じような深い監視能力を多く提供しますが、APIがより小さく、シンプルで、ユーティリティ、コンポーネント、フレームワークの大規模なエコシステム全体で共通の標準になる可能性があります。

シグナルはLitにとって完全に新しいものではありません。以前に@lit-labs/preact-signalsパッケージをリリースしましたが、特定のシグナルライブラリ、およびLit開発者が使用したい可能性のあるすべてのシグナルライブラリに対してLit統合を構築する必要があることにやや不満を感じていました。

JavaScriptの標準化されたシグナルを使用すると、1つの統合のみを構築でき（最終的にはLitのコアに直接シグナルサポートを追加できます）、Webコンポーネントが実現する相互運用性と同じ精神で、シグナルを使用するライブラリ間の相互運用性を実現できます。

新しい @lit-labs/signals パッケージを使用すると、Litコンポーネント内から新しいシグナル提案を非常に簡単に使用できます。

いくつかの例を見てみましょう...

@lit-labs/signals を使用した共有カウンターの簡単な例を次に示します。このコンポーネントでシグナルベースのリアクティビティを有効にするには、カスタム要素の定義で SignalWatcher ミックスインを使用するだけです。そこから読み取ったシグナルはすべて自動的に監視され、値が変更されるたびに更新がトリガーされます。

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';
import {SignalWatcher, signal} from '@lit-labs/signals';

// This is a standard TC39 signal that uses the signals polyfill.
// The signal is shared across all component instances.
const count = signal(0);

@customElement('shared-counter')
export class SharedCounterComponent extends SignalWatcher(LitElement) {
  render() {
    // Just by using the signal in your template, your component will update
    // when the signal changes.
    return html`
      <p>The count is ${count.get()}</p>
      <button @click=${this.increment}>Increment</button>
    `;
  }

  increment() {
    count.set(count.get() + 1);
  }
}

このアプローチを使用すると、任意の数の <shared-counter> コンポーネントをDOMに追加でき、すべて同じカウンター値を反映し、シグナルが変更されると自動的に更新されます。

Lit Playground でこの例を見ることもできます。

watch ディレクティブを使用すると、コンポーネント全体ではなく、個々のバインディングをターゲットとしたピンポイント更新を実現することもできます。

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';
import {SignalWatcher, watch, signal} from '@lit-labs/signals';

const count = signal(0);

@customElement('pinpoint-counter')
export class PinpointCounter extends SignalWatcher(LitElement) {
  render() {
    return html`
      <p>The count is ${watch(count)}</p>
      <button @click=${this.increment}>Increment</button>
    `;
  }

  increment() {
    count.set(count.get() + 1);
  }
}

ここでは、シグナルが変更されたときにカウントを表示するバインディングのみが処理され、不要な作業がスキップされ、パフォーマンスが向上します。

これは、Litのシグナル統合の探索の始まりにすぎません。まもなく、@lit-labs/signals に、コレクションからの変更を段階的にレンダリングしたり、コンポーネントで副作用を簡単に実行したり、リアクティブプロパティにシグナルを使用したりするためのユーティリティを追加する予定です。

最終的には、提案された標準が進み、Litでのシグナルの使用経験を積むにつれて、シグナルはコアライブラリの一部になる可能性があります。

Litチームは、シグナルがLit、Webコンポーネント、およびプレーンDOMのユースケースに最適に機能するように、TC39 Signals Proposalのチャンピオンと緊密に連携しています。集中型のフレームワークを必要とせずに、ライブラリとコンポーネント全体で機能する相互運用可能なリアクティビティプリミティブを形成するシグナルに、どれほどの可能性を見出しているかは過小評価できません。

この新しいパッケージを試してみるときのコミュニティからのフィードバックを切望しています。Lit Labs ファミリーの一部として、@lit-labs/signals はまだ実験段階であり、ユーザーからのフィードバックとTC39 Signals Proposalの進歩に基づいて大幅な変更が行われる可能性があります。

開始するには、パッケージをインストールするだけです

npm i @lit-labs/signals

ご意見をお聞かせください。ぜひ試してみて、どのように機能するかをお知らせください。

• 予備ドキュメントは lit.dev/docs/data/signals/ で入手できます
• GitHub フィードバックディスカッションでフィードバックを共有できます
• 問題を Lit monorepo issues で報告してください
• Discordサーバーに参加してチャットしましょう！

シグナルでどのようなものが構築されるか、そしてそれがWebアプリケーションでの状態管理の将来をどのように形作るかを見るのが楽しみです！

ありがとうございました！

-Litチーム