概要
最近、AI系ツールで遊んでいたら失敗も含め学びがあったのでメモとして残す。
作ったもの
リポジトリ
スクリーンショット
アプリの説明
- 入力は Markdown。チェックボックス (
- [ ]) を付けるとタスクとして認識 - チェックボックスを ON にすると 1 時間後にタスク完了として自動で Done へ遷移
- Done 状態になったタスクは Markdown から削除
- 完了タスクの集計情報を確認可能
- Web 版と Mac アプリ版の両方で動作
使用したサービス
実装の手順
Replit でのプロトタイピング
まず Replit を使って開発を開始。
replit.com
Replit はブラウザ上で動く AI 搭載 IDE。画面左側がプロンプト入力欄で、右側にプレビューが表示される。
Replit 内では以下の機能が統合されているため、環境を離れずに開発が進む。
- サーバーデプロイ
- データベース作成
- 認証 (Auth)
- GitHub 連携
「ログイン機能を作って」のようなプロンプトを投げると、Auth 機能込みで実装まで生成される。
多機能ゆえ料金体系はやや複雑。
https://replit.com/pricing
- 月額プランは基本$20だが使用量に応じたクレジット制
- Vibe Coding やデプロイでクレジットが消費される
- 2 日ほど真面目に触っただけで月額相当を使い切るペースだった
結果としてプロトタイプ段階には最適でも、継続運用にはコストが課題。現在は初期試作専用として活用中。
Claude Code への乗り換え
続いて Claude Code を試す。
docs.anthropic.com
Anthropic 提供のターミナル型 AI コーディング支援ツールで、ローカル環境からプロンプトを流し込みながら開発できる。
Replit で途中まで書いたコードを取り込み、以下を依頼してリファクタリング。
- Replit 固有機能の削除
- ログイン機能の削除
- DB をサーバー型からローカル SQLite へ置換
結果は次の PR にまとめた。
github.com
Claude Code 経由でもスムーズに Vibe Coding を継続できた。
Vibe Coding してみての感想
- Vibe Coding は従来開発と実装順の最適解が異なるケースあり
- 序盤でログイン機能を入れた結果、後半のブラッシュアップで壊れやすくデバッグ負荷が高かった
- まずメイン機能を磨き、その後ログインなど周辺機能を追加する方が効率的
- AI による実装は機能追加の敷居が低いぶんアプリが肥大化しやすい
- 機能増加に伴い Vibe Coding 時のバグ発生率も上昇
- 指示粒度やタイミングなど、AI との協調開発には慣れが必要だと思った
