Scribble at 2023-05-29 17:30:47 Last modified: 2023-05-29 23:49:44

ブラウザで動作する JavaScript のコードを実装するにあたって、要素のプロパティを変更したり動かしたりするのに、たいていは jQuery などの「フレームワーク」を使ったり、特殊な場合は CSS animations を使ったりする。そして、jQuery のような追加のライブラリに依存しないで、ブラウザの JavaScript エンジンがサポートしている "Web APIs" と呼ばれる機能の "Web Animations API" を使うという方も増えてきていると思う。いまや、#frame 要素を左から右へ動かすというだけなら、

const element = document.getElementById( "frame" );

element.animate([ { 'transform': 'translate(-500px)' }, { 'transform': 'translate(500px)' } ], { duration: 2000, easing: 'ease', iterations: Infinity });

という２行で jQuery なしにアニメーションできるようになっている。

ただし、この名称がややこしい。オンラインで検索すると、"Web API" だと Google や Facebook などの従来の API に関する情報が出てくるため、区別しにくい場合がある（実際、いまでも "Web API" についての新刊が出ているくらいなので、もともとの "Web API" という言葉も現役である）。なので、特に Web Animations API だけについては "WAAPI" と呼ぶ場合があるようだ。ちなみに、どこかのページで "F" で始まる単語として花の名前だったかニック・ネームがあるかのような記述を見たことがあるけれど、検索しても全く出てこないので、勘違いかもしれない。

それから、Web Animations API と、Polymer との関係や、polyfill との関係、それから発展して W3C の Web Animations という規格との関係も整理して解説している事例は少ない。なので、ひとまずモダン・ブラウザでサポートされているメソッドを使うという解説だけに集中して、他の規格やライブラリとの関係は詳しく書かない方がいいのかもしれない（『Webクリエイターボックス』なんかは、記事の最後に polyfill が紹介されている）。

僕も、そろそろロボットみたいに jQeury の最新版をまず入れるみたいな手順はどうかと思うので、ブラウザがサポートしている範囲で書けることは Web Animations API で書くというスタンスも選択肢の一つにしておいた方がいいと思う。だいたい、"Beyond jQuery" なんていう本が出ているくらいなので、JavaScript を専門に扱っている人々のあいだでも再考すべきという状況にあるのではないか。