0
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?

@hinemoz

AI駆動開発に関するお勉強

0
Posted at

こんにちは！！

挨拶は大事と古事記にも書かれています

この記事の概要

年も年だし、と重い腰を上げて、次こそ骨を埋める会社を探すぞ！と意気込み転職した結果
AIをバリバリ使うしそれも評価軸に入る会社に転職した、中堅なんちゃってエンジニアの俺！
技術力もそんなあるわけではないし、顧客との折衝や案件の推進力だけでご飯食べてた（気がする）けど
いよいよもってこれはきちんと勉強しないとマズいぞ！となり
またしても重い腰を上げて「AI駆動開発」について学んでみたあれこれのメモ的なものになっています。
（個人開発したあれこれを会社に共有かけるのにどうしようかな？から、えいやで初投稿です。）

これまでのあれこれ

  • いったん、で春先にvscode + github copilotの無料版で、趣味のゲームのキャラ育成メモアプリみたいなのを作ってみた
    • どんなアプリかは機会あれば別の記事で、拡張ネタ思いつかなくて放り投げました
  • そこからちょっと寝かせてたらgithub copilotが従量課金制に・・・
  • そのくらいからお仕事がちょっと忙しくなり、勉強が進められない（言い訳）状態に
  • さて、改めて個人開発でやるには何をどうすればいいんだ？で今ココ

タグに入れてたもののそれぞれの役割について

名前 用途 備考・補足
VSCode エディタ兼AIプラットフォーム ー
cline ClaudeをVSCodeで使うためにプラグイン入れる https://cline.bot/
Claude 最近流行ってるよね、な生成AI モデルは4系を利用想定 -> 5のSonnetのがコスパいいらしい
Gemini 従量課金に含めたくない壁打ち相手 じぇみーにいつもありがとう

開発環境、どうしよう状態

  • Geminiに聞いてみた
  • 上記、ざっくり概要
    • 最適な環境構成: 個人での学習および「型の確立」には、「VS Code ＋ Cline（拡張機能） ＋ Anthropic API（Claude）」の組み合わせがベスト。
    • コスト面（圧倒的な安さと安全性）:
      • 月額サブスク（$20〜）と違い、完全従量課金（使わない月は0円）のため、個人開発レベルなら月数百円〜で収まるケースが多い。
      • Anthropicのコンソールで「月の上限（例：$10）」を設定できるため、会社の共通クレジットのようなバースト（過剰請求）の心配が100%ない
      • 新世代のClaude（4系・5系）になっても公式のトークン単価（卸値）は据え置きであるため、常に最新の頭脳を最安値で使える。
    • 性能面（実務に直結する「型」の習得）:
      • 世界最高水準のベンチマーク（SWE-bench等）で実証されている「Claude」の自律開発力（エージェント機能）をフルに体験できる。
      • 単なるコード補完ではなく、「仕様策定 ➔ タスク分解 ➔ 1タスクずつAIが実行し、人間が承認する」という、これからの標準となる開発フローが身につく。
    • 将来性と横展開:
      • プラットフォームが「VS Code」のままなので、ここで掴んだ「AIへの指示出しや手戻り防止のテンプレ」は、会社のVS Code ＋ Copilot（Claude/GPT切り替え）環境へそのまま横展開（移植）が可能。
  • 結論：vscode + cline + claude でやってみよう

じゃあ何作ろうか

  • せっかくだし、趣味にかかわるものを作りたいよね
    • ゲームくらいしか趣味がない；；
  • 最近、どんなゲームやってるっけ？
    • ナイトレイン、ソシャゲ、格ゲーあたり？
  • 昔断念した、格ゲーのコンボレシピエディタみたいなの良いんじゃね？とふと
    • スマホアプリを作ろうと思ったけど、面倒で以下略
  • 作るものはコンボエディタで決定、やりやすそうだし改良ネタも思いつきやすそう

どう作る？

  • 「AI駆動開発」だし、一切コーディングしないで作りたいよね
  • 将来的にWeb公開？まあそれはおいおいかなぁ
    • githubで簡単に公開できなかったっけ？
  • 言語も対話式で適当に決めよう、モダンなやつで適当でOK
  • せっかくだから、利用者ペルソナでも作ってそいつに改良案出させてみてもいいかも
  • 可能であればデプロイとかもAI駆動できないかな？

コンボエディタ、仕様どうする？

  • 主にスマホからの利用を想定
    • ので、レスポンシブなデザインにしよう
  • 上から配置は・・・
    • テキストボックス（直接編集可）
    • コピペボタン（押したらクリップボードに）
    • コントローラー型入力部
    • お気に入りボタン
      • ディレイとか、キャンセルとか、ラッシュとかそういうのを入れておけるのを個人で設定できるように
  • 以下のどちらかを入れてたら「＞」が入って次の入力へ
    • 方向キー操作＋ボタン
      • 方向 -> ボタンの入力制限入れてもいいかも
        • 武力ONE？知らんよそんなの・・・
    • お気に入りボタン
  • お気に入りボタン、ユーザごとに保存しておくことできるかな・・・？
    • めんどいのでログイン機能はつけたくない
  • ざっくり、こんな感じでたたき作ってみよう

まずは環境構築

  1. Claude ConsoleでAPIキー発行
    • クレジットはチキンなのでいったん10$で様子見
    • 自動リロードはOFFのまま（SKIP）
    • キー名は適当に「vscode-claude」で
    • 有効期限はひとまずで30日を設定
    • 「請求」から「月間支出上限」を設定
      • これまたチキンなので20$に設定
  2. VSCodeにclineを入れる
    • 上記で発行したキーを使うので「Bring my own API key」を指定
    • Configure画面が出るので以下を設定
      • API Provider: Anthropic
      • Anthropic API Key: 前の手順で作成したもの
      • Model: Claude-sonnet-5
      • Adaptive Thinking: 適応型思考、ひとまずNoneで様子見
      • Use different models for Plan and Act modes: Plan/Actを分ける予定は今のところないのでOFF
  3. 動作確認で適当にフォルダ切らせてみる（プロジェクト名も考えさせつつ）
    • できた！
      • image.png
      • image.png
        • これだけで0.04$も使ったらしい、ふーん・・・

たたき、作ってみよう

  1. 先ほどの 超適当仕様 をmd形式で保存
  2. mdファイルのパスを与えつつ、たたき作らせてみる
    • image.png
      • ふむ・・・Github Pages公開検討しているのでこれでいいか
      • デザインもいったんいい感じにしてみてほしいので、Tailwind CSSも許可
    • image.png
      • 惜しいな、ニュートラル入力もほしいから9方向にしてほしい
      • パンチ、キックはひとまずで8ボタン用意して、ユーザが任意に設定できるようにしてほしい
        • とかとか、この辺指摘しつつ対話型で命令してみる
    • image.png
      • 理解してくれたみたい、ありがとね
      • で、ニュートラルはどうする？5表記想定かな？
        • これも認識合わせ、5想定らしいのでOKとする
  3. 適宜止まっちゃうので様子見しつつ問題解消してあげる・・・
  4. 行けるようになったらしい、がんばれ
    • image.png
  5. できた
    • image.png
    • なんか変だぞ・・・？
      • 8ボタンとして、並びおかしくね？
        • LP MP HP PP
        • LK MK HK KK
          • じゃね？
      • ボタンのボタン、ちっさ・・・
        • あと丸くないの気になる
      • そういう意味ではレバー領域デカすぎる気がする
    • この辺指摘してみよう
  6. 指摘してみた

    • image.png

      • 良い感じですね

いったんセルフでブラッシュアップ

ボタン設定画面

  • image.png
    • ださい・・・というかわかりにくい・・・
    • 指摘して直させてみる
      • image.png
        • よくなったぞ、ありがとう！

お気に入りとか、技とか

  • お気に入りって適当すぎてわかりにくい（これは私が悪い）
    • 共通システムとかのがわかりやすいかな？
    • 相談して「システム入力」に変更
  • 必殺技簡易入力、ほしい、ほしくない・・・？
    • 絶対そのうち飽きて簡易入力したくなるよね、で追加してみる
      • 記事がいたずらに大きくなるのでスクショ割愛

ボタン同時押し機能、無いのでは？

  • 聞いてみたところ、「コマンド確定」的なのを入れないとかもとのこと
  • ぶっちゃけ、それすると操作面がちょっとイマイチな気がする
  • ので、8ボタンのあまりボタンや、システム入力をユーザにうまいこと使ってもらおう！の方針とする

データ保存ってどうなってるんだろう？

  • ユーザ向けにマニュアル的なページを追加してほしいかも
    • を、対話形式で追加してみる
    • localStorageで実現してくれてたみたい、アプリ的な操作方法も一緒にヘルプページを作ってもらった

それでは「GitHub Pages」で公開してみよう！

  • 対話形式で実施
  • push前に個人情報や、ライセンス的にNGなものが含まれていないかチェック
    • 大丈夫そうなので継続
  • あれこれ認証周り整えて、いざpush
  • pagesの公開のあれこれは、割愛

公開できました🎉

https://hinemoz.github.io/combolith/

  • ちなみにここまでで使ったcreditは・・・
    • image.png
      • ぎりぎりセーフすぎる・・・

感想

  • 数年前に作ってみたいなーってものを半日で形にできたのはやっぱAIすごいなと
  • 今回、仕様は（ざっくりしたものだけど）人間側が準備して、製造～デプロイまでをAIに完全にお任せする感じだったので本当に楽ちんだった
  • 課題は以下のあたりかなぁ、と
    • （Creditの都合で）ペルソナつくって改良ができなかった
    • （Creditの都合で）試験させることができなかった
    • 対話式で作り切ってしまったので、部分部分の作業を仕組み化すべきでは
      • ここだけ、のこった1$ちょいのクレジットで対応
        • 内容チェック系だけ機構を作ってくれました、感謝。
    • 思ってた以上にCreditが溶ける
      • どっかでループハマってそうなので、この辺は次回追加クレジットして調査かなぁ・・・
  • いったん「AI駆動開発」のそれっぽいことができたのでOKとします。OK！！

以上！ここまで読んでいただき、ありがとうございました！

0
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
Sign upLogin
0
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?