ChatGPTでiPhoneアプリを作る方法｜初心者向けにXcode導入から徹底解説

【デスカレーあるある】

デス福神漬けが付いてくる

はじめに

こんにちはこんばんは雨崎です。
みなさんご機嫌いかがでしょうか。

私は現在、ソファと同化し切っているところです。

ChatGPTでiPhoneアプリを作る方法

アプリ作りの大部分を占めるのは、アプリを構成するコードを入力する部分です。

そして、それはプログラミング初心者にとって難し過ぎるもの。

はい、私も試しましたがいけます。

実際にApp Storeで公開するところまで到達出来ました。機能も大量、デザインもスマートです。

というわけでこの記事では、

ChatGPTだけを使って、本当に何も分からないところからアプリを作る方法を解説していきます。

あと、記事の途中にちょいちょいネタツイが発作的に組み込まれますが、「今そんなんええから」という方はフル無視していただいて構いません。

---

↑こんなやつです　無視していただいて支障ありません

準備するもの

とりあえずこれらがあれば始められます。

実際のiPhoneも後で使いますが、最初から必須ではありません。Macの中で、仮想のiPhoneを起動できるためです。

つまり、Mac一台あれば作れる。

①MacでChatGPTを開く

まずChatGPTをMacで開きます。

アプリ開発では、

ChatGPTでコードを作る
↓
Xcodeへ貼る
↓
動かす
↓
ChatGPTへ戻る

という作業を何度も繰り返します。

そのため、Mac上でChatGPTとXcodeを両方開いておくのがおすすめです。

②アプリ開発用のChatGPTプロジェクトを作る

これは必須ではありませんが、長期間アプリを作るなら、ChatGPTの「プロジェクト」を作っておくと便利です。

ChatGPT左側の、サイドバーを開きます。

そこにある、「新しいプロジェクト」を押します。

名前は、iPhoneアプリ開発などでOK。

作成したら、今後のアプリ開発は基本的にこのプロジェクト内でChatGPTと話します。

③作りたいアプリをChatGPTに伝える

まず、何を作りたいのかを伝えます。

例えば、

iPhoneアプリを作りたいです。

下には、

・ホーム
・記事
・ツール
・マイページ

という4つのメニューを置きたいです。

ホームにはおすすめ情報を表示。

記事画面では記事一覧を表示。

マイページにはログイン機能を付けたいです。

私はプログラミング初心者です。

こんな感じで送ります。

④ChatGPTに開発ルールを伝える

次に、以下のような文章を送っておきます。

私はプログラミング初心者なので、
一工程ずつ進めてください。

以下のルールでお願いします。

・一度に大量の機能を追加しない
・新しいファイルが必要ならファイル名を教える
・コードを出す場合は、どのファイルのコードなのか明記する
・初心者でも分かるように、どこへコードを入れるのか説明する
・正常に動いている部分は勝手に変更しない
・エラーが出た場合は、まず原因を特定する
・必要な場合はコード全文を出す
・セキュリティ上危険な実装は避ける

最終的にはApp Storeへ公開できるアプリを作ります。

これでChatGPT側の準備は一旦終了です。

次は、実際にiPhoneアプリを作るためのXcodeを用意します。

⑤Mac App StoreからXcodeを入れる

Macで、App Storeを開きます。

左上の検索欄を押して、Xcodeと入力。

Xcodeが表示されたら、「入手」または「インストール」を押します。

Xcodeは、iPhoneアプリを作るためのアプリです。

Xcodeの中で、

・コードを書く
・画像を入れる
・アプリを動かす
・エラーを確認する
・実際のiPhoneへ入れる

などを行います。

⑥Xcodeを起動する

Xcodeをインストールしたら、Xcodeを起動します。

初めて起動した場合は、iPhoneアプリを作るための開発環境を追加します。

①「iOS」を選択
↓
②「Download & Install」を押す
↓
③インストールが終わるまで待つ

これで準備完了です。

インストールが終わったら、「Create New Project」を押して次へ進みます。

⑦新しいiPhoneアプリを作る

先ほどの、「Create New Project」を押した後、何向けのアプリを作るのかを選ぶ画面が開きます。

画面上部にある「iOS」を押します。

次に、画面中央に並んでいる中から「App」を押します。

Appが選択された状態になったら、画面右下の「Next」を押します。

これで次の設定画面へ進みます。

⑧アプリの基本設定を入力する

Product Name

一番上付近の、「Product Name」を押します。

ここに、作るアプリの名前を入力します。練習なら、MyFirstAppなどでOK。

実際に作りたいアプリ名が決まっているなら、その名前を入力します。

Team

その下にある、「Team」を押します。

自分のApple Accountが表示されていれば、自分のTeamを選びます。

なお、最初にMac上の仮想iPhoneで動かすだけなら、ここは後で設定しても構いません。

Organization Identifier

次に、「Organization Identifier」の入力欄を押します。

例えば、com.yournameのような文字を入れます。

これは、アプリを作った人や組織を識別するための文字くらいに考えておけばOKです。

Bundle Identifier

Product NameとOrganization Identifierを入力すると、Bundle Identifierが自動で作られます。

例えば、

Organization Identifier：com.yourname

Product Name：MyFirstApp

なら、

com.yourname.MyFirstApp

のようになります。

これは、Appleがアプリを識別するための固有IDです。

後でApp Storeへ出す時にも使います。

Interface

次に、「Interface」を押して、

SwiftUIを選びます。

Language

次に、「Language」を押して、Swiftを選びます。

Testing System

「Testing System」がある場合は、Noneを選びます。

Storage

「Storage」がある場合も、最初はNoneを選びます。

全部入力したら「Next」

ここまで設定したら、画面右下の「Next」

を押します。

⑨アプリの保存場所を決める

次に、Macのどこへアプリを保存するかを選ぶ画面が出ます。

例えば、書類など分かりやすい場所を選びます。

保存場所を決めたら、画面右下の「Create」を押します。

これで新しいiPhoneアプリが作られます。

---

⑩Xcodeの開発画面が開く

Createを押すと、Xcodeの大きな開発画面が開きます。

ここからが、普段アプリを作る時に使う画面です。

左側を見ると、ファイルがいくつか並んでいます。

これらにコードを入力することで、

アプリの各ページや

・画像
・色
・アプリアイコン

を自由にコントロールできます。

⑪何も変更せず一度アプリを起動する

まず、今のまま正常に動くか確認します。

iPhoneを選ぶ

Xcode画面上部に、実行する端末を選ぶ部分があるので、そこを押します。

一覧から、iPhoneのSimulatorを一台選びます。

例えば、「iPhone 17」など。機種は何でも構いません。

▶︎を押す

端末を選んだらXcode画面上部にある、

▶︎

を押します。

Command＋R でもOKです。

すると、アプリのビルドが始まります。

⑫仮想iPhoneが起動する

少し待つと、Mac上にiPhoneの画面が出てきます。これがSimulatorです。

その中で、先ほど作ったアプリが起動します。

エラーが出ず、アプリ画面が表示されれば成功です。

そして、この時点で動いているということは、Xcodeと作ったプロジェクトは正常と分かります。

したがって、この後ChatGPTのコードを入れて壊れた場合、追加したコードに原因があると判断できます。

⑬ChatGPTにコードを書いてもらう

さあ、ここからはChatGPTの出番。

自分のイメージするアプリをざっくり文章化して、

〜〜……、こういうアプリを作っていきたいです。

なので、その完成に向けて必要なコードの全文を送ってください。

とGPTに送ります。

⑮ChatGPTからコードを受け取る

例えば、以下のようなコードが返ってきます。

import SwiftUI

struct ContentView: View {
    @State private var count = 0

    var body: some View {
        VStack(spacing: 20) {
            Text("はじめてのiPhoneアプリ")
                .font(.title2)
                .bold()

            Text("\(count)")
                .font(.largeTitle)

            Button("押してください") {
                count += 1
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

例えば「今回のコードはContentView.swift用だ」とGPTに言われて送られてきたとします。

⑯ChatGPTのコードをXcodeへ入れる

Xcodeへ戻ります。

左側にある、「ContentView.swift」を押します。

すると、中央にコードが表示されます。

現在のコードを全部選ぶ

コード部分を一度クリック。

Command＋Aを押します。現在のContentView.swiftが全部選択されます。

ChatGPTのコードを貼る

そのまま、ChatGPTからコピーしたコードを、Command＋Vで貼ります。

そして、Command＋Sで保存します。

⑰もう一度アプリを動かす

Xcode上部の、

▶︎

を押します。

なお、エラーが出る場合は、その画面を撮影して、現在入っているコードと共にGPTに送ると良いでしょう。

修正されたコードを送ってくれるはずです。

今後も赤いエラーが出てビルドが出来ない場合が多々発生するので、この方法で進めていくのが良いかと思います。

つまり、

①必要コードを送ってもらう

②指定されたフォルダにコピペ

③ビルドを行い、成功したら①に戻る。失敗したら、その写真を撮影してGPTに送り、コードを修正してもらう

今後は基本的にこれを繰り返し、全文や一部を差し替えていくだけで、アプリの完成に辿り着きます。

ここからは細かい注意点。