【ミニアプリを作って楽しく学ぶSwift】 愚痴を思う存分に吐き出すためのアプリを作ろう

ミニアプリを作って楽しく学ぶSwift入門 第5回

　Swiftは、Appleが開発したプログラミング言語でiPhoneやiPad、MacやApple Watch、最近ではApple Vision ProなどさまざまなApple製品向けのアプリ開発に使われています。この連載では、面白いミニアプリを作りながらSwiftでのアプリ開発を学んでいきます。今回は、 愚痴を吐き出すためのアプリです。

はじめに

　前回は、アプリ「やるのかやらないのかコイントス」アプリを作りました。コイントスで即決できるようになったでしょうか？ 私は決断に迷ったらいつも助けてもらっています。

　アプリ作成の第3弾は「愚っ痴る - ここが私の愚痴を吐き出す場所」を作ります。人間生きていれば、愚痴りたい時だってあります。人目を気にせず、思い切って愚痴ることができる場所があればいいなと思ったことはありませんか？今回はそんなあなただけの愚痴る場所を作っていきましょう！

開発環境

　この連載では、次の環境を使用しています。

• macOS Sequoia 15.1
• Xcode 16.1

プロジェクトの立ち上げる

　今回も前回と同じように、作ったプロジェクトの中に新規ファイルを作成して進めていきます。それでは、Xcodeからプロジェクトを開いて、アプリ作りを進めていきましょう。

アプリ 「愚っ痴る - ここが私の愚痴を吐き出す場所」を作る

ファイルを新規作成

　愚っ痴る用のコードを記述するためにファイルを新規作成します。

1. Xcode上部メニューバーからFile＞New＞File from Template…を選択します。

   

2. テンプレートを選択する画面が表示されます。①プラットフォームはiOSを選択し、User Interface下の②SwiftUI Viewを選択、③Nextを押します。

   

3. 保存先を選択する画面では、④のファイル名にComplaintViewを入力し、⑤の項目が同様の値になっていることを確認し、⑥Createを押します。

   

4. 作成が完了すると、Xcodeのナビゲーターエリアに作成したComplaintView.swiftファイルが表示されます。

   

5. 変数bodyのコードを以下のコード^[1]に書き換えて下さい。
6. 次のようなプレビューが表示されます。

   

[1] 置き換えるコード

import SwiftUI
struct ComplaintView: View {
    var body: some View {
        VStack {
            Text("Good Chill")
            .font(.system(size: 56))
            .fontWeight(.black)
            .foregroundStyle(.red)
           
            
            Button(action: {
                // ボタン押下時の処理
            }, label: {
                Text("愚痴る")
                    .font(.largeTitle)
            })
        }
    }
}

Viewを横に並べる

　Viewを横に並べるには、HStackを使用します。すでに学んでいるVStackと使い方は同じです。Text(“Good Chill”)を二つのTextに分解して、HStackを使用して配置してみます。

struct ComplaintView: View {
    var body: some View {
        VStack {
            // ここを変更↓
            HStack(spacing: 16) {
                Text("Good")
                .font(.system(size: 56))
                .fontWeight(.black)
                .foregroundStyle(.red)
                
                Text("Chill")
                .font(.system(size: 56))
                .fontWeight(.black)
                .foregroundStyle(.red)
            }
            

　Textを横並びに配置できました。HStackでもspacingに値を設定することで、配置している各要素のスペースを設定することができます。

View内の全ての要素にモディファイアを適用する

　HStack(spacing: 16) {内のモディファイアをみると、.font(.system(size: 56))や.fontWeight(.black)など同じモディファイアがそれぞれに記述されているため、コードの整理をしていきます。

　次のようにモディファイアをHStackの}後ろに移動させます。

struct ComplaintView: View {
    var body: some View {
        VStack {
            // ここを変更↓
            HStack(spacing: 16) {
                Text("Good")
                
                Text("Chill")
            }
            .font(.system(size: 56))
            .fontWeight(.black)
            .foregroundStyle(.red)
            

　重複したモディファイアは無くなりましたが、プレビューの見た目は変わりません。これはHStack側にモディファイアを付けることでその中の全要素にもモディファイアの効果が適用されるためです。

　ただし、中の要素にすでに別のモディファイアが付いている場合は、外側のモディファイアの効果がその要素に反映されることはありません。実際に、Text("Chill")に色をつけて確認してみましょう。

struct ComplaintView: View {
    var body: some View {
        VStack {
            HStack(spacing: 16) {
                Text("Good")
                
                Text("Chill")
                    // ここを変更↓
                    .foregroundStyle(.yellow)
            }
            .font(.system(size: 56))
            .fontWeight(.black)
            .foregroundStyle(.red)
            

　プレビューを確認すると、HStack側のforegroundStyleは.redにしていますが、Text("Chill")につけた.foregroundStyle(.yellow)の変更も正しく反映されているのが確認できます。

ボタンにスタイルを適用する

　愚痴るボタンにスタイルを適用して、よりボタンのような見た目に変更していきます。Buttonには.buttonStyleというモディファイが用意されており、任意のスタイルを設定することで、ボタンの見た目を変更することができます。

　次のように.buttonStyleを設定すると、ボタンにスタイルが適用されます。

Button(action: {
    // ボタン押下時の処理
}, label: {
    Text("愚痴る")
        .font(.largeTitle)
})
// ここを追加↓
.buttonStyle(.borderedProminent)