<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p data-line="1" class="code-line">こんにちは、daywizの<a href="https://x.com/shintaro_aw" target="_blank" rel="nofollow noopener noreferrer">𝙨𝙝𝙞𝙣𝙩𝙖𝙧𝙤</a>です。</p>
<p data-line="3" class="code-line">こちらは、<a href="https://qiita.com/advent-calendar/2024/swiftui" target="_blank" rel="nofollow noopener noreferrer">SwiftUI Advent Calendar 2024</a> 22日目の記事です。</p>
<p data-line="5" class="code-line">2024年は本業が忙しくてなかなか開発が進まず...と、2023年と同じことを言っている気がしてハッとしました。</p>
<p data-line="7" class="code-line">そこで、ChatGPT(生成AI)を使えば、もっと気軽にiOSアプリ作れるのでは？と思ったので、少し齧った生成AIの知識を駆使しながら、iOSアプリを開発してみました。</p>
<p data-line="9" class="code-line">ちゃんと実機で動かせるまでになり、個人的には満足しております。<br>
せっかくなので、ログを遡りながら、どんな感じで作成したかを共有し、みなさんにも気軽にアプリ開発に勤しんでいただければと思います！</p>
<h1 id="%E6%A6%82%E8%A6%81" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h1>
<h2 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA" data-line="13" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%A2%E3%83%97%E3%83%AA" aria-hidden="true"></a> 作ったアプリ</h2>
<ul data-line="14" class="code-line">
<li data-line="14" class="code-line">場所に関する単語を入力すると、その場所に関する情報を返してくれるチャットボットみたいなアプリ</li>
</ul>
<h3 id="%E4%BD%9C%E3%82%8D%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF" data-line="16" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%82%8D%E3%81%86%E3%81%A8%E6%80%9D%E3%81%A3%E3%81%9F%E7%B5%8C%E7%B7%AF" aria-hidden="true"></a> 作ろうと思った経緯</h3>
<p data-line="17" class="code-line">旅の記録ができるアプリを作ろうと思ったとき、人が思う場所の情報をどうデータ化するかって意外と難しくない？と思ったからです。<br>
LLMならよしなにしてくれるかな、と思ってはいたんですが、LLM使わなくてもできるのでは？と思ったので考えてみました。</p>
<h1 id="%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%84%E3%82%8A%E3%81%A8%E3%82%8A" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E9%9A%9B%E3%81%AE%E3%82%84%E3%82%8A%E3%81%A8%E3%82%8A" aria-hidden="true"></a> 実際のやりとり</h1>
<h2 id="1.-%E3%81%BE%E3%81%9A%E3%81%AF%E8%A8%AD%E5%AE%9A%E3%82%84%E7%9B%AE%E6%A8%99%E3%82%92%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%A7%E4%BC%9D%E3%81%88%E3%82%8B" data-line="21" class="code-line">
<a class="header-anchor-link" href="#1.-%E3%81%BE%E3%81%9A%E3%81%AF%E8%A8%AD%E5%AE%9A%E3%82%84%E7%9B%AE%E6%A8%99%E3%82%92%E3%83%97%E3%83%AD%E3%83%B3%E3%83%97%E3%83%88%E3%81%A7%E4%BC%9D%E3%81%88%E3%82%8B" aria-hidden="true"></a> 1. まずは設定や目標をプロンプトで伝える</h2>
<p data-line="23" class="code-line">では、さっそくプロンプトです。ChatGPTの有料版を使っている点はご了承ください。<br>
Swift CopilotというGPTsを使わせていただいています。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">プロンプト</span></div>
<pre><code class="code-line" data-line="26">あなたはSwiftを使ってアプリを開発するエンジニアです。私はアプリを実際に開発する後輩エンジニアです。
XCodeでアプリを作成するための手順をステップバイステップで1つ解決するごとに次の手順を教えるようにしてください。
なるべく役割ごとにファイルを分割し、1ファイルが大きくならないようにしてください。
エラーが発生したり、改善したい場合は私がコメントするので、①その原因、②コードの修正点、③修正対象のファイル全量を示してください。

- SMS風のチャット形式の画面で、場所に関する単語を入力、送信するとその位置情報をApple Mapの地図オブジェクトで表示するアプリ
- 地図オブジェクトを表示しつつ、国・都市・地域・地名・郵便番号をメッセージで表示する
  - 「大阪」とまでしか入力されない場合は、都市としての「大阪府」と地域としての「大阪市」があるが、より大きな都市「大阪府」として判定して地域・地名・郵便番号は表示しない
  - 地名に郵便番号が複数存在する場合は、郵便番号は表示しない
- 対象はiOS18です。
- SwiftUIを使ってください。
- Apple Mapオブジェクトを押下されたら、Apple Mapに遷移するようにしてください。
</code></pre>
</div><p data-line="41" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/4ff9fd22ec07-20241220.png" alt="最初の応答" loading="lazy" class="md-img"></p>
<p data-line="43" class="code-line">こんな感じで返してくれました。</p>
<p data-line="45" class="code-line">「とりあえずコード書いてみて」とか発するハズレガチャ上司とは偉い違いですね←</p>
<p data-line="47" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/9abc32bd21ca-20241221.png" loading="lazy" class="md-img"></p>
<p data-line="49" class="code-line">あっという間にシミュレータにチャットアプリ風のUIが実現できました！ここまで5分！笑</p>
<h2 id="2.-%E5%87%BA%E5%8A%9B%E3%81%95%E3%82%8C%E3%81%9F%E5%86%85%E5%AE%B9%E3%81%AB%E5%BE%93%E3%81%A3%E3%81%A6%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E4%BD%9C%E6%88%90%E3%83%BB%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%A6%E3%81%84%E3%81%8F" data-line="51" class="code-line">
<a class="header-anchor-link" href="#2.-%E5%87%BA%E5%8A%9B%E3%81%95%E3%82%8C%E3%81%9F%E5%86%85%E5%AE%B9%E3%81%AB%E5%BE%93%E3%81%A3%E3%81%A6%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E4%BD%9C%E6%88%90%E3%83%BB%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%A6%E3%81%84%E3%81%8F" aria-hidden="true"></a> 2. 出力された内容に従ってコードを作成・更新していく</h2>
<h3 id="(1)-%E7%84%A1%E4%BA%8B%E3%81%AB%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%9F%E3%82%89%E3%80%81swift-copilot%E3%81%AB%E5%A0%B1%E5%91%8A" data-line="52" class="code-line">
<a class="header-anchor-link" href="#(1)-%E7%84%A1%E4%BA%8B%E3%81%AB%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%81%9F%E3%82%89%E3%80%81swift-copilot%E3%81%AB%E5%A0%B1%E5%91%8A" aria-hidden="true"></a> (1)　無事に実行できたら、Swift Copilotに報告</h3>
<p data-line="53" class="code-line">うまくいったら、それをSwift Copilotに報告して次のステップに進みます。</p>
<p data-line="55" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/fb751e73d158-20241221.png" loading="lazy" class="md-img"></p>
<p data-line="57" class="code-line">なんだか公式のチュートリアルをやるより手厚い感じがするのでめっちゃありがたい...</p>
<h3 id="(2)-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%9F%E3%81%A8%E3%81%8D%E3%82%82%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%81%9E%E3%81%8F" data-line="59" class="code-line">
<a class="header-anchor-link" href="#(2)-%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%9F%E3%81%A8%E3%81%8D%E3%82%82%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E8%81%9E%E3%81%8F" aria-hidden="true"></a> (2) コードでエラーが表示されたときもとりあえず聞く</h3>
<p data-line="60" class="code-line">言われた通り作ったのに、エラーが表示されてしまう...なんてこともありますよね。</p>
<p data-line="62" class="code-line">そんなときでも大丈夫、Swift Copilotならね。</p>
<p data-line="64" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/ab604bb79d6e-20241221.png" loading="lazy" class="md-img"></p>
<p data-line="66" class="code-line">相談すると、原因を示してくれた上で対策を出力してくれます。</p>
<p data-line="68" class="code-line">個人的にはここで少し自分なりに考えて、「あ、やっぱりそれか」みたいにワンクッション踏めるようになると、エンジニアとしても成長できると思います！</p>
<h3 id="(3)-%E5%B7%AE%E5%88%86%E3%81%A0%E3%81%91%E3%81%98%E3%82%83%E3%81%AA%E3%81%8F%E3%80%81%E5%85%A8%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BB%E3%81%97%E3%81%84%E5%A0%B4%E5%90%88" data-line="70" class="code-line">
<a class="header-anchor-link" href="#(3)-%E5%B7%AE%E5%88%86%E3%81%A0%E3%81%91%E3%81%98%E3%82%83%E3%81%AA%E3%81%8F%E3%80%81%E5%85%A8%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BB%E3%81%97%E3%81%84%E5%A0%B4%E5%90%88" aria-hidden="true"></a> (3) 差分だけじゃなく、全コードがわかるようにしてほしい場合</h3>
<p data-line="71" class="code-line">コードは差分で出してもらうようにお願いしているので、特定のファイルについて全ステップのコードを見たい場合はお願いしてみましょう。</p>
<p data-line="73" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/48f41af4e9f7-20241221.png" loading="lazy" class="md-img"></p>
<p data-line="75" class="code-line">ぐちゃぐちゃになったらコピペすれば、OK！<br>
気軽にコードを弄ることができます！</p>
<h2 id="3.-%E7%94%9F%E6%88%90%E3%81%97%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A7%A3%E8%AA%AC%E3%81%97%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" data-line="78" class="code-line">
<a class="header-anchor-link" href="#3.-%E7%94%9F%E6%88%90%E3%81%97%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E8%A7%A3%E8%AA%AC%E3%81%97%E3%81%A6%E3%82%82%E3%82%89%E3%81%86" aria-hidden="true"></a> 3. 生成したコードについて解説してもらう</h2>
<p data-line="80" class="code-line">エンジニアの先輩役をお願いしているので、わからないところは聞いてみましょう。</p>
<p data-line="82" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/ff8db6c5058d-20241221.png" loading="lazy" class="md-img"></p>
<p data-line="84" class="code-line">何度アホな質問をしても、嫌がらずに丁寧に教えてくれます。</p>
<p data-line="86" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/fe4556b22ff3-20241221.png" loading="lazy" class="md-img"></p>
<p data-line="88" class="code-line">せっかくアプリをつくるなら、わからないところは聞きつつ、理解を深めてエンジニアとしても成長したいですよね！</p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB" data-line="90" class="code-line">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p data-line="91" class="code-line">ChatGPTをはじめとした生成AIは、本当に画期的なツールだと思います。</p>
<p data-line="93" class="code-line">どう使うかわからないとなかなか手を出すのが億劫ですが、せっかくなので2025年、使いだしてみようかな？と思う人が少しでも増えたらいいな、と思います。</p>
<p data-line="95" class="code-line">さぁ、素敵なSwift開発ライフを！</p>


【Swift/生成AI】Swift Copilotを使ってiOSアプリを開発してみる

1. まずは設定や目標をプロンプトで伝える

(1)　無事に実行できたら、Swift Copilotに報告

(2) コードでエラーが表示されたときもとりあえず聞く

(3) 差分だけじゃなく、全コードがわかるようにしてほしい場合

Discussion