ChatGPTでアプリ開発してリリースしてみた

最近子供向けの時計アプリ（iOSのみ対応）を趣味の一環でリリースした。自分の子供がちょうど２歳になるタイミングで、家に時計がなかったので、子供の知育教育にもなるだろうと思って開発に至った。

‎EduClock for Kids

妻がUXデザイナーというのもありデザインは少し前から出来上がっていて、あとは実装するだけ、という状態の時にちょうどChatGPT Visionがリリースされた。これはChatGPT Visionがどこまで活用できるのか検証できる良い機会だと思い、それをフル活用して開発してみた。このアプリ開発では、ほぼ自分でコードは書いていない。95%はChatGPTが作ってくれたまんまでリリースをした。ちなみに開発を始めてからリリースまでトータル２〜３時間くらいだったと思う。

この記事では開発着手から完成に至るまでのChatGPTとの対話を途中のアプリのスクリーンショットを交えながら赤裸々にまとめていく。対象としてはChatGPTを使ってアプリを作ってみたい非エンジニアの方向けに書いてみる。

こちら完成形。

こちらにソースコードも公開しておく。

結論

ChatGPTでアプリを開発してみた結論から入る。

1. ロジックに関しては完璧

時計としての機能は一発で完成してくれた。秒針、短針、長針の動き方のロジック、表示する時間の変化、そういった部分の実装は特に修正の必要がなかった。ロジックの難易度によるが、時計のような一般性の高いロジックは精度高く実装してくれる。

2. 細かいレイアウトはまだ少し

ChatGPT Visionを利用すると、UIまわりの開発はかなり開発が簡単になったが、コピペで動く完全なコードが生成されるわけではなかった。長針の長さだったり、数字の配置だったり、細かい部分はそれなりの回数で行ったり来たりしたし、部分的に自分で直した方が早い、となり直してしまったケースが数回あった。

3. iOSのSwiftUIは相性が良く、Flutter、AndroidのJetpack Composeは厳しかった（過去形）

ネイティブアプリを開発するにはいくつかの手段があり、iOSアプリならベースとしてSwift（プログラミング言語）を使いUIはレイアウトツール（UIKit）もしくはプログラミング（SwiftUI）を利用することになる。Androidなら基本KotlinやJava（プログラミング言語）を利用し、iOS同様にレイアウトツールもしくはプログラミング（Jetpack Compose）でUIを作っていくことになる。他にもクロスプラットフォームのツールを使えばiOSとAndroidを同時に同じソースコードで開発できる。有名なところだとReact Native、Flutterになる。

開発当時（2023年10月）時点では、ChatGPTの知識が2022年1月とかまでだったので、歴史の浅いAndroidのJetpack Composeが使えずUIの開発が難しく、Flutterだとプラットフォームの成長が目まぐるしくあまり精度の高い回答が得られなかった（React Nativeは試していない）。SwiftUIは比較的安定しており、コピペで開発が簡単にできるのでChatGPTと非常に相性が良かった。今（2023年11月中旬）だとChatGPTの知識が2023年4月までなので、AndroidもしくはFlutterでの開発も精度が上がっている可能性が高い。

4. コピペスキルが求められる

ChatGPTの回答を実際のソースコード上のどこにコピペすればいいのか、が完全なプログラミング初心者には難しいと思われる。たまにChatGPTの回答が微妙に異なる関数名やプロパティ名を使うこともあり、自分でよしなに解釈する必要もあった。最初のプロンプトでコンポーネントごとにファイルをしっかり分けて、プロンプトごとのスコープを小さくして開発すれば会話が短く済むのでこういう問題は起こりにくくなる。もしくは、エディタとChatGPTが融合したサービスCursorを使えばこの問題は解決すると思う。

5. プログラマは本当に淘汰されるのか

Figma等のデザインをただコーディングする作業は確実に消えていくので、フロントエンドエンジニアの形が変わっていくことが想像できる。よりデザインもするようになるのか、バックエンドもやるようになるのか、エンジニアの区分も変わっていくんだろうな、という雑感。

会話記録

会話１

ここではキャラ設定としてSteve Wozniakになってもらった。Appleの初期の開発を担っていた伝説的なエンジニアである。この設定に効果があったのかは正直わからない。ここではざっくりとした概要とゴールとなる画像を渡してみた。英語の方が精度も返信速度も早いのでここでは英語で進めていく。

会話開始

得られた結果をそのままXcodeで実行したらなかなか残念な結果が得られた。いきなりSwiftのコードのみが返ってきたので、どこにコピペをするか知っていないと次に進めない返事であった。もしXcodeやiOSアプリの開発に親しんでいない人は、新規プロジェクトを作成するところから解説してもらうようにChatGPTに伝える必要がある。

会話２

いきなり完成形の画像を渡すと精度低いことがわかったので、コンポーネントを分けてChatGPTに指示することにした。今回のアプリだと、Hoursの数字、Minutesの数字、Secondsの数字、短針、長針、秒針、センターピン、数字のそばにある傍線のマーク、時計のフレーム、といった具合に分割できる。

このプロンプトでは、以下のようにHoursの数字、短針、長針、秒針、センターピン、時計のフレームのみを渡した。

これがChatGPTの返答をそのままコピペして実行してみた結果である。確かに時計だがなんか違う。