Zenn
Open5

SwiftUI習得ジャーナル

iOS
Swift
Xcode
SwiftUI
aromariousaromarious

学習者のプロフィール

  • インフラ・バックエンドエンジニア
  • iOS はユーザとしての知識しかない
  • Xcode は一応触ったことがある程度。他のIDEは数種類経験あり、触りながら習得できると判断
  • Swift と Storyboard でトイアプリを作ったことがある（2年前）
  • SwiftUI は今回初めて
  • 英語は苦にならない

進め方

Apple Developer の動画視聴

https://developer.apple.com/videos/

WWDC2019,2020を中心に必要なものをピックアップする。

主なテーマ…

  • Xcode
  • SwiftUI
  • その他 iOS のお約束で優先度の高そうなものから

Apple Developer の SwiftUI のチュートリアル

"Introducing SwiftUI" を写経しながら実施。

https://developer.apple.com/tutorials/swiftui

ただ動かすだけにならないよう注意。

以下のポイントについて留意しながらすすめる。

  • SwiftUIのUI構築方法
  • データの取り扱い方
  • その他iOSのお約束
  • Xcodeの使い方
  • 問題解決（デバッグ手法、テスト手法など）の具体的オペレーション
aromariousaromarious

Apple Developer 動画ピックアップ

SwiftUIでのアプリ開発の全体像を把握するために必要そうな動画をピックアップし、優先順位をつけた。

まず見る

次に見る

必要になったら見る

Apple Developer チュートリアル

動画を見て、なんとなく把握できてきたなと思ったらチュートリアルに着手する。飽き性なので、手を動かしつつ動画も見たりして進める予定。

上記を理解するための基礎知識

動画やチュートリアルに登場するSwiftの言語仕様がわからなくなったらここで調べる。

aromariousaromarious

Apple Developer 動画視聴記録と概要メモ（予定）

あとで書く

まず見る

次に見る

必要になったら見る

aromariousaromarious

【✍🏻 記録中】SwiftUI Tutorials ハンズオン記録と概要メモ

SwiftUI Tutorials | Apple Developer Documentation

Landmarksというアプリを作りながら学習を進めていく。

SwiftUI Essentials

Creating and Combining Views

SwiftUIの宣言的なUI記述に慣れる。スムーズに完了。

Building Lists and Navigation

LandmarkRowのPreviewが表示されず苦労した。プレビューでは不具合の原因を突き止めることは難しい。通常実行でデバッグしたところ、プレビュー用のJSONデータ読み込みのモジュールのtypoが原因と判明。無事表示できた。

Previewには

  • 通常プレビュー
  • ライブプレビュー
  • デバッグプレビュー

の3種類がある。

print呼び出しで原因究明を試みたが、いずれのモードでも出力されなかった。プレビューだとビュー表示に関係ないことは実行をスキップするのだろうか？ デバッグプレビューでブレークポイントを置いてStepOverしたが、printをStepOverしてもコンソールには何も出力されなかった。Xcodeのデバッガの使い方をマスターすればデバッグプレビューで原因究明できたのかもしれない。

もちろん、通常実行では出力された。その方法ですぐに原因が判明したため、今回はひとまずそれでおいて、次へ進む。

Handling User Input

  1. Mark the User’s Favorite Landmarks…Favをつける（見た目のみ。ifの使い方）
  2. Filter the List View…@Stateアトリビュート
  3. Add a Control to Toggle the State…$接頭辞での@State変数とのバインディング
  4. Use an Observable Object for Storage…ObservableObjectプロトコル準拠のクラスを作り、@Publishedアトリビュートでビューに紐付いた変数を示す
  5. Adopt the Model Object in Your Views…上記で定義したモデルをビューに紐付ける。@EnvironmentObjectアトリビュートでの受け渡し。
  6. Create a Favorite Button for Each Landmark…@Binding変数の使い方。このアトリビュートのついた変数はこのビュー内のボタンの状態とバインドされる。

WWDCのため中断

6/8 22:00 - WWDC2021が始まってしまったので、セッションを見て回るので忙しいかもしれない。

Drawing and Animation

Drawing Paths and Shapes

6/12 22:00-

  1. Create Drawing Data for a Badge View…HexagonParameters.swift作成、写しただけ
  2. Draw the Badge Background…Pathで絵を描く。ピンと来ないまま写している状況。パラメータの値の必然性がわからないが、これはデザインツールなどで作るものなのだろうなと推測してとりあえず次。
  3. Draw the Badge Symbol…で、このチャプターはそもそも「バッジ」を描くわけだが、バッジが何なのかわかっていないままここまできている。このセクションでは
  • アプリアイコンのインポート
  • Pathでシンボルを描く
    を実施。描くための唐突な定数に戸惑ったまま終わった感。次。
  1. Combine the Badge Foreground and Background…図形操作がピンと来なすぎて変な笑いが出ながら完了。この図形（バッジ）の使途も了解できないまま次。

Animating Views and Transitions

アニメーションをやってみるセクション。

  1. Add Hiking Data to the App
    動かすためには動かすブツを作らねばならぬので作る。Hikeモデルをつくり、中身のJSONを読み込むコードを書く。Landmarkの読み込みを作ったときと同じ。Hikeを表示するViewをいくつかインポートさせられる。ちょいズル。
  2. Add Animations to Individual Views
    HikeViewでCloseシンボルをOpenへ遷移するアニメーションを書く。動体視力が悪くてアニメーションの違いがいまひとつ区別がつかないが、気にしない。
  3. Animate the Effects of State Changes
    Buttonのaction引数のtoggle()をwithAnimationで囲むと、ボタンだけでなくtoggle()動作もアニメーションつきになる。アニメーションの途中で何回もボタン押すようなことをしても破綻することなく動作する。
  4. Customize View Transitions…Transitionの定義の仕方、extensionで書く
  5. Compose Animations for Complex Effects…写しただけでわかっていないので明日もう一度やる。
    6/13 01:00

もう一回 Animating Views and Transitions (6/13 11:30)

  1. Add Hiking Data to the App
    ここでHikeを表示するViewをいくつかインポートさせられるが、これを手でタイプする。小さいパーツから順に作る。
    a. GraphCapsule.swift…CapsuleはShapeプロトコルなのでforegroundではなくfillで色をつける。
    b. HikeGraph.swift…GraphCapsuleを並べるView。KeyPathを勉強したほうが良い。
    c. HikeDetail.swift…HikeGraphの下にボタンを並べたやつ
    d. HikeVIew.swift…HikeDetailの上にタイトルと距離と表示トグルボタンのあるやつ
    の順。
    手でタイプして、わかった度がすこし上がった。
    6/14 0:45

App Design and Layout

Composing Complex Interfaces

楽しかった。カテゴリ別の写真付き目次を作ったり、先頭にFeaturedの写真をつけたりした。NavigationView や TabVIew など。

Working with UI Controls

ProfileEditorを作る

Framework Integration

Interfacing with UIKit

ｲﾏｺｺ 6/18 16:00
UIKitをSwiftUIに統合するときの作り方。当面は必要ないと思うので一通り流す。

  1. Create a View to Represent a UIPageViewController
  2. Create the View Controller’s Data Source
  3. Track the Page in a SwiftUI View’s State
  4. Add a Custom Page Control
    done.

Creating a watchOS App

一通りうつした。Extensionてついてるのを編集していったけど、ついてないやつはじゃあ何なのか不明。Section5のところをうまく再現できなかったが、Watch用のアプリを作りたくなったときにまたやってみることにして、次。

Creating a macOS App

  1. Add a macOS Target to the Project
  2. Create a macOS Detail View
  3. Update the Row View
  4. Update the List View
  5. Add a Built-in Menu Command
  6. Add a Custom Menu Command
  7. Add Preferences with a Settings Scene

途中でビルドエラーが発生するようになり、エラーメッセージを見ても原因がつきとめられなくなってしまった。

ダウンロードしたプロジェクトの StartingPoint フォルダから再開しようとしたが、うまくいかない。

CompleteフォルダでXcode13(beta)のプレビュー、ライブプレビュー、デバッグプレビュー、実機プレビュー、実機実行を整頓したいのでここでとまっている

どうもエラー多発でうまくプレビューできない。あとで単純な構成のものを自分で作ってやってみることにして、このチュートリアルは終わりにする。

6/21 15:00