スタンフォード式iOSアプリ開発講座をやってみた

以前、こちらのページで紹介したスタンフォード大学CS193pコース、正式にはStanford University's course CS193p (Developing Applications for iOS using SwiftUI）をやってみました。

執筆時（2021.5.28）、レクチャー4まで公開されていましたが、今回はレクチャー2までを実践したので、振り返りを兼ねて投稿します。ただ、当方は英語を気持ちで聴くタイプなので、思い違いもあろうか存ます。あしからず。

プロジェクト作成

このコースでは、神経衰弱のようなゲームアプリを作成します。プロジェクト名を「Memorize」として、あとはデフォルト設定のまま、プロジェクトを作成しました。コース動画では他にもたくさん、説明しているようでした。

以下の画像は、レクチャー2までを実践した状態のワークスペースです。

カードを作成する

最初に、神経衰弱の画面を構成するカードとなるビューを作成します。カードには絵文字が「乗り物の絵文字」が一つだけ含まれます。含まれる絵文字は、ビューの作成時にパラメータによって指定できるようになっています。

struct CardView: View {
   var content: String
   @State var isFaceUp = true
   
   var body: some View {
       ZStack {
           let shape = RoundedRectangle(cornerRadius: 20.0)
           if isFaceUp {
               shape.fill().foregroundColor(.white)
               shape.strokeBorder(lineWidth: 3.0)
               Text(content).font(.largeTitle)
           } else {
               shape.fill()
           }
       }
       .onTapGesture {
           print("Flip!")
           isFaceUp.toggle()
       }
   }
}

また、カードがタップされると、絵文字が隠されて見えなくなるようにするために、「ステート属性の変数」を利用しました。

計算プロパティについて知りたい方には、こちらのページで説明しています。

絵文字のデータ

メインとなる画面のビューでは、カードを動的に生成するためにForEachコンテナを使っています。また、自動生成されるカードを四方に並べるためにLazyVGridコンテナを使っています。

struct ContentView: View {
   let emojis = ["🚗", "🚌", "🏎", "🚓", "🚕", "🚒", "🚛", "🚜",
                 "🚍", "🚡", "🚟", "🚃", "🚞", "🚝", "🚄", "🚅",
                 "✈️", "🛰", "🛩", "🚀", "🛸", "⛵️", "🛶", "🚤"]
   @State var emojiCount = 24
   
   var body: some View {
       VStack {
           ScrollView {
               LazyVGrid(columns: [GridItem(.adaptive(minimum: 65))] ) {
                   ForEach(emojis[..<emojiCount], id: \.self) { emoji in
                       CardView(content: emoji)
                           .aspectRatio(2/3, contentMode: .fit)
                   }
               }
           }
           .foregroundColor(.red)
       }
       .padding(.horizontal)
   }
}

ここでは、表示されるカードの増減に合わせて画面も更新されるようにするために、emojiCountプロパティをステート属性にしています。このemojiCountプロパティは、ForEachコンテナが動的に作成する配列の境界値として使用されています。

配列について知りたい方には、こちらのページで説明しています。

表示カードを増減するボタン

表示するカードを増減するボタンは、計算プロパティとしてネストする形で実装しています。

struct ContentView: View {
   let emojis = ["🚗", "🚌", "🏎", "🚓", "🚕", "🚒", "🚛", "🚜",
                 "🚍", "🚡", "🚟", "🚃", "🚞", "🚝", "🚄", "🚅",
                 "✈️", "🛰", "🛩", "🚀", "🛸", "⛵️", "🛶", "🚤"]
   @State var emojiCount = 24
   
   var body: some View {
       VStack {
           ScrollView {...}
           .foregroundColor(.red)
           // 画面下部に+と-ボタンを配置
           Spacer()
           HStack {
               remove
               Spacer()
               add
           }
           .font(.largeTitle)
           .padding(.horizontal)
       }
       .padding(.horizontal)
   }
   
   // タップすると、カードが減る
   var remove: some View {
       Button {
           if emojiCount > 1 {
               emojiCount -= 1
           }
       } label: {
           Image(systemName: "minus.circle")
       }
   }
   
   // タップすると、カードが増える
   var add: some View {
       Button {
           if emojiCount < emojis.count {
               emojiCount += 1
           }
       } label: {
           Image(systemName: "plus.circle")
       }
   }
   
}

配列に無効なインデックスを指定すると、ランタイムエラーが発生します。そのため、Ifステートメントでインデックスを範囲を超えないようにチェックしています。

Ifステートメントについて知りたい方には、こちらのページで説明しています。

補足

実際の動画は、レクチャー1と2を合わせて3時間近くあります。その中ではより丁寧な解説があり、いろんなことを試しながらアプリを開発していきます。このページでは、その辺りを省略しています。

SwiftUIの基本を学ぶ（無料クーポンあり）

CS193pのレクチャー1と2では、モディファイアやプレビューについても詳しくお話しされていました。

その辺りについては、私が制作したUdemy講座「速習！SwiftUI」でもしっかりと解説しているので、ご覧になってみてはいかがでしょうか？（そう、ここは宣伝です）
本日より3日間だけ有効な無料クーポンを発行しましたので、どなたでもお気軽にご利用くださいませ。

レクチャー3もやってみた

レクチャー3では、MVVMアーキテクチャ、ジェネリクスや関数プログラミングの概念を学びます。こちらのページで振り返っていきます。