Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
初心者向けSwift勉強会#3
Search
吉川楓馬
February 23, 2024
Programming
0
63
初心者向けSwift勉強会#3
2024年2月24日に開催された初心者向けSwift勉強会#3の資料です。
吉川楓馬
February 23, 2024
Tweet
Share
More Decks by 吉川楓馬
See All by 吉川楓馬
Githubのプロフィールページをおしゃれにしよう
yoshikawa0918
1
320
初心者向けSwift勉強会#2
yoshikawa0918
0
95
初心者向けSwift勉強会#1 ~Swift文法編~
yoshikawa0918
0
120
九州アプリチャレンジ・キャラバンに参加してきた話
yoshikawa0918
0
87
東京Flutterハッカソン行ってきたよ!!
yoshikawa0918
0
320
AkarengaLT_16_スライド.pdf
yoshikawa0918
0
74
ProcessingでAndroidアプリを作ろうの会
yoshikawa0918
0
210
サンプルを使って学ぶFlutter
yoshikawa0918
1
290
Other Decks in Programming
See All in Programming
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
macOS でできる リアルタイム動画像処理
biacco42
7
2k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
350
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Vue.js学習の振り返り
hiro_xre
2
130
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
160
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Amazon Neptuneで始めてみるグラフDB-OpenSearchによるグラフの全文検索-
satoshi256kbyte
4
330
qmuntal/stateless のススメ
sgash708
0
120
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
590
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
What's in a price? How to price your products and services
michaelherold
243
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Music & Morning Musume
bryan
46
6.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Practical Orchestrator
shlominoach
186
10k
How STYLIGHT went responsive
nonsquared
95
5.2k
4 Signs Your Business is Dying
shpigford
180
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Transcript
初⼼者向けSwift勉強会#3 ~電卓アプリを作ろう! 完結編~
エンジニアカフェについて
エンジニアカフェについて エンジニアが集まる、活躍する、成長する街、福岡。 https://efc.isit.or.jp
エンジニアカフェへのアクセス 営業時間 9:00 - 22:00 / 相談受付時間 13:00 - 21:00 / 休館日毎月最終月曜日 https://engineercafe.jp/
⾃⼰紹介
⾃⼰紹介 • 名前 吉川楓⾺ • 所属 九州産業⼤学 理⼯学部 情報科学科 3年 • ⼀⾔ Swift勉強会最終回です。最後までよろしくお願いします!
本⽇のメニュー • 電卓アプリを作ろう! ◦ プロジェクト作成 ◦ アプリの完成イメージ ◦ 電卓アプリ開発(完成させます!)
電卓アプリのソースコードについて 今回開発する電卓アプリのソース コードはGithubに公開していま す。 URL https://github.com/Yoshikawa-091 8/calculator_sample QR
電卓アプリを作ろう!
プロジェクトの作成 デスクトップにSwift勉強会と いうフォルダを作りましょう。 この中にXcodeのプロジェクト を⼊れます。
プロジェクトの作成 Xcodeでプロジェクトを作成し ます。 Xcodeを⽴ち上げてください。 Create New Projectからプロ ジェクトを作成します。
プロジェクトの作成 作成するアプリのテンプレート を選びます。 1. プラットフォームはiOSを 選択 2. アプリケーションはAppを 選択 3.
Nextを選択
プロジェクトの作成 プロジェクトの基本情報を⼊⼒し ます。 1. プロジェクト名をcalculator にする 2. 開発⽅法はSwiftUIを選択 3. 使⽤する⾔語はSwiftを選択
4. データの保存⽅法はNoneを選 択 5. Include Testsのチェックは外 す
プロジェクトの作成 プロジェクトの保存場所を選択し ます。 先ほどデスクトップに作った Swift勉強会フォルダを選択して Createを押しましょう。
アプリの完成イメージ 今回は右の動画のような電卓アプ リを作っていきます。 単純に2つの数字の加算、減算、 乗算、除算ができるようにする。
電卓アプリの開発 アプリを開発する⼿順は以下の通りです。 1. UIを配置‧装飾する 2. ユーザーが操作を⾏った際の処理を書く 3. アプリを実⾏してみる
まずはまっさらに! プロジェクトを作った後にある UIを削除しましょう。 新しくUIを配置するためにレイ アウトをVStackからZStackに 変えましょう。 1. UIを配置‧装飾する
背景を真っ黒にしよう ZStackの中に以下のコードを 追加してください。 Color.black.ignoresSafeArea(); このコードはSafeAreaを無視 して背景を真っ黒にします。 1. UIを配置‧装飾する
SafeAreaって何? SafeAreaとはナビゲーション やステータスバーなどと⼲渉し ない領域を⽰します。 なので通常、画⾯いっぱいに Viewを表⽰させようとすると ナビゲーションやステータス バーなどには表⽰されません。 1. UIを配置‧装飾する
テキストを配置しよう ⼊⼒した数字/演算⼦を表⽰する テキストと計算結果を表⽰する テキストを配置します。 ⼤まかに3ステップあります。 ①変数を⽤意する ②Textを配置する ③装飾する 1. UIを配置‧装飾する
テキストを配置しよう ①変数を⽤意する bodyプロパティの上に変数を 2つ⽤意します。 変数displayは初期値を"0" に、変数calcResultは初期値 を""にして宣⾔しましょう。 このとき@Stateをつけるのを 忘れずに! 1.
UIを配置‧装飾する
テキストを配置しよう ②Textを配置する Textを配置していきます。 ZStackの中にVStackを配置 し、その中にTextを2つ配置し ます。 上のTextにはdisplayを、下の TextにはcalcResultを渡してあ げます。 1.
UIを配置‧装飾する
テキストを配置しよう ②Textを配置する このとき、プレビューには何も 映ってないように⾒えますが、 Textの⽂字⾊は黒がデフォルト なので何も映ってないように⾒ えているだけです。 1. UIを配置‧装飾する
テキストを配置しよう ③装飾する Textにモディファイアをつけて 装飾して⾏きます。 ‧フォントサイズ ‧Textの⽂字⾊ ‧Textが表⽰されるフレームの サイズ、Textの配置 1. UIを配置‧装飾する
ボタンを配置しよう ユーザーが押すボタンを配置します。 これも3ステップに分けて解説します。 ①⽂字列の⼆重配列を⽤意する ②ForEach⽂でButtonを配置する ③装飾する 1. UIを配置‧装飾する
ボタンを配置しよう ①⽂字列の⼆重配列を⽤意する Buttonのラベルに使⽤する⽂ 字列の⼆重配列を⽤意しま しょう。 1. UIを配置‧装飾する
ボタンを配置しよう ②ForEachでButtonを配置す る ForEachの中でForEachを回す ⼆重ループを使ってButtonを 配置して⾏きます。 1. UIを配置‧装飾する
ボタンを配置しよう ForEachとは データのコレクションから Viewを⽣成する構造体。 →配列などを元にオブジェクト を繰り返し⽣成してくれるモノ 1. UIを配置‧装飾する (例) ForEach(0..<3){num
in Text(String(num) + "行目") } //0行目 //1行目 //2行目 現在のループ変数
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間の空⽩を空け る
ボタンを装飾しよう ①if⽂でButtonを分ける 演算⼦のButtonはオレンジ⾊ に、それ以外のButtonは灰⾊ にしたいのでif⽂を使って表⽰ するButtonを分けましょう。 1. UIを配置‧装飾する
ボタンを装飾しよう ②モディファイアを指定する • フォントサイズは35 • 横幅:70、⾼さ:70 • ⽂字⾊は⽩ • 演算⼦Buttonの背景⾊はオ
レンジ、その他Buttonの背 景⾊は灰⾊ • 形は丸 1. UIを配置‧装飾する
余⽩を⼊れよう ButtonとTextの間に余⽩を⼊ れましょう。 Spacer()は可能な限り広いサ イズの余⽩をつけてくれま す。 現在の数字を表⽰してくれる Textの上とForEachの上に Spacer()を⼊れましょう。 1.
UIを配置‧装飾する
休憩タイム(10分) 再開:18:30〜
各ボタンを押した時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く 処理全体のフローチャート
各ボタンを押した時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く 処理全体のフローチャート
前準備 ボタンが押された時に呼び出 す関数calculationを宣⾔しま す。外部引数は省略し、内部 引数は⽂字列型inputItemにし ます。 Buttonのactionにcalculation を呼び出し、引数にButtonの labelとなっている⽂字列を渡 しましょう。
2. ユーザーが操作を⾏った際の処理を書く
数値ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く 数値ボタンが押された時の処理のフローチャート
数値ボタンが押された時の処理を実装する 1. 数値かどうか判定するif ⽂を書く 2. 変数displayが"0"または 数値以外であるかどうか 判定するif-else⽂を書く 3. 条件が⼀致する場合は
displayに⼊⼒された値 に書き換え、それ以外の 場合は連結させる 2. ユーザーが操作を⾏った際の処理を書く
四則演算⼦ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く
四則演算⼦ボタンが押された時の処理を実装する 必要な変数を宣⾔する 1. operand … 選択された 演算⼦を保持する⽂字列 型の変数 2. first
… 1つ⽬の値を保持 する整数型の変数 3. second … 2つ⽬の値を 保持する整数型の変数 2. ユーザーが操作を⾏った際の処理を書く
四則演算⼦ボタンが押された時の処理を実装する 関数calculationにACボタン または=ボタンを押した時 の条件を追加します。 さらにelse⽂を追加し、そ の中に四則演算しボタンが 押された時の処理を実装し ます。 2. ユーザーが操作を⾏った際の処理を書く
ACボタン/=ボタンが押された時の処理を実装する 2. ユーザーが操作を⾏った際の処理を書く
四則演算⼦ボタンが押された時の処理を実装する ACボタンが押された時 ACボタンが押されたら • displayを"0"に更新 • calcResultを""に更新 • operandを""に更新 2.
ユーザーが操作を⾏った際の処理を書く
四則演算⼦ボタンが押された時の処理を実装する =ボタンが押された時 =ボタンが押されたら • displayが数値かどうか チェック • switch⽂を使って演算⼦ ごとに処理を分ける 2.
ユーザーが操作を⾏った際の処理を書く
エミュレータを起動してアプリを実⾏してみよう 3. アプリを実⾏してみる
第3回は以上です! 電卓アプリは無事完成できたでしょうか? これにてSwift勉強会全3回が終了しました。 参加いただきありがとうございました!