バイブコーディング（Cline）でAndroidアプリ作ってみた。

バイブコーディングとは

バイブコーディングはAIに依存したプログラミング手法で、人は解きたい問題を、コーディングに特化した大規模言語モデル（LLM）へのプロンプトとして自然言語で記述する。LLMによるソフトウェアの生成が可能となったことで、プログラマの役割は手作業によるコーディングから、AIがソースコードを生成する際のガイドと生成したコードのテスト・改良へと変化してきている。そのためバイブコーディングの支持者は、これまでソフトウェア工学で必要とされてきた広範なトレーニング経験やスキルを持ち合わせていない素人のプログラマであってもソフトウェアを作成できると主張している。この用語は2025年2月にアンドレイ・カーパシーによって提唱され、翌月にはウェブスター辞典の「スラングとトレンド」に名詞として掲載された。

wikipediaより引用

Clineについて

VsCodeの拡張機能として提供されている対話型AIアシスタント。PlanモードとActモードがあるという特徴があり、生成AIモデルはAPIを利用するため自由に選択可能のほか、自前のローカルモデルにも接続可能。
Planモード：チャットで対話するのみ
Actモード：コード生成やファイル操作などを行う

お題

• 位置情報を使って、その場所の明日の天気を表示するAndroidアプリ
  • モバイル端末のHW的な機能
  • APIを利用
    • https://open-meteo.com/

使用ツール

• Android Studio
• VsCode
  • Cline
• ウェブ版Claude（モデル Claude 3.7 Sonnet)

下準備

Android Studioでプロジェクトだけ作成。
VsCodeでClineの拡張機能をインストール
VsCodeで作成したプロジェクトを開いて準備完了

アプリの要件の作成

Web版のClaudeに以下のよう指示を投げます。

バイブコーディングでAndroidアプリを作りたいです。そのための要件書を作ってほしいです。
以下に要件を羅列するので、要件書を作成してください。足りない情報があれば聞いてください。

- Androidスマートフォンの位置情報を使った天気予報表示アプリ
- 端末の位置情報を取得して、天気予報のpublicのAPIをたたき、一日後の天気予報を取得して画面に表示します。
- 画面は１画面のみ
- Jetpack Composeを利用
- MVVMのアーキテクチャを利用
- 天気予報のAPIはOpen-Meteoを利用

１~２回結果を修正して以下のような要件書が完成

要件書：位置情報を利用した天気予報アプリ
1. プロジェクト概要
1.1 目的
ユーザーの現在位置に基づいて翌日の天気予報を表示するAndroidアプリケーションを開発する。

1.2 スコープ
- ユーザーの位置情報を取得
- 位置情報に基づいた天気予報のAPI呼び出し
- 翌日の天気予報情報の表示（天気、位置、気温、降水量のみ）
- 単一画面のUIデザイン

2. 機能要件
2.1 位置情報取得機能
- ユーザーの現在位置（緯度・経度）を取得する
- 位置情報へのアクセス許可を要求する機能
- 位置情報が無効の場合のエラーハンドリング

2.2 天気予報取得機能
- Open-Meteo APIを使用して天気予報データを取得
- 翌日（24時間後）の天気予報情報の処理
- API通信エラーのハンドリング

2.3 表示機能
- 翌日の天気予報情報の表示（シンプル版）
  - 天気状態（晴れ、雨など）
  - 位置情報（地名または緯度・経度）
  - 気温（最高気温、最低気温）
  - 降水量
  - 最終更新日時の表示

3. 非機能要件
3.1 技術要件
開発言語：Kotlin
UI：Jetpack Compose
アーキテクチャ：MVVM
API：Open-Meteo

3.2 パフォーマンス要件
- アプリ起動時の応答速度：3秒以内
- APIレスポンス待機時間：最大5秒
- オフライン時の適切なエラーメッセージ表示

3.3 セキュリティ要件
- 位置情報の取得はアプリ使用時のみ
- 個人情報の収集なし
- 最小限の権限要求

4. UI/UX要件
4.1 画面構成
- 単一画面のみ
- レスポンシブデザイン（異なる画面サイズに対応）
- シンプルで直感的なレイアウト

4.2 UI要素 
- 位置情報表示部分
- 天気状態アイコン
- 気温表示（最高/最低）
- 降水量表示
- 更新ボタン
- ローディングインジケーター
- エラーメッセージ表示領域

5. アーキテクチャ設計
5.1 MVVMコンポーネント
- Model：位置情報および天気データを処理
  - リポジトリパターンを採用
  - 位置情報サービス
  - Open-Meteo API通信サービス
- ViewModel：
  - 位置情報と天気データのステート管理
  - UI状態の管理（ローディング、エラー、データ表示）
  - ビジネスロジックの実装
- View：
  - Jetpack Composeを使用したUI実装
  - UIイベントのViewModel転送

5.2 データフロー
- 位置情報の要求・取得
- 取得した位置情報をViewModelに通知
- ViewModelがModelを通じてAPIリクエストを実行
- 取得したデータをViewModelで処理
- 処理したデータをViewに反映

6. 利用API
6.1 Open-Meteo API
- エンドポイント：https://api.open-meteo.com/v1/forecast
- 主要パラメータ：
  - latitude：緯度
  - longitude：経度
  - daily：取得する天気情報（天気状態、気温、降水量）
  - timezone：タイムゾーン情報
  - forecast_days：予報日数（1日分）

6.2 位置情報API
- Android FusedLocationProviderClientを使用
- 設定：
  - 精度：高精度
  - 更新間隔：アプリ起動時のみ

7. 課題と制約
7.1 検討事項
- API呼び出し回数の制限と対策
- 位置情報取得精度の最適化

7.2 制約事項
- アプリは縦向き表示のみ対応
- 位置情報の権限は実行時に要求
- シンプルな表示項目に特化した設計

バイブコーディング開始

作った要件をClineに入力して開始です。

要件書を入力すると↓このような返答が一気に帰ってきます。

実装を始めるにあたり、Act modeに切り替えていただければ、
上記の計画に沿って順番に実装を進めていきます。

と聞かれるのでActモードに切り替えたら、実装を始めてくれます。

7分ぐらいで一連のプログラムが完成します。（早い！！！）

いざ、ビルド

Android Studioでアプリをビルドします。
ビルドできない。。。。

～～～～～～～（ビルドエラーをコピペ）～～～～～～～～～～
 以上のようなビルドエラーが発生しました。原因を考えて修正方法を検討してください

このような指令を投げてエラー修正を指示。

以下のような回答が返ってきた。

ライブラリとAndroid APIレベルが合っていないとのこと。２つの選択肢を提示してくれたので推奨のほうをやってと指示すると修正してくれます。

２回目のビルド

エラーを修正して、ビルドしてみます。

ビルド通って、アプリ起動した！
だが、しかしエラー発生で予報が見れない。。。。
UIには”Index 1 out of bounds for length 1”の表示が。
2回ほど会話をすると以下のような原因が判明。

WeatherRepository.ktファイルを見ると、
tomorrowIndex = 1を使用して翌日の天気予報データを取得しようとしていますが、
APIから返されるデータのリストの長さが1（つまり今日のデータのみ）である可能性があります。
APIリクエストのforecastDaysパラメータが1に設定されていることが原因かもしれません。

会話ログ

これまた、原因が判明したので修正を指示、Clineが勝手に修正。

３度目の正直

ビルドしなおすと、out of boundsのエラーが解消。

少し細かいところを直すよう修正をしてアプリが完成しました。
エミュレータの位置情報を変更すると予報も変わり、正しく動いていそう。

まとめ

作成時間きっかり１時間
費用　API代$2.57(約400円)

感想

実際にClineでアプリを作ってみて思ったいくつかの感想

• API名だけでしか与えてないのに、リクエスト先を勝手に書いて、ほぼ正確にレスポンスの情報をパースしてるのがすごい(Claude 3.7 + Cline)
• やったプログラミング的なことはgitのコミットだけ。ほかは日本語でチャットのみ
• AIに指示してる（指示されている？）だけで動くものが作れた
• 定型的な実装ならだれがやるよりも正確に早く安く作ってくれそう

成果物