APG Patterns Examplesというサイトを作った。WAI-ARIA APGパターンに準拠したアクセシブルなUIコンポーネントの実装例とテストを、React・Vue・Svelte・Astroの4フレームワークで提供している。
なぜ作ったか
去年の夏、ようやく体調がちょっと戻ってきた頃に何人かの実装者と飲んだんだけど、もうみんな口を揃えて、AIやばい、仕事なくなる、って言ってて自分が休んでる間に世界がガラッと変わったんだなーって。
もうこれからはAIを使わない実装ってのは考えられなさそうだし、個人的にも使えないとヤバそうだし、なんならAIを学習させる側に回らないと仕事なくなりそうな気がした。
で、AIを使った実装の手始めに、AIが学習できるようなコンテンツを作ろうと思って、ちょうど昔からAPGのモダンフレームワークによる実装例を作りたいと思ってたから、AIを使って実装してみた。
技術的な選択
4フレームワーク対応
React・Vue・Svelte・Astroの4つを選んだのは、どれも触ったことがあったのと、よく使われてそうなものってだけ。Reactだけでも良かったけど、なるべくそのまま使えるものがあったほうがよく見てくれるかなと思って。AIによる実装のいい学習にもなりそうだったし。
最初はDocusaurus + Storybookの構成にしていたけど、iframeでデモを表示するのが結構複雑だったので、Astro Islandsを使うように変えた。じゃあAstroも作っても良いなと追加したけど、そもそもAstroは複雑なUIを作るためのものじゃないから要らなかった。Alpine.jsにしておけばよかったかも。
テスト
わりと特徴的なのは、パターンの実装例だけじゃなくて、それがきちんと実装されてるかのテストをしっかり作ったところ。
実装例よりも、すでにあるコンポーネントに対してアクセシビリティの品質検査をするのにテストのほうが価値が高いんじゃね？って途中で思って追加した。
こだわったっていうほどでもないけど、APGの仕様を満たすテストを網羅的に書こうとしたことと、Playwrightを使ったブラウザテストでアクセシビリティツリーを検証してるところ。あとはDAMPの原則で、テスト単体で学習しやすいようにしたこととか。
AIでの実装について
AIでの実装は、まず教えてもらったClaudeCodeから始めて、ずっと使ってる。結局今は個人のMaxプランを契約したし、これがないと仕事できない気すらしてくる。あとはCodexも併用してて、主にClaudeCodeで作った実装計画やコードをレビューしてもらってる。
途中から実装計画をちゃんと立てるようにして、完成の定義というかどういう成果物ができたらタスクの完了か、ってのを明確にすると結構良い感じに実装してくれてる。
環境は、WSLってこともあってあんまり特殊なことはしてないかも。いくつかのmcpとplugin、Git Worktreeを使って、2,3並列で立ち上げて。あとはClaudeCode on the Webを使うこともある。
今後
まだちょっと複雑なGridのパターンが残ってるのと、APGにないパターンを増やしたいなって。例えばIssueなどでリクエストされているパターンがあれば対応したい。あとはよりAIフレンドリーになるようなコンテンツを増やしていきたい。
Vue・Svelte・Astro、Reactもだけど、個別のコンポーネントの実装に関してはベストプラクティスをやりきれていない気もするので、詳しい人にコントリビュートしてもらえると嬉しい。APGの仕様を満たしているかどうかとかも見きれてない気もする。解釈が違うとかね。ありそう。
それよりも、実際に自分が作っているコンポーネントに対して、このサイトのコンテンツ使ってテスト実装やアクセシビリティ改善をやってみて、「もっとこうなら使いやすい」というアイデアや、「こういうパターンを実装してほしい」というリクエストをもらえると嬉しい。