Open32

みんなで作ろう!!Vibe Coding 100本ノック!!!

ピン留めされたアイテム
moritalousmoritalous

テンプレート

# ?本目: お題

電卓を作る など

## 環境

Amazon Q Developer CLI、Cline、Codex CLI、Claude Codeなど

## プロンプト

複数回投げたりすると思いますが、主要なものや特記事項など

例:
```
電卓を作ってください。HTMLとJavaScriptで完結するもの。
```

## 難易度

主観で評価

☆

## できたもの

画面キャプチャや、GitHubのリンクなど

## 感想

感想をどうぞ
moritalousmoritalous

1本目:電卓

環境

Amazon Q Developer CLI

プロンプト

電卓を作ってください。HTMLとJavaScriptで完結するもの。

難易度

できたもの

感想

できると思ってたけど、実際に動かすと感動!

moritalousmoritalous

2本目:オセロ

環境

Amazon Q Developer CLI

プロンプト

複数回投げたりすると思いますが、主要なものや特記事項など

例:

オセロを作って。人とコンピューターと対戦する感じで

難易度

主観で評価

できたもの

Pythonのコード
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

import random
import sys
import time

# ボードの大きさ
BOARD_SIZE = 8

# 石の状態
EMPTY = 0
BLACK = 1
WHITE = 2

# プレイヤー
HUMAN = BLACK
COMPUTER = WHITE

# 方向ベクトル(8方向)
DIRECTIONS = [
    (-1, -1), (-1, 0), (-1, 1),
    (0, -1),           (0, 1),
    (1, -1),  (1, 0),  (1, 1)
]

class OthelloGame:
    def __init__(self):
        # ボードの初期化
        self.board = [[EMPTY for _ in range(BOARD_SIZE)] for _ in range(BOARD_SIZE)]
        # 初期配置
        self.board[3][3] = WHITE
        self.board[3][4] = BLACK
        self.board[4][3] = BLACK
        self.board[4][4] = WHITE
        
        self.current_player = BLACK  # 黒から始める
        
    def print_board(self):
        """ボードを表示する"""
        print("  a b c d e f g h")
        print(" +-----------------+")
        for i in range(BOARD_SIZE):
            print(f"{i+1}|", end=" ")
            for j in range(BOARD_SIZE):
                if self.board[i][j] == EMPTY:
                    if self.is_valid_move(i, j, self.current_player):
                        print(".", end=" ")  # 合法手を表示
                    else:
                        print(" ", end=" ")
                elif self.board[i][j] == BLACK:
                    print("●", end=" ")
                else:
                    print("○", end=" ")
            print(f"|{i+1}")
        print(" +-----------------+")
        print("  a b c d e f g h")
        
        # 石の数を表示
        black_count = sum(row.count(BLACK) for row in self.board)
        white_count = sum(row.count(WHITE) for row in self.board)
        print(f"● (黒): {black_count}  ○ (白): {white_count}")
        
    def is_valid_move(self, row, col, player):
        """指定した位置に石を置けるかチェック"""
        # 既に石が置かれている場合は無効
        if self.board[row][col] != EMPTY:
            return False
            
        opponent = WHITE if player == BLACK else BLACK
        
        # 8方向をチェック
        for dr, dc in DIRECTIONS:
            r, c = row + dr, col + dc
            if not (0 <= r < BOARD_SIZE and 0 <= c < BOARD_SIZE) or self.board[r][c] != opponent:
                continue
                
            # その方向に相手の石が続いているかチェック
            r += dr
            c += dc
            while 0 <= r < BOARD_SIZE and 0 <= c < BOARD_SIZE and self.board[r][c] == opponent:
                r += dr
                c += dc
                
            # 自分の石で挟めるかチェック
            if 0 <= r < BOARD_SIZE and 0 <= c < BOARD_SIZE and self.board[r][c] == player:
                return True
                
        return False
        
    def get_valid_moves(self, player):
        """プレイヤーが置ける場所のリストを返す"""
        valid_moves = []
        for i in range(BOARD_SIZE):
            for j in range(BOARD_SIZE):
                if self.is_valid_move(i, j, player):
                    valid_moves.append((i, j))
        return valid_moves
        
    def make_move(self, row, col, player):
        """石を置き、挟まれた石をひっくり返す"""
        if not self.is_valid_move(row, col, player):
            return False
            
        self.board[row][col] = player
        opponent = WHITE if player == BLACK else BLACK
        
        # 8方向をチェックして石をひっくり返す
        for dr, dc in DIRECTIONS:
            r, c = row + dr, col + dc
            to_flip = []
            
            # その方向に相手の石が続いているかチェック
            while 0 <= r < BOARD_SIZE and 0 <= c < BOARD_SIZE and self.board[r][c] == opponent:
                to_flip.append((r, c))
                r += dr
                c += dc
                
            # 自分の石で挟めるかチェック
            if 0 <= r < BOARD_SIZE and 0 <= c < BOARD_SIZE and self.board[r][c] == player:
                # 挟まれた石をひっくり返す
                for flip_r, flip_c in to_flip:
                    self.board[flip_r][flip_c] = player
                    
        return True
        
    def switch_player(self):
        """プレイヤーを交代する"""
        self.current_player = WHITE if self.current_player == BLACK else BLACK
        
    def is_game_over(self):
        """ゲームが終了したかチェック"""
        # 両プレイヤーが置ける場所がなければゲーム終了
        return not self.get_valid_moves(BLACK) and not self.get_valid_moves(WHITE)
        
    def get_winner(self):
        """勝者を返す"""
        black_count = sum(row.count(BLACK) for row in self.board)
        white_count = sum(row.count(WHITE) for row in self.board)
        
        if black_count > white_count:
            return BLACK
        elif white_count > black_count:
            return WHITE
        else:
            return EMPTY  # 引き分け
            
    def computer_move(self):
        """コンピューターの手を決定する"""
        valid_moves = self.get_valid_moves(COMPUTER)
        if not valid_moves:
            return None
            
        # 評価関数を使って最適な手を選ぶ
        best_score = float('-inf')
        best_move = None
        
        for move in valid_moves:
            # ボードのコピーを作成
            temp_game = OthelloGame()
            temp_game.board = [row[:] for row in self.board]
            temp_game.current_player = self.current_player
            
            # 仮に手を打ってみる
            row, col = move
            temp_game.make_move(row, col, COMPUTER)
            
            # 評価関数で手を評価
            score = self.evaluate_move(temp_game, move)
            
            if score > best_score:
                best_score = score
                best_move = move
                
        return best_move
        
    def evaluate_move(self, game, move):
        """手の評価関数"""
        row, col = move
        
        # 角は非常に価値が高い
        if (row, col) in [(0, 0), (0, 7), (7, 0), (7, 7)]:
            return 100
            
        # 角の隣は避けたい(角を取られる可能性が高まる)
        if (row, col) in [(0, 1), (1, 0), (1, 1), (0, 6), (1, 6), (1, 7),
                          (6, 0), (6, 1), (7, 1), (6, 6), (6, 7), (7, 6)]:
            return -20
            
        # 端は比較的安定している
        if row == 0 or row == 7 or col == 0 or col == 7:
            return 5
            
        # それ以外は、ひっくり返せる石の数を評価
        flipped_count = 0
        opponent = BLACK if COMPUTER == WHITE else WHITE
        
        for dr, dc in DIRECTIONS:
            r, c = row + dr, col + dc
            count = 0
            
            while 0 <= r < BOARD_SIZE and 0 <= c < BOARD_SIZE and game.board[r][c] == opponent:
                count += 1
                r += dr
                c += dc
                
            if 0 <= r < BOARD_SIZE and 0 <= c < BOARD_SIZE and game.board[r][c] == COMPUTER:
                flipped_count += count
                
        return flipped_count

def parse_move(move_str):
    """ユーザー入力を(row, col)に変換する"""
    if len(move_str) != 2:
        return None
        
    col = ord(move_str[0].lower()) - ord('a')
    try:
        row = int(move_str[1]) - 1
    except ValueError:
        return None
        
    if not (0 <= row < BOARD_SIZE and 0 <= col < BOARD_SIZE):
        return None
        
    return row, col

def main():
    game = OthelloGame()
    
    print("オセロゲームを開始します!")
    print("あなたは黒(●)、コンピューターは白(○)です。")
    print("手を指定するには、例えば「e6」のように列(a-h)と行(1-8)を入力してください。")
    print("終了するには「quit」と入力してください。")
    
    while not game.is_game_over():
        game.print_board()
        
        valid_moves = game.get_valid_moves(game.current_player)
        if not valid_moves:
            print(f"{'あなた' if game.current_player == HUMAN else 'コンピューター'}は打つ場所がありません。パスします。")
            game.switch_player()
            continue
            
        if game.current_player == HUMAN:
            print("あなたの番です。")
            while True:
                move_str = input("手を入力してください (例: e6): ")
                if move_str.lower() == 'quit':
                    print("ゲームを終了します。")
                    sys.exit()
                    
                move = parse_move(move_str)
                if move is None:
                    print("無効な入力です。例えば「e6」のように入力してください。")
                    continue
                    
                row, col = move
                if not game.is_valid_move(row, col, HUMAN):
                    print("そこには置けません。")
                    continue
                    
                game.make_move(row, col, HUMAN)
                break
        else:
            print("コンピューターの番です...")
            time.sleep(1)  # 考えているふりをする
            
            move = game.computer_move()
            if move:
                row, col = move
                col_letter = chr(col + ord('a'))
                row_number = row + 1
                print(f"コンピューターは {col_letter}{row_number} に置きました。")
                game.make_move(row, col, COMPUTER)
                
        game.switch_player()
        print()  # 空行を入れる
        
    # ゲーム終了
    game.print_board()
    winner = game.get_winner()
    
    if winner == HUMAN:
        print("あなたの勝ちです!おめでとうございます!")
    elif winner == COMPUTER:
        print("コンピューターの勝ちです!")
    else:
        print("引き分けです!")

if __name__ == "__main__":
    main()

感想

言語を指定しなかったのでPythonで作成された!ほんとに対戦ができてびっくり!

moritalousmoritalous

3本目:画像変換サイト

環境

Amazon Q Developer CLI

プロンプト

next jsを使った画像変換サイトを作りたいです。アップロードした画像をグレースケールに変換して表示するイメージです。画面の左に元画像、画面の右にグレースケール画像を表示してほしいです。グレースケール画像をPNGでダウンロードするボタンもほしいです

難易度

できたもの

.
├── components
├── pages
│   ├── _app.js
│   └── index.js
├── public
├── styles
│   ├── globals.css
│   └── Home.module.css
├── package.json
├── package-lock.json
└── README.md

READMEも作成してくれた

# 画像グレースケール変換アプリ

Next.jsを使用して作成された、画像をグレースケールに変換するウェブアプリケーションです。

## 機能

- 画像のアップロード
- リアルタイムでのグレースケール変換
- 元画像とグレースケール画像の並列表示
- グレースケール画像のPNGダウンロード

## 使い方

1. 「ファイルを選択」ボタンをクリックして画像をアップロードします
2. 画面左側に元の画像、右側にグレースケール変換された画像が表示されます
3. 「PNGでダウンロード」ボタンをクリックしてグレースケール画像を保存できます

## 開発環境のセットアップ

```bash
# 依存関係のインストール
npm install

# 開発サーバーの起動
npm run dev
```

ブラウザで [http://localhost:3000](http://localhost:3000) を開いてアプリケーションを確認できます。

## ビルドと本番環境での実行

```bash
# プロジェクトのビルド
npm run build

# 本番サーバーの起動
npm start
```

感想

ちゃんとダウンロードした画像もグレースケールになってました!

moritalousmoritalous

4本目:TODOアプリ

環境

Cline

プロンプト

TODOアプリを作りたいです。Reactでシングルページってやつ。

作成されたものが、F5でリロードすると入力したものが消えちゃったので、追加で指示

ブラウザをリロードすると入力したtodoが消えちゃうんだけどなにかいい方法ありますか?

難易度

できたもの

感想

create-react-appでプロジェクトが作成されましたが見なかったことに。
追加の指示で、ローカルストレージを使う形になりました!

moritalousmoritalous

5本目:お絵かきアプリ

環境

Amazon Q Developer CLI

プロンプト

お絵かきアプリを作りたい。

- ブラシや塗りつぶしができる
- 矩形や円などの図形をかける
- 消しゴム
- ペンや消しゴムは太さを変えられる
- 書いた絵を、PNGなどで保存できる

難易度


少し多めに指示したつもり

できたもの

感想

ちょっと動きが怪しいところもありますが、自分で実装するのは難しそう!

moritalousmoritalous

6本目:対戦格闘ゲーム

環境

Amazon Q Developer CLI

プロンプト

対戦格闘ゲームを作って。ストリートファイター2みたいなの。難しかったらイー・アル・カンフーでもいいよ。

難易度

できたもの

ここで遊べるよ!
https://moritalous.github.io/vibe-coding-100/6/

感想

対戦できます。おもろいです。

moritalousmoritalous

7本目:2D格闘ゲーム(機能強化版)

環境

プロンプト

作成したゲームに改良を加えてください。
- ガードができるようにしたいです
- ビームが打てるようにしたいです
- 制限時間(30秒)があるようにしたいです

難易度

できたもの

ここで遊べます
https://moritalous.github.io/vibe-coding-100/7/

感想

面白い! ただ、ガードしながら攻撃ができる(笑)

moritalousmoritalous

8本目:2D格闘ゲーム(機能強化版2)

リクエストを受けて更新しました!

環境

Amazon Q Developer CLI

プロンプト

1回目

作成したゲームに改良を加えてください。
- パンチとキックに差をつけてください(見た目と機能)
- パンチは連打ができるがリーチが短く、攻撃力が低い
- キックは攻撃力が高いが出したあとの隙が大きい

あと、キャラクターの見た目を可愛くしてくれると尚良し

2回目

ブラウザの横スクロールバーが出ています。 幅がおかしいようなので修正してください。

難易度

できたもの

ここで遊べます
https://moritalous.github.io/vibe-coding-100/8/

感想

Kawaii Fighters になりました(笑)

hayao_khayao_k

9本目:15パズル

参加します!

環境

Amazon Q Developer VS Code Extension

プロンプト

1回目

15パズルを作ってください。HTMLとJavaScriptで動作するものをお願いします。
任意の画像で遊べるものがいいです。

難易度

できたもの

ここから遊べます
https://hayao-k.github.io/vibe-coding-100/15puzzle/

感想

追加指示したもの

  • 方向キーでの操作
  • クリア判定
  • 数字表示のオンオフ

それ以外は一発でできました!

こばやし@朝5時起き習慣こばやし@朝5時起き習慣

10本目:小学生向けのタイピング練習

ジョインさせてください!息子(小学3年生)の宿題のタイピング練習のお供に!

環境

Amazon Q Developer CLI

プロンプト

1回目

小学生低学年向けの、タイピング練習アプリを作ってください。ゲーム性があるといいです。英字入力でブラインドタッチができるようになってほしいです。

2回目(単純なアルファベットだけの問題だとつまらなかったw)

下記をいい感じに改良してください。
- 画面をリロードすることなく、モードを変更してゲームをリトライできるようにする。
- 問題は日本語で意味のある単語(例:りんご)や文章(例:おはようございます)にする。

難易度

できたもの

https://x.com/kobank_t/status/1919232137024491849

感想

息子も大喜び!ブラインドタッチャー目指して頑張れ 💪

moritalousmoritalous

ありがとうございます!

やってるとたしかに「目標を与える」が効きますよね!
意図というか目指すものの共有って大事ですよね〜!(これはほんとに人間相手でも一緒だよなとつくづく思います)

びーぐるびーぐる

11本目: ヒットアンドブロー

Vibe Coding 好きなので参加させてください!
ロジカルなもので、バグってたら簡単にわかるものを選んでみました

環境

Roo Code(Gemini 2.5 Pro)

プロンプト

自分のやり方では、最初にある程度指示します

1回目

ブラウザで遊べる「ヒットアンドブロー」を作成してください。
- CPUが出題者、プレイヤーが回答者となります
- 出題者は4桁の数字(0~9)を選びます。0から始まっても構いません。
- 回答者はそれを当てます。残りのルールはヒットアンドブローに準じます
- ゲームなので遊ぶ楽しさを演出にて追加してください

2回目
バグが出ていたので修正ついでに、文言も少し変えさせます
バグは見た瞬間に手動で直せそうでしたが、Vibe CodingのためあえてLLMに修正させます

- 入力ミスが起こった(例えば0000を入力した)際にも挑戦回数がカウントアップされます。修正をお願いします。
- 0H0Bに関して、むしろヒットアンドブローでは大きなヒントだと思いますので「逆にラッキー?」的な文言に変えてください

難易度

できたもの

https://beagleworks.github.io/VibeCoding/hit-and-blow/

感想

2回の指示でこのレベルのものができあがるとは、Gemini 2.5 Proの能力の高さに驚かされます。
いやー楽しいですね。これは色々世界が変わりますね。
懐具合には注意ですが…

moritalousmoritalous

ご参加ありがとうございます!早速やってみましたが全然違和感ないと言うか、ちゃんとしたゲームになってますね!!(ゲームオーバーになりましたw)

とすりとすり

12本目:JSONを綺麗にするツール

CloudWatch Logsに整形されてないログが出てきてツラいことがあるので、綺麗にフォーマットできるツールを作ってもらいました。

環境

Cline (Claude 3.5 Sonnet)

プロンプト

全然Vibeじゃないですが、デザインに一貫性を持たせる試み + 色んなファイルを見てコストが増えるのを抑えたく、割とガチガチに指示を書きました...

プロンプト全文
これからあなたには、入力されたJSON文字列を綺麗にフォーマットして返すWebアプリケーションを作ってもらいます。

<requirements>
- 左側に整形されていないJSONを入力する画面、右側に整形されたJSONが出力される画面の2つが表示されている
- 整形されたJSONはコピーボタンなどでクリップボードにコピーがすることができる
- 整形前にインデント幅などを選択することができる(他にも便利だと思う機能があれば追加してください)
- 入力されたJSONに構文エラーがあった場合は、ソナーで通知することができる
</requirements>

使用する技術スタックとして、Next.js + shadcn/uiを使用します。
shadcn/uiで使用できるUIコンポーネントは以下の通りです(src/components/ui/以下のフォルダに実装があるので参考にしてください)。
使用したいコンポーネントが存在しない場合は、開発者にインストールを依頼する、あるいは自身でsrc/components/ui/フォルダにコンポーネントを追加してください。

<components>
- Button
- Card
- Checkbox
- Input
- Label
- Select
- Sonner
- Switch
- Textarea
</components>

実装するに当たって以下の点に注意してください。

<warnings>
- アプリケーションはなるべくshadcn/uiのコンポーネントを使用して構成してください
- 画面はpage.tsxに、ロジックはhooksに切り出すなど、見通しのよい設計を心がけてください
- 実装を進める上で確認すべき点があれば、開発者にフィードバックを求めてください
- スタイリングはなるべくsrc/styles/global.cssに記載されているカラースキーマを利用してください(bg-primaryのように使用することができます)。定義されていないカラーが必要な場合は、Tailwind CSSのユーティリティクラスを利用してください
- アイコンはlucide-reactから適切なものをインポートして利用してください
</warnings>

難易度

できたもの

感想

DeepSeek V3だと上手くコード書けなかったので、Claudeは偉大だと分かりました☺️

たけのこたけのこ

13本目: ミュージックプレイヤーアプリ

ミュージックプレイヤーWebアプリを作りました。
音楽、ジャケット画像全て生成AIに作成してもらいました。
(本当は、FPSゲームとか、音ゲーにもチャレンジしましたが、AIと喧嘩別れして頓挫しました)

環境

GitHub Copilot / Claude 3.7 Sonnet

プロンプト

プロンプトはこちら
# あなたの役割
- あなたは、必ず顧客を満足させる一流の音楽クリエイター兼システムエンジニアです

# 依頼事項
- 要件を満たすミュージックプレイヤーアプリを作成してください
- 使用するオリジナル音楽も作ってください

# アプリの要件
## 技術要素
- HTML
- CSS
- JavaScript

## 要件
### 曲の要件
- 選択できる音楽は5種類です。
- 各曲は、以下をテーマにして、あなたが作曲します。曲名もあなたが考えてください。
    - 1曲目:Amazon Bedrock
    - 2曲目:AWS Amplify
    - 3曲目:AWS Lambda
    - 4曲目:全世界の社畜たちを応援
    - 5曲目:あなたが感じた人間という生き物について

### アプリの要件
- ユーザーは、ブラウザ上から曲を選択し、任意の曲を再生できること
- ユーザーは、再生中の曲を中断、再開できること
- ユーザーは、再生中の曲を止めて、曲選択に戻ることができること
- ユーザーは、曲のテーマ、ジャケット画像、曲名から選曲することができること
- 対象ユーザーは、日本人とすること

## アプリ内部の詳細
- 曲は、JavaScriptでwavファイルを生成し、Web Audio APIを使用して音声を生成するイメージ
- ジャケット画像は、svgファイルで事前に作成しておく

難易度

できたもの

https://kmiya84377.github.io/

感想

音楽プレイヤー自体は比較的容易にできました。
しかし、FPSや音ゲーなどの仕様や動作に複雑さがある実装は、まだまだ出来なさそうでした...
(一気に100%のコードを書かせるというより、ミニマムなコードから拡張させていく方が上手くいくような)

moritalousmoritalous

ありがとうございます!

音楽も作れるんですか!?凄すぎです

(ちなみに私も太鼓の達人みたいなの作ってとお願いしたらすごく単調なリズムで、すぐ諦めましたw)

たけのこたけのこ

14本目: 恋愛サーキュレーションゲーム

AWSサービスをテーマにした恋愛サーキュレーションを作成してもらったところ、NHKの教育番組みたいなゲームが出来上がりました。

環境

GitHub Copilot / Claude 3.7 Sonnet

プロンプト

プロンプトはこちら

1回目

# 依頼事項
- 恋愛シミュレーションゲームを作ってください

# 要件
## テーマ
- AWSに関連する恋愛シミュレーションゲーム

## ゲームの内容
- 言語
    - 日本語
- ゲームの進め方
    - 恋愛サーキュレーションなので、登場キャラクターと対話して、テキストを読み進める感じ (良くある恋愛サーキュレーションです)
    - ゲームスタートからエンディングまで進んだらクリアです
    - たまに選択肢でシナリオやエンディングが分岐してください
        - 最低10個くらいのエンディングが欲しいです
    - プレイ時間は、スタートからエンディングまで5分くらいの内容でお願いします
- シナリオ
    - 敏腕シナリオライターである、あなたが作成してください
    - 全て日本語で作成してください
    - シナリオとして、起承転結となるよう考えてください
- 登場キャラクター
    - 敏腕シナリオライターである、あなたが作成してください
    - 画像ファイルが必要であれば、svgで事前に作成してください
    - キャラクターによって、個性を持たせてください
        - 好み
        - 喋り方
        - 見た目
    - テーマに沿って、AWSサービス毎にキャラクターを設定してください
        - 最低限、Amazon Bedrockのキャラクターは登場させてください
- BGM
    - 敏腕音楽プロデューサーである、あなたが作成してください
    - BGMは、JavaScriptでwavファイルを生成し、Web Audio APIを使用して音声を生成するイメージです
- 背景
    - 敏腕デザイナーである、あなたが作成してください
    - 画像ファイルが必要であれば、svgで事前に作成してください

2回目

- キャラクターを可愛くして
- キャラクターを増やして
- ストーリーが単調なので、キャラクター毎に個性が出るストーリー分岐にして
- エンディングも単調なので同じく、キャラクターの個性が出るようにして

難易度

できたもの

https://staging.d3w3bwh2ogd7yc.amplifyapp.com/

↓画像のキャラクターは、桜花 ベドロック (Bedrock)ちゃんです。

感想

流石に背景やキャラクターを作る能力は低い...

登場人物紹介
・保坂 ストレージ (S3)
・雲野 コンピューティング (EC2)
・関数 ラムダ (Lambda) ←こいつだけ捻りがない
・速水 ダイナモ (DynamoDB)
・早雲 フロント (CloudFront)
・音無 ポリー (Polly)
・賢者 セージ (SageMaker)

moritalousmoritalous

すごいwwww

これでAWSのことが学べる学習コンテンツできますね!

背景もキャラも名前も、おもろいっす!

モブエンジニアモブエンジニア

15本目: チーム分けアプリ

イベント時のチーム分けがめんどくさいので、
参加者とチーム数を入力すれば勝手にチーム分けしてくれるアプリを作成。

環境

Claude 3.7 Sonnet

プロンプト

参加者情報とチーム数を振り分けるといい感じでチーム分けしてくれるアプリを作ってもらいたい。
【要件】
・小~中規模イベントで利用できるようにする(Max200名)
・GitHub.ioで公開するためブラウザで公開できるようにしたい
・ランダムに振り分けるようにしてもらいたい

難易度

できたもの

https://masakiokuda-eng.github.io/team-assignment-app/

感想

実務で使いそうなアプリなのであれですが、次はアマQ使ってネタコンテンツをアウトプットしたいと思います。(今思えば、ハリポタネタ入れられそうだと気づいた🐈)

moritalousmoritalous

実用的ですね!!

コピー機能もおせっかいで追加してくれてます

たけのこたけのこ

16本目: 恋愛シミュレーションゲームのPV

14本目で作成した恋愛シミュレーションゲームのPVを作成してもらいました。
(ゲーム自体も一部修正しています。マルチエンディングをちょっと豪華にしました)

環境

GitHub Copilot / Claude 3.7 Sonnet

プロンプト

プロンプトはこちら

1回目

ゲームのPV動画って作れますか?

2回目

- PV用のBGMも欲しいです。ドキドキするようなBGMをお願いします。
- PVのオリジナル要素となる動画部分も追加してもらえますか

難易度

できたもの

https://staging.d347uuvp44qka5.amplifyapp.com/pv/pv.html

感想

それっぽいPVが出来ました。

ただ1シーンを直せば、音楽が出なくなるなど、なかなか苦戦しました。
(1連の流れの整合性を保ってくれない...JavaScriptの括弧が足りないなどの構文エラー多発...などなど)

モブエンジニアモブエンジニア

17本目:参加者チェックツール

イベント運営時の参加者確認をExcelで行うのがめんどいと感じた経験から、
簡単なアプリを開発してみました。

環境

Amazon Q Developer
※CLIでないほうです

プロンプト

参加者チェックツールを実装したいと考えています。
要件として以下を考えています。

GitHub.ioを起動して実行できる

対象者の氏名を入れればチェックフォームを作成してくれる

難易度

できたもの

https://masakiokuda-eng.github.io/event_check_tool/

感想

Amazon Q Developerで作成したため、コードをコピペする作業が不要なので開発者体験が良いといった印象を持ちました。もう少し生やしていきます(ネタ関連も。。)

moritalousmoritalous

ありがとうございます。こういうツール系はもう、「生成AIで作るもの」感が出てきますね。

Excelマクロでやってたようなことは、生成AIに作らせよう!

たけのこたけのこ

18本目: 音ゲー

AIで音ゲー作りました。安定の作曲もAIです。
(もっとビートを感じたかったですが無理でした)

環境

GitHub Copilot / Claude 3.7 Sonnet

プロンプト

プロンプトはこちら

1回目

# あなたの役割
- あなたは、一流のゲームクリエイターです
- あなたは、ゲームクリエイターと兼業で音楽制作も行いまず
- あなたは、必ず顧客を満足させるゲームと音楽を作ります

# 依頼事項
- Webブラウザで動作するゲームを作成してください
- ゲームで使用するオリジナル音楽を作ってください

## 使用する技術要素
- HTML
- CSS
- JavaScript

# ゲームに求める要件
## ジャンル
- 音ゲー

## ゲーム内容
- 選択できる音楽は10種類
    - ジャンルは、全て異なるものにします
- ゲームモード
    - 画面の上部から下部に向かって、ノーツが流れてくる形式の一般的な音楽ゲームの構成であること
    - プレイ中のスコア、ゲームの進捗状況(ゲームオーバーになりそうか)、の情報が画面に表示されること
    - 1曲ずつ選択して、最後にスコアを表示する
    - 一定の失敗によりゲームオーバーになる
        - ゲームオーバーの場合も最後にスコアを表示する
- 選曲時、下記の難易度から選択できる
    - 優しい:犬でもクリアできるレベル
    - 普通:人であればクリアできるが、音ゲー苦手な人は何度かしっぱいするかもしれないレベル
    - 鬼畜:鬼の所業。生まれたことを後悔するレベル
- ゲームで表示する文言は全て日本語とする

# 音楽に求める要件
- 想定する1曲当たりのプレイ時間は、60秒であること
- 1曲あたり、イントロ、サビなど、一般的な音楽の構成とすること
- 各曲は、ポップス、ロック、ジャズなど、ジャンルが異なること
- 各曲は、ギター、ドラムなど、音を重ねることで、曲を実現すること
- 曲は、音楽制作を得意とする、あなたが作成すること
- 曲は、ダウンロードではなく、JavaScriptで完結すること

2回目

- プレイ中のエフェクトを見直して、成功と失敗が伝わるようにしてください
- ポップスターダストは、一般的なポップの曲調にしてください
- ゲームオーバー後、リザルト画面に遷移しても、ずっと曲が流れているので、ゲームオーバー時は曲を止めてください

難易度

☆☆(星1個半くらい)

できたもの

https://staging.d37z0ffzhspcyv.amplifyapp.com/

感想

小学校のリコーダーの授業を思い出しました。

たけのこたけのこ

19本目: 漫画ビュアー (一応読めるよ)

AIに漫画と漫画を表示するビューアを作ってもらいました。
私よりは漫画を書くのは上手いです。

環境

GitHub Copilot / Claude 3.7 Sonnet

プロンプト

プロンプトはこちら

1回目 (30ページを要求しましたが、手抜きされて10ページになりました)

# あなたの役割
- あなたは、有名な日本の漫画家、兼プログラマーです

# あなたへの依頼事項
- Kindleのような好きな漫画を選んで読むことが出来るアプリを作ってください
- アプリに表示する漫画を作ってください

# アプリの要件
## 使用技術
- HTML
- JavaScript
- CSS

## 機能要件
- アプリでは、漫画の表紙が一覧表示され、ユーザーは読みたい漫画を選べること
- 漫画は、あなたが作成し、アプリに組み込まれていること
- 漫画は、次のページと前のページを見れること

## 漫画の要件
- 以下に私の好きなコンテンツを記載するので、あなたが漫画を作ってください。
    - 尾田先生のワンピー〇って漫画が好きです。特にアラバスタとかいいですよね。
    - AWSが好きです。特にBedrockやAmplifyに興味があります。
- 起承転結のストーリー性を持たせてください
- 最低3冊の漫画を作ってください。
- 漫画は最低30ページで構成し、漫画なのでコマ割を考えて作ってください
- セリフも表示してください。つまり、一般的な漫画と同等のページを作成してください
- スクリプトは禁止です。1ページずつ作成してください
- svg形式でページを作ってください

難易度

できたもの

https://staging.d13dmsfkav8o9m.amplifyapp.com/

感想

ジャンプで連載を狙ってます

モブエンジニアモブエンジニア

20本目: シンプルタイマー

社内研修でタイマーが欲しいと思ったのでVibe Codingでサクッと作成しました。

環境

Claude 3.7 Sonnet

プロンプト

動作しないといったエラーも発生していたので、何度かプロンプトを投げています。

以下要件を満たすWebアプリを作ってください

言語はHTML
GitHub.ioで起動できるようにしたい
タイマーアプリ、時間を指定することでタイマー起動
時間になったらいい感じの終了画面を表示する

難易度

できたもの

終了後のポップアップ画面

https://masakiokuda-eng.github.io/simple_timer/

感想

実用ツール第3弾です!!
もう少しアプリを生やしていきたいと思います🐈

感想をどうぞ

Yuki TsumitaYuki Tsumita

21本目: じゃんけんゲーム

昔あったメダルゲームを意識したじゃんけんゲームです

環境

Amazon Q Developer CLI(claude 4 sonnet)

プロンプト

複数回投げたりすると思いますが、主要なものや特記事項など

例:

[ジャンケンマン](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%83%A3%E3%83%B3%E3%82%B1%E3%83%B3%E3%83%9E%E3%83%B3_(%E3%82%A2%E3%83%BC%E3%82%B1%E3%83%BC%E3%83%89%E3%82%B2%E3%83%BC%E3%83%A0))を参考にシンプルなWebベースのじゃんけんゲームを作成して。githubpagesにホストしたい。

難易度

主観で評価

できたもの

https://tsumita2929.github.io/janken-man/

感想

Claude 4 Sonnetさん賢い。。。