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
85
初心者向けSwift勉強会#3
2024年2月24日に開催された初心者向けSwift勉強会#3の資料です。
吉川楓馬
February 23, 2024
Tweet
Share
More Decks by 吉川楓馬
See All by 吉川楓馬
Githubのプロフィールページをおしゃれにしよう
yoshikawa0918
1
500
初心者向けSwift勉強会#2
yoshikawa0918
0
110
初心者向けSwift勉強会#1 ~Swift文法編~
yoshikawa0918
0
140
九州アプリチャレンジ・キャラバンに参加してきた話
yoshikawa0918
0
96
東京Flutterハッカソン行ってきたよ!!
yoshikawa0918
0
370
AkarengaLT_16_スライド.pdf
yoshikawa0918
0
85
ProcessingでAndroidアプリを作ろうの会
yoshikawa0918
0
230
サンプルを使って学ぶFlutter
yoshikawa0918
1
320
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.1k
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
『品質』という言葉が嫌いな理由
korimu
0
160
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Immutable ActiveRecord
megane42
0
130
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Docker and Python
trallard
44
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
A Tale of Four Properties
chriscoyier
158
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Faster Mobile Websites
deanohume
306
31k
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回が終了しました。 参加いただきありがとうございました!