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
66
初心者向けSwift勉強会#3
2024年2月24日に開催された初心者向けSwift勉強会#3の資料です。
吉川楓馬
February 23, 2024
Tweet
Share
More Decks by 吉川楓馬
See All by 吉川楓馬
Githubのプロフィールページをおしゃれにしよう
yoshikawa0918
1
340
初心者向けSwift勉強会#2
yoshikawa0918
0
97
初心者向けSwift勉強会#1 ~Swift文法編~
yoshikawa0918
0
130
九州アプリチャレンジ・キャラバンに参加してきた話
yoshikawa0918
0
89
東京Flutterハッカソン行ってきたよ!!
yoshikawa0918
0
330
AkarengaLT_16_スライド.pdf
yoshikawa0918
0
77
ProcessingでAndroidアプリを作ろうの会
yoshikawa0918
0
220
サンプルを使って学ぶFlutter
yoshikawa0918
1
300
Other Decks in Programming
See All in Programming
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Arm移行タイムアタック
qnighy
0
330
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
5
930
Click-free releases & the making of a CLI app
oheyadam
2
120
RubyLSPのマルチバイト文字対応
notfounds
0
120
Jakarta EE meets AI
ivargrimstad
0
130
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
Less waste, more joy, and a lot more green: How Quarkus makes Java better
hollycummins
0
100
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
230
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Agile that works and the tools we love
rasmusluckow
327
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
The World Runs on Bad Software
bkeepers
PRO
65
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Designing for Performance
lara
604
68k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
For a Future-Friendly Web
brad_frost
175
9.4k
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回が終了しました。 参加いただきありがとうございました!