Introduction for Summer internship 2021 Cookpad

1. Cookpad Summer Internship 2021
Mobile App

2. <アイスブレイク>

3. 今日のおやつはなんですか

4. 好きなエディタは何ですか

5. </アイスブレイク>

6. 自己紹介

7. 市川 勝 (@masaichi)
● 買物プロダクト開発部
● iPhone3Gの頃からアプリ作ってます
● コーヒーとビールが燃料
● 千葉で妻と娘（２歳）と暮らしてます
● 好き: Swift, Objective-C, Flutter

8. 平山 裕也 (@hiragram)
● モバイル基盤部
● Swiftは1.0から触っています
● 高専卒
● 静岡出身
● 猫2

9. 後藤 哲志 (@mtgto)
● メディアプロダクト開発部
● iPhone 3GS時代からiPhone開発を始める
● 趣味ではmacOSアプリを作ってます

10. よろしくお願いします！

11. 今日やること

12. MiniMartを
iOSアプリに
してみる

14. MiniMartをiOSアプリにしてみる
● SwiftUIを使ってつくる！
● レイアウトの仕方、画面遷移の組み方、状態管理などの、SwiftUIによるア
プリの開発の基礎を一通り学ぶ

15. タイムテーブル
● 10:00-10:40 󰞹 自己紹介と基礎知識
● 10:40-12:00 󰳕 ハンズオン前半
● 12:00-13:00 🍔 ランチ
● 13:00-14:20 󰳕 ハンズオン後半
● 14:20-17:55 󰠁 基本課題, 応用課題
○ 16:00頃に基本課題の回答例を投下します
● 17:55-18:00 󰞹 ラップアップ

16. 進め方
● わからないこと・知りたいことがあればいつでもSlackで聞い
てください
● 講義中でも随時聞いてください
● 個人ごとに理解度の差があるかもしれませんが気にせず聞
いてください
● 画面越しで困ってる様子に気づけ無いかもしれないので積
極的に聞いてください

17. iOSアプリ開発の基礎知識

18. 基礎知識
- iOSアプリ
- Swift
- SwiftUI
- UIKit

19. iOSアプリ
- iOSが動く端末(iPhone)で動作するアプリケーションのこ
と。
- macOS上で動作するXcodeという統合開発環境を使い、
SwiftまたはObjective-Cというプログラミング言語を用い
て開発することができる。
- UIを構築するために、UIKitとSwiftUIの２種の仕組みが
Appleから提供されており、開発者はどちらかまたは両方
を用いて開発を行う

20. Swift
- Appleが開発し2014年に公開されたプログラミング言語。
- 現在は5.5までバージョンが上がっている。現在において
Swiftを用いてiOSアプリケーションを開発することがスタン
ダードとなっている

21. Swiftの特徴
- マルチパラダイム言語
- オブジェクト指向、関数型、など多くのスタイルを持つ
- モダン, 安全, インタラクティブ
- モダン:
- 名前付きパラメータ, 型推論, noセミコロン, etc..
- 安全:
- オプショナル, 静的型付け, etc..
- インタラクティブ
- Playground

22. ざっくりSwift入門
- 今日使う範囲の内容をざっくりと一緒に見ていきます
- Swift 5.4時点の内容です
- すべては説明しきれないので、より詳しくは公式サイトを見てください
- https://swift.org/
- 説明にはPlaygroundを利用します。これは皆さんの手元でも試すことが
できます。ハンズオンの合間に困ったら試してみてください

23. SwiftUI
- iOSアプリの構築をするためのUIのフレー
ムワーク
- 2019年のwwdcで発表された
- Reactのような宣言型の構文でUIを構築す
ることができる

24. UIKit
- iOSアプリの構築をするためのUIフレームワーク
- iOSアプリの開発が一般の開発者に開放されたiOS3の頃か
らあるもの
- 従来のiOS開発ではこちらが使われていた。
- SwiftUI登場以後も発展を続け使われている

25. SwiftUIとUIKit

26. SwiftUIとUIKit
- どちらも「どこに何を表示するのか」の処理を担うフレーム
ワーク
- すごく雑にいうと、HTMLのタグみたいなもの
- 大きな違いはその書き方
- SwiftUIは宣言的
- UIKitは命令的

27. SwiftUIとUIKitのコードの比較

28. UIKit
class CounterView: UIView {
let countLabel = UILabel()
private var count: Int = 0
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .white
let button = UIButton()
button.setTitle("Increment", for: .normal)
button.addTarget(self, action: #selector(increment), for: .touchUpInside)
button.setTitleColor(.blue, for: .normal)
let stackView = UIStackView(arrangedSubviews: [countLabel, button])
addSubview(stackView)
stackView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
stackView.centerXAnchor.constraint(equalTo: centerXAnchor),
stackView.centerYAnchor.constraint(equalTo: centerYAnchor),
])
stackView.axis = .vertical
stackView.alignment = .center
countLabel.font = UIFont.boldSystemFont(ofSize: 24)
countLabel.text = "(count)"
}
@objc
func increment() {
count += 1
countLabel.text = "(count)"
}
}

29. UIKit
● ラベルとボタンを作ってViewに貼って画面の中心に置く・・
のような処理が手続き的に書かれている
● データをViewに設定する処理を明示的に書いている

30. SwiftUI
struct ContentView: View {
@State var count: Int = 0
var body: some View {
VStack {
Text("(count)")
.font(.title)
Button(action: { self.count += 1 }) {
Text("Increment")
}
}
}
}

31. SwiftUI
● HTMLのタグのような記述でViewの構造が書かれている
● データをViewに明示的に代入する処理は書いていない

32. SwiftUI - メリット
- 構造、レイアウト、状態が１まとまりになっており、コードも短
く見通しが良い
- データの更新をフレームワークがサポートしてくれる
- Xcode Previewという機能でリアルタイムにコードによるデ
ザインの変更を確認できる

33. SwiftUI - デメリット
● まだ不安定なところがある
● UIKitに比べると機能が不足している
○ UIKitをSwiftUIから使う仕組みがあり、頑張ることはでき
る
● 不得意なこともある
○ インタラクティブなアニメーション等
● 知見を持つエンジニアが限られている

34. いまSwiftUIを使う理由
- iOS14になり、標準のパーツ、安定性、知見が増し実戦にも
耐えられるようになってきた
- 「UIの構築が圧倒的にやりやすい」というメリットがデメリット
よりも大きい

35. クックパッドの中のSwiftUI

36. SwiftUIやっていくぞ！