SwiftUIを試してみる | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

ソフトウェア紹介

HEXA BLOGその他ソフトウェア紹介2019.11.15

SwiftUIを試してみる

こんにちは
東京ゲームデザイナーのかみです。

みなさんりんご🍎はお好きでしょうか。
僕は大好きです。

そんなAppleから今年とある発表がありました。
https://developer.apple.com/jp/xcode/swiftui/
SwiftUIの発表です。

SwiftとはAppleが提供しているプログラミング言語で、
これを使ってiPhone,iPad,Mac等Apple製品のアプリ開発が出来ます。

従来ではUI用ライブラリUIKitや画面設計ツールのStoryBoardを使いながら開発していましたが、
それがSwiftUIだけで書けるという非常にシンプルな形になりました。

早速公式提供のチュートリアルをやってみましょう。
https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

この観光地スポット閲覧アプリのチュートリアルでは
観光地リスト表示→詳細画面表示→お気に入り登録機能→リストでお気に入りのみ表示
という一連の流れが学べます…が、あくまでリストを閲覧するのみで、
リスト内容の追加・更新機能はチュートリアルに入っておらずどう作るか気になります。
という事で新規登録可能な単語帳アプリをチュートリアルを参考にしつつ作ってみます。

観光地リストのJSONデータを下記のような単語リストとし、

[
{
“word”: “英語”,
“description”: “English”
},
{
“word”: “Japan”,
“description”: “日本”
}
]

表示してみます。

後は単語の追加と、画面の更新が出来ればOK！
現在のWordDataに1要素追加して書き込む処理を書きます。

最後に画面の更新ですが、SwiftUIでは画面を更新しろという命令を書くわけではなく、
ある変数を監視対象とし、変更があった場合自動でビュー(画面の特定部分)が更新されます。
今回は監視対象を単語リスト、ビューは単語一覧の部分とします。
詳しくないですがいわゆるRx(ReactiveExtensions)という奴でしょうか。

フローはこのような感じ

List部分のForEachに単語リストの変数を指定しただけですが、
単語が追加されると自動でビューが更新されます！

リセットも出来るよ

UIの設計についても大きく変わったので紹介したい部分は多いのですが、
個人的にこの更新処理が一番感動だったのでご紹介でした。
SwiftUIでのアプリ作成は以前と比べてより分かりやすく、作りやすくなっていると感じます。

また、SwiftUIの売りとして他デバイスとのソースコード共有化というものがあり、
AppleWatchでこの単語リストを表示したりしたかったのですがそこまで辿り着けず…無念。
チュートリアルではAppleWatchとの連携まで紹介されているのでこれからやっていこうと思います。

それでは！