フロントエンドフレームワークから実装が望まれているmoveBeforeメソッドとはなにか
皆さんは新しく実装が進む Node.prototype.moveBefore というメソッドをご存知でしょうか、この記事ではこの新しいメソッドについて簡単な解説を行おうと思います。
新しく実装が進む Node.prototype.moveBefore メソッド
Node.prototype.moveBefore() とは新しく Node インターフェースに追加されるメソッドで Node.prototype.insertBefore() と同様のシグネチャーで要素の状態を維持しつつノードの移動ができる API です。
「要素の状態を維持しつつノードの移動ができる」という表現が想像できない人もいるかもしれませんが具体的な例としては、X のこのポストに付随している動画を見ていただけるとわかりやすいかと思います。
注目していただきたい点としては、要素が左右に移動した際にアニメーションの状態が保持されている点です。
右側のブロックにいるときに動いた量が左側のブロックに移動した際にも反映されていることが確認できるかと思います。
このように moveBefore() では操作対象の内部状態を維持したまま要素を移動できるため、アニメーションの状態や iframe で読み込んだ外部リソースの状態、テキストの選択状況やフォーカスの状態などを維持したままノードの移動が行えます。
またこの操作は特定のノードを取り除いたあとに別のノードに挿入するという挙動をとるため、既存の Node.prototype.removeChild() と Node.prototype.insertBefore() をまとめて行うことのできるメソッドとも捉えられます。
remove と insert の挙動の組み合わせであることが分かる
確認方法
このメソッドは chrome 131 以降で Atomic DOM move (Node.moveBefore) というフラグを有効化することで一部の挙動を確認ができます。
先程のポストのデモは実際のサイトで確認できますので気になる方は、ぜひ環境を用意して実際に動作を確かめてみてください。
chrome以外のブラウザの反応
standard position を確認すると mozilla チームは positive[1] を、webkit チームは support[2] を示しており概ね合意が取れていそうな雰囲気を感じますので、残すは実装を待つのみかと思います。
standard position について補足
standard position とは提案された新しい仕様に対しての mozilla や webkit のチームがどのように考えているかを表明する場です。
基本的に該当のリポジトリ内で issue として議論がスタートし、最終的にポジションが決まるという流れになっています。
ポジションは下記のような分類になっており、これを見ることで実装まで進みそうかなどのある程度の予測がつく時があります。
| 肯定的 | 中立[3] | 否定的 | |
|---|---|---|---|
| webkit | support |
neutral |
oppose |
| mozilla | positive |
neutral |
negative |
まとめ
TPAC でも言及があったように、この API はフレームワーク側での利用が期待されており、現時点では React/Angular/htmx などがこの API に関心を寄せています。
そのため開発者が直接利用する機会は少ないかと思われますが、これからのフレームワークの進化に貢献する重要な機能だと感じたので簡単に内容を記事にまとめてみました。
参考資料
- Intent to Ship: DOM
moveBefore()method, for state-preserving atomic move - DOM State-Preserving Move - Chrome Platform Status
- TPAC 2024 meeting · Issue #326 · whatwg/meta
- Introduce moveBefore() state-preserving atomic move API
更新履歴
- 動作確認バージョンを Canary 133 としていたが、131でもフラグを有効化すれば動いたので修正
Discussion