初心者向けSwift勉強会#2

Transcript

1. 初⼼者向けSwift勉強会#2 ~Swiftアプリ開発基礎&電卓アプリを作ろう！編~
2. エンジニアカフェについて
3. エンジニアカフェについて エンジニアが集まる、活躍する、成長する街、福岡。 https://efc.isit.or.jp
4. エンジニアカフェへのアクセス 営業時間　9:00 - 22:00 ／　相談受付時間　13:00 - 21:00 ／　休館日毎月最終月曜日 https://engineercafe.jp/
5. ⾃⼰紹介
6. ⾃⼰紹介 • 名前  吉川楓⾺ • 所属  九州産業⼤学 理⼯学部 情報科学科 3年 • ⼀⾔ まだまだSwift勉強中。
7. 本⽇のメニュー • Swiftアプリ開発基礎 ◦ アプリの開発に必要なもの ◦ アプリの開発⽅法について ◦ SwiftUIを触ってみよう • 電卓アプリを作ろう！ ◦ プロジェクト作成 ◦ 電卓アプリ開発(お時間の許す限り)
8. Swiftアプリ開発基礎
9. アプリの開発に必要なもの ①MacBook Pro/MacBook Air/iMac ②Xcode … Appleが提供しているiPhoneやiPadなど複数の Appleプラットフォームに対応したアプリを作成するために 使⽤する統合開発環境(IDE)である。
10. アプリの開発⽅法について アプリの開発⽅法には主に２つある。 1. Storyboardを使った開発 2. SwiftUIを使った開発 それぞれ説明していきます。
11. アプリの開発⽅法について • オブジェクトをドラッグ＆ ドロップで実装する開発⽅ 法 • 古い開発⽅法なのでネット の情報は充実 • Storyboardを扱っている参 考書が古い 1. Storyboardを使った開発
12. アプリの開発⽅法について • 画⾯のレイアウトなど全て をコードで実装する開発⽅ 法 • シンプルで、直感的にコー ドが書けることが特徴 • 最近発売されているiOSア プリ開発の参考書はほとん どコレ 2. SwiftUIを使った開発 第2回、第3回のアプリ開発ではSwiftUIを使って開発を進めていきます！
13. SwiftUIを触ってみよう 電卓アプリの開発に⼊る前に簡単なアプリを作りながらSwiftUIを 少し触ってみましょう。 メニューは以下の通りです。 1. Xcodeの使い⽅ 2. レイアウト‧オブジェクトについて 3. モディファイアとは 4. その他の処理を実装するには
14. SwiftUIを触ってみよう プロジェクトを作成する前にこ れから作るアプリのプロジェク トを⼊れるフォルダを作りま す。 デスクトップにSwift勉強会と いうフォルダを作りましょう。 1. Xcodeの使い⽅
15. SwiftUIを触ってみよう Xcodeでプロジェクトを作成し てみましょう。 Xcodeを⽴ち上げてください。 Create New Projectからプロ ジェクトを作成します。 1. Xcodeの使い⽅
16. SwiftUIを触ってみよう 作成するアプリのテンプレート を選びます。 1. プラットフォームはiOSを 選択 2. アプリケーションはAppを 選択 3. Nextを選択 1. Xcodeの使い⽅
17. SwiftUIを触ってみよう プロジェクトの基本情報を⼊⼒し ます。 1. プロジェクト名をsampleにす る 2. 開発⽅法はSwiftUIを選択 3. 使⽤する⾔語はSwiftを選択 4. データの保存⽅法はNoneを選 択 5. Include Testsのチェックは外 す 1. Xcodeの使い⽅
18. SwiftUIを触ってみよう プロジェクトの保存場所を選択し ます。 先ほどデスクトップに作ったフォ ルダを選択してCreateを押しま しょう。 1. Xcodeの使い⽅
19. SwiftUIを触ってみよう 1. Xcodeの使い⽅ シミュレーターの実⾏と停⽌ができる プロジェクトの中に⼊っ ているファイルを確認で きて、クリックすると ファイルの内容をエディ ターエリアで⾒ることが できる コードを書いたり、プレビューを⾒ること ができる 今開いているファイルの 詳細や設定を変えること ができる
20. SwiftUIを触ってみよう 2. レイアウト‧オブジェクトについて • プロジェクトファイル プロジェクトの情報が⼊っている プロジェクト名がファイル名になる • sampleApp 1番最初に実⾏されるファイル • ContentView アプリのView(⾒た⽬)が書かれてい る • Assets アプリ内で使⽤するアセット(画像な ど)を⼊れるファイル
21. 2. レイアウト‧オブジェクトについて SwiftUIのレイアウトの実装について軽く触れておきましょう。 SwiftUIのレイアウトには主に以下の3つがあります。 1. VStack … オブジェクトを縦並びにする。Vはverticalの略 2. HStack … オブジェクトを横並びにする。Hはhorizontalの略 3. ZStack … オブジェクトを重ねる。Zはz軸と同じ意味 これらを使って3つのテキストを並べてみましょう。 SwiftUIを触ってみよう
22. SwiftUIを触ってみよう Step1 「余分なコードを消す」 ⾚枠で囲まれているところ を消してください。 2. レイアウト‧オブジェクトについて
23. SwiftUIを触ってみよう Step2 「Textをコピー＆ペース ト」 Text("Hello world")の下に同 じものを2つコピー&ペー ストしてください。 Textが縦並びになると思い ます。 2. レイアウト‧オブジェクトについて
24. SwiftUIを触ってみよう Step3 「HStack‧ZStackを試し てみる」 VStackをHStackやZStackに 変えて、レイアウトの変化を ⾒てみましょう。 ZStackは⽂字列を変えてText が重なっていることを確認し てみましょう。 2. レイアウト‧オブジェクトについて
25. SwiftUIを触ってみよう Step4 「複数のStackを使ってレ イアウトを組み⽴てる」 HStackの中にVStackを複数 使ってレイアウトを組み⽴て てみましょう。 2. レイアウト‧オブジェクトについて
26. SwiftUIを触ってみよう Step5 「Text以外のオブジェクト に触れる」 Text以外にもSwiftUIには様々 なオブジェクトがあります。 その⼀部を紹介します。 2. レイアウト‧オブジェクトについて
27. SwiftUIを触ってみよう • Button Buttonを表⽰するオブジェクト。 Actionには押した時の動作を書 く。 • Image 画像やアイコンを表⽰するオブ ジェクト。systemNameに表⽰す るアイコンの名前を書く。 • List ⼦要素をListにして表⽰するオブ ジェクト。 • Rectangle 四⾓形を表⽰するオブジェクト。 • Circle 円を表⽰するオブジェクト。 2. レイアウト‧オブジェクトについて
28. SwiftUIを触ってみよう 補⾜ 表⽰できるアイコンは 「SF Symbols」という アプリをインストールす ることで確認できます。 2. レイアウト‧オブジェクトについて
29. 休憩タイム〜(10分) 18:18~
30. SwiftUIを触ってみよう モディファイア … View 構造体のプロパティ変更 するための修飾⼦。オブ ジェクトに対して外観や 振る舞いを指定すること ができる。 右図の⾚枠で囲ったとこ ろがモディファイア。 3. モディファイアとは
31. SwiftUIを触ってみよう .padding オブジェクトの周りに余 ⽩をつけてくれるモディ ファイアです。 ()の中に値を⼊れてるこ とで余⽩の⼤きさを調整 できます。 3. モディファイアとは
32. SwiftUIを触ってみよう .foregroundStyle オブジェクトにある⽂字 ⾊を変更するモディファ イアです。 ()の中に⾊を指定するこ とができます。 3. モディファイアとは
33. SwiftUIを触ってみよう .background オブジェクトの背景⾊を 変更することができま す。 ()の中に⾊を指定するこ とができます。 3. モディファイアとは
34. SwiftUIを触ってみよう ポイント モディファイアのルール モディファイアには2つのルールがあります。 1. モディファイアは上から順番に実⾏される 2. 同じモディファイアがある時、上にあるモディファイアが 優先される 例を使って説明します。 3. モディファイアとは
35. SwiftUIを触ってみよう モディファイアは上から 順番に実⾏される 上のボタン 背景⾊がかかったボタンの外 側に余⽩がかかっている 下のボタン 余⽩がかかって範囲が拡⼤さ れたボタンに背景⾊がかかっ ている 3. モディファイアとは
36. SwiftUIを触ってみよう 同じモディファイアがあ る時、上にあるモディ ファイアが優先される 右図の場合、⼀番上の .background(.yellow) が優先される。 3. モディファイアとは
37. 4. その他の処理を実装するには アプリにはUIを配置するだけでなくボタンを押した時、⽂字を⼊ ⼒した時などユーザーが何かしらアクションを起こした時の処理 を実装する必要があります。 今回はボタンを押した時にテキストを表⽰する処理を実装してみ ましょう。 SwiftUIを触ってみよう
38. SwiftUIを触ってみよう Step1 「UIと変数を⽤意する」 押すボタンと表⽰するための TextとTextに渡す変数textを ⽤意します。 4. その他の処理を実装するには
39. SwiftUIを触ってみよう Step2 「ボタンを押した時の処 理を実装する」 ボタンを押した時の処理を{} 内に書きます。 ボタンを押した時に変数text に⽂字列を代⼊する処理を書 きます。 4. その他の処理を実装するには
40. SwiftUIを触ってみよう 補⾜ @Stateとは varを使っているため変更可能に思えますが、ViewはStructなのでプロパ ティは通常は更新できません。＠Stateをつけた変数は値の更新が可能にな ります。 また＠Stateをつけた変数はデータの値が更新されるとSwiftUIが変更を検 知して画⾯を再描画してくれます。これによりユーザーの操作によって画⾯ の状態を変化させていく動きを実現できます。 4. その他の処理を実装するには
41. connpassページにGoogleフォームの URLを貼っています。 アンケートの回答にご協⼒くださ い。 アンケート回答のお願い
42. 第2回は以上です！お疲れ様でした！ 次回は2⽉23⽇を予定しています。 参考: 【総集編】【SwiftUI開発講座】ゼロからの SwiftUI開発！~3時間ぶっ通しで基本を マスターしよう~ . Rikuto Sato https://www.youtube.com/watch?v=EHdAqVVzAIE