見出し画像

SwiftUI最初の一歩

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

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

お知らせ
電子書籍『Swift5初級ガイド』をAppleのブックストアから出しました。
サンプルは無料です。MacでもiPadでもiPhoneでも読めます。
Swift 5.3対応の第6版がダウンロード可能です。(ご購入済みの場合は無料アップデートです)
ブックストアから一度購入すると今後のアップデートは無料で読めます。

6宣伝store

詳細は connpass.com の 札幌Swiftでご確認ください。そして機会があればぜひ参加してください。
アプリ作りやプログラミング教育に関連する話題は 札幌Swift のfacebookページで発信しています。

・画像クリックで拡大表示できます
・画像を拡大表示中は画像の左右をクリックで画像だけを順に表示できます
画像はXcode 11.2です。

1 SwiftUI登場

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

画像2

毎年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として今年のWWDCで発表されました。
ここでも従来のフレームワークを統合するのではなく、両方で使える新しいフレームワークを作るものアリとの判断があったはずです。

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

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

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

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

2-1 必要環境

SwiftUI は Xcode11 から利用可能です。
フルに使うには macOS 10.15(Catalina)が必要ですが、10.14.4以降であればビルドと実行は可能です。

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で確認しました)

3 どこから始めるか

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

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

画像3

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

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

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


4 WWDCビデオ

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の基本」です。
この二つのセッションはチュートリアルに取り組む前にまず見てください。

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で実行しなければなりません。

チュートリアルページには英語での説明文と対応する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のチュートリアルはよくできていますが、問題は英語です。
翻訳ツールなどをじょうずに使ってください。積極的に使うことで時間も節約でき、勘違いも防げます。

この続きをみるには

この続き: 6,755文字 / 画像17枚
この記事が含まれているマガジンを購入する
単体で500円の記事10本を読めお得です。サンプルはXcodeのプレイグラウンドでもiPadのSwift PlaygroundsでもMacのPlaygroundsでも試せます。

まったく新しいSwiftUIに取り組むためのnoteをまとめました。 劇的にシンプルなコードでアプリが作れるしくみをプレイグラウンドを使っ…

または、記事単体で購入する

SwiftUI最初の一歩

快技庵 高橋政明

500円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。

ありがとうございます
2
古くからのMacプログラマ、現在はiOS向けに青空文庫リーダーアプリなどを作っている。「未経験者のための『コードを学ぼう』ガイド」『Swift5初級ガイド』など技術書執筆も行なっています。noteでは主にセミナーの内容を有料記事で公開しています。Twitterは@houhei

こちらでもピックアップされています

SwiftUIをためす
SwiftUIをためす
  • 11本
  • ¥1,000

まったく新しいSwiftUIに取り組むためのnoteをまとめました。 劇的にシンプルなコードでアプリが作れるしくみをプレイグラウンドを使って理解しよう。 note単体よりもリーズナブルに読めます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。