3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

TAKT に任せて AWS サーバーレスなプランニングポーカーを作った話

3
Posted at

はじめに

JAWS DAYS 2026 に参加した際、AI コーディングエージェント向けのワークフロー管理フレームワーク「TAKT」の存在を知りました。

TAKT は YAML でワークフローを定義して、AI エージェントに計画→実装→レビュー→修正のループを回させるフレームワークです。

ワークフロー制御を AI ではなく、プログラムで実施することで決定論的ワークフローを組んでいるのが特徴で、とても思想に共感できたので、実際に使って何か作ってみることにしました。

特に題材は何でもよかったのですが、アジャイル開発でタスクの見積もりに使われるプランニングポーカーのアプリを作ってみました。

チームメンバーが一斉にカードを出して見積もる手法で、他の人の意見に引きずられずに見積もれるのが特徴です。

この記事で学べること

  • AWS サーバーレス構成(AWS Lambda + Amazon API Gateway WebSocket API + Amazon DynamoDB)によるリアルタイムアプリのアーキテクチャ
  • Amazon S3 + Amazon CloudFront を使った静的サイト配信と、CloudFront 定額料金プランの活用
  • TAKT を使った開発の進め方

前提知識・条件

  • AWS の基本的なサービス(Lambda、DynamoDB、API Gateway)の概要
  • React の基本的な知識
  • Node.js / pnpm の基本操作

公開サイトとソースコード

サイトはしばらく公開しているので、自由に利用してください!

ソースも公開します。

機能紹介

今回作ったアプリの機能を紹介します。

ルーム作成と参加

ホーム画面からユーザー名を入力してルームを作成します。

CleanShot 2026-03-17 at 04.57.41.gif

ルームが作成されるとルーム ID が発行されるので、他のメンバーはそのルーム ID を入力して参加します。

招待リンクのコピー機能もあるので、チャットに貼り付けるだけで共有できます。

CleanShot 2026-03-17 at 05.01.12.gif

投票

ルームに入ると、カード選択画面が表示されます。

使えるカードはフィボナッチ数列ベースの 1, 2, 3, 5, 8, 13, 21 と、よく分からないときの ? です。

カードを選択すると、参加者リストに「済」の表示が出ますが、実際の値は見えません。

CleanShot 2026-03-17 at 05.01.51.gif

結果の公開

全員が投票したら、ホストが「公開」ボタンを押します。

公開すると、全員の投票値が一斉に公開されます。

CleanShot 2026-03-17 at 05.02.10.gif

結果画面では以下の情報が表示されます。

  • 平均値(小数点の場合は四捨五入した値と実数を併記)
  • 各メンバーの投票値
  • 意見の一致度:
    • 全員一致の場合: 「✓ 全員一致」バッジ
    • 意見が分かれた場合: 範囲(最小〜最大)と種類数の表示 + 「⚠ 意見が分かれています」バッジ

例えば 3 人が 3, 8, 8 と投票した場合、「範囲: 3 〜 8(2 種類)」と表示されます。種類数が出ることで、どれくらいばらついているかが直感的に分かります。

CleanShot 2026-03-17 at 05.58.34@2x.png

議論が終わったら「リセット」ボタンで投票をクリアして、再度投票できます。

アーキテクチャと技術スタック

今回は以下の技術スタックで構築しました。

  • フロントエンド: React 19 + Vite + Tailwind CSS v4 + shadcn/ui
  • バックエンド: AWS Lambda(Node.js 22)+ API Gateway WebSocket API
  • データベース: Amazon DynamoDB
  • インフラ: AWS CDK v2
  • 配信: S3 + CloudFront + AWS WAF
  • パッケージ管理: pnpm(monorepo 構成)

一通り動いたあとに AWS Amplify Gen 2 と AWS AppSync でも良いかなと思ったのですが、作り直すほどでもないと思い、今回の構成としています。

全体構成

[ブラウザ] ←WebSocket→ [API Gateway] → [Lambda] → [DynamoDB]
    ↑
[CloudFront] ← [S3](静的ファイル配信)

プロジェクト構成(monorepo)

packages/
├── frontend/    # React SPA
├── backend/     # Lambda ハンドラー
└── infra/       # CDK スタック

pnpm の monorepo で管理しています。

フロントエンド・バックエンド・インフラを分離しつつ、1 つのリポジトリで管理できるので便利です。

DynamoDB と WebSocket

DynamoDB は Connections テーブル(WebSocket 接続管理)と Rooms テーブル(ルーム状態・参加者情報)の 2 つを使っています。

どちらも TTL による自動削除を設定しているので、掃除の仕組みを別途作る必要がありません。

リアルタイム同期は API Gateway WebSocket API + Lambda 3 関数(connect / disconnect / default)で実現しています。

投票や結果公開などのアクションが実行されると、Lambda が API Gateway の postToConnection API でルーム内の全参加者にブロードキャストする仕組みです。

インフラ(CDK)

インフラは AWS CDK で管理しています。

主なリソース:

  • DynamoDB テーブル × 2(オンデマンド課金)
  • Lambda 関数 × 3(connect / disconnect / default)
  • API Gateway WebSocket API
  • S3 バケット + CloudFront Distribution(定額料金プランの Free を利用)
  • AWS WAF(CloudFront に関連付け)
  • カスタムドメイン(Amazon Route 53 + AWS Certificate Manager(ACM))

CloudFront は 2025 年 11 月に登場した定額料金プラン(flat-rate pricing plans)の Free プランを利用しています。

Free プランでも WAF が含まれており、ルールを 5 つまで追加できます。

Free プランではデフォルトで以下の 3 つの AWS マネージドルールが有効になっています。

  • AWSManagedRulesCommonRuleSet(OWASP Top 10 などの一般的な脅威対策)
  • AWSManagedRulesAmazonIpReputationList(Amazon 脅威インテリジェンスに基づく IP レピュテーション)
  • AWSManagedRulesKnownBadInputsRuleSet(既知の悪意ある入力パターンのブロック)

これに加えて、地域制限とレートベースの制御を入れています。個人開発でもコストを気にせずセキュリティ対策ができるのがありがたいですね。

CleanShot 2026-03-17 at 06.03.57@2x.png

なお、定額料金プランは現時点(2026 年 3 月)では CDK 未対応で、コンソールから手動で設定する必要があります。CDK でディストリビューション自体は作成できるので、デプロイ後にコンソールからプランを割り当てる形になります。

オンデマンド課金のサービスが中心なので、使わなければほぼコストがかからないのもサーバーレスの良いところですね。

TAKT を使った開発

今回の開発では、最初のコード生成と機能追加の一部を TAKT 経由で AI エージェントに任せました。

実際の開発の流れはこんな感じです:

  1. TAKT 上でアシスタントと会話して、作るものの方針を決め、ベースのコードを生成してもらう(その間、自分は家事など別のことをしていました)
  2. ベースができたら、自分と Kiro(Claude Opus 4.6)で動作確認・デプロイして、動くところまで持っていく
  3. 動かしてみて気になった点は Kiro に Issue として起票してもらう
  4. Issue は takt add #1 でタスクリストに追加し、takt run で実行するだけ。TAKT が PR まで作ってくれる(その間、自分は別の機能追加を進めたり)
  5. PR の内容を軽くレビューして、問題なければマージ

Issue の例はこちらです。

レビュー→修正のイテレーションがあるため、作業完了までにはある程度時間がかかります。

なので、TAKT にお願いする作業は並列で進められるものを選ぶといった使い分けが大事かなと思いました。

また、たまにレビュー指摘に対応できず同じ問題を繰り返すことがあるので、Issue はある程度丁寧に書く必要があるかなと感じました。

まとめ

JAWS DAYS 2026 で知った TAKT を使って、AWS サーバーレス構成のプランニングポーカーアプリを作ってみました。

TAKT はやや作業完了まで時間がかかる反面、自分が別の作業をしている裏で回しておけるので、今までできていなかった並列した開発を行え、生産性がぐんと上がった感覚があります。

まだまだ使いこなせていないので、これからも積極的に利用し、どこまで並列で開発ができるかを試していきたいと思います。

また、プランニングポーカーのサイトはしばらく公開しておくので、自由にご利用ください。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?