tenonekoAIのてならい帖
はじめての人へ

画面を作る｜SwiftUI の部品・プレビュー・Claude Code への頼み方と、iPhone での確かめ方

コース5 iPhoneアプリ編 3 / 6・読む時間 約9分・最終確認日

このレッスンの要点

  • SwiftUI の画面は、文字・画像・ボタン・一覧などの部品を、縦や横に重ねて作ります
  • Xcode のプレビュー（キャンバス）を開いておくと、Claude Code が書いた画面を、アプリ全体を動かさずに見られます
  • 自分の iPhone で動かすには、Xcode でアカウントと署名を設定し、iPhone のデベロッパモードをオンにします

画面は部品の組み合わせ

では、文字・画像・ボタン・一覧などの部品を、縦や横に重ねて画面を作ります。部品の色や大きさ、すき間は「修飾（モディファイア）」で変えます。

部品画面のどこになるか
Text文字（題名・説明・日付）
Image画像・アイコン
Button押すと何かが起きるところ
List同じ形の行がならぶ一覧
VStack・HStack部品を縦（V）・横（H）にならべる箱
名前を覚えなくても大丈夫。Claude Code に頼むときは「上に」「横にならべて」と、位置で伝えます。

プレビュー（キャンバス）で見ながら直す

画面のファイルに #Preview という数行をつけておくと、Xcode の右側の「キャンバス」に、その画面が出ます。キャンバスが見えないときは、ツールバーの右上の Show Canvas を押します。

Xcode の画面（イラスト）
コードVStackText("今日の記録")List
今日の記録
10月26日　散歩 20分
10月25日　読書 30分
← キャンバス（プレビュー）
左にコード、右にその画面。Claude Code がファイルを変えると、プレビューも変わります。

プレビューには、本物のデータの代わりに見本のデータを渡せます。保存のしくみ（レッスン4）がまだなくても、見た目を先に決められます。

Claude Code には1画面ずつ頼む

画面は1つずつ作ってもらい、プレビューで見てから次に進みます。新しい画面を作る前は、プランモード（コース2のレッスン6）で「どのファイルを作るか」を先に見せてもらうと安心です。

Claude Code
最初の画面を作って。見た目だけ。プレビューもつけて
一覧の画面を作り、見本のデータ3件でプレビューを用意しました。
一覧の文字を少し大きく。ほかは変えないで
一覧の行の文字だけ大きくしました。
「ほかは変えないで」を添えると、思わぬところが変わるのを防げます。

自分の iPhone で動かす

画面ができてきたら、本物の iPhone でも確かめます。では、iPhone の速さや機能がすべて同じになるわけではないからです。

1Xcode > Settings の Apple Accounts でサインイン
2Signing & Capabilities で Set Up Signing を押して Team を選ぶ（ボタンがなければ Automatically manage signing をオン）
3行き先のメニューの Manage Devices → Device Hub で iPhone とペアリング
4iPhone のデベロッパモードをオンにして、Run
はじめての1回だけ手間がかかります。2回目からは、行き先で iPhone を選んで Run するだけ。（イラスト）

サインインは、Apple Developer Program のアカウントでも、個人の Apple Account でもできます。署名（アプリに「だれが作ったか」の印をつけること）は、Signing & Capabilities のタブで設定します。Set Up Signing のボタンが出ていたら押し、Team とバンドル ID を確かめて Set Up を押します。ボタンが出ていなければ、Automatically manage signing をオンにして Team を選びます。あとは Xcode がやってくれます。

Manage Devices を押すと、Device Hub という画面が開きます。ここで、iPhone をこの Mac とつないで使えるように登録（ペアリング）します。

iPhone の側では、設定の「プライバシーとセキュリティ」でデベロッパモードをオンにします。この項目は、Xcode で iPhone とのペアリングを始めたあとに出てきます。見つからないときは、先にペアリングをしてください。オンにすると再起動を求められ、再起動のあとにもう1回確認とパスコードの入力があります。デベロッパモードは Xcode から入れるときのためのもので、App Store や TestFlight からアプリを入れるのには関係ありません。

よくある勘違い

「全部の画面をまとめて頼めば早い」わけではありません

5つの画面を1回で作ってもらう
どこかでエラーが出たとき、どの画面のどこが原因かを探すのが大変になります
1画面ずつ作って、プレビューで見てから次へ
見て「ここをこう変えて」と言えるので、思った画面に近づきやすくなります

やってみよう

  1. レッスン1で決めた最初の版の画面を、紙に1つずつ描きます（四角と文字だけでよい）
  2. 1つ目の画面を、下の依頼文で Claude Code に作ってもらいます
  3. Xcode でそのファイルを開き、Show Canvas でプレビューを出して見た目を確かめます
  4. 直したいところを「〇〇を△△にして」と1つずつ頼みます
  5. iPhone をつないで署名を設定し、実機でも動かします
1画面ずつ作ってもらう依頼文（Claude Code に）最初の画面を作って。上にアプリの名前、その下に今日の日付、まん中に記録の一覧（いまは見本のデータを3件）、右上に「追加」のボタン。まだ保存はしないで、見た目だけ。プレビュー（#Preview）もつけて。新しく作ったファイルの名前を最後に教えて
見た目を直してもらう依頼文（Claude Code に）プレビューで見ました。一覧の文字を少し大きく、行と行の間を広くして。ほかのところは変えないで

確認問題

Q1. Xcode で、書いた画面をアプリ全体を動かさずに見られるのは？
Q2. 自分の iPhone で Xcode からアプリを動かすとき、iPhone の側で必要な設定は？
今日の練習

紙に描いた画面と、プレビューの画面をならべて、ちがうところを3つ書き出してみましょう。それが次の依頼文になります。

前のレッスン
2. Xcode と SwiftUI のはじめ方

この記事の用語

コース5 iPhoneアプリ編の目次

  1. 1iPhoneアプリができるまでの全体図
  2. 2Xcode と SwiftUI のはじめ方
  3. 3画面を作る
  4. 4データを保存する
  5. 5TestFlight で試してもらう
  6. 6審査に出して配信する