これはなに
最近、叔父とApple Storeに行く機会があったのですが、そこで大量のiPhoneを目の当たりにした時に、ふとiOSアプリを作りたくなったので、その過程をまとめました。
ちなみに、私は6年前くらい前にiOSアプリ開発をしており、その際にはStoryboardを用いて作成していました。
最近はSwiftUIというものが主流らしいので、今回はSwiftUIを使用して、よく題材になるタスク管理系のアプリを作ってみようと思います。
StoryboardとSwiftUIの違い
- Storyboard
- ボタンやラベルなどのオブジェクトをドラッグ&ドロップで配置して画面レイアウトを作っていく手法
- SwiftUI
- 2019年頃から登場し、画面のレイアウトは全てコードで実装するという手法
色々と調べてみると、現在はSwiftUIが主流で今からアプリを作る場合には、ほとんどStoryboardは使われないとのこと。
(昔はStoryboard内の要素が増えていくとXcodeが重くなりがちっていうのと、GUIが故にコンフリクトした際に修正が難しいみたいな課題はありました。)
プロジェクトの作成
StoryboardとSwiftUIどちらも、MacでXcodeというツールを使って開発を行います。
(Xcodeは App Storeから DLできます)
Xcodeを開いたら、新しいプロジェクトを作成して、iOSアプリ選択。
InterfaceをSwiftUIに設定します。
作成が完了すると以下の画面になると思います。
(右側のプレビューが立ち上がっていない場合は、右上のresumeを押すと立ち上がります)
レイアウト作成
基本的に、レイアウトはbodyの中に書いていきます。
struct ContentView: View {
var body: some View {
// ここにレイアウト用のコードを追加していく
}
}
// 右のプレビューに表示するためのコードで、今回は触らない。
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
大枠を NavigationView / List / Text を用いて作ります
基本的に、親要素の {} の中に 子要素を入れていくようなイメージです。
HTMLを触ったことがある方であれば、そこまで違和感ないかと思います。
struct ContentView: View {
var body: some View {
NavigationView {
List {
Text("タスク1")
Text("タスク2")
Text("タスク2")
}
.navigationTitle("タスクアプリ")
}
}
}
-
NavigationView
- 階層的なページに対して簡単に画面遷移を実装するために使用
- ページのタイトルなども設定可能
- 最新のOSでは非推奨となっているため、その場合は NavigationStackを使用してください。
-
List
- iPhoneの設定画面等でもよく見るリスト要素。色々なアプリで利用されています。
-
Text
- 文字を表示するために使用します。
※細かい設定などは、公式リファレンスを参照してください。
達成状況を HStack / Image を用いて追加します。
struct ContentView: View {
var body: some View {
NavigationView {
List {
HStack {
Image(systemName: "circle")
Text("タスク1")
}
HStack {
Image(systemName: "circle")
Text("タスク2")
}
HStack {
Image(systemName: "circle")
Text("タスク3")
}
}
.navigationTitle("タスクアプリ")
}
}
}
-
HStack
- HはHorizontalの略で、横に要素を並べるために使用
- 他にもStackの種類として下記があります
- VStack
- 縦に要素を並べるために使用
- ZStack
- Z軸方向、要素を重練るために使用
- VStack
- 他にもStackの種類として下記があります
- HはHorizontalの略で、横に要素を並べるために使用
-
Image
- 画像を表示するために使用します。
- systemName を指定することでシステムにあらかじめ入っている画像を使用することができます。
- 名前はこちらを参照: https://developer.apple.com/sf-symbols/
まとめ(感想)
タスクの追加・削除・完了 などの動作はまだできていませんが、ざっくりとした見た目はこれで完了です。
思ったよりも少ないコード量でかつ直感的にレイアウトが組めた気がします。
またビルドの必要もなく、ほぼリアルタイムでのプレビューができ待ち時間が少ないのもありがたかったです。
おそらく Storyboard であれば、作業量及び動作確認に数倍以上かかっていた気がします。
iOSアプリ開発って聞くとなんだか難しそうな印象を抱く人も多そうに思いますが、HTML触ったことがあればおそらく誰でも簡単にレイアウトを組むことはできそうなので、興味をお持ちの方はとりあえず作ってみるのが良さそうに思いました！
(今回紹介した要素の組み合わせだけでも色々なレイアウトが組めると思います)
タスクの追加・削除・完了 などの動作はまだできていません
このあたりも調べつつ、また次回の記事で紹介できるようにします！