こんにちは、Repro Booster開発責任者のEdward Fox（edwardkenfox）です。
3/15（金）に「Repro Tech Meetup #8 – Deep Dive into Browsers」という勉強会を開催しました。私たちがRepro Boosterの開発と運用を行っている中で、ブラウザの仕様や細かい挙動に関する知見が少しづつ溜まっており、テックブログとは違う形で発表できないかと思いこのイベントを企画しました。また幸運なことに、ブラウザの有識者やサービス開発を通した知見をお持ちの方々に声をかけるご縁があり、登壇に快諾いただけたおかげでこの勉強会が実現できました。
この記事では登壇者と発表の概要を簡単に紹介させてもらいます。発表資料はすべて イベントURL から見れるので、詳細を見たい方はぜひそちらからチェックしてみてください。
発表1. No more parser-inserted js - defer / async を今こそ完全に理解する by sugi
Repro Booster 開発メンバーの1人である sugi さんの発表です。JavaSceriptの歴史を辿りながら、ブラウザによるHTMLのパースとJavaScriptの実行モデルについて解説する、という内容でした。Netscape など懐かしい名前についても言及があり、会場でも懐かしさから笑いが起こる場面もありました。
関連する内容として sugi さんの書いた SCRIPT 要素の変遷から触れる Web の進化 というテックブログ記事も存在します。このテーマに興味のある人はぜひそちらも読んでみてください。
発表2. document.write再考 by brn
brn さんからは、いまとなっては悪名高いAPIという認知が広まりつつある document.write() について、メリットとデメリットだけでなく「なぜそんなAPIがまだ現役なのか」というポイントを解説する発表をしていただきました。また document.write() を非同期化する（実験的な）代替手段や、 rel=blocking といった新しいAPI／属性についても紹介がありました。
発表3. サービスワーカーを使ってブラウザー開発環境を作る by steelydylan
3つめの発表は mosya というWeb制作の学習サービスを提供されている steelydylan さんです。 mosya において、どのようなブラウザAPIや技術を活用しブラウザ上のコードエディターやプレビューが実現されているかを紹介してもらいました。ServiceWorkerやIndexedDB、SWCなどモダンなWeb技術やライブラリを効果的に活用されているようです。
発表4. Memory leaks in Web Application by yayoc
yayocさんの発表は、フロントエンド開発では見落されることも多いメモリ管理やメモリリークのデバッグ方法について解説する内容でした。メモリリークの分析手法だけでなく、自動化するアプローチについても言及されており、実際のサービス開発を通してでないと得ることの難しい貴重な知見について共有いただきました。
発表5. Service Worker Static Routing API by sisidovski
sisidovski さんからは、ServiceWorker が抱えるオーバーヘッドと、新しく出来た Static Routing API という仕組みについて解説してもらいました。Repro Boosterでは ServiceWoker を多くの用途で駆使しているため、すぐにでも活用してみたいAPIについて詳しく聞くことができました。
おわりに
こじんまりとしつつも濃度の高い勉強会となり、とても有意義な場になったと感じます。自然と発表中に質疑が入ったりインタラクティブな形になり、発表者と参加者の距離も近く、「まだまだ話し足りない！」という熱量のまま（主催者も時間を忘れ、危うくビルの閉館時間を過ぎてしまいそうになるくらい）終えることができました。登壇者ならびに参加者の方々、改めてご参加いただきありがとうございました。
なおコロナ前は Repro Tech Meetup という名前で色々なテーマの勉強会やハンズオンを開催していたのですが、気が付けば4年半ぶりの開催となりました。今後も勉強会を開催できればと思っているので、ぜひconnpassのRepro Tech Meetupにジョインして今後のイベント情報もチェックしてみてください。
最後に、Repro Boosterでは開発者を採用しています。ブラウザの細かい仕様について調べながらサービス開発を行うことに興味のある方がいればぜひこちらもチェックしてみてください。
