SwiftUI最初の一歩

SwiftUIは誰もが初心者です。これまでiOSアプリ開発未経験でもチャンスがあります。
この記事ではAppleが提供しているSwiftUIのチュートリアルの取り組み方も詳しく解説しています。Xcode11.2での表示との違いやトラブル対策も書いています。

【2020年12月28日に内容やリンクなどを確認し一部追記しました。
（最初の公開2019年11月）】

毎月札幌でiOSアプリ作りをアシストするセミナーをやっています。1時間にわたるセミナーの全内容を、物理的に参加できない方のためにnote上で公開します。

お知らせ
電子書籍『Swift5初級ガイド』をAppleのブックストアから出しています。
文字サイズを好みに変更でき、本文を検索可能な電子書籍です。
無料サンプルでご確認ください。
MacでもiPadでもiPhoneでも読めます。
Xcode 12に対応した第7版がダウンロード可能です。（ご購入済みの場合は無料アップデートです）
（2020年10月12日に第7版にアップデートしました）
Swift 5.3は第6版で対応済みです。
ブックストアから一度購入すると今後のアップデートは無料で読めます。

iOSアプリを作ろうシリーズのセミナーは2020年3月以降COVID-19感染拡大防止のため休止しています。
詳細は connpass.com の 札幌Swiftでご確認ください。そして機会があればぜひ参加してください。
アプリ作りやプログラミング教育に関連する話題は 札幌Swift のfacebookページで発信しています。

・・・

・画像クリックで拡大表示できます
・画像を拡大表示中は画像の左右をクリックで画像だけを順に表示できます
・ソースコード部分は横にスクロール表示できます
画像はXcode 11.2です。
【2020年12月28日追記：Xcode 12.3との違いがあれば追記しました。】

1　SwiftUI登場

『SwiftUI』は2019年のWWDCで発表されました。

毎年WWDC開催前に発表内容が予測されますが、この「脳みそドカ〜ン！」が（私にとっては）SwiftUIでした。

Keynote や Platforms State of the Union でまず概要が発表され開発者からの注目が集中しました。

2　SwiftUIとは

SwiftUIは新しいフレームワークです。

これまでは Cocoa と呼ばれるフレームワークがベースで、iOS用に Cocoa Touch が使われてきました。
SwiftUIはCocoaとは設計思想から異なるまったくの別ものです。

Cocoa Touchは登場して十年以上となり、当初想定していない環境で使われています。
いろいろ積み増し拡張された結果の弊害も目立ってきました。
Cocoa Touchの中核フレームワークはUIKitです。
今後ウェアラブルデバイスの発展を考え、最もUIKitの限界を感じていたのはApple自身でしょう。

Mac用アプリ開発で使われてきたAppKitフレームワークとUIKitの統合もAppleの課題の一つです。
これまでも取り組み、その結果がMac Catalystとして2019年のWWDCで発表されました。
ここでも従来のフレームワークを統合するのではなく、両方で使える新しいフレームワークを作るものアリとの判断があったはずです。

統合したフレームワーク作るのはめちゃくちゃ大変であることは容易に予想できます。
　規模が大きい　Mac　iPhone　iPad　テレビ　Watch　全部サポート
　ハードウェアのポテンシャルは高くなっている
　アプリ作りの支援は最重要
　もうかっているうちに作っちゃおう（笑）

これらの経緯から4つの明確な原則のもとにSwiftUIは設計されました。
Declarative　シンプルにより少ないコードで記述できる
Autoatic　ダイナミックタイプやダークモードなどに自動で対応
Compositional　学習しやすくすぐに使える
Consistent　インターフェースが常に一貫した状態にある

そしてリリースされた SwiftUI はこれまでとまったく違った、とても簡潔なコードを実現しました。

とても強力ですが、表示や挙動の微調整には向いていない面もあります。
適材適所を見極めて使っていくのが良さそうです。

2-1　必要環境

SwiftUI は Xcode11 から利用可能です。
フルに使うには macOS 10.15（Catalina）以降が必要ですが、10.14.4以降であればビルドと実行は可能です。
【2020年12月28日追記：最新のXcode 12.3でももちろん利用可能です。】

playground環境（Xcode または iPadアプリのSwift Playgrounds）でも実行できます。こちらの記事を参照してください。

Xcodeは各デバイス向けSDKやドキュメントまで内蔵しています。
Xcode 11.2には、iOS 13.2、tvOS 13.2、watchOS 6.1、およびmacOS Catalina 10.15用のSwift 5.1およびSDKが含まれています。

SwiftUIを試すために必要な環境はまだ落ちつていません。
Xcodeは11.3がテスト中、macOSは10.15.2のベータテスト中です。
ここでは Xcode 11.2 とmacOS 10.15.1 を使っています。（Xcode 11.2.1で確認しました）
【2020年12月28日追記：macOS 11.1でXcode 12.3で確認しました。】

3　どこから始めるか

最初にWWDCのKeynote や Platforms State of the Union を見た時、SwiftUIが何なのかどのような仕組みなのか私にはさっぱりわかりませんでした。
（2019年8月中旬から日本語字幕も付いているので助かりますが、中継やWWDC直後はありませんでした。）

現在では日本語のページもあります。（Xcode11のページです）

このページは英語版のAppleによる完全な翻訳です。
翻訳ページが更新されるには時間がかかることが多いので、大きな変更があった場合はまず英語ページを確認してください。

SwiftUIの概要説明とチュートリアル・ビデオ・ドキュメントへのリンクがあります。

まずこの日本語記事で概要と注意点などを確認してからWWDCビデオを見て、それからチュートリアルをやってみるのが最も効率が良いと思います。

4　WWDCビデオ

【2020年12月28日追記：WWDC2020のビデオも字幕付きで見ることができます。最初に見るなら『SwiftUIのご紹介』が良いかもしれません。】

WWDC2019ページのWatch Videosからリンクしているセッションビデオページの検索欄でSwiftUIを検索すると11のセッションが並びます。
（タイトルに「SwiftUI」を含まないセッションもリストアップされています）

iPadのWWDCアプリでは各セッションのタイトルと概要などを日本語で確認できます。（2019年11月にバージョン8.0にアップデートがあり Apple Developer にアプリ名が変更になりました。）
WWDCアプリ（Apple Developer）で「SwiftUI」で検索すると13セッションが表示されます。
タイトルも日本語に翻訳済みですが、ビデオはwebで見るのと同じ、英語セッションに日本語字幕つきのものです。

このうちまず最初に見るべきは Introducing SwiftUI: Building Your First App です（日本語字幕付き）。
WWDCアプリ（Apple Developer）でのタイトルは「SwiftUIの紹介：初めてのAppをビルドする」です。
もうひとつは SwiftUI Essentials （日本語字幕付き）はSwiftUIの全体像をつかむのに必見です。
WWDCアプリ（Apple Developer）でのタイトルは「SwiftUIの基本」です。
この二つのセッションはチュートリアルに取り組む前にまず見てください。

【2020年12月28日追記：WWDC2019のビデオはOSもXcodeもベータ版の状態でデモしています。Xcode 12とは異なる部分があります。】

4-1　Introducing SwiftUI: Building Your First App（SwiftUIの紹介：初めてのAppをビルドする）

このセッションは実際にコードを書きながらSwiftUIを説明しています。
素材は後で紹介するweb版とは違いますが、チュートリアルの一種です。
チュートリアルとは違いXcodeの操作方法も確認できます。
54分ほどのビデオ、スライドPDFは122ページです。

注意点としては既にXcodeのバージョンが変わりコードやXcodeの画面に細かな違いがあることです。

4-2　SwiftUI Essentials （SwiftUIの基本）

このセッションでは
・一つの画面を構成する方法と構文、ビューの修飾子（Modifier）について
・次にカスタムビューについて
・コントロールの構成について
・アプリの画面ナビゲーションについて
が順に解説されています。

『一度覚えたらどこでも使える』（Learn once, use anywhere）の特徴も強調されています。

58分ほどのビデオ、スライドPDFは292ページです。

チュートリアルに取り組む前に必聴のセッションはこの二つです。

余裕があれば SwiftUI Essentials で紹介されているほかのSwiftUI関連セッションビデオでは Data Flow Through SwiftUI （SwiftUIのデータフロー）、Building Custom Views in SwiftUI （SwiftUIでカスタムビューを構築する）と Integrating SwiftUI （SwiftUIを統合する）のセッションビデオをこの順で見るのがおすすめです。
カッコ内はWWDCアプリ（Apple Developer）でのタイトルです。

そのほかの関連セッションも SwiftUI Essentials セッションで触れられています。

5　チュートリアル

SwiftUIのチュートリアルは「Landmarks」アプリをSwiftUIで作り上げる手順を解説するwebページです。
残念ながらチュートリアルはまだ日本語には翻訳されていません。
Safariでこのページを見ながら、Xcodeで実際に作業する形式です。

SafariもXcodeも最新バージョンをおすすめします。
最新のXcode（11.2）でもプレビューを表示するにはmacOS 10.15で実行しなければなりません。
【2020年12月28日追記：最新環境はmacOS 11.1 Xcode 12.3 です。】

【2020年12月28日追記：もうひとつ『iOS App Dev with SwiftUI Tutorials』が登場しました。こちらはiOSアプリ作成のチュートリアルです。この記事では触れません。】

チュートリアルページには英語での説明文と対応するSwiftUIのコード、それにプレビューでの表示状態を見ることができます。
コードは追加変更部分が明示されています。

現在SwiftUIのチュートリアルは SwiftUI Essentials、Drawing and Animation、App Design and Layout、Framework Integrationの大分類で、計9つあります。
最初から順に取り組むと SwiftUI をひととおり体験しアプリが完成する構成になっています。

SwiftUIのチュートリアルページ冒頭部分にある青い「Get started」ボタンが最初のチュートリアルにリンクしています。

5-1　Creating and Combining Views

最初の分類である「SwiftUI Essentials」の最初のチュートリアルは「Creating and Combining Views」です。

SwiftUIのチュートリアルはよくできていますが、問題は英語です。
翻訳ツールなどをじょうずに使ってください。積極的に使うことで時間も節約でき、勘違いも防げます。

冒頭部分にこの概要説明文と Estimated Time、Project files（のダウンロードリンク）、Xcode 11（のダウンロードリンク）があります。
【2020年12月28日追記：現在は Xcode 12 のダウンロードリンクです。】
Estimated Time は推定所要時間（の目安）ですが、あまり気にする必要はありません。

私が取り組んだ時もこの時間の数倍かかりました。
時間がかかっても、Safariの表示が消えるなどの心配はありません。
中断する場合はセクションとステップをメモするとすぐに再開できます。

Project files は最初にダウンロードしておきましょう。ダウンロードしたファイル名は「CreatingAndCombiningViews.zip」です。
解凍すると「Resources」フォルダ内にSection 4で使うサンプル表示用の画像があります。
「Complete」フォルダにはこのチュートリアルの完成版プロジェクトがあります。

Section 1 は Create a New Project and Explore the Canvas です。
英文の指示に従ってXcodeで新規プロジェクトを自分のMacに保存してください。

最初にキャンバスにプレビューを表示するには時間がかかります。（機種によっては数十秒から1分以上かかるかもしれません）