$5払ってどこまでできる?Claude CodeでiOSアプリ開発

1.3K Views

May 17, 25

スライド概要

(超概要)
・生成AIの活用を肯定的に捉えていて、上手に活用していきたい
・「AIを使うからこそ、仕様の精緻さが問われる」という知見が得られた

本発表では、Anthropic社の「Claude Code」を活用し、iOSアプリを$5以下のコストでどこまで開発できるかを検証したことを紹介しています。検証内容は、Claude Codeに仕様書だけを渡し、MQTTを使ったデータ送受信アプリを実装してみるというもの。

実験内容
・仕様:ナビゲーションUI+MQTT通信機能を持つシンプルなアプリ
・使用ツール:Claude Code(ターミナル上で動作するAIコーディング支援ツール)

成果
・数分で初期実装が完了し、ビルド可能な完成形が生成された($0.1768)
・ただし、MQTT接続エラーとボタン無反応という問題が残る
・これらはそれぞれ1行のコード修正で解決(自力で原因調査)
・総コスト:$0.828(約¥120)で、実用的な画面が完成

得られた知見
・Claude Codeは、初期実装において非常に有効であり、$1以下で動くアプリを生成できる可能性がある
・一方で、エラーの原因特定や細部の調整には人間の知見が不可欠
・「AI依存開発」は、問題の所在が見えにくいため、デバッグに時間を要する傾向あり
・結果として、AIに丸投げする前に仕様を十分にレビューする重要性が浮き彫りになった

profile-image

ソフトウェアエンジニア|Swift中心にモバイルアプリやウェブ開発をやっています。 ESP32や3Dプリンタ(Ender3 S1 Pro)を活用して、自宅の作業環境をカスタマイズ中。 シンプルで使いやすいものを作るのが理想。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

$5払ってどこまでできる? Claude CodeでiOSアプリ開発 鈴木孝宏 (sussan0416), 2025-05-17, はこだて未来大 企業エンジニア 大LT2025

2.

自己紹介 • 株式会社Helpfeel / 開発部プロダクトエンジニア • Gyazoの開発を担当 2009入学 2015修了 • メインスキル • iOS, macOSアプリの開発 • フロント側も一部担当 • ものづくりが好き • 電子工作(ESP32)、3Dプリンター(Ender3) 鈴木孝宏 sussan0416 sussan-po.com

3.

今日の話題

4.

$5 Claude Codeの最低クレジット iOSアプリは、どこまで開発できるのか!!

5.

Claude Codeについて

6.

Claude Codeとは... • Anthropic社が開発 • AIエージェント型の コーディング支援ツール • ターミナル上で動作 https://www.anthropic.com/claude-code

7.

← 聞いてみた

8.

(¥14くらい) 開発しているディレクトリで実行 → 余分なファイルも読んだのかも

9.

料金 100万トークンあたり • Claude 3.7 Sonnet • 入力: $3、出力: $15 • Claude 3.5 Haiku • 入力: $0.8、出力: $4 https://www.anthropic.com/pricing#api 消費するトークン量 指示内容、思考プロセス、プロジェクトの規模で千差万別(のはず)

10.

$5払ってどこまでできる? 実際にやってみた

11.

アプリのイメージ • ナビゲーション、ボタン、シートのアプリ • MQTTを使ってデータをPublishする • 他のクライアントが送信するトピックを Subscribeして、流れてくるデータを表示する -----MQTT: IoTデバイスでよく使うPub/Sub型の通信プロトコル。HTTPより軽量。 トピック: データをプッシュする宛先。階層構造で管理できる。 フリーボードで描いたUIイメージ

12.

背景を知りたい方は、「都電LT #0」の発表を参照ください🙇 https://connpass.com/event/331437/ https://sussan-po.com/2025/01/10/status-display/

13.

実際にやったこと

14.

仕様書をもとに実装させてみた 指示はこれだけ。 素の状態から どこまで作ってもらえるか

15.

仕様書は、ChatGPTによるもの。UIや挙動、アカウント情報をまとめてもらった。

16.

数分で実装が完了。プロジェクトは、矛盾なく壊れていない。 ざっと見た感じ、問題ない実装。

17.

パッケージが解決できていないところは、自分で直した。

18.

$0.1768 ビルドできた!!初手からほぼ完成形!! (¥26)

19.

完成形、でも不完全 • MQTTブローカー(サーバー)に接続できない • ボタンがすべてdisabledになっている 接続できていないログ……🥺 押せないボタン……🥺

20.

とにかくエラーと症状を伝えてみる…… 色々指示したけれど、ブローカーとの接続失敗は直らず…… ここまでで、$0.828!!(¥120)

21.

結局、自分で調べて直した① MQTTブローカーに接続できない件 • この1行を追加したら、 通信できるようになった • 1行で直るの、ありがち なやつ -----結局、Server Name Indicationの問題だったっぽい。 接続したいブローカー名(FQDN)をセットすることで、HiveMQの自分のクラスタと通信できるようになる。

22.

結局、自分で調べて直した② ボタンがdisabledになっている件 • この1行を追加したら、 ボタンがenabledに。 • シートがフォーカスされ ていたら、後ろのViewは 触れないのがデフォ

24.

Claude Code、初手でかなり惜しいところまで行ってた (2行しか直していないので)

25.

$5もあれば、かなり作業できる!! $5どころか、$1未満で1画面作れる

26.

根気強くエラーと対峙する必要性 • AI依存実装の場合: • どの段階まで正常動作していたか不明。エラー原因の特定に時間を要する • 自力実装の場合: • エラー発生前の状況を把握しやすいため、エラーを解消しやすい。 • 70% Problem • > 残り30%のためにエンジニアリングの専門知識が引き続き必要であり、 その重要性はむしろますます高まっている https://ohbarye.hatenablog.jp/entry/2025/05/06/vibe-coding-book-early-release

27.

Claude Codeの、面白かった実装

28.

この1行にたどり着けるか ボタンがdisabledになっている件 この1行を追加したら直る、という1歩前の段階で、 ざっくりした指示を出してみることにした

29.

この1行にたどり着けるか ボタンがdisabledになっている件

30.

この1行にたどり着けるか ボタンがdisabledになっている件 ボタンを青く着色して、enabled感を出してきた (直ってない)

31.

Claude Codeが、効果的だった実装

32.

アニメーションを実装させる ブローカーに接続できたら、スパークルさせてみる

33.

$0.0929 (¥13) !!!

34.

検証結果 • アプリの挙動を書いた仕様書、UIのイメージ図をあらかじめ用意しておき、そ れらをClaude Codeに伝えることで、$1でほぼ完成系で出力してもらうこと ができた • 一方で、最初から完全な実装にはならず、ビルドエラーの対処、バグの修正 を、手作業で行う必要があった(70% Problem) • アニメーションを追加する実装は、非常に効果的だった

35.

考察 • 今回のようなAIへの依存度が高い開発をする場合は、指示を具体的にしておくための下 準備が重要と思われる(ChatGPTや、Geminiも活用) • 一方、開発者側にウェイトを置いた開発の場合は、プロジェクト固有の表現やルールな ど、コンテキストをできるだけ伝えておくことが重要(CLAUDE.md、copilotinstructions.mdのような) • いずれにしても、局所的な実装だったり、リファクタリングなどであれば、Claude Codeの効果を感じやすそう • $5あれば、アプリの立ち上げと、いくつかのタスクをこなせる。 もし、コストの心配をしたくないなら、Maxプラン($100)で使うのも良さそう

36.

Helpfeelについて

37.

Helpfeelは「情報格差(ナレッジギャップ)」という社会問題に向き合い、 3つのクラウドサービスの開発・運用を行っています