🦀

Claude CodeでVibe Coding!!!(Tシャツは貰えないけど)

に公開
AWS
Amazon Q
Anthropic
Claude Code
Vibe Coding
tech

はじめに

この度,Claude CodeのProプランに加入しました。他のAIコーディングエージェントと比較したいと思い,6月に「Amazon Q CLI でゲームを作ろうTシャツキャンペーン」で作成したゲームをClaude Codeで再現しました。

環境構築

Windows PCのため,まずWSLの設定を行いました。

# 使用可能なディストリビューションの一覧を表示
> wsl --list --online
# ディストリビューションのインストール
> wsl --install Ubuntu-24.04
# インストール済のディストリビューションの一覧を表示
> wsl -l -v

anthropic公式から開発コンテナが提供されていたので流用しました。リポジトリの[.devcontainer]を丸ごとローカルの作業ディレクトリにコピーし,VSCodeの拡張機能「Dev Containers」を使って開発コンテナを起動します。nodejs,npmのバージョンが古いため下記のようにカスタマイズしました(他にも所々いじってます)。

FROM ubuntu:24.04

ARG TZ
ENV TZ="$TZ"

# Install basic development tools and iptables/ipset
RUN apt update -y && apt install -y less \
  git \
  procps \
  sudo \
  fzf \
  zsh \
  man-db \
  unzip \
  gnupg2 \
  gh \
  iptables \
  ipset \
  iproute2 \
  dnsutils \
  aggregate \
  jq \
  wget \
  curl \
  dnsutils \
  && apt clean \
  && rm -rf /var/lib/apt/lists/*

# Install Node.js v22.x LTS
RUN curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash - \
  && apt install -y nodejs \
  && npm install -g npm@latest

# Create node user and group if not exist
RUN groupadd node && useradd -m -g node node
# Ensure default node user has access to /usr/local/share
RUN mkdir -p /usr/local/share/npm-global && \
  chown -R node:node /usr/local/share

ARG USERNAME=node

# Persist bash history.
RUN SNIPPET="export PROMPT_COMMAND='history -a' && export HISTFILE=/commandhistory/.bash_history" \
  && mkdir /commandhistory \
  && touch /commandhistory/.bash_history \
  && chown -R $USERNAME /commandhistory

# Set `DEVCONTAINER` environment variable to help with orientation
ENV DEVCONTAINER=true

# Create workspace and config directories and set permissions
RUN mkdir -p /workspace /home/node/.claude && \
  chown -R node:node /workspace /home/node/.claude

WORKDIR /workspace

RUN wget "https://github.com/dandavison/delta/releases/download/0.18.2/git-delta_0.18.2_amd64.deb" && \
  sudo dpkg -i "git-delta_0.18.2_amd64.deb" && \
  rm "git-delta_0.18.2_amd64.deb"

# Download setting files for fzf
RUN wget -q -O /usr/share/doc/fzf/examples/key-bindings.zsh https://raw.githubusercontent.com/junegunn/fzf/master/shell/key-bindings.zsh \
  && wget -q -O /usr/share/doc/fzf/examples/completion.zsh https://raw.githubusercontent.com/junegunn/fzf/master/shell/completion.zsh

# Set up non-root user
USER node

# Install global packages
ENV NPM_CONFIG_PREFIX=/usr/local/share/npm-global
ENV PATH=$PATH:/usr/local/share/npm-global/bin

# Set the default shell to zsh rather than sh
ENV SHELL=/bin/zsh

# Default powerline10k theme
RUN sh -c "$(wget -O- https://github.com/deluan/zsh-in-docker/releases/download/v1.2.0/zsh-in-docker.sh)" -- \
  -p git \
  -p fzf \
  -a "source /usr/share/doc/fzf/examples/key-bindings.zsh" \
  -a "source /usr/share/doc/fzf/examples/completion.zsh" \
  -a "export PROMPT_COMMAND='history -a' && export HISTFILE=/commandhistory/.bash_history" \
  -x

# Install Claude
RUN npm install -g @anthropic-ai/claude-code

# Copy and set up firewall script
COPY init-firewall.sh /usr/local/bin/
USER root
RUN chmod +x /usr/local/bin/init-firewall.sh && \
  echo "node ALL=(root) NOPASSWD: /usr/local/bin/init-firewall.sh" > /etc/sudoers.d/node-firewall && \
  chmod 0440 /etc/sudoers.d/node-firewall
USER node

以上で環境構築は完了です。

プロンプト一覧

=== Prompt 1 ===
AWSサービスとパズドラを組み合わせたゲームを開発してください。必要な機能はすべて実装してください。フレームワークや言語はすべてお任せします。
<!-- Amazon Q CLIと同じプロンプトです -->

=== Prompt 2 ===
ゲームの動作を確認するため、開発サーバを起動してください。
<!-- Start Gameを押下 ->「Full game coming soon!」と表示されプレイできない -->

=== Prompt 3 ===
ゲーム画面はスクロールせずに画面にすべて収まるようにしてください。

=== Prompt 4 ===
ゲームボードの左右にある説明（AWS　Integration,Competitive Play）が邪魔です。サイドバーを実装してゲーム中は見えないようにしてください。

=== Prompt 5 ===
READE.mdを日本語で記述してください。

=== Prompt 6 ===
AWSリソースをデプロイせず、ローカルでゲームをプレイできるように修正してください。
<!-- #ゲームを開始できるようになったけどオーブを動かせない -->

=== Prompt 7 ===
次の機能を追加してください。
1. オーブを動かしてコンボできるようにする。
2.オーブを消した時、上からオーブが降ってきて次のパズルをスタートする。
3.落ちコンあり。
4.オーブは横もしくは縦に3つ以上揃えた時に消える。斜めに揃えた時は消えない。
5.プレイ開始時、落ちコンが発生しないような盤面にする。
6.ユーザがオーブを離すまで動かすことができる。

=== Prompt 8 ===
次の機能を実装してください。
1. 制限時間を15秒に修正する。
2. オーブを消した場合、ボードの上から新たにランダムにオーブが降ってくる。

=== Prompt 9 ===
次の修正を加えてください。
1. オーブが降ってくる時は、ボード全体をリフレッシュするのではなく、オーブが消えた部分を埋めるよう降らせる。
2. ユーザがオーブを離すまで、オーブを移動し続けられる。

=== Prompt 10 ===
このゲームについて2つ質問します。実装はしないでください。
1. 各AWSリソースの役割を説明してください。
2. AWSリソースをデプロイする仕組みは実装されていますか？実装されている場合は、どのファイルがそれに該当しますか？

=== Prompt 11 ===
ということは、AWSリソースはあくまでもアイコンや画面表示のみで、ゲームの機能としては不要ということですか？

=== Prompt 12 ===
質問した内容をREADE.mdに注意事項として簡潔に追記してください。

UI

完成したゲームの画面です。「Hide Sidebars」,「Show Sidebars」で画面両脇のグリッドの表示有無を切り替えます。なお,グリッドに機能はありません。

ゲームが終了するとスコアとコンボ数が表示されます。

ディレクトリ構成

所感

Proプランの場合,選択できる基盤モデルは「Claude 4 Sonnet」のみのため,Amazon Q CLIと同じモデルになります。また,MCP ServerやCLAUDE.md,settings.jsonは特段設定していないため,これらの条件も同じです。以下は絶対的な評価ではなく,感覚的なもの(感想)です。

  • 巷で「Claude Codeすごい!!!」と聞いていたが,実際使ってみると舵取りが難しい。優秀過ぎるあまり,ガンガン実装を進めていくので,リポジトリの構成理解に苦しんだり,雑多になってしまう印象をもった。
  • Claude Codeでは「落ちコン」をうまく実装できなかった。どのAIコーディングエージェントにも言えるかもしれないが,伝え方が難しい。
  • コーディング規則や用語の定義を明記し,実装する範囲やタスクの粒度を適切に管理することで最大限のパワーを引き出せるのではと感じた。詳細まで詰めた要件定義も必要。

さいごに

CLAUDE.md,settings.jsonなどの設定ファイルに加え,claude-task-masterのようなタスク管理ツールを活用して,適切にClaude Codeの舵取りを行えるよう調整していきたい。CursolやGemini CLIと連携させるのも面白そう。

ただの感想文になりましたが,Claude Codeとの個人開発第一歩を踏み出せたと自負しています。

Dockerfileがお役に立てば幸いです。

Discussion