初心者がSwiftで嫁大好きアプリを作ってみた

はじめに

はじめまして、今回はモバイル開発初心者の私が初めてSwiftでiOSアプリを作ってみたのでその内容をご紹介します。

私のスペック

• バックエンドエンジニア10年目
• モバイル開発の経験なし
• 新婚
• 嫁がモバイルエンジニア(iOS)

私は普段バックエンドエンジニアをしていて、モバイル開発の知識はありません。
そんな私の嫁はモバイルエンジニアで、新婚1年目です。

嫁「バックエンド担当もフロントを理解していないとダメ!!」

といつも口癖のように言っているので、私もiOSアプリを開発してみることにしました。

用意したもの

開発にあたって用意したものはこちら。

iOSアプリはMacのXcodeを使って作る必要があるので、Macを持っていない方はまずMacを用意しましょう。

• MacBook Air
  • Apple M2チップ
  • メモリ8GB
  • ディスプレイ13.6インチ
  • ストレージ245GB
• 参考資料
  • 次に紹介します

参考資料

Siwftなどモバイル開発の経験がなかったので、以下の書籍を参考にしました。

SwiftUI対応 たった2日でマスターできる iPhoneアプリ開発集中講座 Xcode16/iOS18/Swift6.0対応

SwiftUI？UIkit？？とiOSのフレームワークはちんぷんかんぷんでしたが、

嫁「SwiftUIで開発できるようになるといいよ、UIKitとかStoryboardとかだと....べらべらべら」

という呪文をよく家で唱えていたような気がしたので「SwiftUI」という表紙に飛びつきました。

結果的に、サンプルアプリを作りながらiOS開発ができ、カラフルで見やすい内容だったのでこの書籍を選んだのは正解だったと思います。

じゃんけんアプリを嫁仕様に改造してみる

上記の書籍にじゃんけんアプリを作るテーマがあるのですが、

それをそのまま作っても面白みがないので、じゃんけんアプリをベースに

ボタンを押したら色んな嫁の画像が出てくるアプリを作ろうと思いました。

このアプリでできること

• スタート画面に嫁の画像を出してスタートボタンで開始
• 「嫁と遊ぶ」のボタンを押すと押すたびにランダムで嫁の画像が出てくる
• 低確率で嫁の不機嫌な画像が出てくる
• 「最初に戻る」ボタンを表示させておいて、押すとスタート画面に戻る

じゃんけんアプリは乱数でグーチョキパーのどれかを画像表示させる仕組みなので、

それを使ってランダムで嫁の画像を複数用意して、それを表示させることにしました。

それだけでもつまらないので、一定確率で不機嫌な嫁の画像を出すことにしました。

Xcodeでプロジェクトを作成

準備ができたらXcodeを開いて新しいプロジェクトを作成していきます。

テンプレートの種類は[iOS]で、プロジェクト名は[Yome_to_Asobu]にしました。

テンプレートの作成が終わると「Hello, World!」がプレビュー表示された画面になります。

今回はiPhone16Proを想定してアプリを作ります

使用ファイル

テンプレート作成が終わるといくつかフォルダとファイルが自動的に作成されます。
主に使用していくのは、

• ContentView.swift
• ●●App.swift
  です。

●●App.swiftはエントリーポイントになるので、画面描画はContentView.swiftをメンテしていきます。

画像の取り込み

このアプリは画像ファイルが重要になるので、プロジェクトに画像ファイルを取り込んでいきます。

作成したプロジェクトの中にAssets.xcassetsという画像を管理するアセットカタログがあるので、

そこに画像ファイルをドラッグ&ドロップで追加していきます。

画面パーツの配置

それではいよいよ画面の開発をしていきます。

画面はContentView.swiftを開いて、まずは画面パーツを配置していきます。

import SwiftUI

struct ContentView: View {
    @State var YomeNumber = 0

    var body: some View {
        VStack {
            Spacer()
            if YomeNumber == 0 {
                // 初期画面
                Text("嫁と遊ぼう!!")
                    .padding(.bottom)

                Image(.S_9494537)
                    .resizable()
                    .scaledToFit()
                Spacer()
            } else if YomeNumber == 1 {
                Image(.S_9494530_0)
                    .resizable()
                    .scaledToFit()
                Spacer()

                Text("嫁はすやすや寝ている")
                    .padding(.bottom)

            } else if YomeNumber == 2 {
                Image(.S_9584646)
                    .resizable()
                    .scaledToFit()
                Spacer()
                
                Text("嫁と野球!!!")
                    .padding(.bottom)

            } else {
                Image(.S_9494532_0)
                    .resizable()
                    .scaledToFit()
                Spacer()

                Text("嫁はとても不機嫌だ!!")
                    .padding(.bottom)

            }

ここではYomeNumberを置いて、ランダムに数値を設定していきます。

その設定された数値に応じて画像を切り替えていくという仕組みを作っていきます。

画像ファイルはiPhoneの画面に合わせるため、.resizable()や.scaledToFit()を駆使して調整しています。

画像の種類はelse ifを増やしていけばその分たくさんのバリエーションを持たせることが可能です。

ボタン配置

次は画像を切り替えるためのボタンと、スタート画面に戻るボタンを作成していきます。

            // 「嫁と遊ぶ」ボタン（常に表示）
            Button {
                YomeNumber = Int.random(in: 1...2)
                
                var newYomeNumber = 0
                
                repeat {
                    newYomeNumber = Int.random(in: 1...2)
                } while YomeNumber == newYomeNumber
                
                YomeNumber = newYomeNumber
                
            } label: {
                Text("嫁と遊ぶ")
                    .frame(maxWidth: .infinity)
                    .frame(height: 100)
                    .font(.title)
                    .background(.pink)
                    .foregroundStyle(.white)
            }
            .padding(.top)

            // 「最初に戻る」ボタン（初期画面以外のときだけ表示）
            if YomeNumber != 0 {
                Button {
                    YomeNumber = 0
                } label: {
                    Text("最初に戻る")
                        .foregroundColor(.gray)
                }
                .padding(.top, 5)
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

YomeNumberは表示させたい画像の数だけ数値の範囲を設定して、その中でランダムに発動させていきます。

YomeNumber = Int.random(in: 1...3)

ボタンは、

• frame
• font
• background
• foregroundStyle
  を使うことで好きなデザインのボタンを作成することが可能です。

ビルド

ここまできたらアプリはほとんど完成です。

Xcode左上の「▶︎」ボタンを押せばコードをビルドすることができます。

ビルドに成功するとXcodeのSimulatorが起動し、Mac上でiPhoneのシミュレータを操作できるようになります。

これでアプリのデザインや挙動を確認して、問題があれば微修正していったりと調整していくことになります。

アイコン画像をAssets.xcassetsに配置して自分のiPhoneをMacに接続すればつくったアプリを自分の
iPhoneで操作することも可能です。

嫁に見せてみた

嫁「初めてにしてはよくできてる」

だそうです笑

ある程度は評価していただけたかな..と

これからもモバイル開発をもっと勉強して、嫁に認められるエンジニアに成長していきたいと思います。