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勉強会#2
Search
吉川楓馬
January 23, 2024
Programming
0
110
初心者向けSwift勉強会#2
吉川楓馬
January 23, 2024
Tweet
Share
More Decks by 吉川楓馬
See All by 吉川楓馬
Githubのプロフィールページをおしゃれにしよう
yoshikawa0918
1
500
初心者向けSwift勉強会#3
yoshikawa0918
0
85
初心者向け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
【PHP】破壊的バージョンアップと戦った話〜決断と説得
satoshi256kbyte
0
120
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
[JAWS-UG横浜 #80] うわっ…今年のServerless アップデート、少なすぎ…?
maroon1st
1
170
テストをしないQAエンジニアは何をしているか?
nealle
0
130
CI改善もDatadogとともに
taumu
0
110
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
670
Domain-Driven Transformation
hschwentner
2
1.9k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Making Projects Easy
brettharned
116
6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Why Our Code Smells
bkeepers
PRO
335
57k
Documentation Writing (for coders)
carmenintech
67
4.6k
We Have a Design System, Now What?
morganepeng
51
7.4k
Practical Orchestrator
shlominoach
186
10k
How GitHub (no longer) Works
holman
313
140k
Optimizing for Happiness
mojombo
376
70k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The World Runs on Bad Software
bkeepers
PRO
67
11k
Transcript
初⼼者向けSwift勉強会#2 ~Swiftアプリ開発基礎&電卓アプリを作ろう!編~
エンジニアカフェについて
エンジニアカフェについて エンジニアが集まる、活躍する、成長する街、福岡。 https://efc.isit.or.jp
エンジニアカフェへのアクセス 営業時間 9:00 - 22:00 / 相談受付時間 13:00 - 21:00 / 休館日毎月最終月曜日 https://engineercafe.jp/
⾃⼰紹介
⾃⼰紹介 • 名前 吉川楓⾺ • 所属 九州産業⼤学 理⼯学部 情報科学科 3年 • ⼀⾔ まだまだSwift勉強中。
本⽇のメニュー • Swiftアプリ開発基礎 ◦ アプリの開発に必要なもの ◦ アプリの開発⽅法について ◦ SwiftUIを触ってみよう •
電卓アプリを作ろう! ◦ プロジェクト作成 ◦ 電卓アプリ開発(お時間の許す限り)
Swiftアプリ開発基礎
アプリの開発に必要なもの ①MacBook Pro/MacBook Air/iMac ②Xcode … Appleが提供しているiPhoneやiPadなど複数の Appleプラットフォームに対応したアプリを作成するために 使⽤する統合開発環境(IDE)である。
アプリの開発⽅法について アプリの開発⽅法には主に2つある。 1. Storyboardを使った開発 2. SwiftUIを使った開発 それぞれ説明していきます。
アプリの開発⽅法について • オブジェクトをドラッグ& ドロップで実装する開発⽅ 法 • 古い開発⽅法なのでネット の情報は充実 • Storyboardを扱っている参
考書が古い 1. Storyboardを使った開発
アプリの開発⽅法について • 画⾯のレイアウトなど全て をコードで実装する開発⽅ 法 • シンプルで、直感的にコー ドが書けることが特徴 • 最近発売されているiOSア
プリ開発の参考書はほとん どコレ 2. SwiftUIを使った開発 第2回、第3回のアプリ開発ではSwiftUIを使って開発を進めていきます!
SwiftUIを触ってみよう 電卓アプリの開発に⼊る前に簡単なアプリを作りながらSwiftUIを 少し触ってみましょう。 メニューは以下の通りです。 1. Xcodeの使い⽅ 2. レイアウト‧オブジェクトについて 3. モディファイアとは
4. その他の処理を実装するには
SwiftUIを触ってみよう プロジェクトを作成する前にこ れから作るアプリのプロジェク トを⼊れるフォルダを作りま す。 デスクトップにSwift勉強会と いうフォルダを作りましょう。 1. Xcodeの使い⽅
SwiftUIを触ってみよう Xcodeでプロジェクトを作成し てみましょう。 Xcodeを⽴ち上げてください。 Create New Projectからプロ ジェクトを作成します。 1. Xcodeの使い⽅
SwiftUIを触ってみよう 作成するアプリのテンプレート を選びます。 1. プラットフォームはiOSを 選択 2. アプリケーションはAppを 選択 3.
Nextを選択 1. Xcodeの使い⽅
SwiftUIを触ってみよう プロジェクトの基本情報を⼊⼒し ます。 1. プロジェクト名をsampleにす る 2. 開発⽅法はSwiftUIを選択 3. 使⽤する⾔語はSwiftを選択
4. データの保存⽅法はNoneを選 択 5. Include Testsのチェックは外 す 1. Xcodeの使い⽅
SwiftUIを触ってみよう プロジェクトの保存場所を選択し ます。 先ほどデスクトップに作ったフォ ルダを選択してCreateを押しま しょう。 1. Xcodeの使い⽅
SwiftUIを触ってみよう 1. Xcodeの使い⽅ シミュレーターの実⾏と停⽌ができる プロジェクトの中に⼊っ ているファイルを確認で きて、クリックすると ファイルの内容をエディ ターエリアで⾒ることが できる
コードを書いたり、プレビューを⾒ること ができる 今開いているファイルの 詳細や設定を変えること ができる
SwiftUIを触ってみよう 2. レイアウト‧オブジェクトについて • プロジェクトファイル プロジェクトの情報が⼊っている プロジェクト名がファイル名になる • sampleApp 1番最初に実⾏されるファイル
• ContentView アプリのView(⾒た⽬)が書かれてい る • Assets アプリ内で使⽤するアセット(画像な ど)を⼊れるファイル
2. レイアウト‧オブジェクトについて SwiftUIのレイアウトの実装について軽く触れておきましょう。 SwiftUIのレイアウトには主に以下の3つがあります。 1. VStack … オブジェクトを縦並びにする。Vはverticalの略 2. HStack
… オブジェクトを横並びにする。Hはhorizontalの略 3. ZStack … オブジェクトを重ねる。Zはz軸と同じ意味 これらを使って3つのテキストを並べてみましょう。 SwiftUIを触ってみよう
SwiftUIを触ってみよう Step1 「余分なコードを消す」 ⾚枠で囲まれているところ を消してください。 2. レイアウト‧オブジェクトについて
SwiftUIを触ってみよう Step2 「Textをコピー&ペース ト」 Text("Hello world")の下に同 じものを2つコピー&ペー ストしてください。 Textが縦並びになると思い ます。
2. レイアウト‧オブジェクトについて
SwiftUIを触ってみよう Step3 「HStack‧ZStackを試し てみる」 VStackをHStackやZStackに 変えて、レイアウトの変化を ⾒てみましょう。 ZStackは⽂字列を変えてText が重なっていることを確認し てみましょう。
2. レイアウト‧オブジェクトについて
SwiftUIを触ってみよう Step4 「複数のStackを使ってレ イアウトを組み⽴てる」 HStackの中にVStackを複数 使ってレイアウトを組み⽴て てみましょう。 2. レイアウト‧オブジェクトについて
SwiftUIを触ってみよう Step5 「Text以外のオブジェクト に触れる」 Text以外にもSwiftUIには様々 なオブジェクトがあります。 その⼀部を紹介します。 2. レイアウト‧オブジェクトについて
SwiftUIを触ってみよう • Button Buttonを表⽰するオブジェクト。 Actionには押した時の動作を書 く。 • Image 画像やアイコンを表⽰するオブ ジェクト。systemNameに表⽰す
るアイコンの名前を書く。 • List ⼦要素をListにして表⽰するオブ ジェクト。 • Rectangle 四⾓形を表⽰するオブジェクト。 • Circle 円を表⽰するオブジェクト。 2. レイアウト‧オブジェクトについて
SwiftUIを触ってみよう 補⾜ 表⽰できるアイコンは 「SF Symbols」という アプリをインストールす ることで確認できます。 2. レイアウト‧オブジェクトについて
休憩タイム〜(10分) 18:18~
SwiftUIを触ってみよう モディファイア … View 構造体のプロパティ変更 するための修飾⼦。オブ ジェクトに対して外観や 振る舞いを指定すること ができる。 右図の⾚枠で囲ったとこ
ろがモディファイア。 3. モディファイアとは
SwiftUIを触ってみよう .padding オブジェクトの周りに余 ⽩をつけてくれるモディ ファイアです。 ()の中に値を⼊れてるこ とで余⽩の⼤きさを調整 できます。 3. モディファイアとは
SwiftUIを触ってみよう .foregroundStyle オブジェクトにある⽂字 ⾊を変更するモディファ イアです。 ()の中に⾊を指定するこ とができます。 3. モディファイアとは
SwiftUIを触ってみよう .background オブジェクトの背景⾊を 変更することができま す。 ()の中に⾊を指定するこ とができます。 3. モディファイアとは
SwiftUIを触ってみよう ポイント モディファイアのルール モディファイアには2つのルールがあります。 1. モディファイアは上から順番に実⾏される 2. 同じモディファイアがある時、上にあるモディファイアが 優先される 例を使って説明します。 3.
モディファイアとは
SwiftUIを触ってみよう モディファイアは上から 順番に実⾏される 上のボタン 背景⾊がかかったボタンの外 側に余⽩がかかっている 下のボタン 余⽩がかかって範囲が拡⼤さ れたボタンに背景⾊がかかっ ている
3. モディファイアとは
SwiftUIを触ってみよう 同じモディファイアがあ る時、上にあるモディ ファイアが優先される 右図の場合、⼀番上の .background(.yellow) が優先される。 3. モディファイアとは
4. その他の処理を実装するには アプリにはUIを配置するだけでなくボタンを押した時、⽂字を⼊ ⼒した時などユーザーが何かしらアクションを起こした時の処理 を実装する必要があります。 今回はボタンを押した時にテキストを表⽰する処理を実装してみ ましょう。 SwiftUIを触ってみよう
SwiftUIを触ってみよう Step1 「UIと変数を⽤意する」 押すボタンと表⽰するための TextとTextに渡す変数textを ⽤意します。 4. その他の処理を実装するには
SwiftUIを触ってみよう Step2 「ボタンを押した時の処 理を実装する」 ボタンを押した時の処理を{} 内に書きます。 ボタンを押した時に変数text に⽂字列を代⼊する処理を書 きます。 4.
その他の処理を実装するには
SwiftUIを触ってみよう 補⾜ @Stateとは varを使っているため変更可能に思えますが、ViewはStructなのでプロパ ティは通常は更新できません。@Stateをつけた変数は値の更新が可能にな ります。 また@Stateをつけた変数はデータの値が更新されるとSwiftUIが変更を検 知して画⾯を再描画してくれます。これによりユーザーの操作によって画⾯ の状態を変化させていく動きを実現できます。 4. その他の処理を実装するには
connpassページにGoogleフォームの URLを貼っています。 アンケートの回答にご協⼒くださ い。 アンケート回答のお願い
第2回は以上です!お疲れ様でした! 次回は2⽉23⽇を予定しています。 参考: 【総集編】【SwiftUI開発講座】ゼロからの SwiftUI開発!~3時間ぶっ通しで基本を マスターしよう~ . Rikuto Sato https://www.youtube.com/watch?v=EHdAqVVzAIE