Zenn
🤩

【初心者必見】Swiftチュートリアル問題集

2024/11/24に公開
SwiftUI
チュートリアル
state
modifier
spacer
tech

なぜチュートリアル？

HTML,CSS,Javascript,Php,Python,Nuxt,Next,Angulerと色々な言語のプロジェクトを渡り歩いてきた僕が初めてチュートリアルなるものをやってみました。

いつも新しい言語に挑む時は、既存のプロジェクトのコードを読んで、実際に開発しながら覚えていくことが多い（実践あるのみ）です！

ですが、今回は初期開発！既存プロジェクトがない。。。未知の世界。。。

そこで、Appleが用意してくれている。「Develop in Swiftチュートリアル "基礎"」をやってみようということです。


https://developer.apple.com/jp/learn/

問題のご紹介

そこで今回の記事に書くのは、チュートリアルの中で出てくる問題です。
これを全て正解できるのであれば、きっとチュートリアルをする必要はありません。

Hello, SwiftUI

Swiftで書かれた言語を表現するデータ型は何ですか？

  1. Text
  2. Writing
  3. String

答えは、3です。String は、Swiftで書かれた言語を表現するためのデータ型です。とのこと、問題の意味があまり分かりませんが分かろうとすると、きっとここのことです。

ビューの背景を拡張する修飾子の順序はどれですか？

余白部分にも背景を入れたい場合どちらを選ぶか？という問題です。

1
MyView
    .padding(...)
    .background(...)
2
MyView
    .background(...)
    .padding(...)

もちろん、1です。
ここが面白いところです。CSSとは違い指定したスタイルの順番により挙動が変わってきます。

関連するデータを提供するために、中括弧 { } の間に引数を記述します。

  1. True
  2. False

こちらも、1です。引数は、丸括弧 ( ) の間に記述します。

中括弧 { } は、コンテナを作成するために使用します。例えば、body や VStack の中で使用されます。

Customize views with properties

次のビューのインスタンスを作成するコードは何ですか？

問題
struct PersonAvatar: View {
    let name: String
    let imageName: String
    let color: Color
    
    var body: some View {
        ...
    }
}
1
PersonAvatar()
2
PersonAvatar(name: "Antonio", imageName: "AntonioSmiling.png", color: Color.green)
3
PersonAvatar("Antonio", "AntonioSmiling.jpg", Color.green)

答えは、2となります。構造体のインスタンスを作成する際は、各プロパティに対応する引数を渡します。
Pythonだったりも引数名を指定することが可能だと思いますが、どちらでも許容だったかと思います。Swiftは、絶対に指定する必要があります。

プロパティは、他のデータに基づいて値を変更することができます。

  1. False
  2. True

答えは、2です。計算プロパティを使用して、他のプロパティから値を導き出します。

答え
import SwiftUI


struct ContentView: View {
    var body: some View {
        HStack {
            DayForecast(day: "Mon", isRainy: false, high: 70, low: 50)       
+            DayForecast(day: "Tue", isRainy: true, high: 60, low: 40)
        }
    }
}


#Preview {
    ContentView()
}


struct DayForecast: View {
    let day: String
    let isRainy: Bool
    let high: Int
    let low: Int
    
+    var iconName: String {
+        if isRainy {
+            return "cloud.rain.fill"
+        } else {
+            return "sun.max.fill"
+        }
+    }
    
+    var iconColor: Color {
+        if isRainy {
+            return Color.blue
+        } else {
+            return Color.yellow
+        }
+    }
    
    var body: some View {
        VStack {
            Text(day)
            Image(systemName: iconName)
+                .foregroundStyle(iconColor)
            Text("High: \(high)")
            Text("Low: \(low)")
        }
        .padding()
    }
}

以下、添付画像のような表示になります。isRainyの真偽値によって、画像と色を変更することができます。

文字列に値をどのように挿入しますか？

1
"My friend \(friendName) is \(age) years old."
2
"My friend \friendName is \age years old."
3
"My friend (friendName) is (age) years old."

これは、1です！
() エスケープシーケンスを使用すると、その中に記述された内容の値を文字列に挿入することができます。

この書き方は、初めてです。
PHPは

php
$friendName = "Alice";
$age = 25;
$message = "My friend $friendName is $age years old.";

だったり、pythonは、

python
friend_name = "Alice"
age = 25
message = f"My friend {friend_name} is {age} years old."

です。

似ているとえば似ている。

Design an interface

ビューのサイズを調べるための良い方法は何ですか？

  1. ZStack
  2. SizeInspector
  3. .border

正解は、3です。

このように分かりやすいです。確認したい時は、一度やってみると開発がスムーズに進みます！

スペーサー（Spacer）は、他のコンテンツをどの方向に押し広げますか？

  1. 親スタックの方向に沿った方向。
  2. 親スタックの方向に対して垂直な方向。

こちらは、1です。スペーサーは、親のスタックの方向に沿って広がります。

無限の高さを持つフレームをどのように作成しますか？

  1. Use the .infiniteHeightFrame modifier.
  2. Use the .frame modifier with a maxHeight argument of .infinity.
  3. Use the .frame modifier with a height argument of .maximum.

答えは、2です.

.frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:) モディファイアを使用すると、必要に応じて引数を選択することで、さまざまな種類の柔軟なフレームを作成できます。

Update the UI with state

ビューの状態に関する正しい記述を選択してください。

  1. SwiftUIは、@State プロパティの値が変更されるとビューを自動的に更新します。
  2. @State プロパティには public キーワードを付けます。
  3. ビューの @State プロパティの値は、ビューの外部から変更できます。

これは、1です。@State プロパティは、ビューをSwiftUIの状態管理システムに接続します。

struct CounterView: View {
    @State private var count = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1 // 状態が変化するとビューが再レンダリングされる
            }
        }
    }
}

このように、@State プロパティを使うことで、状態とビューを密接に連携させることが可能になります。

正しいButtonコードを選択してください。

Button("Increment Counter") (
    counterValue += 1
)

Button("Increment Counter") {
    counterValue += 1
}

Button("Increment Counter")
    .action {
        counterValue += 1
    }

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
まだまだチュートリアルはあるのですが、今回はここまで。（都度更新していきます！）

チュートリアルを通じて得たもの

初めて挑戦したSwiftのチュートリアルは、これまで実践のみで学んできた私にとって新鮮な体験でした。

ただ、チュートリアルの問題に正解することだけがゴールではありません。
むしろ、試行錯誤を通じて「なぜその書き方が必要なのか」「どのような考え方がベースになっているのか」を体感できるのが、最大の収穫です。

新しい視点や発見が次々と得られるプロセスは、とても刺激的で楽しいものです。これからも、初心に戻ることを恐れず、より深い理解を追求していきたいと思います。

Swiftに興味がある方や、新しい言語を始めてみたい方に、ぜひこの「Develop in Swift チュートリアル」をおすすめします。あなたの開発スキルに新たな風を吹き込むきっかけになるかもしれません。


https://developer.apple.com/jp/learn/

次は、実際のプロジェクトにどう応用するか。また新しい挑戦の中で、さらなる学びを見つけていきます！

Discussion