自己紹介

せやかて工藤、これからはAI駆動開発やで！

どうもアイレット株式会社MSPセクションの多野です。
エンジニア歴1年ちょっとになります。以下のブログを見てください！

・未経験からアイレットMSP AWSエンジニアへ！アイレットMSPで働く私の1年間の成長記録【体験談】
・2025年度版！AWS資格取得の順番について！

資格
AWS 2025全冠
Google 2025全冠まであと2つ
LPIC 1
生成AIに対する所感
ChatGPT Plus：o3のリサーチ力や、思考力を必要とするときに使用。無しでも可。
Gemini Pro：汎用性がすごい。膨大な情報を理解してくれて気兼ねなく使える。固定最高！全部覚えてくれてる。敢えてGeminiに情報を渡すこともある。
Claude code 100ドルMAX：コード書けない自分からしたらありがたい！アプリ側への理解欲が湧く。あと、文章では理解しづらいことをGeminiの説明をそのままclaudeに構成図を書いてもらうと一気に理解が進む。

はじめに

ゲーム作りました！！！笑

https://tanoyuusuke.com/

こんな構成

経緯

アイレットに入社して1年が経ち、そろそろインフラを自分で構築したい！！！
そう思いながらもアプリ側が分からないので、あんまりイメージも湧かなくてTerraformを学習してた日々でした。

そんな中ClaudeがClaude4になって騒がれ出して、コーディングに強いのは知ってるけど、、、あんまりアプリ側分からんしな。。。
そう思いながらもS3に静的webサイトをホスティングするだけなら簡単なので、そのような指示をするとそれっぽいものが出来上がり、これならアプリもどんどん理解していけるかも？？？と興味を持ち。。。この好奇心があるうちに。。。

S3静的webサイトで動くものを作ってください

Claude 100ドル契約！！！（自腹）

くぅーーーーー。一万五千也。くぅーーーーー。

最初は100ドルclaudeのwebでしていたんですが、エラーが起きることが多くて。
だんだんとClaude codeなるものがあって、AIエージェントっぽく動くらしくって言う情報を仕入れて導入に至りました。

今回のインフラ構成

まずインフラ構成を考えました。

静的なwebサイトならS3で良くて、CloudFrontも使用する形で。

AWS CLI使うならアクセスキーを使いたくないから方法を調べると
今はIAMユーザーと言うより、IAM Identity Centerの方が良いらしく。

IAM Identity Center、S3、CloudFront、Route 53
の、構成で組み始めました。

でも、テストするにもhtmlファイルを修正するたびに手動でS3にアップロードするの面倒だ！
（この時はローカルテストの概念を持ってなかった）

そう思い、Gitにpushした時点でS3までデプロイして欲しいなぁ。

調べてみるとGithub Actionsなるもので可能になるらしい。
よく分からないけど、とにかくやってみる！！の精神でやってみました。

Github Actionsを使用した自動デプロイ


Github Actionsとは？
GitHubのリポジトリに組み込まれた、一連の作業を自動化するためのプラットフォームです。

よく分からん！笑
でも、GitにpushするとS3へデプロイは出来る。

そのためにはAWSとGithubの認証を行わないといけなくて、認証情報をGithubに渡すのは怖すぎると思っていたら、もっと安全な認証方法のOIDCを使用しました。

そしてデプロイも自動化したところで、並行で行っていた開発を本格的に初めていきました！


（雑なclaude図）

Claude codeでの制作方法、上手くいったこと、ダメだったこと


Claude codeの導入が無事に終わり、使うと全然上手く行かない！！！

やっぱり設計が分かってない人間が指示をすると上手く行かないんだと思います。
その中でも色んなことを試したので、そのことをお話し出来ればと思います！

大枠の所感

まずClaude codeが一番最初に作り出した、種みたいなものから大幅な修正や、方向転換は出来ないなって思いました！
どうしてもその種みたいなものに引っ張られる実装になった気がします。

修正するにしても、なるべく分析してもらってから少しずつ少しずつ対話しながらお願いする。
結構暴れることもあるので、ブランチ作成しながら行う。

そうすると素人制作くらいのクオリティなら作れる気がします！

また最適なディレクトリ構造の方がいいと思います！
1つのファイルが読み込み上限のトークンを超えてると全部読んでくれないので、Claude codeのしやすいようにお願いするのが良いかもです。

Claudeにざっくり指示（×）

チャットボット生成AIを使うような形で、ざっくり指示で行うと自分のイメージと全く違うことが起きます。
その起きたことに対してざっくり指示を行うと、てんやわんやになって修正不可能になります。
設計を知らないと的確な指示も出来ないし、ここを解決したらここがおかしくなるってことがよく起きて訳わからんくなりました。（15回以上はやり直したはず）

あとIDEはよく分からないけどもItermだと通知が来てめっちゃいい！！！

ポーズボタンを追加して

このエラーを解決して

iTerm2の通知が最高です！！！

通知が来るようにすると快適過ぎます！！！
ぜひiTerm2にしましょう。笑

IDEとかはよく分からない。。。

Geminiで仕様書を作り込む（△）

何を要件としたら良いかも分からないので、Geminiに以下のプロンプトでガッツリ仕様書を作り込みました。
そして修正するときは、仕様書を修正して再度読み込んでもらう。

これは結構途中まで上手くいってたと思います。
ただ予期せぬエラーを解決出来ずにやり直しました。
感想としては、Geminiの仕様書でClaudeが出来る範囲を制限し過ぎてた気がします。その狭間でエラーを解決出来なかったような気もします。

ゲーム開発者に開発依頼します。
依頼するのに必要なことを私にヒアリングして仕様書を作成してください。

README.mdに仕様書を書く（×）

これは意味があったんでしょうか。
むしろclaudeがこっちに引っ張られてる気がしました。
仕様書を書ける人がすると上手く行く気もする。

Claude codeの対話でヒアリングしてもらう（×）

Geminiで仕様書を作っても無理なら、そうだ！Claude code本体にヒアリングして貰えばイメージと一致するゲームを作れるのでは無いか。
そう思いヒアリングしてもらいましたが、あんまり上手くいきませんでした。
理由は不明です。数回試しましたがとにかくイメージから離れたものが出来上がりました。

短文プロンプトでリセマラ（⚪︎）

これはよかったです。なるべく要件を少なく伝えて、種となるものが出来るまでリセマラするとその後の作り込みも上手くいく気がしました。
結局この種次第な感じしました笑

S3静的webサイトで動く、シューティングアクションゲーム、ジャンルはサバイバーライク、テーマは宇宙

まず分析してもらう（◎）

これがすべてでした！笑
対話して、少しずつ分析して概要を教えて貰いながら実装を行なってもらうのが良い感じがしました。
今はこれで上手くいっていて、ディレクトリ構造を変えるのも今のとこと上手くいってます。

おおむね正しいですが、スティックの近くに赤と緑の枠みたいなのがあるの分かりますか？それも対象です。意図が伝わってますか？

PCブラウザのエラー
WASDとマウス操作が出来ない。これらの修正は出来そう？一度戻った方が良い？深く分析して私に教えてください。実装はまだです。30分以上掛けても問題ないです。

時間指定をする（△）

もっと時間使ってくれいいのに！！！
もっと時間使って確実なことをして欲しい！！！

そんな思いから時間を指定してみました。
たぶん良かったはず。。。！！！効果は分からないけど、時間が掛かるほど良いものが出来上がってる気がする笑

では、その内容を分析してください。15分以上かけても問題ないです。or15分以上かけてください。

Claude code内でテスト自動化（△）

手動の動作テストが面倒だなと思い、テストをお願いしました。

これはテストは出来たんですが、恐らく作成したテストの内容が良くなくて上手くいかなかったです。
テストの作成も雑に投げるんではなくて、対話分析実装の順でお願いするときちんと動く気がします。

どんな手段を使ってもいいのでテストはあなたが実施してください。MCPサーバーや必要なツールなどはあなたが判断して導入してください

こまめにCLAUDE.mdにまとめてもらう（△~⚪︎）

これは効果は実感出来てないですが、良かったと思います！
修正計画表や、テストの仕方やルールなど随時変わっていくものをCLAUDE.mdに記載してもらうことで、Claude codeがそれを随時理解しながらやってくれるように思いました。
これは/init で問題ないのか、指示が必要なのかは分からず。。。

実施したことをCLAUDE.mdへまとめて記載しておいてください

現在

何も分からずテキトーに作ってたので、4000行が3ファイルくらいに記載されてたので、保守性や拡張性をしてもらうには適切なディレクトリ構造が必要らしくお願いしてます。
対話分析実装で、今のところ問題なく進めれてます！

⏺ 📁 現在のディレクトリ構造

/Users/tano/0603game/public/
├── game.js (3,259行 - まだ大きい)
├── index.html
├── style.css
├── js/
│ ├── main.js (エントリーポイント)
│ ├── systems/ (✅ 5つ完了 - 2,146行分離)
│ │ ├── audio-system.js (453行)
│ │ ├── input-system.js (218行)
│ │ ├── physics-system.js (264行)
│ │ ├── render-system.js (809行)
│ │ └── weapon-system.js (402行) 🆕修正完了
│ ├── entities/ (空)
│ ├── managers/ (空)
│ └── utils/ (空)
└── package.json

🎯 理想のディレクトリ構造

/Users/tano/0603game/public/
├── index.html
├── style.css
├── js/
│ ├── main.js
│ ├── core/
│ │ └── zombie-survival.js (軽量メインクラス ~1,500行目標)
│ ├── systems/ (✅ 5つ完了 → 📋 8つ目標)
│ │ ├── audio-system.js (✅ 453行)
│ │ ├── input-system.js (✅ 218行)
│ │ ├── physics-system.js (✅ 264行)
│ │ ├── render-system.js (✅ 809行)
│ │ ├── weapon-system.js (✅ 402行)
│ │ ├── enemy-system.js (📋 推奨次ステップ)
│ │ ├── level-system.js (📋 スキル・レベルアップ管理)
│ │ └── gamestate-system.js (📋 UI・メニュー管理)
│ ├── entities/ (📋 将来的)
│ │ ├── player.js
│ │ ├── enemy.js
│ │ ├── bullet.js
│ │ └── pickup.js
│ ├── managers/ (📋 将来的)
│ │ ├── wave-manager.js
│ │ ├── ui-manager.js
│ │ └── save-manager.js
│ ├── utils/ (📋 将来的)
│ │ ├── math-utils.js
│ │ ├── constants.js
│ │ └── helpers.js
│ └── config/ (📋 将来的)
│ ├── game-config.js
│ ├── weapon-config.js
│ └── enemy-config.js

最後に！！！

今後様々なシステムや機能を実装していきたいと思います！

と言うわけでぜひAI駆動開発をしましょう〜！

そしてアイレット・・・いや、『愛』レットで一緒に働きましょう〜！

・アイレット採用情報