【iOS】ようやくXcode入れた - 駆け出しエンジニアぱかぱかの成長記録

おはようございます！日曜朝のぱかぱかです！
昨日は目覚ましをかけずに寝たら13時に起床してしまったのですが、今朝は7時に目が覚め活動を開始できました☀️
しかし今日も実は友達の誕生日プレゼントを買いに行く以外用事がないのです。
週末にこんなに予定がないのも珍しいのですが、来週からはまた多忙になる模様。
うまく時間を見つけていきたいですね。

今日はまた新たな話題で、iOSのアプリ開発についてです。
私は今業務でAndroidとiOSの両方の開発を行っています。
今まではアプリ開発の勉強としてAndroidの方を中心に進めていたのですが、扱っていた教本の内容も一通り終わったのでiOSの方も学習してみることにしました。
そもそも奮発してMacBookを購入したのはiOS アプリ開発をするためなので…（Android開発はWindowsでもできる）

学習教材

学習に使う教材は先日購入したこちらです。

SwiftUI対応たった2日でマスターできる iPhoneアプリ開発集中講座 Xcode 14/iOS 16/Swift 5.7対応

作者:藤治仁,小林加奈子,小林由憲
ソシム

Amazon

たった2日でマスターなんてそんなことあるか？と思ったのですが、いざ着手してみるとあながち間違っていないかもというボリューム感でした。
プログラムがわからない初心者の方でも手順通りに進めていくことで、とりあえず動く5つのアプリが作れるようになっています。
昨晩はひとまず以下のような2つのアプリを作成しました。

・じゃんけんアプリ
　ボタンを押すとランダムにグーチョキパーの手が表示される。

・楽器アプリ
　楽器を押すとその楽器の音が鳴る。

曲がりなりにもアプリ開発のプロジェクトに配属されて半年が経過したので、これは流石に物足りない？
と思いつつも、業務で触れていなかった内容もいくつかあったので勉強になっています。

2つのアプリを作ってみての学び

xibファイルを使わないレイアウト作成方法

普段業務ではxibファイルという部品の構造をXML形式で記述したファイルを使ってレイアウトを作成しています。
XML形式とはいっても、実際にはGUIで直感的に部品の配置や制約の設定を行うので、xibファイル内のコードを直接いじることは基本的にありません。
処理によって画面の動きを変えるために、xibファイルと対になるswiftファイルにコードを記載しています。

今回の教材ではswiftファイル上にViewのレイアウトを一から記載する方法をとっています。
レイアウトが複雑になるとこれでは大変になるのだとは思いますが、このようにViewを作成したことはなかったので一つ勉強になりました。

大枠のレイアウトはViewを並べる方向によって以下を使用します。

VStack：縦方向のレイアウト
HStack：横方向のレイアウト
ZStack：奥行き方向のレイアウト

この中に入れ子のように部品を配置すると、ビューが並べられていきます。
以下の例だと「inu」の画像と「犬」というテキストが縦方向に並べられます。

        VStack {
            Image("inu")
                .resizable()
                .scaledToFit()
            Text("犬")
                .padding()
                }

また、配置したImageなどに対して色々と設定（モディファイアというらしい）を追加したい場合に以下のようにチェーン形式で記述するのも、コードで書くならこうなるのか〜という学びでした。
xibファイルでやるときはきっとGUIと連動してタグが自動で追加されていくのだと思いますが、コードで書く場合も右側のInspectorsタブを開いて設定した内容がコードにひょいと反映されました。

xibファイルでよくわかんないタグが追加されて何が設定されているか把握しきれなくなるより、このように全部コードに現れてくれた方がわかりやすいかも？と思ってしまいましたね。
GUIでまとめられてしまっていると、どのような項目が設定可能なのかを全て把握していなければ見落とす可能性があるので、バグの解析の時に結構苦戦した記憶があります…
一長一短ですね。

音源を扱うクラスの使い方

業務で扱っているアプリでは、音源を扱うということがまずありません。
2つ目に作成した楽器アプリではボタンを押すと音が鳴るという機能が登場し、目新しかったです。

AVAudioPlayerに音源データの変数を渡し、play()メソッドを実行すると音が出るようになります。
別のクラスで音を再生するメソッドを実装します。

import UIKit
import AVFoundation

class SoundPlayer: NSObject {
    let dogData = NSDataAsset(name: "dog")!.data
    var dogPlayer: AVAudioPlayer!
    
    let catData = NSDataAsset(name: "cat")!.data
    var catPlayer: AVAudioPlayer!
    
    func dogPlay() {
        do {
            dogPlayer = try AVAudioPlayer(data: dogData)
            dogPlayer.play()
        } catch {
            print("犬でエラー")
        }
    }
    
    func catPlay() {
        do {
            catPlayer = try AVAudioPlayer(data: catData)
            catPlayer.play()
        } catch {
            print("猫でエラー")
        }
    }

}

ボタンの処理で先ほどのメソッドを呼んであげます。

struct ContentView: View {
    let soundPlayer = SoundPlayer()
    var body: some View {
        VStack {
            Button(action: {
                soundPlayer.dogPlay()
            }, label: {
                Image("inu")
                    .resizable()
                .scaledToFit()            })
            
            Text("犬")
                .padding()
            
            Button(action: {
                soundPlayer.catPlay()
            }, label: {
                Image("neko")
                    .resizable()
                .scaledToFit()            })
            
            Text("猫")
                .padding()
            
        }
    }
}

音声をお伝えできないのであれなのですが、犬を押すとワンワン猫を押すとニャーと鳴くようにできました。