AWSワードウルフやってみた！！

# はじめに

皆さんはワードウルフってご存じですか？（弊社メンバーはほとんど知らなかったです）
AWSの単語でワードウルフをやったら楽しく勉強できそうだなと、ふと思いつきまして、Cline + Bedrock with Claude 4を利用して簡単なアプリを作ってみたのでご紹介します！

今回、Clineを初めて使ってみたので、感想についても共有させてください！

## ワードウルフとは

知らない方向けにChatGPTにワードウルフについて説明してもらいました

:::note
以下、生成AIによる記述です
:::

🐺 ワードウルフとは？
みんなで言葉を推理しあう正体隠匿系ゲームです。
参加者は「お題（ワード）」を与えられ、1人か数人だけ違うお題を与えられます。その人が「ウルフ」です。

🎮 ルールの流れ（図解付き）
```md
┌─────────────┐
│ 全員にお題を配布 │
└────┬────────┘
     ↓
    例：
   - 市民：🍎「りんご」
   - ウルフ：🍌「バナナ」
     （本人たちは違いに気づかない）

     ↓
┌─────────────┐
│ トークタイム開始！ │
│ →お題を言わずに連想トーク │
└────┬────────┘
     ↓
┌───────────────┐
│ 誰がウルフかを投票！     │
└────┬────────────┘
     ↓
┌───────────────┐
│ 正体発覚 → 勝敗判定！     │
│ ・市民：ウルフを当てたら勝ち │
│ ・ウルフ：バレなければ勝ち   │
└────────────────┘
```

✅ ポイント
・話しすぎるとウルフがバレる
・話さなすぎると怪しまれる
・微妙に違うお題の違和感を探るのが面白い！

🧠 例題

| 役割 | お題 |
| :--------- | :------- |
| 市民 | スマホ |
| ウルフ | ガラケー |

:::note
生成AIによる記述終了
:::

# AWS単語でワードウルフってどういうこと？

ルールは理解できたでしょうか？
さて、ではこれをAWS単語に当てはめたデモンストレーションをしてみます。

## デモンストレーション

:::note
以下、生成AIによる記述です
:::

👥 プレイスタート！
🧑‍💼 Aさん：
「うーん、やっぱりインスタンスサイズって悩むよね。小さくするとパフォーマンス足りなくなるし…」

🧑‍💻 Bさん：
「私は、スケーリングが勝手にやってくれるのがすごいなって思う。負荷が増えても自動で処理してくれるのは楽。」

🧑‍🔧 Cさん：
「使い捨て感覚で使えるのが気に入ってる！一瞬だけ実行したい処理とか、これで十分なんだよね。」

🧑‍💼 Aさん：
「え？ 一瞬だけ？ 長時間動かし続ける用途が多くない？」

🧑‍💻 Bさん：
「そうそう、普通はサーバーを常時起動させておくケースが多いよね。」

🧑‍🔧 Cさん：
「うーん……いや、常時じゃなくて、イベントが来たときだけ実行される感じじゃない？」

🧑‍💼 Aさん：
「それ、サーバーじゃない気がする（笑）」

🧑‍💻 Bさん：
「やっぱCさん怪しくない？」

🗳️ 投票タイム！
参加者は話し合いの後、誰がウルフかを投票します。

✅ 正解発表
ウルフは……Cさん！

Cさんのお題：AWS Lambda

Aさん & Bさんのお題：Amazon EC2

:::note
生成AIによる記述終了
:::

## お題の例

今回は例として、EC2とLambdaにしてみましたが、難易度ごとに調整するといいと思います！
また、サービス名以外のものを取り入れても面白いと思います！例えば、、

* IAMユーザー vs IAMロール
* 信頼性 vs セキュリティ
* リージョン vs AZ
* SAPro試験 vs DOP試験
* ホワイトペーパー vs デベロッパーガイド

などなど

お題を出す人さえ用意すれば、紙でお題を出して遊ぶことができるので是非遊んでみてください！

# AWSワードウルフアプリ開発

今回はせっかくなので、生成AIにお題を生成してもらって遊びたいなと思い、AWSワードウルフアプリを作成してみました。
今までもプログラミングを生成AIに手伝ってもらうことは多々あったのですが、基本的にはあまり丸投げせずに、わからないところを聞いたり、単純作業で面倒なところを書いてもらったりする程度にしていたので、今回は遊びですし、丸投げしたらどうなるのか検証的な意味もあります（笑）。

## AWSワードウルフアプリ

アプリの動きを大まかに説明します。

1.認証機能

メールアドレスとパスワードを使ってログイン機能と新規登録機能を作成しました。
ちなみに、Amazon Cognitoを使用してます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/febda28e-6435-4f36-8020-46a813737174.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/078741c2-8508-4055-8470-39f06410c29f.png)

2.ルーム一覧

ログインするとルーム一覧画面に遷移します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/46f3faec-f0c7-4a9c-baef-be24ad141b5b.png)

3.ルーム作成

ルーム名やお題のジャンルを選択して、ルームを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/fd06adaa-02a7-4bd3-adc7-3c6dad88c4d2.png)


4.ロビー

ロビーでは参加者一覧が表示されます。
ルーム一覧画面から参加者がルームに参加すると参加者一覧が更新され、ゲームが開始できるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/6e04d730-14bd-464d-9cff-f0464d741831.png)

5.ゲーム画面

ゲーム開始するとお題が自分の画面に表示されます。
今回はCloudFrontとGlobal Acceleratorでした。
この画面でディスカッションを行い、怪しいと思った人に投票します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/03b7afc4-454e-487a-b1d6-fc22748c866b.png)

6.投票システム

全員の投票が終わると誰が最も投票されたかがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/9d5a4fb7-40fe-4ef6-bcaa-94349163947c.png)

## 開発にあたって

今回は冒頭に申し上げた通り、Cline + Bedrock with Claude 4をメインで使って開発をしました。
極力、指示だけで作成を行ったので、私には一切知見のないReactでの開発になりました。

開発期間：1週間、1日1時間程度
費用：約$20くらい

### プロンプト例

最初の指示はまさしく生成AIでの開発といった感じで

「AWSの用語でワードウルフができるアプリを作成して」

でした！

基本的にはこんな感じで、自然言語ベースで開発を行っていましたが、ところどころ専門的な用語を使って指示を出しました。
例えば、
「AWS SAMを使ってAWS上に構築して」
「認証にはCognitoを使って」
などです。

また、AWS SAMを使って構築する際に便利だと思ったのが、以下のような指示です。

「リソース課金は月$10以内に収めて」

この指示により、最初に作成されていたテンプレートに含まれていたCloudFrontがなくなり、S3のウェブサイトホスティングを使用するようになりました。

### Amazon Qとの併用

コメントアウトの追加や、単一のファイル内で完結する処理については、Amazon Qでも十分な精度で対応できたので、Amazon Qをうまく併用することで、開発時のコストを抑えられるのではないかと思います。

### 開発時に困ったこと

#### 先祖返り

Clineを使っていて最も困ったことは、「**先祖返り**」です。
さっき直ったはずのものが、またエラー吐いている！っていう場面にめちゃくちゃ遭いました。
しかもさっき直したはずのものをもう一度直すのに、左上に出てくる課金額に、かなりのストレスが溜まります。

#### 詰み

どうしても苦手な部分があるようで、特に認証周り、ルームの同期周りがプロンプトをいろいろ工夫したのですが、全く実現できず結局自分でコードをいじくり倒して実現しました。
プロンプトの工夫の仕方を変えればうまくいくのだろうか？

# さいごに

今回は思い付きでAWSワードウルフアプリを作成してみました！
実際に弊社メンバーでやってみましたが、結構盛り上がりそうですし、その人がこのサービスについて詳しいとか、自分はこの分野が苦手とか、新たな発見にもつながりそうです！

基本的に生成AIに作成してもらった関係で、ソースの公開は控えますが、紙とか使って十分楽しめる遊びだと思うので是非皆さん遊んでみてください！

以上！ありがとうございました！

# 弊社では一緒に働く仲間を募集中です！
現在、様々な職種を募集しております。
カジュアル面談も可能ですので、ご連絡お待ちしております！

募集内容等詳細は、是非採用サイトをご確認ください。
https://engineer.po-holdings.co.jp/