エンジニアがこの先生きのこる方法をこっくりさんに聞く

An example of developing an web app with Roo Code and Claude AI models.
「第1回 札幌すごいAI会」LT資料

Transcript

1. エンジニアがこの先生きのこる方法をこっくりさんに 聞く 2025.03.21 第1回 札幌すごいAI会 by @oika
2. 自己紹介 Akio Akasaka (@oika) 文系 Programmer C# & TypeScript Lover Remote Worker Jr. Monster Hunter (HR 3)
3. Roo Code 使ってみた Roo Code (旧 Roo Cline) https://github.com/RooVetGit/Roo-Code VSCode拡張のAIコーディングエージェント Cline の fork でモデルの選択肢が多い
4. 作ったもの1 SQL Shooter - SQLタイピングゲーム https://sql-shooter.vercel.app/ Next.js 製Webアプリ インメモリの SQLite に対して実際にクエリを発行させる SQLインジェクションし放題 ほぼAIのみでコーディング
5. 作ったもの2 LLM こっくりさん https://llm-kokkuri.vercel.app/ Next.js 製Webアプリ Open AI API (gpt-4o-mini) 基本機能は自分で実装、機能追加をAIでコーディング
6. 所感 すごい 時代が変わった感ある コーディングは人類の仕事ではなくなったのか
7. 試したモデル gpt-4o-mini (Open AI) 安いが実用レベルじゃないかも deepseek-reasoner (DeepSeek) Roo Codeと相性が悪いのかエラー頻発 o3-mini-high (Open AI) やや高いが実用に耐える 推論モデルだからかトークン消費量が多く感じた Claude 3.7 Sonnet (Anthropic) 高めだが、精度は一番良い 修正指示が減るから結局高コスパかも
8. Github Copilot Proでの利用 Roo Code の APIプロバイダーで VS Code LM API を選択すると、Github Copilot Pro の サブスクリプションのみ（月額 $10 / 学生無料）で、Claude等のモデルを利用できる ただし、、 Claude 3.7 Sonnet も選択できるが、現在（2025/3/20）は動かない状態 https://zenn.dev/tomo0108/articles/49eace107e4425 https://github.com/RooVetGit/Roo-Code/issues/1203 3.5 は動く 使いすぎると Github からアカウント停止されるという報告あり https://zenn.dev/ymsy/articles/4cbf29f2f3272a https://github.com/RooVetGit/Roo-Code/issues/1203#issuecomment- 2692441655
9. .clinerules に何書くの問題 先人の知見も増えつつあるが 結局はやりながら拡充していくのがいいかも
10. やりながら書き加えた例 ## 役割 あなたは、React, Next.js, TypeScript のエキスパートであるエンジニアです。 私は、コーディングの効率を上げるためにあなたにサポートを依頼しています。 指示されている範囲内で、効率的にコーディングを進めてください。 指示されていないコーディングは勝手に行わないでください。 特に、既存の機能が動かなくなる改修をしてしまわないように慎重になってください。 指示への応答や質問は日本語でしてください。 ## コーディング規約 - インデントは半角スペース4つ - DOMの直接的な操作はできる限り避け、Reactのお作法に従う - メンテナブルなコードを保つことを心がける - 型安全を意識し、安易に警告の抑止や `any`, `as` を多用しない
11. コードを修正してもらった後に「今後も意識してもらうために clinerules に追記した ほうがいいことある？」って聞くと教えてくれる - データアクセスは repository パターンに従う - DBアクセスは /backend/repository/ 配下のモジュールに集約する - APIエンドポイントから直接DBにアクセスしない - 複数のDB操作を伴う処理は必ずトランザクションで囲む - エラー処理とロギング - responses.ts の共通関数を使用し、独自実装を避ける - すべてのAPIエンドポイントでアクセスログを記録する - エラーログには userId と error 情報を必ず含める - エラーケースは早期リターンする - 認証とセキュリティ - getAccessTokenUserId の戻り値は必ず型チェックする - 認証エラーは responses.Unauthorized で統一する - 型安全性の確保 - 不要な型キャストを避ける（例：gameId as string） - 外部データの型チェックは厳密に行う - ブランド型（GameId, UserId など）を適切に活用する
12. どこまで自動承認するか問題 読み取り 自動承認がデフォ？ 編集 最初のうち手動承認で、こまめに軌道修正したほうがtoken消費は抑えられる .clinerules がこなれてきたら、自動承認にすると本領発揮する たまに肝を冷やすので、自動チェックポイントか作業前のコミットを推奨
13. どこまで自動承認するか問題 Webアプリならnpmコマンドをたたいてブラウザ起動、表示確認、コンソールに エラーがあれば修正、までやってくれる けっこうtokenを消費する感じがあったので、今のところ確認は自分の仕事に している .clinerules ## 役割 // (省略) アプリケーションの起動および表示確認はこちらでやるので、コードの修正までを担当してください。
14. ありがとうございました