前提

SwiftUiの公式チュートリアルが英語版しかなく、ブラウザの翻訳機能を使っても解読が困難だったため作成。
(あと公式サイトのチュートリアルがわかりづらい)

そこそこ長い内容になってますのでご注意くださいm(_ _)m

注意事項

エンジニア初心者のため書き場違いが起こるかもしれません。
それでもいいよって方のみ読み進めてください。

環境

OSバージョン : Ventura 13.0.1
Xcode : 14.2

手順

セクション1 : プロジェクトを作成してUIを変更してみる

手順1

Xcodeを開き、[Create a new Xcode project]を押下して新規プロジェクトを作成する

手順2

[iOS]タブのApplication欄[App]を選択して[Next]を押す

手順3

プロジェクト名を入力して、[Next]ボタンを押下する
　その後、プロジェクトを好きな場所に保存する

プロジェクト保存後は以下のようになっていた。
　

画面右のiPhoneの画面が表示されていない場合は[Editor]の[Canbas]を押すことで表示されるようになる。

手順4

画面左のプロジェクトナビゲータ(プロジェクトエクスプローラ)から[LandmarksApp]を開く

LandmarksApp.swift

import SwiftUI

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

bodyプロパティは画面に表示するための1個以上のシーン※1 を返す。
@main 属性が付与されているとそこがアプリのエントリーポイントになる。
※1 : 画面のこと

手順5

プロジェクトナビゲータから[ContentView]を開く
　

画面右にiPhoneの画面が表示されており、表示されている内容のソースが画面に表示されている。

手順6

VStack{}ブロックを削除して、新たにText("Hello SwiftUI!")を記述する
　コードを変更するとiPhoneの画面が変わり、**Hello SwiftUI!**が表示される

セクション2 : コードを変更したりインスペクタを使ってビューの表示を変更してみる。

手順1

プレビュー画面左下のマウスカーソルボタンを押してSelectableモードにする。
　Selectable状態になるとインスペクタが利用可能になる。

手順2

プレビュー画面のHello SwiftUI!を command + クリック する
　　ポップアップが表示されるので、[Show SwiftUI Inspector...]を押す。

表示されたポップアップからTextをTurtle Rockに変更
FontをInheritedからTitleに変更する
ColorをGreenに変更する
(左側のコードも変更されます)

手順3

プレビュー画面左下の再生？ボタンを押してLiveモードに戻しておく

セクション3 : タイトル以外の情報を追加してみる

手順1

ContentViewファイルのText("Turtle Rock")となっている箇所をcmd + クリックをし、ポップアップから[Embed in VStack]を押す。

以下のようにTextブロックがVStackで囲われるはず

ContentView.swift

// ~~省略~~
var body: some View {
    VStack {
        Text("Turtle Rock")
            .font(.title)
            .foregroundColor(Color.green)
        .padding()
    }
}
// ~~省略~~

手順2

XCode右上の[+]ボタンを押下し、表示されたウィンドウからTextを選択する.
選択したTextを元あるTextブロックの真下に配置する。

以下のように新たにTextが挿入される

ContentView.swift

// ~~省略~~
var body: some View {
   VStack {
       Text("Turtle Rock")
           .font(.title)
           .foregroundColor(Color.green)
       Text("Placeholder")
   }
}
// ~~省略~~

手順3

追加したTextの内容を変更して、フォントのスタイルを.subheadline(小見出し)に設定する。

ContentView.swift

var body: some View {
   VStack {
       Text("Turtle Rock")
           .font(.title)
           .foregroundColor(Color.green)
       Text("Joshua Tree National Park")
           .font(.subheadline)
   }
}

追加後はタイトルの下に小見出し行が追加されている。

手順4

先ほど追加したVStackをVStack(alignment: .leading)に変更し、左寄せにする

ContentView.swift

var body: some View {
    VStack(alignment: .leading){
        Text("Turtle Rock")
            .font(.title)
            .foregroundColor(Color.green)
        Text("Joshua Tree National Park")
            .font(.subheadline)
    }
}

手順5

3の手順で追加したTextブロックをHStackブロックで囲って、Textを追加する

ContentView.swift

var body: some View {
    VStack(alignment: .leading) {
        Text("Turtle Rock")
            .font(.title)
        HStack {   // 追加
            Text("Joshua Tree National Park")
                .font(.subheadline)
            Text("California") // 追加
                .font(.subheadline)
        }
    }
}

[変更後画面]

手順6

Spacer()を追加して画面幅いっぱいに文字列を表示し、padding()を追加して余白をつける

ContentView.swift

var body: some View {
    VStack(alignment: .leading) {
        Text("Turtle Rock")
            .font(.title)
        HStack {
            Text("Joshua Tree National Park")
                .font(.subheadline)
            Spacer() // 追加
            Text("California")
                .font(.subheadline)
        }
    }
    .padding()

}

[変更後画面]

セクション4 画面に画像を追加する

手順1

SwiftUIのチュートリアルページからダウンロードしたプロジェクトファイルのturtlerock@2x.jpgをAssetsにドラッグ&ドロップする。

※画像をダウンロードしていない方は以下の画像を保存して利用してください。

手順2

[File > New > SwiftUI View] を選択し、CircleImage.swiftとしてファイルを作成する。

手順3

作成したファイルのコードを変更し、先ほどAsettsに追加した画像を表示させる。

CircleImage.swift

struct CircleImage: View {
    var body: some View {
        Image("turtlerock") // 変更
    }
}

個人で用意した画像を利用している方は、Image()の引数に先ほどAssetsに追加した際の名称を記載する。

[変更後画面]

手順3

コードを追加し、画像を丸く切り取る。

CircleImage

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle()) // 追加
    }
}

[変更後画面]

※もし個人で用意した画像を利用していて、サイズが表示サイズがおかしくなっている場合は以下のようにすることで同じ状態になるはず。

struct CircleImage: View {
    var body: some View {
        Image("original_image")
            .resizable()    // 追加
            .scaledToFit()  // 追加
            .clipShape(Circle())
    }
}

手順4

丸くした画像にスタイルの設定をする。

CircleImage.swift

var body: some View {
    Image("turtlerock")
        .clipShape(Circle())
        .overlay {                                 // 追加 
            Circle().stroke(.white, lineWidth: 4)  // 追加  外枠を追加
        }                                          // 追加      
        .shadow(radius: 7)                         // 追加  影を追加
}

[変更後画面]

セクション5 他のフレームワーク(MapKit)を利用する。

手順1

新たにファイルを作成する。
ファイル名はMapView.swiftとする。
手順については、セクション4の手順２を参照

手順2

MapKitをimportし、利用可能な状態にする。

MapView.swift

import SwiftUI
import MapKit // 追加

struct MapView: View {
// ~~省略~~

手順3

マップの初期位置を設定し、画面に表示する。
(私の環境ではここだけうまくいかず、独自で解決してみたためうまくいかない方は公式のSection5 step3を試してみてください)

MapView.swift

struct MapView: View {
    var body: some View {
        Map(coordinateRegion: .constant(region))
    }
}

// ここから下を追加
private var region: MKCoordinateRegion {
    MKCoordinateRegion(
        center: CLLocationCoordinate2D(
            latitude: 34.011_286, longitude: -116.166_868),
            span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )
}

[解説]

MKCoordinateRegion ...地図の表示領域を定義するクラス。
CLLocationCoordinate2D...中心座標を緯度経度を指定して定義してます。
MKCoordinateSpan...表示する範囲を指定してます。

手順4

先ほど定義した地図の情報を用いて画面に表示する。
(ここも私の環境ではうまくいかなかったので、うまくいかない方は公式のSeciton5 step4を試してください

MapView

struct MapView: View {
    var body: some View {
        Map(coordinateRegion: .constant(region)) // 変更
    }
}

うまくいくと以下のようになります。

[変更後画面]

セクション6 これまで作ったコンポーネントを合体させる

手順1

少し前まで作成していたContentView.swiftを開く

手順2

VStackブロックを追加する。

ContentView.swift

struct ContentView: View {
    var body: some View {
        VStack{  // 追加
            VStack(alignment: .leading){
                Text("Turtle Rock")
                    .font(.title)
                    .foregroundColor(Color.green)
                HStack{
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }    // 追加
    }
}

手順3

先ほど作成したMapViewを利用する。

ContentView.swift

struct ContentView: View {
    var body: some View {
        VStack{
            MapView() // 追加
                .frame(height: 300) // 追加
            VStack(alignment: .leading){
                Text("Turtle Rock")
                    .font(.title)
                    .foregroundColor(Color.green)
                HStack{
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

[追加後画面]

手順4

次にイメージ画像を追加する。

ContentView.swift

struct ContentView: View {
    var body: some View {
        VStack{
            MapView()
                .frame(height: 300)
            
            CircleImage()
            
            VStack(alignment: .leading){
                Text("Turtle Rock")
                    .font(.title)
                    .foregroundColor(Color.green)
                HStack{
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

[追加後画面]

手順5

スタイルを追加し、レイアウトを調整する。

ContentView.swift

struct ContentView: View {
    var body: some View {
        VStack{
            MapView()
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)        // 追加
                .padding(.bottom, -130) // 追加
            
//     ~~ 省略 ~~
}

[追加後画面]

手順6

画面下に説明を記載する余白を作成する。

ContentView.swift

// ~~ 省略 ~~
        }
    }
    .padding()
    
    Spacer() // 追加
}

[追加後画面]
追加すると画面下あたりに空白が生まれる。

手順7

先ほど作成した余白に説明を記載する。

ContentView.swift

struct ContentView: View {
    var body: some View {
        VStack{
            MapView()
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading){
                Text("Turtle Rock")
                    .font(.title)
                    .foregroundColor(Color.green)
                HStack{
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                
                Divider() // 追加 (区切り線を引く)
                
                Text("About Turtle Rock")           // 追加
                    .font(.title2)                  // 追加    
                Text("Descriptive text goes here.") // 追加
            }
            .padding()
            
            Spacer()
        }
    }
}

[追加後画面]

手順8

HStack内のTextに直接付与していたスタイルをHStack自体に付与する。

ContentView.swift

struct ContentView: View {
    var body: some View {
        VStack{
            MapView()
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack(alignment: .leading){
                Text("Turtle Rock")
                    .font(.title)
                    .foregroundColor(Color.green)
                HStack{
                    Text("Joshua Tree National Park")
                        .font(.subheadline)   // 削除する
                    Spacer()
                    Text("California")
                        .foregroundStyle(.secondary)  // 削除する
                }
                .font(.subheadline)          // 追加
                .foregroundStyle(.secondary) // 追加
                
                Divider()
                
                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()
            
            Spacer()
        }
    }
}

[!!!!!!完成!!!!!!!]

ここまでがチュートリアルに記載されている内容になっております。

さいごに

長い記事でしたが読んでいただきありがとうございました。
今後趣味で何か作ってみたいですね