公式チュートリアルで試すUIKitプログラミング
iOSアプリ開発のためのチュートリアルに UIKit もひっそり追加されていました。
Swift言語と UIKit を使ったアプリ作りを一通り体験できます。
Xcodeの操作なども体験できるApple公式の無料オンライン教材がより充実しました。
・画像クリックで拡大表示できます
・画像を拡大表示中は画像の左右をクリックで画像だけを順に表示できます
1 iOS App Dev Tutorials
このリンクから開いてください⬇️
『iOS App Dev Tutorials』
タイトルが「iOS App Dev with SwiftUI Tutorials」から
「iOS App Dev Tutorials」に変わっています。
サブタイトルが「Learn the basics of Xcode, SwiftUI, and UIKit to create native apps for iOS.」です。
スクロールすると最初に SwiftUI のチュートリアルがあります。
こちらについて詳しくは『新チュートリアルと2年目のSwiftUI』
を参照してください。
宣伝ですが、この有料記事を含むマガジン「SwiftUI次の一歩」が記事2本文の料金で7本の記事を読めるのでお得です😅。
WWDC2021に備えSwiftUIを復習するにも適しているとおもいます。
すべての記事はおよそ半分試読できますので、ぜひご覧ください。
UIKitのチュートリアルはその下に追加になっています。
ボリュームはUIKitの方がSwiftUIよりもかなり多いです。
この UIKit チュートリアルも Developer ページからリンクされていないようです。
このようなチュートリアルは需要があると思うのですがもったいないです、有効活用しましょう。
WWDC2021で正式に発表されるのかもしれません。
WWDCで発表されるとしても、手順を追って説明するチュートリアルは Xcode などツールのバージョンが変わると、説明とツールの画面や手順に違いが発生することがあります。
旬の時期はそう長くはないので、興味のある人は早めにやってみるのが良いでしょう。
1-1 チュートリアルについて
『新チュートリアルと2年目のSwiftUI』の「2 チュートリアルについて」と重複しますが
iOSアプリの作成手順を順にとても具体的に説明しています。
このため予備知識が少ない状態でも取り組める教材です。
ただしじっくり取り組むことが必要です。
自分の入力や表示と注意深く比較しチュートリアルとの違いを見つけ自分自身で修正しなければなりません。
それぞれのチュートリアルはページ単位で完結していて、それほど長くないので心配無用です。
完成状態もダウンロードできるので比較もできます。
コードの書き方だけでなくツールである Xcode の使い方も体験できます。
英語のみですが、それを理由に避けるのはもったいないです。
現在は翻訳ツールが実用的になっているので活用しましょう。
かつてはソースコード部分や説明文中のclass名やメソッド名まで翻訳するなど、実用性は今一歩でしたが現在では実用になります。
翻訳ツールの使いこなしと英語対策も『新チュートリアルと2年目のSwiftUI』に書きましたので参考にしてください。
チュートリアルは通常未経験者向けですが、この「Learn the basics of Xcode, SwiftUI, and UIKit to create native apps for iOS.」は iOS 用アプリを作ったことのない開発者向けです。
このため解説は最小限です。
アプリ作りが未経験の場合は難しいと感じる部分があるでしょう。
しかし手順のとおり操作すれば（時間はかかっても）同じものが完成します。
1-2 Xcode
このチュートリアルは最新のXcode 12.x 向けに作られています。
2021年6月3日現在最新のバージョンは 12.5 です。
Xcodeのインストールと準備は『新チュートリアルと2年目のSwiftUI』の「2-1 準備 Xcodeのインストール」に書きましたので参照してください。
ここにも書きましたが Xcode が英語アプリであることが気になるかもしれません。
メニューの基本構成は日本語のアプリと同じです。
⌘Q などのショートカットは英語表記のメニュー項目の頭文字が多いことに気づくでしょう。
Xcode については公式の情報「Xcode 12の紹介」を参照してください（ヘルプやダウンロードとリソースへのリンクがあります）。
無料アプリですし、とにかく気楽にさわってみてください。
繰り返しになりますが、Xcodeだけでなくチュートリアルも UIKit のドキュメントも英語です、英語アレルギーは捨てて取り組むのが iOS アプリ作りの第一歩です。
2 UIKitとは
UIKit はiOSアプリを作るためのフレームワークとして誕生しました。
現在でもiOS（iPadOS）とtvOSアプリを作るために使われています。
歴史的にはmacOSアプリを作るための AppKit を元にしています。
Macではマウスで操作していましたが、iPhoneではタッチ操作に変わったのでUIKitとして独立して作られました。
アプリの実行環境である OS の基本的な部分は macOS も iOS も共通しています。
OSの構造、ファイルシステム、アプリの構造、ローレベルのフレームワークもほとんど共通しています。
AppKit と UIKit は Objective-C言語の Cocoa を利用したフレームワークとして出発しています。
現在ではSwift言語に置き換えが進んでいて、Swift言語専用のフレームワークも増えています。
かつては Cocoa に対してCocoa touch の用語も使われていましたが、現在この呼び方は使われていません。
UIに関連しない処理は Foundationフレームワークが担います。
ただしSwift言語では文字列、数値、配列、辞書などは Swift Standard Library が提供するより新しく洗練された型を利用できます。
UIKit は登場から十年以上経過し、さまざまなデバイスサイズ対応やマルチタスクなど当初はなかった機能を追加したこともあり肥大化しています。
はじめて取り組む時には取っ付きにくく感じて当然です、理解できる部分を少しずつ広げることでアプリ開発の幅も広がります。
SwiftUI を利用する場合も UIKit の機能を利用する方法が用意されています。
SwiftUI は登場して日が浅いので、まだ UIKit でなければ実現できないものもあります。
英文ですが『About App Development with UIKit』なども参考にしてください。
特に Code Structure of a UIKit App の Figure 4 The core app objects が重要です。
このように UIKit を学びはじめるにはハードルが高い状態で、今回のようなチュートリアルが待ち望まれていました。
初学者向けの全体像から説明する情報が、特に Swift に移行してから不足していました。
私のセミナーでは公式の UIKit のちょうど良い概要情報がなかったのでサンプルの話から入っています。
この「iOSアプリを作ろう」マガジンともうひとつ『iOSアプリ開発入門』もUIKitを使ったアプリ開発の日本語情報です。
どちらのマガジンも UIKit の概要や開発ツールの基本を Swift で・日本語で読むことができます。
有料ですが各記事の前半を試読できますのでぜひご覧ください。
ちなみにUIKitについては上記マガジンに含まれる「iOSアプリを作ろう・アプリの仕組みとUIKit」を参照してください。
2019年の記事ですがUIKitの基本は2021年でも変わっていません。
3 チュートリアルの構成
SwiftUI のチュートリアルと基本構成は同じですが、チャプター数は多く「9」まであります。
チャプター番号が「iOS App Dev Tutorials」ページのみで表示されている点も同じです。
書類アイコンのページは Xcode の操作はなく解説のみです（このため目安の所要時間も短い）。
目安の時間はあまり気にする必要はありません。
英語ネイティブの技術者が取り組んだ場合の所要時間のはずなので、我々（英語に苦労する場合）が取り組む場合はこの数倍かかるのはまったく問題なしです。
この時間は制限ではありません、5分で表示が消えたりはしません。
安心してじっくり、納得することを優先して取り組んでください。
3-1 連続したChapter・ページ切り替え
ヘッダー部分の現在のページ名表示部分はメニューになっています。
UIKit Essentials の Getting Started with Today を開きヘッダーのメニューを開くとチャプターの表示は SwiftUIのチュートリアルと連続しています。
ただし SwiftUI チュートリアルの最後から UIKit チュートリアルの最初へはリンクしてはいません。
もし iOSアプリにはじめて取り組むのであれば現状（2021年6月）では SwiftUI からはじめることをおすすめします。
3-2 章の概要
1︎⃣ UIKit Essentials
Xcode と InterfaceBuilder を使って画面UIを作ります。
2︎⃣ Model-View-Controller
UIKit が前提としている MVC デザインパターンをまず体験します。
ストーリーボードとコードの関係をテーブルビューを使い解説しています。
3︎⃣ Navigation
階層構造になった画面を進んだり戻ったりすることをNavigationと表現します。
そのNavigationを実現するための手順を体験します。
4︎⃣ Table Views and Data Sources
Swift言語でのアクセス制御とプロトコルと継承を説明のみのページで紹介し、それから Table View Cells と Data Source に取り組みます。
さらにテーブルに独自の内容を表示します。
5︎⃣ Editable Cells
テーブルに表示する内容の作成や編集、日付の書式指定、情報を変更した場合の画面更新、キャンセルに対応したデータの変更などを体験します。
6︎⃣ Modality
新しいリマインダーを追加する画面をモーダルで表示します。
入力した新しい情報を保存します。
7︎⃣ Filtering Data
クロージャを使う関数を扱います。
条件で表示したり、削除に対応したりします。
8︎⃣ Design and Animation
ビューを使った簡易グラフ表示とアニメーションを体験します。
コードから制約を変更しアニメーションを実現しています。
カラーアセットも使っています。
9︎⃣ System Frameworks
EventKitフレームワークを使いデバイスのカレンダーとリマインダー情報にアクセスします。
最後の説明のみのページで学習を続けるためのリソースなどがあります。
3-3 ちょっとした注意点など
「成功の秘訣」にも書かれていますが、とにかく自分で入力するのが最重要です。
コード入力は特に、行の重複や入力もれに注意しましょう。
特に行単位の入力もれ（必要な行を入力していない状態）はみつけにくい場合があります。
Xcodeで行番号を表示し、チュートリアル画面の行数と確認するのが確実です。
行番号の表示方法と、新規作成したSwiftファイルの行数対応方法については「新チュートリアルと2年目のSwiftUI」の「6-4 コードの入力編集※」を参照してください。（※有料エリア）
コードをコピーしてペーストするのではなく、できるだけ自分でキーボードから入力してください。
Xcodeは入力の補完機能があります。
この機能に慣れることと、この機能を使って発生する問題（同じメソッド名で引数違いを選ぶなど）も体験できるのもこのチュートリアルの利点です。
Xcode入力途中で発生するワーニングなどにも慣れましょう。
入力途中のワーニングには、入力が完了すると消えるものもたくさんあります。
入力途中で英語が表示されると驚かされますが、確認しつつまず行単位で入力を終えてからじっくり表示を読み込んでください。
プログラミングで表示されるワーニングやエラーメッセージは文法的な不整合があることを伝えるだけです。
問題点と対処法を的確に表示しているとは限りません。
慣れないうちはエラーが表示されたことそのものにあたふたしてしまいますが、エラー表示を認識しつつチュートリアルの（正解の）コードとの違いを見つけ修正することに集中してください。
エラーと入力ミスの対応のひとつひとつがプログラム開発スキルになります。
当然ですが、チュートリアルと同じコードを入力すればワーニングやエラーは消えるはずです。
3-4 Project filesについて
チュートリアル各ページ（説明のみを除く）にある Project files のリンクからそのページに対応するプロジェクトファイルをダウンロードできます。
プロジェクトは、ソースコードや画面の情報などを含むアプリ作りに必要な一式全体を示す用語です。
この一式を管理するファイルを「プロジェクトファイル」と呼びます（拡張子は .xcodeproj）。
解凍すると StartingProject と Complete の二つのフォルダーがあります。
（それぞれの Today.xcodeproj を Xcode で開くとチュートリアルを開始したり、完成版を確認したりできます）
StartingProject はそのページのチュートリアルに使う開始点です。
前のページで自分で作成したプロジェクトを利用することも原理的には可能ですが、何らかのもれや違いがあるかもしれません。
StartingProject ならその心配なしにチュートリアルをはじめることができます。
【必要なデータが設定済みの StartingProject もあります】
Complete はこのページのチュートリアルをすべて入力した状態です。
自分で入力をすすめて何か問題があった場合に比較するのに使います。
3-5 Xcode の準備
Xcodeのインストールと準備は時間がかかりますので、先にダウンロードすると時間を有効に使えます。
「新チュートリアルと2年目のSwiftUI」の「2-1 準備 Xcodeのインストール」と「2-2 Xcodeの設定」を参照してください。
この記事では Xcode のバージョンは12.3ですが、12.5でも変わっていません。
チュートリアルのプロジェクトをダウンロードして最初に開くと次のような表示が出ます。
インターネットからダウンロードしたプロジェクトだけど開いても良いか？
の確認です。
「Trust and Open」をクリックすると Xcode で開くことができます。
Xcodeはプログラミングツールなので基本的に『何でもできます』。
悪意のあるプロジェクトも開いたり実行したりでき、その場合には問題が発生します。
どこからダウンロードしたか・何を開くのか、常に確認するようにしてください。
ここからは UIKit チュートリアルの各ページの概要を書きました。
型やメソッドなどへのリンクも貼っています。
注意点やヒントも書きましたので参考にしてください。
1︎⃣ UIKit Essentials
UIKit のチュートリアル最初の章です。
1︎⃣から9︎⃣は章の番号です。
各章には複数のページがあります。
ページを完了しても実行結果に変化がないものもあります、このため可能であれば章単位に取り組むのが効率が良く、モチベーションも保てそうです。
1︎⃣-1 Getting Started with Today
最初のページは解説だけ（Project files と Xcode へのリンクはありません）です。
「Today」は今回のチュートリアルで作成するアプリ名です。
翻訳ツールで「今日」などと表示される場合は「Todayアプリ」と読みかえてください。
このページではチュートリアルの概要とUIKitについて、チュートリアルで作成するアプリの概要、成功の秘訣などが書かれています。
無料で読める英文の参考資料へのリンクを含みます。
宣伝ですが：日本語の参考資料としては拙著「Swift5初級ガイド」をどうぞ。
「Swift5初級ガイド」はSwift言語でプログラミングについての入門書です。
「UIKitとCoreGraphicsの概要」などアプリ作りや Playgrounds での実用的なコード作りのための説明を含みます。
ブックアプリ用の電子書籍です。
キーワードで検索でき、好みの文字サイズで読むことができます。
サンプル無料ですので、ぜひ上記リンクからダウンロードしてみてください。
1︎⃣-2 Creating a Storyboard App
Creating a Storyboard App
Xcodeで新しいプロジェクトを作るところからはじまります。
プロジェクトのダウンロードとXcode 12のダウンロードリンクがあります。
チュートリアルの最初なので Project files は StartingProject はありません、Complete のみです。
Xcode を開き自分でプロジェクトファイルを保存してください。
プロジェクトファイル「Today.xcodeproj」とフォルダーなどが保存されます。
Interface Builder を使って画面を作成します。
画面は設定可能項目がたくさんあります。
チュートリアルでは操作部分のみを明るく、このチュートリアルで利用しない部分を暗く表示しています。
画面を拡大し自分の Xcode 画面でも同じ操作をしてください。
この段階ではシミュレーターで実行してもテーブルの区切り線を表示するだけです。
Section 3 の Create a Reminder Data Source で「MVC」デザインパターンが登場します。
UIKit の根幹です。
V は UIView クラスを継承、C は UIViewController クラスを継承したクラスを使います。
UIKit についての資料は（英語ですが）「Displaying and Managing Views with a View Controller」などがあります。
最初のページは実行結果も地味です。
説明部分も重要な用語が並んでいますが、チュートリアルの性格上詳しい解説はありません。
疑問は別途解説資料を参照し消化するのがベストですが、まずは新しい用語の洪水にめげることなくこのページを終えてください。
最後に「Check Your Understanding」で復習してください。
1︎⃣-3 Setting Constraints with Auto Layout
Setting Constraints with Auto Layout
「Auto Layout」はビューのレイアウトを文字通り自動化するためのしくみです。
レイアウトの自動化を実現するために必要な情報が constraint（制約）です。
「Auto Layout」はiPhoneの機種が増え画面サイズの種類が増えたことと、iPadのマルチタスキングでアプリがデバイスの全画面を利用できない場合に対応するため導入されました。
iPhoneだけで動作するアプリであっても「Auto Layout」は必須です。
constraint（制約）は相手との位置関係と条件などからなる情報です。
実際にはインスタンスで、コードからアクセスすることも可能です。
ここでは Interface Builder を使ってconstraint（制約）を指定しますが、コードで指定することも可能です。
Interface Builder を使うと設定も直感的で、矛盾があった場合の確認も比較的楽なので慣れるまでは Interface Builder を使うことをおすすめします。
constraint（制約）の設定は関連する項目が多く複雑です。
このチュートリアルでは最もシンプルなレイアウトから開始するので心配はありません。
「Auto Layout」は最終的に固定サイズである画面の中にアプリのビューをどのように収めて表示するかを調整します。
画面は固定ですが、表示する文字数が変わったり画像の大きさが変わったりします。
アクセシビリティ機能で表示文字サイズも変わる（ダイナミックタイプ）ことも忘れてはなりません。
表示すべきビューの幅や高さが不足することのなく、かつ見栄え良くレイアウトするために Auto Layout はとても柔軟な設定が可能です。
このページではビューと親のビューとの制約、次にビューとビューの制約、最後に三つ目のビューとの制約を順に設定します。
制約の設定方法も複数体験できます。
公式資料（英文）には「Positioning Content Within Layout Margins」などがあります。
ここではいろいろな制約の設定方法を体験しますが、通常は確実に設定できる（または慣れている）方法でかまいません。
2︎⃣ Model-View-Controller
2章はMVCデザインパターンがテーマです。
ただしMVCの解説はありません。
チュートリアルでは詳しい解説はないのでので自分で調べなければなりません。
2︎⃣-1 Connecting View Objects to Code
Connecting View Objects to Code
インターフェースビルダーでストーリーボードで定義したオブジェクトをコードから利用できるように、コードと接続の概説です。
説明のみですが、重要な情報です。
@IBOutlet と @IBAction は独特の書き方ですが、慣れてください。
IB は Interface Builder を表します。
現在は Interface Builder ではストーリーボードファイルを主に扱います。
もともとは NIB ファイルが Interface Builder が作成するファイルでした。
2︎⃣-2 Connecting Outlets and Actions
Connecting Outlets and Actions
Action（アクション）とOutlet（アウトレット）を作成します。
接続することで、ビューのクラスで生成したインスタンスと同様にコード内で利用することを可能にします。
翻訳ツールによっては Outlet を「コンセント」と訳す場合があるようです。
接続は Action と Outlet だけではなく、ストーリーボードファイルのビュー（やビューコントローラー）の実際の型名も選択し、目的のビュー定義が使われるようにします。
Editor メニューの Assistant で Interface Builder 画面とソースコードを並べて表示します。
このページのSection 2ではコードからストーリーボードのボタンへ接続する例を動画で説明しています。
動画は独立したウインドウに表示すると簡単に拡大表示できます。
今後も記事を増やすつもりです。 サポートしていただけると大変はげみになります。