Zenn
😎

【Day3】SwiftUIで画面構成とリスト表示をマスター！修飾子や構造も整理した日

に公開
SwiftUI
iosアプリ開発初心者
apple公式チュートリアル
文系からのエンジニア転身
やすの開発ログ
tech

はじめに

こんにちは、やすです🙋‍♂️
完全初心者からiOSアプリ開発を始めて3日目。
今日は本気で集中して、SwiftUIの セクション1とセクション2 を一気にやり切りました🔥

UIの基本構成から、リスト・画面遷移の仕組みまで、いよいよ「アプリらしさ」が出てきてテンション上がってます！

今日やったこと（ざっくり）

  • Apple公式チュートリアル セクション1・2 完了
  • .foregroundColor, .font, .padding などの修飾子の役割を理解
  • SwiftUI Inspector の使い方を実践（Inheritedに戻すやつ）
  • List, NavigationLink, ForEach を使ったリスト＋画面遷移の構造を把握
  • コードを写経してXcodeで動作確認
  • ノートに構造図をまとめて視覚的にも整理！

修飾子の使い方でハマったこと

Text("Turtle Rock")
    .font(.title)
    .foregroundcolor(.green) // ❌

はい、やらかしました（笑）
foregroundColor の Cを小文字にしてて、以下のエラー：

Value of type 'Text' has no member 'foregroundcolor'
Cannot infer contextual base in reference to member 'green'

スペルミスが原因だったのに、Xcodeが違う方向のエラーを出してくるからめっちゃ混乱しました…。
SwiftUIは キャメルケース（大文字小文字）に超厳しい ってこと、しっかり刻みました🙇‍♂️

SwiftUI Inspectorの仕組みに感動した話

初めて Control＋クリック → Show SwiftUI Inspector を使って、
Textの文字色をマウス操作で「Inherited（親ビューの色）」に戻す体験をしました。

すると、コード上の .foregroundColor(.green) が自動で削除 された！

SwiftUIでは「コードが真実（source of truth）」って教えが本当なんだな〜と実感。

UIKitのStoryboard時代とは真逆で、コードと見た目が完全に連動してるのが新鮮でした🧠

@main → App → Scene → WindowGroup → ContentView の構造

紙ノートにも図解しましたが、SwiftUIアプリの起点はこの流れ：

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

この構造がちゃんと頭に入ったことで、今後の画面遷移もめちゃくちゃ理解しやすくなりそうです。

List, NavigationLink, ForEach の連携

セクション2では、以下のコードで一覧表示と画面遷移を実装👇

List(landmarks) { landmark in
    NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
        LandmarkRow(landmark: landmark)
    }
}
  • List：データの一覧を表示
  • ForEach：配列をループして行を生成
  • NavigationLink：タップで詳細画面に遷移

なるほど、これが「画面遷移の基本」なんだなっていうのが体感でわかりました。

学んだことまとめ ✅

  • SwiftUIでは コードがUIの唯一の真実（＝見た目変えたらコードも更新される）
  • 修飾子は構文をしっかり覚えないとエラーになる
  • 一覧表示と画面遷移の組み合わせ（List＋NavigationLink＋ForEach）は基本パターン！

おわりに

今日はがっつり学習できて、正直かなり疲れたけど、
「アプリの画面構成ってこういう流れで作るんだな〜」って、かなり大きな理解が得られた日でした。

この調子でセクション3・4も突っ走っていきます！💨
明日は @State と TextField が出てくるので、いよいよ“ユーザー入力”に踏み込んでいくぞー！

使用環境

  • MacBook Air M1（メモリ8GB／SSD 256GB）
  • Xcode 15
  • SwiftUI 5（Xcodeのバージョンに準ずる）

タグ

#SwiftUI #iOSアプリ開発初心者 #Apple公式チュートリアル #文系からのエンジニア転身 #やすの開発ログ

Discussion