はじめに
こんにちは、バックエンドエンジニアのwadakatuです。 TPAC 2025 in Kobe のハッカソンにソロ参加して、なんと1位になりました…！
公式ページ: https://www.w3.org/2025/11/TPAC/hackathon/
前回のTPAC参加レポでも軽く触れましたが、改めてハッカソン当日のことを振り返ってみます。
ハッカソン概要
- 日時: 2025-11-11 19:00–22:30 (JST)
- 会場: International Conference Center, Kobe (Room 501/502)
- チャレンジ:
- Challenge #1 CSS Playground
- Challenge #2 Dashboard（私はこちらを選びました）
- ルール: 90分で制作、ソロまたは2人チーム、AIツール利用可
- 提出形式: GitHub Issueにタイトル / 説明 / リポジトリ / スクショを投稿
なぜ参加したのか
正直、最初はあまり参加するつもりはありませんでした。 「自分なんかが出ても勝てるわけないよな…」と思っていたので。
ただ、私の会社（Studio, Inc）は今年初めてW3Cに参画しました。 Web Fontsの会議に参加できただけで目標は達成だったんですが、せっかくここまで来たんだし何かもう少し爪痕を残したいなと。
そんな感じで、ハッカソン前日の深夜テンションで勢いよく参加申し込みしてしまいました。 （あの時の自分、ナイス判断だったな…）
当日の様子
夜19時からスタート。会場には寿司の盛り合わせが用意されていて、つまみながら作業できる感じでした。
前日参加を決めたものの、制作時間は90分しかないし、自分の強みを活かしたいなと考えていました。 デザインには正直自信がないので「CSS Playground」は見送り、まだ勝ち目がありそうな**ダッシュボード制作（Dashboard）**に集中することに。
ソロ参加で、Claude Codeを使ってVibe Codingで制作しました。
90分という短い時間だったので、難しいライブラリは使わず、HTML / CSS / JavaScriptのvanillaだけで書く方針にしました。 デザインを言葉だけで伝えるのは難しかったので、MatrixとFalloutのPip-Boyの参考画像を渡して、できるだけ早く意図を共有するようにしました。
やりたいことは山ほどあったんですが、時間が限られていたのでシンプルな仕様を優先しました。
作ったもの
作品名は「Matrix Terminal Dashboard」です。 W3Cのデータを可視化する、レトロなターミナル風ダッシュボードを作りました。
作品の要点
- W3C API（https://api.w3.org）を使ってデータを取得
- 端末風UIで、グループ種別（WG / IG / CGなど）や仕様ステータス（REC / WD / CR / NOTEなど）を入力して可視化
- 1989年のCRT端末をイメージした、グリーンオンブラックのデザイン
- HTML / CSS / JavaScriptで実装（フレームワークなし）
- Claude Codeを使ってVibe Codingで制作
裏話ですが、実は90分ではAPIを完璧に動作させることができなくて、一部ダミーデータを混ぜています… 今後機会があれば修正したいところです笑
投票と結果
投票は、ハッカソン参加者全員によるスタンプ投票でした。 参加者のプロダクトはGitHub Issueに投稿されて、そこにリアクションを付ける形式です。
投票先のIssueは以下です。 https://github.com/w3c/hackathon-tpac-2025/issues/7
デモは、主催者の方のPCからモニターに映してもらう方式でした。 作った人たちが前に出て発表する形式で、発表はすべて英語。
私の発表では、フレームワークやライブラリを使っていないこと、W3C標準のWeb技術だけで作ったことを伝えました。 緊張はあまりなく、言いたいことは言えたかなと思います。
結果として、「Matrix Terminal Dashboard」が1st Place Winnerとして掲載されました…！ 公式ページのSubmissionsにも掲載されています。
https://www.w3.org/2025/11/TPAC/hackathon/
いただいたコメントと賞品
デザインやターミナルの動きについて褒めてもらった印象があります。 普段はフルリモートなので、人の反応を目の前で受け取る機会がほとんどありません。 だからこそ、目の前で「Wow, this is amazing! It actually works!」と言われた瞬間は新鮮で、強く心に残りました。
バックエンドエンジニアで、デザインに自信がなかったので、なおさら嬉しかったですね…
入賞者への景品として、ゲームボーイのLEGOをいただきました。 実はこれ、人生で初めて手にしたLEGOでした。
他の参加者にそのことを話したら「No way! Are you kidding?」とめちゃくちゃ驚かれました笑 まさかW3Cで初LEGOを手にするとは思わなかった…
まだ組み立てていないですが、非常に楽しみです。
ちなみに、会場入口にはLEGOミニフィグを自由に組み立てられるコーナーがありました。 いろんなパーツが用意されていて楽しかったです。W3Cロゴのシールも貼れます。かわいい。
参加して感じたこと
AIエージェントの威力は凄まじいと感じました。 ただし、人間の発想力や知識がなければ、その威力は活かしきれないとも思います。
AIがすごいからといって、すべてを任せられるわけではなくて、そこには人間の力が介在する余地があるなと。 今後も勉強して知識を身につけて、よりAIを活用できる人材になりたいなと思います。
集合写真
おわりに
短時間のハッカソンでしたが、W3Cのデータを使った可視化を形にできて、結果として優勝することができました。 もし興味があれば、デモやリポジトリを見ていただけると嬉しいです。
来年のW3Cハッカソンにも参加したいなと思っています。 アイルランド・ダブリンでの開催、今から楽しみです…！