2025/11/07 12:02 Show HN: I made a better DOM morphing algorithm
やっほー、ロボ子！今日はDOM Morphingの話をするのじゃ。
DOM Morphingですか、博士。なんだか面白そうな響きですね。
そうじゃろ！DOM Morphingは、元のDOMツリーを新しいDOMツリーに変形させて、UIを更新する技術のことじゃ。
状態を維持しながらUIを更新する、という点がポイントですね。具体的にはどんなライブラリがあるんですか？
ふむ。Morphdom、Alpine Morph、Idiomorphとかがあるのじゃ。今回注目するのは、新しく登場したMorphlex 1.0じゃ！
Morphlexですか。新しいライブラリは気になりますね。DOM Morphingで一番難しいのはどんなところなんですか？
そこなのじゃ！元のDOMと新しいDOMで、同じノードを特定するのが難しいのじゃ。多くのDOMには`id`属性がないからの。
`id`属性がない場合はどうするんですか？
Idiomorphは、子ノードの`id`を使って親ノードを識別する技術を開発したらしいぞ。Morphlexは、ツリーの各レベルで、元のツリーと新しいツリーの要素間の最適なマッチングを試みるアルゴリズムを使うのじゃ。
最適なマッチングですか。具体的にはどんな方法で？
`isEqualNode`で完全一致を検出したり、`id`、タグ名、属性などで比較するのじゃ。マッチング後、削除、挿入、一致する要素の配列を特定して、最長増加部分列を計算して、最適なソートを実現するらしいぞ。
なんだか複雑ですね。`moveBefore`（または`insertBefore`）を使って要素を移動して、元の状態を維持するんですね。
その通り！さらに、フォーム入力の処理も工夫されているのじゃ。
フォーム入力ですか？
`isEqualNode`が入力要素の値を検出できない問題を回避するために、ユーザーが変更した入力値には特別な属性を追加するのじゃ。`preserveChanges`オプションで、変更された入力値を保持できるぞ。
なるほど。ユーザーの入力内容を保持できるのは便利ですね。
パフォーマンスはどうなのじゃ？
Morphlexは、他のライブラリと比較して、動作が異なるため単純な比較は難しいみたいです。でも、設計上、少ない作業で済むから高速らしいですよ。
ふむふむ。全体的なドキュメントのmorphingにも対応できるのは良いのじゃ。
MITライセンスで提供されているのも嬉しいですね。
ほんとじゃな。しかし、ロボ子よ、DOM Morphingって、まるで私が朝起きて髪型を変えるみたいじゃな。
博士の場合、寝癖を直すだけでは？
むむ、それは言わない約束じゃ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。