初心者向けSwift勉強会#3

2024年2月24日に開催された初心者向けSwift勉強会#3の資料です。

Transcript

1. 初⼼者向けSwift勉強会#3 ~電卓アプリを作ろう！ 完結編~
2. エンジニアカフェについて
3. エンジニアカフェについて エンジニアが集まる、活躍する、成長する街、福岡。 https://efc.isit.or.jp
4. エンジニアカフェへのアクセス 営業時間　9:00 - 22:00 ／　相談受付時間　13:00 - 21:00 ／　休館日毎月最終月曜日 https://engineercafe.jp/
5. ⾃⼰紹介
6. ⾃⼰紹介 • 名前  吉川楓⾺ • 所属  九州産業⼤学 理⼯学部 情報科学科 3年 • ⼀⾔ Swift勉強会最終回です。最後までよろしくお願いします！
7. 本⽇のメニュー • 電卓アプリを作ろう！ ◦ プロジェクト作成 ◦ アプリの完成イメージ ◦ 電卓アプリ開発（完成させます！）
8. 電卓アプリのソースコードについて 今回開発する電卓アプリのソース コードはGithubに公開していま す。 URL https://github.com/Yoshikawa-091 8/calculator_sample QR
9. 電卓アプリを作ろう！
10. プロジェクトの作成 デスクトップにSwift勉強会と いうフォルダを作りましょう。 この中にXcodeのプロジェクト を⼊れます。
11. プロジェクトの作成 Xcodeでプロジェクトを作成し ます。 Xcodeを⽴ち上げてください。 Create New Projectからプロ ジェクトを作成します。
12. プロジェクトの作成 作成するアプリのテンプレート を選びます。 1. プラットフォームはiOSを 選択 2. アプリケーションはAppを 選択 3. Nextを選択
13. プロジェクトの作成 プロジェクトの基本情報を⼊⼒し ます。 1. プロジェクト名をcalculator にする 2. 開発⽅法はSwiftUIを選択 3. 使⽤する⾔語はSwiftを選択 4. データの保存⽅法はNoneを選 択 5. Include Testsのチェックは外 す
14. プロジェクトの作成 プロジェクトの保存場所を選択し ます。 先ほどデスクトップに作った Swift勉強会フォルダを選択して Createを押しましょう。
15. アプリの完成イメージ 今回は右の動画のような電卓アプ リを作っていきます。 単純に2つの数字の加算、減算、 乗算、除算ができるようにする。
16. 電卓アプリの開発 アプリを開発する⼿順は以下の通りです。 1. UIを配置‧装飾する 2. ユーザーが操作を⾏った際の処理を書く 3. アプリを実⾏してみる
17. まずはまっさらに！ プロジェクトを作った後にある UIを削除しましょう。 新しくUIを配置するためにレイ アウトをVStackからZStackに 変えましょう。 1. UIを配置‧装飾する
18. 背景を真っ黒にしよう ZStackの中に以下のコードを 追加してください。 Color.black.ignoresSafeArea(); このコードはSafeAreaを無視 して背景を真っ黒にします。 1. UIを配置‧装飾する
19. SafeAreaって何？ SafeAreaとはナビゲーション やステータスバーなどと⼲渉し ない領域を⽰します。 なので通常、画⾯いっぱいに Viewを表⽰させようとすると ナビゲーションやステータス バーなどには表⽰されません。 1. UIを配置‧装飾する
20. テキストを配置しよう ⼊⼒した数字/演算⼦を表⽰する テキストと計算結果を表⽰する テキストを配置します。 ⼤まかに3ステップあります。 ①変数を⽤意する ②Textを配置する ③装飾する 1. UIを配置‧装飾する
21. テキストを配置しよう ①変数を⽤意する bodyプロパティの上に変数を ２つ⽤意します。 変数displayは初期値を"0" に、変数calcResultは初期値 を""にして宣⾔しましょう。 このとき＠Stateをつけるのを 忘れずに！ 1. UIを配置‧装飾する
22. テキストを配置しよう ②Textを配置する Textを配置していきます。 ZStackの中にVStackを配置 し、その中にTextを2つ配置し ます。 上のTextにはdisplayを、下の TextにはcalcResultを渡してあ げます。 1. UIを配置‧装飾する
23. テキストを配置しよう ②Textを配置する このとき、プレビューには何も 映ってないように⾒えますが、 Textの⽂字⾊は黒がデフォルト なので何も映ってないように⾒ えているだけです。 1. UIを配置‧装飾する
24. テキストを配置しよう ③装飾する Textにモディファイアをつけて 装飾して⾏きます。 ‧フォントサイズ ‧Textの⽂字⾊ ‧Textが表⽰されるフレームの サイズ、Textの配置 1. UIを配置‧装飾する
25. ボタンを配置しよう ユーザーが押すボタンを配置します。 これも3ステップに分けて解説します。 ①⽂字列の⼆重配列を⽤意する ②ForEach⽂でButtonを配置する ③装飾する 1. UIを配置‧装飾する
26. ボタンを配置しよう ①⽂字列の⼆重配列を⽤意する Buttonのラベルに使⽤する⽂ 字列の⼆重配列を⽤意しま しょう。 1. UIを配置‧装飾する
27. ボタンを配置しよう ②ForEachでButtonを配置す る ForEachの中でForEachを回す ⼆重ループを使ってButtonを 配置して⾏きます。 1. UIを配置‧装飾する
28. ボタンを配置しよう ForEachとは データのコレクションから Viewを⽣成する構造体。 →配列などを元にオブジェクト を繰り返し⽣成してくれるモノ 1. UIを配置‧装飾する (例) ForEach(0..<3){num in Text(String(num) + "行目") } //0行目 //1行目 //2行目 現在のループ変数
29. 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間の空⽩を空け る
30. ボタンを装飾しよう ①if⽂でButtonを分ける 演算⼦のButtonはオレンジ⾊ に、それ以外のButtonは灰⾊ にしたいのでif⽂を使って表⽰ するButtonを分けましょう。 1. UIを配置‧装飾する
31. ボタンを装飾しよう ②モディファイアを指定する • フォントサイズは35 • 横幅：70、⾼さ：70 • ⽂字⾊は⽩ • 演算⼦Buttonの背景⾊はオ レンジ、その他Buttonの背 景⾊は灰⾊ • 形は丸 1. UIを配置‧装飾する
32. 余⽩を⼊れよう ButtonとTextの間に余⽩を⼊ れましょう。 Spacer()は可能な限り広いサ イズの余⽩をつけてくれま す。 現在の数字を表⽰してくれる Textの上とForEachの上に Spacer()を⼊れましょう。 1. UIを配置‧装飾する
33. 休憩タイム(10分) 再開：18:30〜
34. 各ボタンを押した時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く 処理全体のフローチャート
35. 各ボタンを押した時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く 処理全体のフローチャート
36. 前準備 ボタンが押された時に呼び出 す関数calculationを宣⾔しま す。外部引数は省略し、内部 引数は⽂字列型inputItemにし ます。 Buttonのactionにcalculation を呼び出し、引数にButtonの labelとなっている⽂字列を渡 しましょう。 2. ユーザーが操作を⾏った際の処理を書く
37. 数値ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く 数値ボタンが押された時の処理のフローチャート
38. 数値ボタンが押された時の処理を実装する 1. 数値かどうか判定するif ⽂を書く 2. 変数displayが"0"または 数値以外であるかどうか 判定するif-else⽂を書く 3. 条件が⼀致する場合は displayに⼊⼒された値 に書き換え、それ以外の 場合は連結させる 2. ユーザーが操作を⾏った際の処理を書く
39. 四則演算⼦ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く
40. 四則演算⼦ボタンが押された時の処理を実装する 必要な変数を宣⾔する 1. operand … 選択された 演算⼦を保持する⽂字列 型の変数 2. first … 1つ⽬の値を保持 する整数型の変数 3. second … 2つ⽬の値を 保持する整数型の変数 2. ユーザーが操作を⾏った際の処理を書く
41. 四則演算⼦ボタンが押された時の処理を実装する 関数calculationにACボタン または＝ボタンを押した時 の条件を追加します。 さらにelse⽂を追加し、そ の中に四則演算しボタンが 押された時の処理を実装し ます。 2. ユーザーが操作を⾏った際の処理を書く
42. ACボタン/＝ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く
43. 四則演算⼦ボタンが押された時の処理を実装する ACボタンが押された時 ACボタンが押されたら • displayを"0"に更新 • calcResultを""に更新 • operandを""に更新 2. ユーザーが操作を⾏った際の処理を書く
44. 四則演算⼦ボタンが押された時の処理を実装する ＝ボタンが押された時 ＝ボタンが押されたら • displayが数値かどうか チェック • switch⽂を使って演算⼦ ごとに処理を分ける 2. ユーザーが操作を⾏った際の処理を書く
45. エミュレータを起動してアプリを実⾏してみよう 3. アプリを実⾏してみる
46. 第3回は以上です！ 電卓アプリは無事完成できたでしょうか？ これにてSwift勉強会全3回が終了しました。 参加いただきありがとうございました！