初心者向けSwift勉強会#3

Slide 1

Slide 1 text

初⼼者向けSwift勉強会#3 ~電卓アプリを作ろう！完結編~

Slide 2

Slide 2 text

エンジニアカフェについて

Slide 3

Slide 3 text

エンジニアカフェについてエンジニアが集まる、活躍する、成長する街、福岡。 https://efc.isit.or.jp

Slide 4

Slide 4 text

エンジニアカフェへのアクセス営業時間　9:00 - 22:00 ／　相談受付時間　13:00 - 21:00 ／　休館日毎月最終月曜日 https://engineercafe.jp/

Slide 5

Slide 5 text

⾃⼰紹介

Slide 6

Slide 6 text

⾃⼰紹介 ● 名前吉川楓⾺ ● 所属九州産業⼤学理⼯学部情報科学科 3年 ● ⼀⾔ Swift勉強会最終回です。最後までよろしくお願いします！

Slide 7

Slide 7 text

本⽇のメニュー ● 電卓アプリを作ろう！ ○ プロジェクト作成 ○ アプリの完成イメージ ○ 電卓アプリ開発（完成させます！）

Slide 8

Slide 8 text

電卓アプリのソースコードについて今回開発する電卓アプリのソースコードはGithubに公開しています。 URL https://github.com/Yoshikawa-091 8/calculator_sample QR

Slide 9

Slide 9 text

電卓アプリを作ろう！

Slide 10

Slide 10 text

プロジェクトの作成デスクトップにSwift勉強会というフォルダを作りましょう。この中にXcodeのプロジェクトを⼊れます。

Slide 11

Slide 11 text

プロジェクトの作成 Xcodeでプロジェクトを作成します。 Xcodeを⽴ち上げてください。 Create New Projectからプロジェクトを作成します。

Slide 12

Slide 12 text

プロジェクトの作成作成するアプリのテンプレートを選びます。 1. プラットフォームはiOSを選択 2. アプリケーションはAppを選択 3. Nextを選択

Slide 13

Slide 13 text

プロジェクトの作成プロジェクトの基本情報を⼊⼒します。 1. プロジェクト名をcalculator にする 2. 開発⽅法はSwiftUIを選択 3. 使⽤する⾔語はSwiftを選択 4. データの保存⽅法はNoneを選択 5. Include Testsのチェックは外す

Slide 14

Slide 14 text

プロジェクトの作成プロジェクトの保存場所を選択します。先ほどデスクトップに作った Swift勉強会フォルダを選択して Createを押しましょう。

Slide 15

Slide 15 text

アプリの完成イメージ今回は右の動画のような電卓アプリを作っていきます。単純に2つの数字の加算、減算、乗算、除算ができるようにする。

Slide 16

Slide 16 text

電卓アプリの開発アプリを開発する⼿順は以下の通りです。 1. UIを配置‧装飾する 2. ユーザーが操作を⾏った際の処理を書く 3. アプリを実⾏してみる

Slide 17

Slide 17 text

まずはまっさらに！プロジェクトを作った後にある UIを削除しましょう。新しくUIを配置するためにレイアウトをVStackからZStackに変えましょう。 1. UIを配置‧装飾する

Slide 18

Slide 18 text

背景を真っ黒にしよう ZStackの中に以下のコードを追加してください。 Color.black.ignoresSafeArea(); このコードはSafeAreaを無視して背景を真っ黒にします。 1. UIを配置‧装飾する

Slide 19

Slide 19 text

SafeAreaって何？ SafeAreaとはナビゲーションやステータスバーなどと⼲渉しない領域を⽰します。なので通常、画⾯いっぱいに Viewを表⽰させようとするとナビゲーションやステータスバーなどには表⽰されません。 1. UIを配置‧装飾する

Slide 20

Slide 20 text

テキストを配置しよう⼊⼒した数字/演算⼦を表⽰するテキストと計算結果を表⽰するテキストを配置します。⼤まかに3ステップあります。 ①変数を⽤意する ②Textを配置する ③装飾する 1. UIを配置‧装飾する

Slide 21

Slide 21 text

テキストを配置しよう ①変数を⽤意する bodyプロパティの上に変数を２つ⽤意します。変数displayは初期値を"0" に、変数calcResultは初期値を""にして宣⾔しましょう。このとき＠Stateをつけるのを忘れずに！ 1. UIを配置‧装飾する

Slide 22

Slide 22 text

テキストを配置しよう ②Textを配置する Textを配置していきます。 ZStackの中にVStackを配置し、その中にTextを2つ配置します。上のTextにはdisplayを、下の TextにはcalcResultを渡してあげます。 1. UIを配置‧装飾する

Slide 23

Slide 23 text

テキストを配置しよう ②Textを配置するこのとき、プレビューには何も映ってないように⾒えますが、 Textの⽂字⾊は黒がデフォルトなので何も映ってないように⾒えているだけです。 1. UIを配置‧装飾する

Slide 24

Slide 24 text

テキストを配置しよう ③装飾する Textにモディファイアをつけて装飾して⾏きます。 ‧フォントサイズ ‧Textの⽂字⾊ ‧Textが表⽰されるフレームのサイズ、Textの配置 1. UIを配置‧装飾する

Slide 25

Slide 25 text

ボタンを配置しようユーザーが押すボタンを配置します。これも3ステップに分けて解説します。 ①⽂字列の⼆重配列を⽤意する ②ForEach⽂でButtonを配置する ③装飾する 1. UIを配置‧装飾する

Slide 26

Slide 26 text

ボタンを配置しよう ①⽂字列の⼆重配列を⽤意する Buttonのラベルに使⽤する⽂字列の⼆重配列を⽤意しましょう。 1. UIを配置‧装飾する

Slide 27

Slide 27 text

ボタンを配置しよう ②ForEachでButtonを配置する ForEachの中でForEachを回す⼆重ループを使ってButtonを配置して⾏きます。 1. UIを配置‧装飾する

Slide 28

Slide 28 text

ボタンを配置しよう ForEachとはデータのコレクションから Viewを⽣成する構造体。 →配列などを元にオブジェクトを繰り返し⽣成してくれるモノ 1. UIを配置‧装飾する (例) ForEach(0..<3){num in Text(String(num) + "行目") } //0行目 //1行目 //2行目現在のループ変数

Slide 29

Slide 29 text

ForEach(0..<4){row in HStack{ ForEach(0..<4){col in Button(action: { }, label: { Text(inputItems[row][col]) }) .padding(5) } } } ①ForEachを0から4未満の計4回繰り返す ②HStackを配置する ③ForEachを0から4未満の計4回繰り返す ④Buttonを配置する ⑤ButtonのlabelにTextを配置する。⽂字列は配列inputItemsの[row][col] 番⽬ ⑥.paddingでButton間の空⽩を空ける

Slide 30

Slide 30 text

ボタンを装飾しよう ①if⽂でButtonを分ける演算⼦のButtonはオレンジ⾊に、それ以外のButtonは灰⾊にしたいのでif⽂を使って表⽰するButtonを分けましょう。 1. UIを配置‧装飾する

Slide 31

Slide 31 text

ボタンを装飾しよう ②モディファイアを指定する ● フォントサイズは35 ● 横幅：70、⾼さ：70 ● ⽂字⾊は⽩ ● 演算⼦Buttonの背景⾊はオレンジ、その他Buttonの背景⾊は灰⾊ ● 形は丸 1. UIを配置‧装飾する

Slide 32

Slide 32 text

余⽩を⼊れよう ButtonとTextの間に余⽩を⼊れましょう。 Spacer()は可能な限り広いサイズの余⽩をつけてくれます。現在の数字を表⽰してくれる Textの上とForEachの上に Spacer()を⼊れましょう。 1. UIを配置‧装飾する

Slide 33

Slide 33 text

休憩タイム(10分) 再開：18:30〜

Slide 34

Slide 34 text

各ボタンを押した時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く処理全体のフローチャート

Slide 35

Slide 35 text

各ボタンを押した時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く処理全体のフローチャート

Slide 36

Slide 36 text

前準備ボタンが押された時に呼び出す関数calculationを宣⾔します。外部引数は省略し、内部引数は⽂字列型inputItemにします。 Buttonのactionにcalculation を呼び出し、引数にButtonの labelとなっている⽂字列を渡しましょう。 2. ユーザーが操作を⾏った際の処理を書く

Slide 37

Slide 37 text

数値ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く数値ボタンが押された時の処理のフローチャート

Slide 38

Slide 38 text

数値ボタンが押された時の処理を実装する 1. 数値かどうか判定するif ⽂を書く 2. 変数displayが"0"または数値以外であるかどうか判定するif-else⽂を書く 3. 条件が⼀致する場合は displayに⼊⼒された値に書き換え、それ以外の場合は連結させる 2. ユーザーが操作を⾏った際の処理を書く

Slide 39

Slide 39 text

四則演算⼦ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く

Slide 40

Slide 40 text

四則演算⼦ボタンが押された時の処理を実装する必要な変数を宣⾔する 1. operand … 選択された演算⼦を保持する⽂字列型の変数 2. ﬁrst … 1つ⽬の値を保持する整数型の変数 3. second … 2つ⽬の値を保持する整数型の変数 2. ユーザーが操作を⾏った際の処理を書く

Slide 41

Slide 41 text

四則演算⼦ボタンが押された時の処理を実装する関数calculationにACボタンまたは＝ボタンを押した時の条件を追加します。さらにelse⽂を追加し、その中に四則演算しボタンが押された時の処理を実装します。 2. ユーザーが操作を⾏った際の処理を書く

Slide 42

Slide 42 text

ACボタン/＝ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く

Slide 43

Slide 43 text

四則演算⼦ボタンが押された時の処理を実装する ACボタンが押された時 ACボタンが押されたら ● displayを"0"に更新 ● calcResultを""に更新 ● operandを""に更新 2. ユーザーが操作を⾏った際の処理を書く

Slide 44

Slide 44 text

四則演算⼦ボタンが押された時の処理を実装する＝ボタンが押された時＝ボタンが押されたら ● displayが数値かどうかチェック ● switch⽂を使って演算⼦ごとに処理を分ける 2. ユーザーが操作を⾏った際の処理を書く

Slide 45

Slide 45 text

エミュレータを起動してアプリを実⾏してみよう 3. アプリを実⾏してみる

Slide 46

Slide 46 text

第3回は以上です！電卓アプリは無事完成できたでしょうか？これにてSwift勉強会全3回が終了しました。参加いただきありがとうございました！