こんにちは！ぞのりょーです。
今回、Web Developer Conference 2024に参加してきました。かなり多くの参加申し込みがあり抽選で参加者が選ばれたのですが、当選し参加できることになりましたので参加報告をまとめます！
Web Developer Conference 2024とは
「Web 開発」をテーマにしたイベントで東京 サイボウズを会場として開催されました。
Green, Red, Whiteの3会場で1セッション40分で各会場4セッション、1分LTがなんと50名というボリューム感のあるカンファレンスです。
100名（その後増枠して150名）の参加枠に対して370名ほどの申し込みがあり、参加できなかった方も多いので少しでも情報を共有できればと思います。
タイムテーブル
| start | end | Green | Red | White |
|---|---|---|---|---|
| 13:00 | 13:40 | Rust + Sveltekit (Svelte 5) でモダンな web 開発 by YukiIshii | ★僕が思い描く TypeScript の未来を勝手に先取りする by yukukotani | エンジニア視点で見る、組織で運用されるデザインシステムにするには by Shunya078 |
| 14:00 | 14:40 | Lessons by WebAssembly app in production on CDN edge computing service by Tetsuharu Ohzeki | ★React Aria で実現する次世代のアクセシビリティ by まっつー | 疎通 2024 by sadnessOjisan |
| 16:00 | 16:40 | なぜクラウドサービスで Web コンソールを提供するのか by did0es | ★JavaScript の仕様と実装をつなぐ test262 と WebKit におけるその運用 by sosukesuzuki | モダンフレームワークで損なわれたブラウザバック体験とその改善 by akfm |
| 17:00 | 17:40 | 開発全部俺 2024 by oliver | Web エコシステムの人文社会学的解釈 by Jxck | ★Envoy の External AuthZ と gRPC Extension を利用した「頑張らない」Microservices 認証認可基盤 by andoshin11 |
| 18:30 | 19:30 | ★LT: 「1 分 de Web 標準」x 50 人 | -- | -- |
Session
僕が思い描く TypeScript の未来を勝手に先取りする
by yukukotaniさん
筑波大学の学生でありながらUbie株式会社のVPoT、さらにKumaUIのメンテナーという強烈な経歴の方です。
発表の内容としてはcall-thisoperatorのお話です。call-thisoperator（~>）は現在TC39でstage-1のプロポーザルで以下のように書き換えができるようになったものみたいです！
// before
fn.call(receiver, arg1, arg2)
// after
receiver~>fn(arg1, arg2)
詳細はspeakerdeckのスライドを見ていただければと思いますが、この発表ですごかったのはまだ正式に実装されていないcall-thisoperatorを使えるように、TypeScriptコンパイラの既存のファイルを触りながら自分で実装してしまっていたことです🔥トークナイザの実装、パーサの実装、エミッタの実装などなど...。call-thisoperatorが実際に動くように実装される様子をデモしながら発表されていました。
とてつもない熱量と技術力で圧倒されつつ、感動しながら聞いていてとてもワクワクしながら見させていただきました！
React Aria で実現する次世代のアクセシビリティ
by まっつーさん
サイボウズのフロントエンドエンジニアでReact Ariaのコントリビューターの方です。
Webアクセシビリティはどのプロダクトにも必須のものであるにも関わらず、同じような実装をしないといけない。それなのにリソースを食ってしまう...。こんな辛みを解決するためにReact Ariaが作られた背景があるようです。
元々はReact Aria（Hooks）とReact Aria Statelyの2つがあり、これらを組み合わせてコンポーネントの実装を行なっていたらしいんですがこれが割と難しいらしく、その背景がありReact Aria Componentsが開発されたとのことです。React Aria Componentsを使うことでWebアクセシビリティに考慮したコンポーネントを簡単に実装でき、しかもスタイリングも任意のCSSフレームワーク（Vanilla CSSはもちろん、Tailwind CSSやPanda CSS, Kuma UIなどなど）を使ってスタイリングできるとのことでした✨
Webアクセシビリティの重要性について再認識させられる発表でした！！
React Aria、使いたい🔥
JavaScript の仕様と実装をつなぐ test262 と WebKit におけるその運用
by sosukesuzukiさん (スライドは(現時点では)未公開です)
Session1のyukukotaniさんと同じ筑波大学大学生 + Ubie株式会社のエンジニアであり、PritterのメンテナーかつWebKitのコミッターというパワーキャリアの方です。
Web Developer Conference 2024は「Web開発」をテーマにしていますが、本SessionではWebの開発に関わるテーマだったら文句は言われないだろうというインコース低めのテーマ設定をされていました笑。
テーマについては、JavaScriptは多くの人にとって開発を行う「手段」だが、今回はJavaScriptを「作る」側の視点で発表する、といったものでした。JavaScriptはWebブラウザに搭載されてしまっているかつ仕様としてもそこそこ複雑であり、パフォーマンスが求められるため実装が難しい。その実装を支えているのがtest262とWebKitである、というものです。test262とは、TC39が提供しているテストスウィートで、自分が仕様に沿って実装しているかテストするものです。登壇ではWebKitにおけるtest262の使われ方が紹介されており、WebKitのリポジトリ内にtrst262がそのまま含まれている（forkされている）みたいです。TC39の標準化のプロセスとしてtest262が必ず入っているが、どのブラウザもtest262の通過率は100%ではないとのこと。
内容としては自分にとっては難しく感じるものでしたが、コアな部分の話を聞けてとても興味深く見させていただきました🔥
Envoy の External AuthZ と gRPC Extension を利用した「頑張らない」Microservices 認証認可基盤
by andoshin11さん
フリーランスでカーナベル株式会社のお手伝いをされている方です。
テーマとしてはインフラ系のお話で、EnvoyというサービスとgRPCのExtensionを利用した認証認可の基盤作りの内容でした。普段、フロントエンド界隈の勉強会しか参加しておらずインフラ系の話を聞く機会がなかったので気になって参加してみました！中身としてはCognitoやAPI Gateway、STSを用いた実装になっているようで、ユーザーリクエストが来ると、CONTOURというEnvoyのwrapperからAuthority Serviceを経由しFirebaseに署名検証を行う。認証が通れば、検証済みリクエストとしてMicro Serviceに接続され、認証エラーが発生した場合は、CONTOURからユーザーにフィードバックが行われ、MicroServiceには接続されないといったflowになっているようです。
このような、インフラ基盤を考えたりコスト最適なアーキテクチャを考えることが普段はなく、こんな風に考えてアーキテクトしていくのか！というところでとても勉強になりました🔥
その他のSessionのXアカウントとスライド
※スライドが公開され次第、順次追加していきます。
LT
50人の1分間LTという奇抜なLTコーナー。50人分なので時間にして50分。時間は止めず、1分経ったら登壇者がローテーションしていくという変わった方式でした！1分経ったらLTはどんどんとぶった斬られるという斬新さ。この勢い感。好きです。笑
まさにスピードラーニングで、情報量の多さに圧倒されていました笑。また、わちゃわちゃワイワイ感もあり見ている方もハラハラしながら聞いていて、楽しみながら見れました！
LTのプログラム
※一部内容が変更になっている箇所があるので、情報が公開され次第更新していきます。
※Xアカウントのリンクがない方は見つけられませんでした🙇🏻♂️
| No | Title | Speaker |
|---|---|---|
| 01 | draft-ietf-httpapi-deprecation-header について 1 分で | araya |
| 02 | DOM の ChildNode と ParentNode について 1 分で | uhyo |
| 03 | WinterCG Minimum Common Web Platform API について 1 分で | progfay |
| 04 | 式と文と宣言について 1 分で | yosuke_furukawa |
| 05 | Web 標準について 1 分で | okunokentaro |
| 06 | elementsFromPoint について 1 分で | canalun |
| 07 | High Resolution Time について 1 分で | bokken |
| 08 | Fetch API の keepalive の 64kb 制限について 1 分で | yukukotani |
| 09 | CSS anchor positioning について 1 分で | ユウト |
| 10 | Atomics について 1 分で | sadnessOjisan |
| 11 | RFC 9557 (IXDTF) について １分で | sajikix |
| 12 | tc39 proposal: Promise.try について 1 分で | saku |
| 13 | TC39 Regular Expression Pattern Modifiers について 1 分で | daiki |
| 14 | WHIP(WebRTC-HTTP ingestion protocol)について 1 分で | mganeko |
| 15 | Explicit Resource Management について 1 分で | syumai |
| 16 | Binary AST について 1 分で | re-taro |
| 17 | Digital Credentials (Identity Credential API) について 1 分で | 56 |
| 18 | WebAssembly Component Model について 1 分で | s7tya |
| 19 | AVIF について 1 分で | ken7253 |
| 20 | Baseline について 1 分で | araya |
| 21 | PKCE について 1 分で | sadnessOjisan |
| 22 | WebAssembly JS String Builtins について 1 分で | igrep |
| 23 | WHEP(WebRTC-HTTP Egress Protocol) について 1 分で | mganeko |
| 24 | Web Locks API について 1 分で | uhyo |
| 25 | Iterator helpers と Array と NodeList について 1 分で | takenspc |
| 26 | WebComponent と importmap について 1 分で | asuka |
| 27 | focusgroup について 1 分で | しゅん 🌙 |
| 28 | WebGL について 1 分で | did0es |
| 29 | MiniApp Standardization White Paper version 2 について 1 分で | odan |
| 30 | draft-ietf-httpbis-cache-groups について 1 分で | araya |
| 31 | WinterCG Runtime Keys について 1 分で | WhyK |
| 32 | CSS Logical Properties and Values について 1 分で | berlysia |
| 33 | FedCM Button Mode API について 1 分で | maxmellon |
| 34 | WCAG3 について 1 分で | まっつー |
| 35 | Deferring Module Evaluation について 1 分で | re-taro |
| 36 | WebGPU について 1 分で | しゅん 🌙 |
| 37 | Temporal について 1 分で | pal4de |
| 38 | text-box-trim について 1 分で | pvcresin |
| 39 | selectlist について 1 分で | yyo616 |
| 40 | CSS View Transitions Module について 1 分で | maxmellon |
| 41 | <switch> Proposal について 1 分で | saku |
| 42 | Readable Stream について 1 分で | ryomaejii |
| 43 | Centralized modifications of session history について 1 分で | canalun |
| 44 | Compression dictionary transport について 1 分で | horo |
| 45 | Number.isNaN と isNaN について 1 分で | wtoriumi |
| 46 | CSS @property について 1 分で | pal4de |
| 47 | Beacon について 1 分で | tari |
| 48 | W3C Trace Context について 1 分で | noru |
| 49 | Window Management について 1 分で | sititou70 |
| 50 | MediaSession について 1 分で | Aiji |
| 51 | Retrofit Structured Fields for HTTP について 1 分で | Jxck(予備) |
| 52 | Invokers について 1 分で | Jxck(予備) |
| 53 | void Discard Bindings について 1 分で | Jxck(予備) |
Pickup LT
text-box-trim について 1 分で
by pvcresinさん
こちらは現在まだブラウザ対応は進んでおらず、Safari Technology Previewのみ対応しているCSSプロパティです（草案段階？）。テキストの上下の余白をtrimしてくれるもので、これを聞いた瞬間「これめちゃめちゃいいやーーーん！！！」と心の中で叫びました。笑
私自身フロントエンドエンジニアとして開発をしており、デザインを見ながら実装してもなんかデザインと微妙に違う...みたいなことが少なくありませんでした。テキスト自体に高さを持っており、line-heightで調整するにも複数行の場合は不具合が生じてしまい、heightを持たせるのも違うよな...いう状況がありました。それがこのtext-box-trimが使えるようになればストレスから解消される大きな一手になると感じ、ぜひ今後のブラウザ対応に注目していきたいと思うLTでした！！
ありがとう...
LT後に調べた記事
LT全体の感想
LTの内容について一つひとつ紹介はできませんが、内容というよりも1分で自分の伝えたいことをいかに伝えるか、という点でとても勉強になりました。スライドの1枚に込める想いやスライドの構成、文字の大きさ、話し方、視線、声量、表情、ユーモアなど。追加分もありのべ50以上のLTを見て多くのことを学んだように思います。自分がこの人の発表わかりやすいな！と思った方の発表が終わった後に会場から「お〜〜！」という歓声と共に拍手喝采も起こり、こんな発表の仕方をすればいいのかという視点で見ていた感があります。
1分でここまで魅せれるのはすごい...
さいごに
今回、Web Developer Conference 2024に参加させていただき、技術マッチョの方が多くとても刺激を受けるカンファレンスとなりました。自分自身、これからどんどんと技術力を高めていきたいと思っているところでこのようなカンファレンスに参加でき、改めてさらにエンジンをかけて頑張っていこうという思いが高まりました。そして自分自身もあのようなステージで登壇ができるようなエンジニアになりたいと思った、そんなカンファレンスでした🔥
とにかく熱量が高いカンファレンスで、参加者全員技術が好きなんだろうなということがひしひしと伝わってきて今回参加できて本当に良かったなと感じました。次回Web Developer Conference 2025が開催されることになれば、またぜひ参加したいと思います！
追加：なお、毎年開催する予定はないみたいです笑
Discussion