スクリーンショット_2019-12-16_16

【Xcode】超初心者のためのSwiftUIチュートリアル1

1.SwiftUIって何?

SwiftUIとは、2019年6月にAppleが発表した新しい開発フレームワーク(アプリを作るための機能・枠組)で、Xcode11から使われるようになりました。これまでの Storyboardよりもコードがシンプルになり、画面作りもより簡単にできるようになりました。シミュレーターを立ち上げなくてもXcode内のプレビューで動作を確認できるようになったのも大きな変更点です。

学習する上で、相当プログラミングのセンスがある人を除いて、普通は未経験の初学者がいきなり最先端の技術やフレームワークに取り組むのはおすすめしません。なぜならエラーが出ても、解決法が分からずに行き詰まってしまうからです。先行者がトライアンドエラーを繰り返し、ブログや記事でSwiftUIに関するアウトプットがある程度蓄積した頃になると、検索すればエラーの解決法がわかる可能性が高まります。

また、SwiftUIの場合、Appleのチュートリアル自体が発表後に何度か修正されています。Xcode11やOSも、SwiftUIがまったく新しいフレームワークであるが故に、完全対応するには実動後に何度かの修正が必要になってきます。それが一段落した頃に取り組むと、初学者でもエラーが出にくく比較的スムーズに学習できるというわけです。

そろそろ発表されて半年が経過し、Xcode11とMacOSが数回バージョンアップされて初心者でもSwiftUIに手をつけやすい頃になりました。Appleのチュートリアル(基本的な使い方を解説する教材)を進めながら、SwiftUIでどんなことができるのか見ていきたいと思います。

始める前に、XcodeとMacOSは最新版にアップデートしておきましょう。

2.プロジェクトファイルをダウンロード

チュートリアルはAppleの開発者向けサイトから見ることができます。こちらのページ最下部にあるリンクボタンから開きましょう。英語が苦手な人はGoogleChromeなど自動翻訳機能のあるWebブラウザを使うのがおすすめです。こちらの記事ではGoogleChromeによる自動翻訳を見ながら進めていきます。

自分のXcodeでプロジェクトを立ち上げる前に、サイトからプロジェクトファイルをダウンロードしましょう。

スクリーンショット 2019-12-16 17.28.43

ダウンロードしたzipファイルを開くと、この章の完成版のプロジェクトと、素材画像の入ったフォルダがあります(素材画像は次回以降に使用)。

スクリーンショット 2019-12-16 18.04.21

自分でチュートリアルを進めていく際、チュートリアルの通りにコードを書いてもその通りに表示されない、動かないという場合があります。その時はエラーを修正してある完全版のプロジェクトファイルを見てコードを確認しましょう。

3.XcodeでSwiftUIの新規プロジェクトを作成する

それでは実際にチュートリアルを始めましょう。今回は「Creating and Combining Views(ビューの作成と結合)」のセクション1を扱います。

最初にXcodeを開いて新しいプロジェクトを立ち上げます。

スクリーンショット 2019-12-16 18.22.49

 左上にある「Single View App」を選んだら右下の「Next」をタップします。現れた画面が下の画像と違う場合は、上部のデバイス選択がiPhone・iPadアプリを作成する「iOS」になっているかを確認しましょう。
スクリーンショット 2019-12-16 18.24.53

プロジェクト名は「Landmarks」にします。プレビューで確認するだけならTeamは「none」でも動作確認できます。しかし「サインインしてませんよ」というエラーが表示されるのが煩わしい場合や、実機にビルドする場合はAppleIDでサインインしましょう。入力するAppleIDは、今使用しているAppleID、もしくは開発用に新しく取得したAppleIDでもOKです。アプリを自分で作って試すだけなら無料です(アプリをAppStoreに配信したり企業内で共有する場合には有料のDeveloper登録が必要です)。

ユーザーインターフェースで「SwiftUI」を選び、下のチェックボックスは空欄にして「Next」をタップします。

スクリーンショット 2019-12-16 18.26.53

この後、保存場所を選択して「create」をタップしたら指定の場所にプロジェクトが作成されます。

4.ContentView.swiftを開く

プロジェクトを見ると、Storyboardに慣れているSwiftユーザーはストーリーボードがないことに戸惑うでしょう。SwiftUIではキャンバスでデバイスでの表示をプレビューしながらSwiftファイルにコードを書き進める方式なので、ストーリーボードは存在しません。

ContentView.swiftを開き、キャンバス右上の「Resume」をクリックすると、デバイスのプレビュー画面が表示されます。

スクリーンショット 2019-12-18 12.05.05

キャンバスがなく、編集エリアだけ表示されている場合は下の図のようにすると、キャンバスが表示されます。キャンバスを閉じる時はもう一度「Canvas」をクリックするか、すぐ上の「Show Editor Only」を選びます。

スクリーンショット 2019-12-18 12.27.53

キャンパスにデバイスのプレビューが表示されたら、トラックパッドのピンチ(下図)で見やすい大きさに変更してください。

スクリーンショット 2019-12-18 13.41.05

 5.テキスト部分を変更する

ContentView.swiftのbody内のテキスト部分を「Hello, SwiftUI!」に変更しましょう。キャンバスに表示されているプレビューには、var body: some view {  } の中に書かれたコードが反映されます。コードを変更すると、すぐにプレビューが更新されます。更新されない時は右上の「Resume」をクリックしましょう。

スクリーンショット 2019-12-18 14.05.36

下のStruct ContentView_Previews:〜の部分は、プレビューの表示設定を行うコードです。試しにこの部分を選択して「command + /」 でコメントアウト(コードを無効化)すると、プレビューが表示されなくなります。(再度「command + /」か「command + z」で元に戻ります)

スクリーンショット 2019-12-18 13.29.36

エラーコードを書いた場合は、プレビュー画面は変更前の有効なコードの時の画面のままで、エラー表示が出ます。

スクリーンショット 2019-12-18 13.50.11

6.SwiftUIチュートリアルを進める際の留意点

チュートリアルを進める時に初心者が気を付けるポイントをがいくつかあります。

自動翻訳を参照している場合、指定のファイルや変更部分などがわかりにくい場合があります。下のような感じで、語順などを類推して補いながら読み取っていきましょう。

スクリーンショット 2019-12-18 14.53.02

また、指定のSwiftファイル名が実際に変更すべきファイルと違っている場合もあります。迷った場合は、説明文で指定されたSwiftファイル名だけでなく、チュートリアルに例示されているSwiftファイル先頭の「struct〜」以下に書いてある名前も確認してみましょう。途中でファイル名を変更してなければ、下図の2カ所の名前は同じです。違っている場合はコード全体を見比べて、どのファイルを編集するか自分で判断してください。

スクリーンショット 2019-12-18 14.47.39

コードを書き進めていると、チュートリアルの通りに書いているはずなのにエラーが表示されることもあります。その場合はダウンロードした完全版のSwiftファイルを参照してみましょう。

さらに大文字小文字の違い、記号やスペースが全角になっていないかなど基本的な点を見直し、それでもエラーが解消しない場合は、完全版のコードを丸ごとコピペしてもOKです。

エラーの出ないコードを書くのはもちろん大切ですが、チュートリアルの目的は「SwiftUIの使い方を知ること」にあります。書き方や仕組みが理解できたら、とりあえず次に進んだ方が時間を有効に使えます。

7.まとめ

ポイントをざっくりまとめると以下の通りです。

・初心者はちょっと遅れて始めるのがオススメ
・自動翻訳の説明は、末尾にある英文のファイル名やコードを日本語文の中に補って類推する
・編集するファイルに迷ったら「Struct」の名前も確認してみる
・エラーで行き詰まったらダウンロードした完成版を確認する
・不明なエラーに何時間もとらわれずコピペ。それで動いたら次に進む

印刷物のテキストに慣れ親しんでいる人の中には「間違いだらけのチュートリアルを公表するなんていい加減な!」と思う方もいらっしゃるかもしれません。しかしプログラミングというのはそもそもバグ(エラー)が出るのは日常茶飯事、表記が不正確でも修正して再配布した完全版データがあればよいというスタンスで成り立っています。

昔の印刷物ベースでテキストを作っていた時代とは考え方が違うので、そういう感覚に慣れることもプログラミングに親しむ上で大切です。

コピー&ペーストじゃないとエラーを解消できないのが気になる場合は、一通り終わった後にもう一度チュートリアルをやってみるといいですね。前回より慣れている分、エラーも少なくスムーズに進むと思います。

続きはコチラから→【Xcode】超初心者のためのSwiftUIチュートリアル2



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

*\(^o^)/*
6
40代にしてプログラミングの勉強を始めました。swiftやmicro:bitについてあれこれ書いていきます。時々3Dプリンターについてもメモします。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。