ChatGPT を使用したIOSアプリの開発

2026.01.20

前提として私はCETのデザイナーの内の一人であり、エンジニアと協力をしていおります。

今年初め、私はGPT-4を使ってiPhoneアプリを一から書こうとしましたが、途中で行き詰まり、諦めました。しかし、2023年11月にOpenAIがChatGPTのコンテキストウィンドウを拡大し、より長く一貫性のある会話が可能になりました。今週、私はGPT-4を使ってiOSアプリを書き、デバッグし、公開することに成功しました。

 

GPTを使ってアプリケーションを作成する方法：

  • 1.Chatにアプリのアーキテクチャを定義させる
  • 2.Chatに各ビューの基本バージョンを書かせる
  • 3.すべてをまとめて実行し、エラーがあればChatに修正させる
  • 4.動作するアプリができたら、機能を追加する

 

まず、アーキテクチャを定義します。

GPTを創造的なパートナーとして使うことは、人間と協力するのとほぼ同じです。まず、高いレベルで何をしているのかを理解する必要があります。人間の開発者にアプリを作ってもらう場合、どこから始めるか考えてみてください。恐らく、コアフローをホワイトボードに描き出し、必要なビューや状態を考えるでしょう。これが、GPTでアプリを構築するための正しい出発点です。 

 

ここから始めました：

「あなたは超ベテランのアプリ開発者です。シンプルで楽しい朝のルーチンチェックリストをユーザーに提供するシンプルなiOSアプリの理想的なアーキテクチャを説明してください。リストが毎日完了すると、背景に太陽が昇ります。リストが完了した後、ホームスクリーンのウィジェットに太陽が表示されます。このアプリを一緒に作りたいので、それを実現するための最適なアーキテクチャを教えてください！」

最初の回答はそれほど役に立ちませんでしたが、それは大丈夫です。今はコンテキストを構築しているだけです。

GPTに実際のコードを書いてもらいたいので、具体的に要求し、ステップバイステップで考えます。

「インターフェースのコーディング方法について詳しく説明しましょう。できるだけ具体的に、ステップバイステップで考えてください。」

ここで進展がありました。書く必要があるコードの異なる部分を説明し、いくつかのサンプルを提供しました。

ファイルツリーの概要を求めます。

アプリとその部分について説明し、具体的な内容に入ったので、少し引いてファイル構造の適切な概要を提供します。GPTはすでに各部分を説明しているので、そのコンテキストを使用して正確に回答できます。

「このアプリのファイルツリーを描いてください。必要なファイルと、各ファイルの機能の概要は何ですか？必要であれば擬似コードを使用してください。」

3a8dc906a0807d1bfbe05571f74076ba.png

d9d66ff6db96ba773a9311876e0c07b5.png

さて、本格的に始めましょう。

最初のファイルをさらに詳しく説明します。

「「Models/Task.swift」について詳しく説明しましょう：タスクファイルのデータ構造を定義します。完全なファイルを書き、タスクのサブテキストフィールドと絵文字のフィールドを含めてください。」

710787e8ef8b60a679bbd3782ef15ebd.png

このアプローチは、あなたが作成しようとしているものを知っている場合にのみ機能します。その後、GPTを反復的にガイドして、アプリの各部分の詳細を詰めていきます。このアプローチを使用して、アプリの各ファイルを書くことができます。GPTは会話のコンテキスト（高レベルのアプリ構築プロセスとアーキテクチャ）を持っているため、一度に一つのファイルの機能するアプリケーションコードを書くことができます。進行中に、各ファイルをプロジェクトに貼り付けていきます。

数分で、基本的な動作バージョンができあがります。

しかし、理解できないエラーが発生した場合は以下の通りになります。

エラーに遭遇した場合は、エラーを引き起こしているコードと正確なエラーメッセージをGPTに入力します。

57874cbba9c53bc9c8ae1bf5d97dacf3.png

    GPTが救助に来ます！

この方法でうまくいくコツは、作成/テストを続けることです。多くのGPTコードを書いて、それが機能することを期待しないでください。変更する「もの」が引き続き機能することを確認し、疑問がある場合は、手順に従って一歩一歩戻ってください。反復的に進めると、うまくいき、今日からシンプルなアプリの構築を始めることができます。

機能を追加しましょう。

動作するアプリができたら、機能を追加できます。新しい機能を明確に述べると、その新機能を実装する方法についての提案が得られます。それらが適度なサイズであれば、うまくいきます。たくさんのクールなものを追加して、夢の小さなアプリを作りましょう。

3837aa6f5ce7089bac97a85327d422d2.png

成功状態を追加する

 

6a8916756439862cf12f4fbcb667711e.png

ハプティックフィードバックケアを追加する

これだけで実装が可能です。

この経験を経て良かった点としては、SwiftUIとその動作についてかなり学んだことです。デザイナーはコードを書くべきでしょうか。。。しかし、少なくとも私たちは使用する素材についての知識が必要です。今、SwiftUIの動作をよりよく理解しているので（Reactのサイクルにとても似ていると感じております。）、より良い体験をデザインし、開発パートナーとの言語をより質の高いコミュニケーションをとることが可能となりました。