きなりの壁、来る

はい、そういうわけでございまして。
「SwiftUI Tutorials」の2回目でございます。

前回はビューを作って組み合わせる、という基本の作り方を勉強しましたが、
今回は 「Building Lists and Navigation」、つまり、リストとナビゲーションの操作になります。

iPhoneアプリと言えばリスト表示。
そして、リストをクリックして詳細ページに遷移する。

この辺りをまるっとやってしまおうというのが今回のチュートリアルの内容です。
それでは、行ってみましょう!

SwiftUI Essentials – Building Lists and Navigation
https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation

まさかのジェイソン

……って思ったんですけどね。

Section1のStep2がはじまるや否や、
「Resourcesのフォルダに入っているlandmarkData.jsonを見てね!」
との記載がありました。

JSONというのは「JavaScript Object Notation」の略で、
プログラム内で使うデータを保持し、簡単に(?)活用するためのテキストベースのフォーマットです。

今回のチュートリアルでは「リスト表示」を行うので、
そのリストの中に表示させる各種データを「JSON型のデータ」として持っておいて、
プログラムの中から読み出し、リストを作ろう、ということのようです。

うん、理屈はごもっとも。
将来的にも、このやり取りをすることが多いから、勉強して絶対損はないですな。

でも、ちょっと早くないですかい?
まだチュートリアル2個目ですぜ?

普通の配列で良かったんじゃないかなーと思いつつ、スタートします。

ちなみに、
「landmarkData.json」からデータを引っ張ってくるコードは、
「Data.swift」というファイルにまとめられていて、その部分の解説はありません。

後でもう少し詳しい解説があることを祈りましょう。

画面の構成と行った設定

今回出来上がった画面は、

・1行分の画面(画像と文字が横に並ぶ形)の部分(LandmarkRowビュー)
・それをデータの行数分並べたリストの部分(LandmarkListビュー)
・リストの対象行をクリックして遷移する詳細部分(LandmarkDetailビュー)

こんな構成になりました。
「LandmarkDetail」は、前回作った画像と文字と地図の組み合わせのビューの使い回しです。

前回作ったものを有効活用しようとしたために、そこそこ複雑なデータ※が必要になってしまい、
仕方なくJSON型のデータを用意した、というのが正解のようですね。
(※タイトル用のテキストに加えて、画像の名前や地図の座標まで)

ただ、その分完成した画面は、かなり実践的に使えそうな画面になっています。
とても2個目のチュートリアルで作った画面には見えません。

設定的には、

・一度作ったビューの名前の変更
・プレビュー時に、ビューに配列データを渡して内容を表示させる設定
・プレビューレイアウトの調整(サイズの調整・「iPhone SE」などのプリセットの設定)
・リストの表示と、配列内のデータ個数で処理をループさせる設定
・Identifiable protocol(id変数を持っている構造体を明示するプロトコル)を持つ構造体を使ったループの設定
・ナビゲーションビュー、ナビゲーションリンクを使った詳細画面への遷移設定
・ナビゲーションバーの文字の設定

こんな感じ。

飛ばしてますねー。
リストの設定と、ナビゲーションを使った詳細画面へのリンクは簡単な設定で実現できるのですが、
そこに配列からのデータ渡しが入ると、構文を知らないために手も足も出なくなります。

これは困った。

詳細!SwiftUI iPhoneアプリ開発入門ノート

そこで、本を1冊購入しました。
こちらです!

詳細!SwiftUI iPhoneアプリ開発入門ノート
大重美幸さん著/ソーテック社
Amazonリンク

今回は公式のリファレンスのみである程度進めてみようと思っていたのですが……
やっぱり基本の基本は日本語解説に勝るものはありませんね!うん!方針転換!

こちらの書籍。
「Xcode」を使ったアプリの作り方についても書かれているのですが、
大変助かることに「Playground」を使った基本構文の解説もしてくれていまして。

今のワタシのように、
「チュートリアルを進めたいけど、そもそもチュートリアルの中で出てくる文法がわからねえ」
という人にピッタリの1冊になっております。

例えば、先程の「Identifiable protocol」なる代物。

SwiftUIでは、構造体(struct)という変数と処理を組み合わせたような便利な仕組みを使うのですが、
あらかじめ、特定の構造体の中に配列データを保持しようとした時に、
識別可能(Identifiable)な「ユニークid」を構造体の中に持っていますよ、と宣言しておくことで、
その構造体のデータを使ってループ設定をする際に、IDパラメーターの引き渡しを省略できるようになります。

……みたいな、謎の呪文をある程度※は理解することができるようになります。
(※ワタシの理解が全然追いついていないので、あくまで「当社比」とお考えください)

今回はココまで!

第2回にして若干暗礁に乗り上げてしまった……感もありますが、
出来上がった画面はとても素晴らしいものになりました。

それに、リストから詳細への切り替えは、以前のコードより格段にシンプルになっている気がします。

構造体(struct)で変数や処理を管理する方法も非常にスムーズ。
関数(function)は関数で別に設定があるようですので、ホントに便利な仕組みができたものです。

次は「Handling User Input」とのこと。

リストに「お気に入りスター」や「表示フィルタ用のスイッチ」を付けて、
アプリ内でユーザーからの処理を受け付けられるようにするチュートリアルのようです。

次はJSONみたいな複雑な「おまけ処理」は出てきませんように……。(←若干ビビり中)

0