【SwiftUI】modifierを活用して自己紹介カードのアプリを作る

このChapterのゴール

自分の名前や趣味を表示する、簡単な自己紹介カードを作ること

学べること

• modifier（モディファイア）を使って文字の色やサイズ、背景のデザインを調整する方法を学べる

達成までのステップ

• 基本のViewを準備
• modifierでレイアウトを整える
• modifierでデザインを調整する

基本のViewを準備

前回のChapterでもやったように、VStackを使って縦にTextを並べます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("こんにちは！")
            Text("私は山田太郎です")
            Text("🎵 趣味：音楽を聴くこと 🎵")
            Text("SwiftUIを使って、いろんなアプリを作ってみたいです！")
        }
    }
}

modifierでレイアウトを整える

次にViewに余白を追加してレイアウトを整えていきます。
まずは見よう見まねで、先ほどのコードに変更を加えてみましょう！

VStack(spacing: 20) { // 修正を加える
    Text("こんにちは！")
    Text("私は山田太郎です")
    Text("🎵 趣味：音楽を聴くこと 🎵")
    Text("SwiftUIを使って、いろんなアプリを作ってみたいです！")
}
.padding(24) // 修正を加える

• VStack(spacing: 20)：各テキストの間に20ポイントの余白を与える
• .padding(24)：全体に余白に24pt分余白を与える

modifierについて

ここで.padding(24)というものがmodifierです。
modifierは、Viewの見た目や動きを変えるための機能です。

以下のようにViewの下に繋げるように記述していきます。

View
   .modifier1
   .modifier2
   .modifier3

記述した順番で変更が反映されるため、それぞれのmodifierが何をしているのかを一つずつ理解しながら使うことが大切です。

今回出てきた.padding()はViewの周りに余白を与える役割を持ちます。
.padding(24)と具体的な数値を指定することで指定したサイズ分だけ余白を与えることができます。

今の変更だと少し変化がわかりづらいと思うので、次に進んで少しずつ慣れていきましょう！

modifierでデザインを調整する

次はオシャレに仕上げるようにデザインを調整してみましょう。

立体感のあるグラデーション背景を追加

まずは.backgroundのmodifierを追加しましょう。

VStack(spacing: 20) {
    Text("こんにちは！")
    Text("私は山田太郎です")
    Text("🎵 趣味：音楽を聴くこと 🎵")
    Text("SwiftUIを使って、いろんなアプリを作ってみたいです！")
}
.padding(24)
.background(
    LinearGradient(
        gradient: Gradient(colors: [Color.blue, Color.purple]),
        startPoint: .top, endPoint: .bottom
    )
)

.backgroundは、背景の色やデザインを変更できるmodifierです。
その中で使えるLinearGradientは、複数の色をグラデーションで滑らかに表示するためのビューです。

LinearGradientは今のところ完璧に理解しようとしなくても大丈夫です。「こんなふうに書くんだ」と覚えておけば十分です！

さらに、全体に角を丸めたり、影を追加して立体感を持たせます。
.backgroundのmodifierの下に続けて、以下のコードを追加しましょう。

.cornerRadius(20) // ビューの角を丸くする。半径10ポイントの丸みをつける。
.padding(16) // 余白を追加
.shadow(radius: 10) // ビューに影を追加

以下のようになればOKです！

ここまでの全体のコード

struct ContentView: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("こんにちは！")
            Text("私は山田太郎です")
            Text("🎵 趣味：音楽を聴くこと 🎵")
            Text("SwiftUIを使って、いろんなアプリを作ってみたいです！")
        }
        .padding(24)
        .background(
            LinearGradient(
                gradient: Gradient(colors: [Color.blue, Color.purple]),
                startPoint: .top, endPoint: .bottom
            )
        )
        .cornerRadius(20)
        .padding(16)
        .shadow(radius: 10)
    }
}

テキストのフォントサイズや色を変更

今のままでは少し暗い雰囲気に感じるので、テキストの見た目を変えていきましょう。

Textに以下のmodifierを追加します。

Text("こんにちは！")
    .font(.title)             // テキストの大きさを指定
    .fontWeight(.bold)        // 太字などのスタイルを指定
    .foregroundColor(.white)  // テキストの色を変更

こうするとTextの見た目が変わりました。

続けて他のTextも修正してみましょう。

Text("私は山田太郎です")
    .font(.largeTitle)
    .fontWeight(.bold)
    .foregroundColor(.white)

趣味は少し見た目を変えて強調します。

Text("🎵 趣味：音楽を聴くこと 🎵")
    .font(.title2)
    .padding(16)
    .background(Color.white.opacity(0.2))
    .cornerRadius(10)   // ビューの角を丸くする。半径10ポイントの丸みをつける。
    .foregroundColor(.white)

Text("SwiftUIを使って、いろんなアプリを作ってみたいです！")
    .font(.body)
    .multilineTextAlignment(.center)　// テキストを中央に寄せる
    .padding(16)
    .foregroundColor(.white)

以下のように表示できればこのChapterはゴールです🚩

全体のコード

struct ContentView: View {
    var body: some View {
        VStack(spacing: 24) {
            Text("こんにちは！")
                .font(.title)
                .fontWeight(.bold)
                .foregroundColor(.white)
            
            Text("私は山田太郎です")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.white)

            Text("🎵 趣味：音楽を聴くこと 🎵")
                .font(.title2)
                .padding(16)
                .background(Color.white.opacity(0.2))
                .cornerRadius(10)
                .foregroundColor(.white)

            Text("SwiftUIを使って、いろんなアプリを作ってみたいです！")
                .font(.body)
                .multilineTextAlignment(.center)
                .padding(16)
                .foregroundColor(.white)
        }
        .padding(24)
        .background(
            LinearGradient(
                gradient: Gradient(colors: [Color.blue, Color.purple]),
                startPoint: .top, endPoint: .bottom
            )
        )
        .cornerRadius(20)
        .padding(16)
        .shadow(radius: 10)
    }
}