こんにちは！ぞのりょーです。
今回、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 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アカウントとスライド

※スライドが公開され次第、順次追加していきます。

Title	Xアカウント	スライド
Rust + Sveltekit (Svelte 5) でモダンな web 開発	YukiIshii10	未公開
エンジニア視点で見る、組織で運用されるデザインシステムにするには	Shunya078	スライドリンク
Lessons by WebAssembly app in production on CDN edge computing service	見当たらず	未公開
疎通 2024 by sadnessOjisan	sadnessOjisan	スライドリンク
なぜクラウドサービスで Web コンソールを提供するのか by did0es	did0es	スライドリンク
モダンフレームワークで損なわれたブラウザバック体験とその改善 by akfm	akfm_sato	スライドリンク
開発全部俺 2024 by oliver	oliver_diary	スライドは諸事情により非公開みたいです
Web エコシステムの人文社会学的解釈 by Jxck	jxck_	スライドリンク

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