SwiftUIでアプリ開発をするために必要なものが以下の2つです。
Macはアプリ開発をするための環境として必要であり、XcodeはAppleが提供している公式の開発ツールです。またXcodeは無料でインストールができます。
iPhoneが手元にあると実機テストをすることができます。
↓以下がXcodeをインストールするためのリンクです。
Xcodeインストール
インストール後にXcodeを起動させると以下のような画面が出てくるはずです。
次は早速プロジェクトを作ってみましょう。
「Create New Project」を選択します。
以下のような画面が出てきます。
「App」を選択し右下の「Next」を選択。
すると保存場所を聞かれるので「Desktop」に保存しましょう。探すのが簡単なためです。
次はプロジェクト名を記述する段階です。
「Project Name」は「test」にしましょう。
※もしデスクトップ内に「test」という名前のフォルダが既に存在している場合は、今回のiOSプロジェクトを「test_ios」にしましょう。
「Interface」をswiftUI
「Language」をSwift
を選択したら「Next」を選択しましょう。
そしてついにコードを書く段階にきました。
左側がファイルを選択するエリア
中央がコードを書くエリア
右側がシミュレーターであり、コードを書いたらその結果が反映されるエリア
となっています。
では実際にコードを書いてみましょう。
Yama
SwiftUIには「VStack・HStack・ZStack」という概念があります。
VStackは要素を縦並びに
HStackは要素を横並びに
ZStackは要素を重ねる
ことが可能です。
言葉だけでは分かりにくい部分もあるので実際に書いてみましょう。
まずはVStackだけを残しましょう。すると以下のようになるはずです。
以下はもし間違えて全て消してしまった時のためにコードを置いておきます。是非ご活用ください
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
}
}
}
#Preview {
ContentView()
}
では文字を書いてみましょう。文字を書くためにはTextを使用します。以下のコードのように書いてみましょう。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
Text("こんにちは")
Text("こんにちは")
}
}
}
#Preview {
ContentView()
}
するとシミュレーターの画面ではこのようになっているはずです。Textで記述した「こんにちは」が縦並びになっています。
次は「VStack」を「HStack」に変更してみましょう。他は同じで構いません。
import SwiftUI
struct ContentView: View {
var body: some View {
HStack{
Text("こんにちは")
Text("こんにちは")
}
}
}
#Preview {
ContentView()
}
実行結果はこのように横並びになっています。
そして最後は「ZStack」を試してみましょう。変化の違いをわかりやすくするために片方のTextを「おはよう」に変更します。コードは以下のようにしましょう。
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack{
Text("こんにちは")
Text("おはよう")
}
}
}
#Preview {
ContentView()
}
実行結果は以下のようになります。ZStackは要素を重ねるという性質があるため、文字が重なっています。
以上がVStack・HStack・ZStackの扱い方でした。つまりアプリを作る際にはこれらを用いて、まず最初にアプリ内の要素の配置を考える必要があります。
Yama
ではこれらの理解を深める段階です。VStackがどのような形をしているかを可視化しましょう。以下のようにコードを記述してください。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
Text("こんにちは")
}
.border(.black)
}
}
#Preview {
ContentView()
}
ご覧の通り、現状はこんなにも小さいです。
しかしVStack・HStack・ZStackは中身のサイズに応じて大きさが決まります。
また全ての要素は四角であるということを覚えておくとアプリのレイアウトを考える際に便利です。
また以下のように配置していき、アプリの構成を考えることがあります。
以下のコードの説明をしていきます。
まず初めにVStackを配置しました。次にそのVStackの{}内にHStackを配置しました。
つまりHStackはVStackの領域内に配置されているということを意味します。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack{
Text("こんにちは")
HStack{
Text("こんばんは")
Text("唐揚げ")
}
}
.border(.black)
}
}
#Preview {
ContentView()
}
これらを用いてアプリを構成していきます。実際のSNSアプリなどを開いてこのアプリはVStackとHStackまたはZStackをどのようにして組み合わせているのかを考えることがVStack・HStack・ZStackをどのようにして実践的に扱うかの良い練習になります。
Yama
では次に基本的なUI部品である「ボタン」の扱い方を解説していきます。
ボタンは何かを実行したい時に使われます。では以下のコードを記述してみましょう。
import SwiftUI
struct ContentView: View {
var body: some View {
Button("挨拶"){
print("こんにちは")
}
}
}
#Preview {
ContentView()
}
解説：
まずButtonと記述することでボタンの配置が可能となります。
Button("挨拶")の("挨拶")の部分はlabelと呼ばれる部分でボタンの名前を決めることができます。今回は「挨拶」にしました。もちろん自分の好きな名前を配置することができます。
それから{}内にボタンを押すことでどんなことが実行されるかについて記述します。今回の場合はコンソール内に「こんにちは」と表示されるコードを書きました。
「コンソール」とはよくAPI通信などデータを取得した際にちゃんと取得できているかを確かめる場でもあります。
今回はButtonがちゃんと機能しているかを確かめるという用途で使用していきます。
コードを記述した後のシミュレーターは以下のようになっているはずです。
では実際にボタンを押してこれがちゃんと動くのかを確認しましょう。まずはコンソールを開いてみましょう。右下にあるこのボタンを押してください。
そうするとエディタがこのようになるはずです。
では実際にボタンを押してみましょう。
現状はボタンのタッチされたかを認識する範囲が狭いため青文字の「挨拶」を押すようにしてください。(ボタンのタップ可能範囲はラベルのサイズに依存するため)
すると以下のように「こんにちは」とコンソール内に表示されるはずです。
このようにしてアプリの処理がしっかり動いているかを確かめつつ、アプリの開発を進めるというのが王道です。
Yama
SwiftUIの技術を上げる方法は山ほどあります。YouTubeであったり、インターネットで「SwiftUI Button 装飾」を調べるだけで検索結果は沢山出てきます。
また英語で調べるだけでも情報量が日本語の何倍もあるため、英語で調べることもおすすめです。
私の場合は、作りたいものをインターネットで調べて、出てきたものを実際に使ってこういう動きをするのかを確かめるという方法で技術を上げていきました。
といっても技術の上げる方法は人それぞれです。自分に合ったSwiftUIの習得の方法を探すというのが1番のおすすめです。
2026/03/20
