「SwiftUI気になります…」という方も多いと思います。
こんにちは!iOSアプリ開発歴6年のシンヤです。
この記事では、2019年のWWDCで発表されたSwfitUIをいじってみたいと思います。
この記事を読むと、SwiftUIの素晴らしさが具体的にわかると思います。
SwiftUIのプロジェクト作成
新規プロジェクトから、Single View Appを選択し、Nextをクリックします。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット_2019-06-05_14_23_20.png)
Use SwiftUIにチェックをいれましょう。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット_2019-06-05_14_24_07.png)
すると、左側にSwiftUIのソースコード、右側にシミュレーターが表示されます。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.25.05.png)
試しに、Textの文字を編集してみます。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット_2019-06-05_14_26_56.png)
すると…「リアルタイムで編集できてきる!」
UIKitの時代と比べて、開発がはかどりそうですね。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.32.28.png)
⌘を押しながら、右のTextをクリックしてみます。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.30.24.png)
するとポップアップで編集画面がでてきます。
ここでコードを書かずに、直感的にフォントのデザインを編集することができます。
「勝手にコードが編集されてている!」
⌘を押しながら、コード部分をクリックしても同様に編集ができます。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.31.57.png)
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.32.22.png)
HStackに埋め込んでみましょう。Embed in HStackをクリックします。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.32.28.png)
すると、ソースコードが編集されました。TextがHStackで囲まれています。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット_2019-06-05_14_33_02.jpg)
次に、右上のプラスボタンをクリックします。すると、UIパーツが表示されます。Textをクリックしてみましょう。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.33.47.png)
Textが追加されました。HStack(Horizontal Stack)内にTextViewがあるので、横にTextが並びます。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット_2019-06-05_14_34_27.jpg)
Spacerを追加してみましょう。
![](https://ymmtshny.com/wp-content/uploads/2019/06/スクリーンショット-2019-06-05-14.34.36.png)
TextとTextの間にスペースが挿入されました。
SwiftUIチュートリアルのセクション1から3は以上です。
まとめ
かなり直感的にアプリをつくることができますね。
右側のスマホ画面上で編集すれば、コードを書かずとも勝手にコードが挿入されていきます。
デザイナーの方でも簡単にUIがつくれちゃいますね。
SwfitUI「かなり楽しい」です。