表題のとおり、Kyoto.js 15で登壇してきました。
off-the-main-threadについては昨年のNode学園30時限目で@kosamariさんが発表していたあたりから関心はありました。
Kyoto.jsの翌日に開催された次世代Webカンファレンスでもoff-the-main-threadに関しては何回か言及されていましたし、注目されていると思います。フロントエンドのセッションでは「2、3年後には当たり前になっているかもしれない」とも話されていました。
Frontend - 次世代Webカンファレンス #nwc_front
WorkerDOMに関しては、社内のインターン生から「AMPページでスクロールしたらでこういうバナーを差し込みたいのですが・・・」って質問されて「amp-position-observerでできないですかね」って話すと、要件が色々あるみたいでどうやら試したけどできなさそうでした。
「JavaScript使えるならここのdivのdisplay書き換えるだけでいいんですけどね」って話をしていたのですが、「そういえばAMPでJavaScript使ってDOM操作できるライブラリをどこかで見たぞ」と思い出して調べると、amp-scriptがそれっぽくて中でWorkerDOMが使われていました。
WorkerDOMはReactなどのライブラリとも互換性があると書かれていたので、試してみたところ成功しました。
せっかくなのでJSの勉強会で話そうと思っていた時にKyoto.js開催が決まったので今回話したという経緯になります。
発表ではcreate-react-appで作った雛形をビルドしたJSファイルをWorkerで動かすということもできることを話したのですが、実際はcreate-react-appで雛形作ってnpm run buildでできたJSファイルをWorkerで読み込めばいいのですが、そのためには多少初期設定から変更が必要でした。
index.htmlを書き換えたり、webpack.config.prod.jsを書き換える必要がありました。それらに関しては時間の都合や話の本質ではない(webpackの話をしたいわけではない)ので発表時には話しませんでした。
diffを貼っておくので興味があればみてください。「いや、こうやればいいでしょ」などツッコミどころがあればどんどん教えていただけると嬉しいです。
最後までお読みいただきありがとうございました。質問などはTwitter(@shisama_)までお願いいたします。
