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

【デスカレーあるある】

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

はじめに

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

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

ChatGPTでiPhoneアプリを作る方法

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

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

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

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

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

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

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

---

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

準備するもの

・Mac
・インターネット環境
・Apple Account
・ChatGPT
・Xcode

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

実際の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に送り、コードを修正してもらう

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

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

新しい画面が必要な場合

なお、ChatGPTから、HomeView.swiftを新しく作るように言われた場合。

Xcode画面一番上から、

File
↓
New
↓
File…

を押します。

次に、SwiftUI Viewを選びます。

Nextを押します。

名前を、HomeViewと入力。

Createを押します。

すると、Xcode左側に、HomeView.swiftが追加されます。

あとはそのファイルを押して、ChatGPTからもらったHomeView.swiftのコードを入れます。

こまめにバックアップをとる

正常に動いた区切りでは、バックアップを取ります。

簡単な方法なら、MacのFinderから、アプリのプロジェクトフォルダを丸ごとコピーします。

例えば、MyFirstApp-backup-01など。

見た目がおかしい場合

エラーはない。

でも、

・ボタンがズレている
・文字が切れている
・画像が大きい
・余白がおかしい

という場合。

画面のスクリーンショットをChatGPTへ送ります。

例えば、

現在この表示になっています。

添付した画像を確認してください。

下のボタンだけ位置がおかしいです。

他のデザインには触れず、
このボタンの位置だけ直してください。

現在のコードは以下です。

（コード全文）

という感じでいきます。

WordPressと連携する場合

自前のサイトをベースにしたアプリを作る場合、デザインはアプリで詰めていくとして、

「サイトとアプリで記事データを共有するために、プラグインを作ってください」と言ってください。

というか、困ったらプラグインを作ってもらうのが便利かなと思います。

例えば、記事の装飾をアプリに反映させたい、と言えば、そういうプラグインやコードを生成してくれます。

⑱ある程度できたら実際のiPhoneへ入れる

Simulatorでアプリがある程度完成したら、実際のiPhoneで動かします。

MacとiPhoneを接続する

MacとiPhoneを、USBケーブルで接続します。

iPhone側に、「このコンピュータを信頼しますか？」と出たら、「信頼」を押します。

XcodeへApple Accountを登録する

Mac画面上部から、

Xcode
↓
Settings…
↓
Apple Accounts

を開きます。

自分のApple Accountを追加します。

Xcodeで実機用の設定をする

Xcode左側の一番上付近にある、青いアプリアイコンを押します。

中央に設定画面が開きます。

左側の、TARGETSから、自分のアプリ名を押します。

次に、画面上部の、Signing & Capabilitiesを押します。

Automatically manage signingにチェック。

その下のTeamから、自分のTeamを選びます。

iPhoneのデベロッパモードをONにする

iPhoneで、

設定
↓
プライバシーとセキュリティ
↓
デベロッパモード

を開きます。

デベロッパモードをONにします。

再起動を求められたら、iPhoneを再起動します。

Xcodeから実際のiPhoneを選ぶ

Xcode画面上部にある、今までSimulatorを選んでいた部分を押します。

一覧から、自分のiPhoneを選びます。

そして、

▶︎

を押します。

正常にビルドされれば、

自分のiPhoneに、自分で作ったアプリが入ります。

⑲実機で動かして確認する

実際のiPhoneでは、

・画面サイズ
・キーボード
・スクロール
・画像
・動画
・通信
・ログイン
・保存

などを確認します。

Simulatorで正常でも、実機ではおかしいということもあります。

問題があれば、

スクリーンショット
＋
現在のコード
＋
Xcodeのエラー

をChatGPTへ送って修正。

そして、またiPhoneへ入れて確認。

ChatGPTを使ったiPhoneアプリ開発の流れ：まとめ

最後にまとめ。

ChatGPTを開く
↓
作りたいアプリを伝える
↓
Xcodeをインストール
↓
Xcodeを起動
↓
iOSをインストール
↓
Create New Project
↓
iOSを押す
↓
Appを押す
↓
Next
↓
Product Nameなどを設定
↓
全部設定したらNext
↓
保存場所を選ぶ
↓
Create
↓
Xcodeの開発画面が開く
↓
Simulatorを選ぶ
↓
▶︎を押す
↓
初期アプリが動くことを確認
↓
ChatGPTにコードを書いてもらう
↓
▶︎で確認
↓
エラーが出たらChatGPTへ送る
↓
正常に動いたら次へ
↓
必要ならWordPressなどと接続
↓
実際のiPhoneへ入れる
↓
実機で確認
↓
問題があれば修正
↓
アプリ完成！！！

という流れです。

プログラミング初心者でもできる？

実際にやった立場から言えば、

できます。

作る
↓
分からない
↓
GPTに聞く
↓
覚える
↓
また作る

で良いです。

アプリが完成したら次はApp Store公開

アプリ本体が完成したら、

次は、

・Apple Developer Program
・App Store Connect
・アプリアイコン
・スクリーンショット
・プライバシー設定
・TestFlight
・Archive
・App Review

などを設定して、

App Storeへ提出します。

この部分については、

「個人でiPhoneアプリを作ってApp Storeに公開するまでの全手順」

で詳しくまとめていきます。