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
100
初心者向けSwift勉強会#3
2024年2月24日に開催された初心者向けSwift勉強会#3の資料です。
吉川楓馬
February 23, 2024
Tweet
Share
More Decks by 吉川楓馬
See All by 吉川楓馬
Githubのプロフィールページをおしゃれにしよう
yoshikawa0918
2
790
初心者向けSwift勉強会#2
yoshikawa0918
0
120
初心者向けSwift勉強会#1 ~Swift文法編~
yoshikawa0918
0
140
九州アプリチャレンジ・キャラバンに参加してきた話
yoshikawa0918
0
140
東京Flutterハッカソン行ってきたよ!!
yoshikawa0918
0
440
AkarengaLT_16_スライド.pdf
yoshikawa0918
0
89
ProcessingでAndroidアプリを作ろうの会
yoshikawa0918
0
260
サンプルを使って学ぶFlutter
yoshikawa0918
1
350
Other Decks in Programming
See All in Programming
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
280
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
1
280
実践 Dev Containers × Claude Code
touyu
1
210
Understanding Ruby Grammar Through Conflicts
yui_knk
1
110
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
140
AIエージェント開発、DevOps and LLMOps
ymd65536
1
120
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
860
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.1k
大規模FlutterプロジェクトのCI実行時間を約8割削減した話
teamlab
PRO
0
480
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
420
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
700
兎に角、コードレビュー
mitohato14
0
140
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How GitHub (no longer) Works
holman
314
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Thoughts on Productivity
jonyablonski
69
4.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Producing Creativity
orderedlist
PRO
347
40k
Automating Front-end Workflow
addyosmani
1370
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
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回が終了しました。 参加いただきありがとうございました!