実際にこのようにドラッグアンドドロップすることができます。

[[413634]]

ほとんどのローコードプラットフォームデザイナーはドラッグアンドドロップコンポーネント機能をサポートしており、ユーザーのデザインエクスペリエンスを大幅に向上させます。ドラッグアンドドロップのもう一つの一般的なユースケースはファイルのアップロードで、ユーザーは簡単にファイルをアップロードできます。さらに、ドラッグアンドドロップ機能はブラウザ間のデータ共有にも利用できます。

では、ブラウザの境界を越えたデータ共有を実現するにはどうすればよいでしょうか？この記事では、GoogleのオープンソースプロジェクトであるTransmatを紹介します。Transmatは、前述の機能の実現に役立ちます。さらに、このプロジェクトは、リリース可能なターゲットに応じて異なるレスポンスを返すなど、興味深い機能の実装にも役立ちます。

まずは、4 つの GIF を通じて、Transmat を使用して開発された驚くほど楽しいドラッグアンドドロップ機能を体験してみましょう。

図1（ドラッグ可能な要素をリッチテキストエディタにドラッグアンドドロップする）

図 2 (ドラッグ可能な要素を Chrome ブラウザにドラッグアンドドロップします。他のブラウザもサポートされています)

図3（ドラッグ可能な要素をカスタムリリースターゲットにドラッグ）

図4（ドラッグ可能な要素をChromeデベロッパーツールにドラッグアンドドロップする）

上記の例で使用されているブラウザのバージョンは、Chrome 91.0.4472.114 (リリース済み) (x86_64) です。

上の4つの画像に表示されているドラッグ可能な要素はすべて同じ要素ですが、ドロップ先によって効果が異なります。また、ブラウザの境界を越えることでデータ共有も実現しています。これらの4つのGIF画像を見て、驚かれませんか？実は、ドラッグ＆ドロップだけでなく、コピー＆ペーストもサポートされています。しかし、上記の機能を実現するためにtransmatを使用する方法を詳しく説明する前に、transmatライブラリについて簡単に説明しておきましょう。

I. トランスマット入門

Transmatは、DataTransfer APIをベースに構築された小さなライブラリです。ドラッグ＆ドロップやコピー＆ペーストといった操作で、Webアプリケーションにおけるデータの送受信プロセスを簡素化します。DataTransfer APIは、様々なタイプのデータをユーザーのデバイス上の他のアプリケーションに転送できます。APIでサポートされている一般的なデータタイプには、text/plain、text/html、application/jsonなどがあります。

（画像出典：https://google.github.io/transmat/）

Transmat が何であるかがわかったので、その応用シナリオを見てみましょう。

外部アプリケーションと便利な方法で統合したい。
目標は、ユーザーが知らないアプリケーションであっても、他のアプリケーションとデータを共有できるようにすることです。
外部アプリケーションを Web アプリケーションと深く統合したいと考えています。
アプリケーションをユーザーの既存のワークフローに適合させたいですか?

Transmat の基本を理解できたので、次に Transmat を使用して上記の 4 つの GIF アニメーションに対応する機能を実現する方法を分析してみましょう。

II. トランスマットの実践

2.1 トランスマットソース

html

以下のコードでは、div#source要素にdraggable属性を追加しました。この属性は要素がドラッグ可能かどうかを示すために使用され、値はtrueまたはfalseのいずれかになります。

 <script src= "https://unpkg.com/transmat/lib/index.umd.js" ></script>
 <div id= "source" draggable= "true" tabindex= "0" >皆さんこんにちは、私はバオ兄弟です</div>

CSS

 ＃ソース {
背景: #eef;
境界線: 実線 1px rgba(0, 0, 255, 0.2);
境界線の半径: 8px;
カーソル：移動;
表示: インラインブロック;
マージン: 1em;
パディング: 4em 5em;
 }

 const { Transmat、addListeners、TransmatObserver } = transmat; 
 
 const ソース = document.getElementById( "ソース" ); 
 
 addListeners(ソース、 "送信" 、(イベント) => {
 const transmat = 新しい Transmat(イベント);
トランスマット.setData({
 "text/plain" : "みなさんこんにちは、私はバオ兄さんです！ "
 "テキスト/html" : `
みなさんこんにちは。私はバオ兄さんです。
私たちはフルスタック開発に重点を置き、TS、Vue 3、フロントエンドアーキテクチャ、その他の関連テクノロジーに関する技術的な洞察を共有することに専念しています。
私のホームページ<a href="https://juejin.cn/user/764915822103079"> をご覧ください!</a>
 </p>
 <img src="https://sf3-ttcdn-tos.pstatp.com/img/ユーザーアバター/
 075d8e781ba84bf64035ac251988fb93~300x300.image " border=" 1" />
 `、
 「テキスト/uriリスト」 : 「https://juejin.cn/user/764915822103079」 、
 「アプリケーション/json」 : {
名前： 「バオ兄弟」
 WeChat： 「semlinker 」
 },
 });
 });

上記のコードでは、`transmat` ライブラリが提供する `addListeners` 関数を使用して、`div#source` 要素に `transmit` イベントリスナーを追加しています。対応するイベントハンドラでは、まず `Transmat` オブジェクトを作成し、そのオブジェクトの `setData` メソッドを呼び出して、異なる MIME タイプのデータを設定しています。

例で使用されている MIME タイプを簡単に確認してみましょう。

text/plain: これはテキストファイルのデフォルト値を示します。テキストファイルは人間が読める形式でなければならず、バイナリデータを含んではなりません。
text/html: HTMLファイル形式を示します。一部のリッチテキストエディタでは、まずdataTransferオブジェクトからtext/html型のデータを取得し、それが存在しない場合はtext/plain型のデータを取得します。
`text/uri-list`: URIリンクの種類を示します。ほとんどのブラウザは、このタイプのデータの読み取りを優先します。有効なURIリンクが見つかった場合は、直接開きます。有効なURIリンクでない場合は、Chromeは`text/plain`タイプのデータを読み取り、そのデータをコンテンツ検索のキーワードとして使用します。
application/json: これは、フロントエンド開発者には馴染みのある JSON タイプを示します。

transmat-source を紹介した後、図 3 に示すカスタムターゲット (transmat-target) の実装コードを見てみましょう。

2.2 トランスマットターゲット

html

 <script src= "https://unpkg.com/transmat/lib/index.umd.js" ></script>
 <div id= "target" tabindex= "0" >ここに配置してください!</div>

CSS

体 {
テキスト配置: 中央;
フォント: 1.2em Helvetia、Arial、sans-serif;
 }
 #ターゲット {
境界線: 破線 1px rgba(0, 0, 0, 0.5);
境界線の半径: 8px;
マージン: 1em;
パディング: 4em;
 }
 .drag-active {
背景: rgba(255, 255, 0, 0.1);
 }
 .ドラッグオーバー{
背景: rgba(255, 255, 0, 0.5);
 }

 const { Transmat、addListeners、TransmatObserver } = transmat; 
 
 const ターゲット = document.getElementById( "ターゲット" ); 
 
 addListeners(target, "receive" , (イベント) => {
 const transmat = 新しい Transmat(イベント);
 // データに「application/json」型のデータが含まれているかどうかを確認します
// イベントの種類がドロップイベントか貼り付けイベントか
if (transmat.hasType( "application/json" )
 && トランスマット.accept()
 ）{
 const jsonString = transmat.getData( "application/json" );
 const データ = JSON.parse(jsonString);
    target.textContent = jsonString;
 }
 });

上記のコードでは、`transmat` ライブラリが提供する `addListeners` 関数を使用して、`div#target` 要素に `receive` イベントリスナーを追加しています。名前が示すように、`receive` イベントはメッセージが受信されたことを示します。対応するイベントハンドラーでは、`transmat` オブジェクトの `hasType` メソッドを使用して `application/json` メッセージをフィルタリングし、`JSON.parse` メソッドを使用してデシリアライズして対応するデータを取得し、対応する `jsonString` の内容を `div#target` 要素に表示しています。

図 3 では、ドラッグ可能な要素をカスタムリリースターゲットにドラッグすると、次の図に示すように強調表示効果が生成されます。

この効果は、Transmatライブラリが提供するTransmatObserverクラスを使用して実現されます。このクラスは、ユーザーのドラッグ＆ドロップ操作に応答するのに役立ちます。具体的な使用方法は以下の通りです。

 const obs = 新しい TransmatObserver((エントリ) => {
 for (constエントリのエントリ) {
 const transmat = 新しい Transmat(entry.event);
 if (transmat.hasType( "application/json" )) {
 entry.target.classList.toggle( "drag-active" 、 entry.isActive);
 entry.target.classList.toggle( "ドラッグオーバー" 、 entry.isTarget);
 }
 }
 });
 obs.observe(ターゲット);

`TransmatObserver` を初めて見たとき、すぐに `MutationObserver` API を思い浮かべました。どちらも似たような API を持つオブザーバーだからです。`MutationObserver` API を使うと、DOM の変更を監視できます。ノードの追加や削除、属性の変更、テキストコンテンツの変更など、DOM へのあらゆる変更をこの API を通じて通知できます。この API にご興味をお持ちの方は、「Who Moved My DOM?」という記事をお読みください。

トランスマットライブラリの使い方がわかったので、次に、Bao 兄弟がこのライブラリの動作原理の分析を案内します。

Transmatの使用例: Transmatデモ

https://gist.github.com/semlinker/c40baa3d4a0567e555e2e839c84d10dd

III. トランスマットソースコード解析

Transmatソースコード分析セクションでは、前章の実践セクションでコア機能を実装するためにaddListeners、Transmat、TransmatObserverの3つの関数を使用したため、以降のソースコード分析ではこれらの関数に焦点を当てます。ここでは、まずaddListeners関数の分析から始めます。

3.1 addListeners関数

`addListeners`関数はイベントリスナーを設定するために使用されます。この関数を呼び出すと、イベントリスナーを削除する関数が返されます。関数を分析する際、Brother Baoは通常、関数シグネチャの分析から始めます。

 // src/transmat.ts
関数addListeners<T extends Node>(
ターゲット: T,
タイプ: TransferEventType、
リスナー: (イベント: DataTransferEvent、ターゲット: T) => void、
  オプション = {ドラッグドロップ: true 、コピーペースト: true }
 ): () => 無効

上記の関数シグネチャを観察することで、関数の入出力を直感的に理解できます。この関数は以下の4つのパラメータをサポートしています。

target: 監視対象ターゲットを示し、そのタイプはノードです。
type: 受信するイベントの種類を示します。このパラメータ TransferEventType の型は、ユニオン型（「transmit」または「receive」）です。
listener: これはイベントリスナーを指します。イベントタイプ DataTransferEvent をサポートします。これは DragEvent | ClipboardEvent のユニオン型でもあり、ドラッグイベントとクリップボードイベントをサポートすることを意味します。
options: これは、ドラッグアンドドロップ、コピー、貼り付け操作を許可するかどうかを設定するために使用される構成オブジェクトを表します。

addListeners 関数本体には、主に次の 3 つのステップが含まれます。

ステップ1：isTransmitEventとoptions.copyPasteの値に基づいてクリップボード関連のイベントを登録します。
ステップ2：isTransmitEventとoptions.dragDropの値に基づいてドラッグアンドドロップ関連のイベントを登録します。
ステップ 3: 登録されたイベントリスナーを削除するために使用される関数オブジェクトを返します。

 // src/transmat.ts
エクスポート関数addListeners<T extends Node>(
ターゲット: T,
タイプ: TransferEventType, // '送信' | '受信'  
リスナー: (イベント: DataTransferEvent、ターゲット: T) => void、
  オプション = {ドラッグドロップ: true 、コピーペースト: true }
 ): () => void {
 const isTransmitEvent = type === '送信' ;
 unlistenCopyPaste: undefined | (() => void);
 unlistenDragDrop: 未定義 | (() => void); 
 
 if (options.copyPaste) {
 // ① ソースをドラッグして切り取りイベントとコピーイベントをリッスンし、ターゲットを解放して貼り付けイベントをリッスンすることができます。
 const events = isTransmitEvent ? [ '切り取り' , 'コピー' ] : [ '貼り付け' ];
 const 親要素 = target.parentElement!;
 unlistenCopyPaste = addEventListeners(parentElement, events, event => {
 if (!target. contains (document.activeElement)) {
戻る;
 }
リスナー(イベントはDataTransferEvent、ターゲット)。 
 
 if (event.type === 'コピー' || event.type === 'カット' ) {
イベント.preventDefault();
 }
 });
 } 
 
 if (options.dragDrop) {
 // ② ドラッグ可能なソースは dragstart イベントをリッスンし、dragover イベントとdropイベントをリッスンすることでターゲットを解放できます。
 const events = isTransmitEvent ? [ 'dragstart' ] : [ 'dragover' , 'drop' ];
 unlistenDragDrop = addEventListeners(ターゲット、イベント、イベント => {
リスナー(イベントはDataTransferEvent、ターゲット)。
 });
 } 
 
 // ③ 登録されたイベントリスナーを削除するために使用する関数オブジェクトを返します。
戻り値() => {
 unlistenCopyPaste && unlistenCopyPaste();
 unlistenDragDrop && unlistenDragDrop();
 };
 }

上記のコードにおけるイベントリスナーは、最終的には `addEventListeners` 関数を呼び出すことで実装されます。この関数は、イベントリスナーを追加するために `addEventListener` メソッドを繰り返し呼び出します。前述の Transmat の使用例を例に挙げると、対応するイベント処理コールバック関数内で、Transmat コンストラクターを呼び出して、`event` オブジェクトをパラメーターとして持つ Transmat インスタンスを作成します。では、このインスタンスの目的は何でしょうか？その目的を理解するには、Transmat クラスを理解する必要があります。

3.2 トランスマットクラス

Transmat クラスは src/transmat.ts ファイルで定義されており、そのコンストラクターには DataTransferEvent 型のパラメーターイベントがあります。

 // src/transmat.ts
エクスポートクラスTransmat {
パブリック読み取り専用イベント: DataTransferEvent;
パブリック読み取り専用データ転送: DataTransfer; 
 
 // タイプ DataTransferEvent = DragEvent | ClipboardEvent;
コンストラクター(イベント: DataTransferEvent) {
 this.event = イベント;
 this.dataTransfer = getDataTransfer(イベント);
 }
 }

Transmatコンストラクタ内では、getDataTransfer関数がDataTransferオブジェクトを取得し、内部のdataTransferプロパティに代入します。DataTransferオブジェクトは、ドラッグ＆ドロップ処理中にデータを保存するために使用されます。このオブジェクトには、1つ以上のデータ項目（1つ以上のデータ型）を保存できます。

getDataTransfer 関数の具体的な実装を見てみましょう。

 // src/data_transfer.ts
エクスポート関数getDataTransfer(イベント: DataTransferEvent): DataTransfer {
定数データ転送 =
 (イベントはClipboardEvent).clipboardData ですか?
    (DragEventとしてのイベント).dataTransfer;
 if (!データ転送) {
 throw new Error( 'このイベントでは DataTransfer は利用できません。' );
 }
 dataTransfer を返します。
 }

上記のコードでは、null 結合演算子 `??` を使用しています。この演算子は、左オペランドが null または undefined の場合は右オペランドを返し、そうでない場合は左オペランドを返すという特徴があります。具体的には、まずクリップボードイベントかどうかを確認し、クリップボードイベントの場合は `clipboardData` プロパティから `DataTransfer` オブジェクトを取得します。そうでない場合は `dataTransfer` プロパティから取得します。

ドラッグ可能なソースの場合、Transmatオブジェクトを作成した後、そのオブジェクトのsetDataメソッドを呼び出して、1つ以上のデータ項目を保存できます。例えば、次のコードでは、異なるタイプの複数のデータ項目を設定しています。

トランスマット.setData({
 "text/plain" : "みなさんこんにちは、私はバオ兄さんです！ "
 "テキスト/html" : `
みなさんこんにちは。私はバオ兄さんです。
 ...
 `、
 「テキスト/uriリスト」 : 「https://juejin.cn/user/764915822103079」 、
 「アプリケーション/json」 : {
名前： 「バオ兄弟」
 WeChat： 「semlinker 」
 },
 });

setData メソッドの使い方を理解した後、その具体的な実装を見てみましょう。

 // src/transmat.ts
データ設定(
 typeOrEntries: 文字列 | {[type: 文字列]: 不明},
データ?: 不明
）： 空所 {
 if (typeof typeOrEntries === 'string' ) {
 this.setData({[typeOrEntries]: data});
 }それ以外{
 // 複数の種類のデータの処理
Object.entries(typeOrEntries)のconst [type, data]に対して{
定数文字列データ =
 typeof data === 'object' ? JSON.stringify(data) : `${data}`;
      this.dataTransfer.setData(normalizeType(type), stringData);
 }
 }
 }

上記のコードに示すように、`setData` メソッドは最終的に `dataTransfer.setData` メソッドを呼び出してデータを保存します。`dataTransfer` オブジェクトの `setData` メソッドは、`format` と `data` という 2 つの文字列パラメータをサポートしています。これらはそれぞれ、保存するデータ形式と実際のデータを表します。指定されたデータ形式が存在しない場合は、対応するデータが最後に保存されます。指定されたデータ形式が既に存在する場合は、新しいデータで古いデータが置き換えられます。

下の画像は、dataTransfer.setDataメソッドの互換性を示しています。画像からわかるように、ほとんどの最新ブラウザがこのメソッドをサポートしています。

（画像出典：https://caniuse.com/mdn-api_datatransfer_setdata）

`Transmat` クラスには、`setData` メソッドに加えて、保存されたデータを取得するための `getData` メソッドも含まれています。`getData` メソッドは、データ型を表す文字列パラメータ `type` を受け取ります。データを取得する前に、`hasType` メソッドを呼び出して、その型のデータが存在するかどうかを判断します。存在する場合は、`dataTransfer` オブジェクトの `getData` メソッドを使用して、その型の対応するデータを取得します。

 // src/transmat.ts
 getData(型: 文字列): 文字列 | 未定義 {
 this.hasType(type)を返す
? this.dataTransfer.getData(normalizeType(type))
 ： 未定義;
 }

さらに、`getData` メソッドを呼び出す前に、渡された `type` パラメータを正規化するために `normalizeType` 関数が呼び出されます。具体的な内容は次のとおりです。

 // src/data_transfer.ts
エクスポート関数normalizeType(入力: 文字列) {
 const 結果 = input.toLowerCase();
スイッチ (結果) {
場合  '文章' ：
戻る  'テキスト/プレーン' ;
場合  'URL' :
戻る  'テキスト/uri-list' ;
デフォルト：
結果を返します。
 }
 }

同様に、dataTransfer.getData メソッドの互換性を見てみましょう。

(画像出典: https://caniuse.com/mdn-api_datatransfer_getdata)

さて、これでTransmatクラスの2つのコアメソッド、setDataとgetDataの紹介は終わりです。次は、TransmatObserverという別のクラスを紹介します。

3.3 TransmatObserver クラス

`TransmatObserver` クラスは、ユーザーのドラッグ＆ドロップ操作に応答し、ドラッグ処理中に配置領域をハイライト表示するのに役立ちます。例えば、前の例では、配置領域のハイライト表示を次のように実装しました。

 const obs = 新しい TransmatObserver((エントリ) => {
 for (constエントリのエントリ) {
 const transmat = 新しい Transmat(entry.event);
 if (transmat.hasType( "application/json" )) {
 entry.target.classList.toggle( "drag-active" 、 entry.isActive);
 entry.target.classList.toggle( "ドラッグオーバー" 、 entry.isTarget);
 }
 }
 });
 obs.observe(ターゲット);

同様に、まず TransmatObserver クラスのコンストラクターを分析してみましょう。

 // src/transmat_observer.ts
エクスポートクラス TransmatObserver {
 private readonly targets = new Set <Element>(); // 監視するターゲットのセット
private prevRecords: ReadonlyArray<TransmatObserverEntry> = []; // 前のレコードを保存します
プライベートremoveEventListeners = () => {}; 
 
コンストラクター(プライベート読み取り専用コールバック: TransmatObserverCallback) {}
 }

上記のコードからわかるように、TransmatObserver クラスのコンストラクターは、TransmatObserverCallback 型の callback と呼ばれるパラメーターをサポートしており、このパラメーターの型定義は次のとおりです。

 // src/transmat_observer.ts
エクスポート型 TransmatObserverCallback = (
エントリ: ReadonlyArray<TransmatObserverEntry>,
オブザーバー: TransmatObserver
 => 無効;

`TransmatObserverCallback` 関数型は、`entries` と `observer` の2つのパラメータを受け入れます。`entries` パラメータは `[]` 型です。

読み取り専用配列。各項目は TransmatObserverEntry 型で、次の型定義を持ちます。

 // src/transmat_observer.ts
エクスポートインターフェース TransmatObserverEntry {
ターゲット: 要素;
 /** タイプ DataTransferEvent = DragEvent | ClipboardEvent */
イベント: DataTransferEvent;
 /** このウィンドウで転送操作がアクティブかどうか。 */
 isActive: ブール値;
 /** 要素がアクティブターゲット（ドラッグオーバー）であるかどうか。 */
 isTarget: ブール値;
 }

前述の `transmat-target` の例では、`TransmatObserver` インスタンスを作成した後、その `observe` メソッドが呼び出され、監視対象のオブジェクトが渡されます。`observe` メソッドの実装は、以下に示すようにそれほど複雑ではありません。

 // src/transmat_observer.ts
観察(ターゲット: 要素) {
 /** プライベート読み取り専用ターゲット = 新しいSet <Element>(); */
 this.targets.add (ターゲット);
 if ( this.targets.size === 1) {
 this.addEventListeners();
 }
 }

`observe` メソッド内では、監視対象の要素が `targetsSet` コレクションに保存されます。`targetsSet` のサイズが 1 になると、現在のインスタンスの `addEventListeners` メソッドが呼び出され、イベントリスナーが追加されます。

 // src/transmat_observer.ts
プライベートaddEventListeners() {
 const リスナー = this.onTransferEvent をEventListenerとして定義します。
 this.removeEventListeners = addEventListeners(
書類
[ 'dragover' 、 'dragend' 、 'dragleave' 、 'drop' ],
リスナー
真実 
 ）;
 }

プライベートメソッド `addEventListeners` 内では、先ほど紹介した `addEventListeners` 関数を使用して、ドラッグ＆ドロップ関連のイベントリスナーをドキュメント要素に一括で追加します。対応するイベントの説明は次のとおりです。

dragover: 要素または選択したテキストが解放可能なターゲットにドラッグされたときにトリガーされます。
dragend: ドラッグ操作が終了したときにトリガーされます (例: マウスボタンが放されたとき)。
dragleave: 要素または選択されたテキストが解放可能なターゲットからドラッグされたときにトリガーされます。
drop: 要素または選択されたテキストが解放可能なターゲット上で解放されたときにトリガーされます。

実際には、ドラッグ＆ドロップに関連するイベントは上記4つだけではありません。イベントの完全なリストにご興味がおありでしたら、MDNの記事「HTMLドラッグ＆ドロップAPI」をご覧ください。以下では、`onTransferEvent`イベントリスナーの分析に焦点を当てます。

 プライベート onTransferEvent = (イベント: DataTransferEvent) => {
定数レコード: TransmatObserverEntry[] = [];
 for ( this.targetsのconst ターゲット) {
 // カーソルがブラウザから離れると、対応するイベントが body または html ノードに送信されます。
 const isLeavingDrag =
 event.type === 'dragleave' &&
 (イベント.ターゲット === ドキュメント.本文 ||
 event.target === document.body.parentElement); 
 
 // ページ上でドラッグ動作が発生していますか?
 // ドラッグ操作が終了すると、dragend イベントがトリガーされます。
 // 要素または選択されたテキストがリリース可能なターゲット上でリリースされると、ドロップイベントがトリガーされます。
 const isActive = event.type !== 'ドロップ'  
      && イベント.タイプ !== 'ドラジェンド' && !isLeavingDrag; 
 
 // ドラッグ可能な要素がターゲット要素にドラッグされているかどうかを判断します。
 const isTargetNode = target.contains (event.targetをNodeとして格納)。
 const isTarget = isActive && isTargetNode
 && イベント.type === 'dragover' ; 
 
 records.push({
ターゲット、
イベント、
アクティブ、
 isTarget、
 });
 } 
     
 // コールバック関数はレコードが変更された場合にのみ呼び出されます。
 if (!entryStatesEqual(レコード、this.prevRecords)) {
 this.prevRecords = records をReadonlyArray<TransmatObserverEntry>として保存します。
 this.callback(レコード、this);
 }
 }

上記のコードでは、`node.contains(otherNode)` メソッドを使用して、ドラッグ可能な要素が `target` 要素にドラッグされたかどうかを判定しています。`otherNode` が `node` の子孫ノード、または `node` 自身である場合は `true` を返し、それ以外の場合は `false` を返します。さらに、コールバック関数の頻繁な呼び出しを避けるため、コールバック関数を呼び出す前に `entryStatesEqual` 関数を呼び出して、レコードが変更されたかどうかを確認します。`entryStatesEqual` 関数の実装は、以下に示すように比較的シンプルです。

 // src/transmat_observer.ts
関数entryStatesEqual(
 a: ReadonlyArray<TransmatObserverEntry>,
 b: 読み取り専用配列<TransmatObserverEntry>
 ): ブール値 {
もし (a.長さ !== b.長さ) {
戻る 間違い;
 }
 // いずれかの項目が一致しない場合は、直ちにfalseを返します。
 a.every((av, index ) => {を返します。
 const bv = b[インデックス];
 return av.isActive === bv.isActive && av.isTarget === bv.isTarget;
 });
 }

MutationObserver と同様に、TransmatObserver も、最近トリガーされたレコードを取得するための takeRecords メソッドと、接続を「切断」するための disconnect メソッドを提供します。

 // 最後にトリガーされたレコードに戻る
レコードを取得する() {
 this.prevRecordsを返します。
 } 
 
 // すべてのターゲットとイベントリスナーを削除します
切断() {
 this.targets.clear();
 this.removeEventListeners();
 }

Transmatのソースコードの分析はこれで終了です。このプロジェクトにご興味をお持ちいただけましたら、完全なソースコードをご自身でご覧いただけます。このプロジェクトはTypeScriptを使用して開発されており、既にTypeScriptを学習されている方は、このプロジェクトを通じて、TSの知識とOOPのオブジェクト指向設計原則を定着させることができます。

IV. 要約

この記事では、Google Transmatオープンソースプロジェクトの適用シナリオ、使用方法、および関連ソースコードを紹介します。ソースコード分析セクションでは、ドラッグ＆ドロップ関連のイベントとDataTransfer APIについて確認しました。さらに、ユーザーのドラッグ＆ドロップ操作への応答に役立つTransmatObserverクラスを分析しました。このクラスを分析することで、MutationObserver APIへの理解が深まることを願っています。今後、同様のシナリオに遭遇した場合は、TransmatObserverクラスを参考にして独自のObserverクラスを実装してください。

カスタムペイロード（カスタムJSONデータ）は、管理するアプリケーション間の通信に便利ですが、外部アプリケーションへのデータ転送能力にも制限があります。この問題に対処するには、MIMEタイプが「application/ld+json」である軽量なJSON-LD（Linked Data）データ形式の使用を検討してください。このデータ形式は、データの整理とリンクをより適切に行えるため、より優れたWebアプリケーションの構築につながります。このデータ形式に興味があり、JSON-LD（Linked Data）についてさらに詳しく知りたい場合は、こちらの記事をご覧ください。

DUICUO