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
91
初心者向けSwift勉強会#2
吉川楓馬
January 23, 2024
Tweet
Share
More Decks by 吉川楓馬
See All by 吉川楓馬
Githubのプロフィールページをおしゃれにしよう
yoshikawa0918
1
290
初心者向けSwift勉強会#3
yoshikawa0918
0
61
初心者向けSwift勉強会#1 ~Swift文法編~
yoshikawa0918
0
120
九州アプリチャレンジ・キャラバンに参加してきた話
yoshikawa0918
0
84
東京Flutterハッカソン行ってきたよ!!
yoshikawa0918
0
300
AkarengaLT_16_スライド.pdf
yoshikawa0918
0
73
ProcessingでAndroidアプリを作ろうの会
yoshikawa0918
0
210
サンプルを使って学ぶFlutter
yoshikawa0918
1
290
Other Decks in Programming
See All in Programming
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
1.1k
(Deep|Web) Link support with expo-router
mrtry
0
100
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
220
文化が生産性を作る
jimpei
2
490
コードレビューと私の過去と未来
jxmtst
0
170
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
150
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
370
Unlocking Python's Core Magic
leew
0
110
Делим тесты между QA и разработчиком
mariyasaygina
0
470
"型"のあるRailsアプリケーション開発 / Typed Rails application development
sinsoku
8
2.2k
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
440
RemixとCloudflare Stack におけるFile Upload
ossamoon
1
120
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Design by the Numbers
sachag
278
19k
Clear Off the Table
cherdarchuk
91
320k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Done Done
chrislema
181
16k
Unsuck your backbone
ammeep
667
57k
Large-scale JavaScript Application Architecture
addyosmani
509
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.9k
How GitHub (no longer) Works
holman
311
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Product Roadmaps are Hard
iamctodd
PRO
48
10k
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