Code Along：Xcode 26でコーディングインテリジェンスを試す

みなさん、こんにちは。 私はジェロームと申します。Appleの プロダクトマネージャーを務めております。 今日は、楽しいことをやってみましょう。 Xcodeとそのコーディング支援ツールを 活用して、 アイデアを完全に機能する アプリに仕上げていきます。 ご存じない方もいらっしゃるかもしれませんが、 Xcodeはデベロッパが Appleのすべてのプラットフォーム向けに アプリを構築するためのツールです。 Xcodeには、プレビュー機能など、 誰でもアイデアを形にできる強力な機能が 搭載されています。これにより、 変更内容をリアルタイムで確認できます。 シミュレータを使えば、 さまざまなAppleデバイスやOSの バージョンをシミュレートできます。 実機が利用できない場合でも、 高度なデバッグツールを使って バグを特定し、クラッシュの原因を突き止め、 ボトルネックを特定できます。 また、Instrumentsのような ツールを使えば、 リアルタイムのインサイトを得て、スムーズで レスポンスの良い体験を提供できます。 そして今、コーディングインテリジェンスが 標準搭載されたことで、 学習、実験、そして創作がこれまで 以上に簡単になりました。 Xcodeを離れることなく、 ChatGPTやクラウドなどの モデルを利用できます。 さあ、一緒に何かを作ってみましょう。 準備はよろしいですか？ 素晴らしいアプリは、 小さなひらめきから始まります。 そのひらめきは、誰からでも生まれるものです。 アプリに関するアイデアがあります。 それについてお話しさせてください。 私たちはいつも、ちょっとした 発見の瞬間を探していますよね？ もし毎日が小さな冒険、 つまり「マイクロアドベンチャー」 に満ちていたらどうでしょう？ エベレストに登れと言っている わけではありません。 例えば、ずっと行ってみたかった あの美術館に行ってみたり、 行ったことのない公園を探索したり、 ありふれた日常の中に、 特別な何かを見つけること。

そのためのアプリを作りたいと思っています。 まずはデザインをスケッチし、

それをKeynoteに取り込んで、 インターフェースの各要素に 詳細な名前を付けました。 この計画のおかげで、自分が作りたいものを 正確に定義することができました。

また、コーディングアシスタントから 最高の結果を引き出すために、 5つのプロンプト（ 指示）を慎重に作成しました。 これについては、後ほど詳しく説明します。

さて、一緒に進めていくために、 説明欄にあるこれらのプロンプトへの リンクを必ず確認してください。 そうすれば、プロンプトを探しながら、 ご自身のプロジェクトでそれらを活用できます。 プロンプトエンジニアリングについて、私が 学んだことをお伝えしましょう。 モデルに「何を作りたいか」 を伝えること自体が、一つのスキルなのです。

重要なポイントは、具体的にすることです。 チームメイトに指示を出すように、自分が 何を望んでいるかを正確に伝えてください。 また、使用したいコンポーネントの正確な名前が 分かっている場合は、なお良いでしょう。

さらに、文脈も伝えてください。 アプリがどのような機能を持つのか、 あるいはどのような問題を解決するのかを 説明してください。 アプリの見た目に影響を与えそうな要素も 盛り込み、試行錯誤を繰り返してください。 プロンプトのさまざまなバージョンを 試してみてください。 また、コーディングアシスタントを 活用して、プロンプトの作成や 改善を行うことも可能です。 さらには、アプリの新しい機能についてブレインストーミングを 行うのにも活用できます。 プロンプトエンジニアリングには、 コーディングと同様に、 まだまだ多くの要素があります。 同じことを達成する 方法はいくつかありますので、 最初はプロンプトで 思い通りの結果が得られなくても、 落胆しないでください。

それでは、私のアプリの構築を始めましょう。 Xcodeで新しいiOSプロジェクトを 作成し、 Coding Assistantを 設定していきます。

それでは、Xcodeに切り替えて、 新しいiOSプロジェクトを作成しましょう。 Xcodeを開き、「新しいプロジェクトを 作成」をクリックします。

新しいプロジェクトのテンプレートとして 「iOS」を選択します。 アプリケーションの種類で「アプリ」を選択し、 「次へ」をクリックします。

製品名には「Micro Adventures」 と入力します。

組織識別子には「com. myfictitiousorganization」と 入力し、 その他のオプションは デフォルト値のままにします。 「次へ」をクリックし、 「作成」をクリックして プロジェクトをデスクトップに保存します。

これで、左側にプロジェクトナビゲータパネル、 中央にコードが表示されたソースエディタ、 右側にライブプレビューが表示された、 デフォルトの「Hello World」 プロジェクトが完成しました。

ここでは、見やすくするために ミニマップをオフにし、

Xcodeを全画面表示にします。

次に、「Coding Intelligence」 を設定する必要があります。 「Coding Intelligence」パネルを 開くには、 ナビゲーターの左上にある スパークルのアイコンをクリックするか、 Command + 0 キーを押して 開いたり閉じたりします。

「セットアップ」をクリックして、 インテリジェンスの設定画面を開きます。

ChatGPTやCodeWhereなど、 利用可能なモデルを有効にしたり、 お好みの別のモデルを使用したりすることが できます。 本日はChatGPTを使用しますので、 「有効にする」をクリックします。 このパネルには、ChatGPTに 関する詳細情報が表示されています。

次に「次へ」をクリックすると、アカウントを 使用してChatGPTを利用するか、 アカウントなしで利用するかを選択する 画面が表示されます。 今回のチュートリアルでは、 特定のアカウントを使用せずに進めます。

設定ウィンドウを閉じて、 コーディングアシスタントを使い始めましょう。 コーディングアシスタントでは、 Natural Languageを使って モデルと対話することができます。 さて、準備はすべて整いました。 iOS Xcodeプロジェクトと、ChatGPTを 使用するように 設定されたコーディングアシスタントが 用意されています。 それでは、コーディングアシスタントとの 会話を始め、何を作れるか、 その過程から何を学べるかを探ってみましょう。

では、最初のプロンプトとして、 まずは背景情報を提供します。 「ちょっとしたマイクロアドベンチャーのアイデアを 提案するアプリ」を作成しています。 次に、インターフェースの 要素について説明します。 まず、「Micro Adventures」 という大きなナビゲーションタイトルを追加し、 マーカーを中心とした フルスクリーンの地図を追加してください。

例えば、ナビゲーションタイトルや マーカーを使用することで、 具体的に指定しているのです。 それでは、ウェブページから 最初のプロンプトをコピーします。

Xcodeに切り替えます。

チャットに貼り付け、 リターンキーを押して プロンプトを送信し、応答を待ちます。 ここでいくつかのヒントをご紹介します。 生成された応答をしっかりと 読むことが非常に重要です。 提案された変更点ごとに、プロジェクトに 追加されたコードスニペットとともに 説明が提供されていることにご注目ください。 コードスニペットをクリックすると、 エディタ上でその部分が ハイライト表示されます。 これは、内部で何が起きている かを理解するのに最適な方法です。

さあ、これをご覧ください。 タイトルと、冒険の場所を示す マーカー付きの地図が表示されています。 アプリの開発を続けましょう。

上部のツールバーに、カテゴリや難易度を絞り 込むためのフィルターボタンを追加し、 「すべて選択」のオプションも設定します。 繰り返しになりますが、私は上部ツールバーと 希望するフィルターについて非常に

具体的な要件を持っていますので、 プロンプトを確認します。 プロンプト番号2をコピーし、

Xcodeに戻って貼り付け、 リターンキーを押して送信します。 なお、コーディングアシスタントは、 同じプロンプトを実行するたびに、 結果が若干異なる 場合がある点にご注意ください。 例えば、インターフェースの レイアウトや機能がわずかに 異なる場合があります。 しかし、常に開発の基盤となる確かな出発点が 得られます。

これで完了です。指定したフィルターを含む ビューを表示するボタンができました。 さっそくテストしてみましょう。

素晴らしいですね。問題なさそうです。

なお、モデルが時折誤りを生じることが ありますが、ご安心ください。 コーディングアシスタントが自動的に 修正してくれます。 その方法をご説明しましょう。

ここで括弧を1つ削除してみますと、 すぐにエラーが表示されます。 赤い「×」マークをクリックし、 「エラーの修正を生成」を選択します。 コーディングアシスタントが修正を開始します。 また、「fix all issues」と入力して、 モデルに直接指示を出すことも可能です。

それでは、3つ目のプロンプトに進みましょう。 これは重要なポイントです。 手順をご説明いたします。 タイトルオーバーレイの下に、 カテゴリピルと難易度ピルが付いた フローティング情報カードを表示します。 左上には太字のアドベンチャータイトル。 アドベンチャーの説明とステータスボタン。 右下には、アドベンチャーが 未完了かどうかを示す表示。

かなり詳細ですね。

プロンプト画面に戻り、 3番目のプロンプトをコピーします。 Xcodeに戻って、送信します。

さらにいくつかのヒントをご紹介します。 「selectビューの背景色を変更する」 や「10行目から20行目まで のコードを説明する」といった プロンプトを使用できます。 また、モデルの応答をより的確に 誘導するために、プロジェクト内の特定のクラスや ファイルを参照することもできます。 「1つ選ぶ」という文字を入力すると、 コーディングアシスタントがプロンプトと 一緒に読み上げてくれます。

Xcodeに戻ります。これで、冒険に 関する必要な詳細がすべて 記載された情報カードが完成しました。 「完了」ボタンが機能するかどうか 確認してみましょう。 冒険が完了したかどうかが 表示されるはずですが、うまくいっていますね。 次は、プロンプト4番です。 これは短いプロンプトです。 「次の冒険」という大きなボタンを、 マップの下部に浮かぶように追加してください。 プロンプト4をコピーします。 Xcodeに切り替えて、処理を実行します。

これはすぐに終わるはずです。 ボタンを作成するよう依頼しているだけで、 その機能については明示的に指定していません。 少し時間を取って、生成された 内容を読み、理解しましょう。

返答を読み通し、 「次の冒険」ボタンに関連する コードスニペットを見つけます。 こちらです。 それをクリックして、ソースエディタ内の コードをハイライト表示します。 ボタンのアクションは、 実際のアクションではなく、 ToDoコメントとして設定されています。 だからこそ、すべてを結びつけて アプリを動作させるために、 プロンプト5が必要なのです。 タイトルや説明など、 アドベンチャーに必要なモデル、 サンプルデータ、接続を作成してください。 アドベンチャーに不可欠だと思う 情報を、一つひとつ詳細に リストアップします。

プロンプト5を作成し、 コーディングアシスタントに送信します。 もし結果が思っていた通りでない場合は、 繰り返し試行することを忘れないでください。 プロンプトを微調整して、 もう一度試してみてください。 また、トピックを整理するために 新しい会話を開始したり、 コーディングアシスタントパネルの上部中央にある ピッカーを使って 以前の会話を呼び出したりすることもできます。

さて、「次のアドベンチャー」 ボタンをクリックしたとき以外は、 インターフェースに変化が見られないはずです。 そうすれば、新しいアドベンチャーが 表示されるはずです。 ほら、魔法のように！ アプリが完成しました。 最初はスケッチとアイデアから始めました。 今では、実際に動作するアプリができました。 あと少し調整を加えれば、 公開できる状態になるでしょう。 素晴らしいですよね？ 皆さんの側でどのような結果が 出ているのか、ぜひ見てみたいです。 このアプリの開発を続けて、 機能を追加し、自分だけのものに磨き上げ、 楽しんでいただければと思います。 さて、お別れする前に、もう一つ 試してみる価値のあるアプローチがあります。

もし、もっと視覚的なアプローチを 取りたい場合はどうでしょうか？ 画像から始めて、そこから プロンプトを作成することはできるでしょうか？ もちろんです。「添付の画像と、 以前作成したこの図に基づいて、 マクロアドベンチャーアプリを作成してください」 というプロンプトを作成できます。 このスケッチを入手するには、 プロンプトが掲載されている ウェブページにアクセスしてください。 ページを下にスクロールして パート2まで進み、プロンプトをコピーして、 画像をダウンロードフォルダに 保存してください。 そこで、「My Adventures」という 名前の新しいiOSプロジェクトを作成し、 保存してからコーディングアシスタントを 開きます。

プロンプトを取得し、それをコピーして コーディングアシスタントに貼り付けます。

次に、チャットウィンドウの左下にある クリップのアイコンをクリックし、 「ファイルのアップロード」を選択します。

「Sketch Micro Adventure. png」というファイルを探して選択します。 「開く」ボタンをクリックして テキストプロンプトに追加し、 Returnキーを押して プロンプト全体を送信します。 CloudやChatGPTのようなモデルは、 ドキュメント、画像、コードなど、最も 一般的なファイル形式の多くを処理することが できます。 これには少し時間がかかるかもしれません。 モデルは画像の構造を分析し、 アプリ全体のコードを生成する必要があります。 以前のように一歩ずつ進める必要はありません。 そういえば、先ほど行った5つの手順は、 まとめて貼り付けることも可能です。 モデルはチャット内でより長い プロンプトにも対応可能ですし、 構造が整っていて整理されている と処理がスムーズになります。

さあ、できました。私のものは完成し、 スケッチした内容とほぼ同じ仕上がりです。 素晴らしいですね。次のステップは、 アプリの機能をテストし、 希望通りの動作と外観になるまで プロンプトを繰り返し入力していくことです。 これで「コード・アロング」は終了です。 コンセプトから始め、 いくつかのプロンプトを考え出し、 最終的に完全に機能するアプリが完成しました。 これを可能にしている のが、コーディングアシスタントです。 1つの場所で、探索、 プロトタイプ作成、学習、そしてアイデアの 実現まで、すべてを行うことができます。

さらに、Xcodeには、 素晴らしいアプリを作る お手伝いをする機能が他にもたくさんあります。 アプリドキュメントやPlaygroundなどでの 予測コード補完機能などです。 ご参加いただき、ありがとうございました。 さあ、次は皆さんの番です。 素晴らしいものをぜひ作ってみてください。