はじめに
このハンズオンでは、SwiftUIを使って簡単なじゃんけんアプリを作成します。プログラミング初心者の方でも、ステップバイステップで進められるように構成しています。
gitHubは以下のリンクです
https://github.com/orukahairuka/janken
必要な環境
- macOS（最新版推奨）
- Xcode（最新版）
- 基本的なMacの操作ができること
Step 1: Hello World - 最初の画面を作ろう！
まずは、アプリの基本となる画面を作成します。「じゃんけんアプリ」という文字を表示するだけのシンプルなものから始めましょう。
1-1. プロジェクトの作成
-
Xcodeを起動して「Create New Project」を選択
-
「iOS」→「App」を選択して「Next」
-
以下の設定で作成：
- Product Name:
JankenApp - Organaization Identifier:
自分の好きなIDを設定 - Interface:
SwiftUI - Language:
Swift
- Product Name:
1-2. ContentView.swiftを編集
プロジェクトが作成されたら、ContentView.swiftを開いて、以下のコードに書き換えます：
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
// じゃんけんアプリのタイトルを表示
Text("じゃんけんアプリ")
.font(.largeTitle) // 文字を大きくする
.foregroundColor(.blue) // 文字の色を青にする
}
.padding()
}
}
#Preview {
ContentView()
}
1-3. コードの解説
// 📱 Text ビュー
Text("じゃんけんアプリ")
- 文字を表示するための最も基本的なビュー
- ""の中に表示したい文字を書きます
📦 VStack
VStack {
// ここに縦に並べたいビューを書く
}
- 複数のビューを縦に並べるためのコンテナ
- VはVertical（垂直）の略
- 今は1つだけですが、後でボタンなどを追加します
🎨 修飾子（Modifier）
.font(.largeTitle) // 文字サイズを変更
.foregroundColor(.blue) // 文字の色を変更
- ビューの見た目を変更するメソッド
- ドット（.）でつなげて書きます
- 順番が大切：上から順に適用されます
📱UIの構成
1-4. 実行してみよう！
- 左上の実行ボタン（▶️）をクリック
- シミュレータが起動するのを待つ
- 青い大きな文字で「じゃんけんアプリ」が表示されたら成功！
💡 ポイント
- エラーが出たら：赤い印をクリックして内容を確認
- プレビューが表示されない：右上の「Canvas」ボタンをクリック
- 自動補完を活用：.を打つと候補が表示されます
Step 2: Button Basics - ボタンで動きをつけよう！
Step 1で文字を表示できたので、次はボタンを追加して、タップできるアプリにしていきます。プログラミングの醍醐味である「インタラクティブ（対話的）」な機能を作りましょう！
2-1. コードを更新
ContentView.swiftを以下のコードに更新します：
import SwiftUI
struct ContentView: View {
// タップ回数を記録する変数
@State private var tapCount = 0
var body: some View {
VStack {
// Step 1で作ったタイトル
Text("じゃんけんアプリ")
.font(.largeTitle)
.foregroundColor(.blue)
// タップ回数を表示
Text("タップ回数: \(tapCount)")
.font(.title2)
.padding()
// タップできるボタン
Button("タップしてね") {
// ボタンが押されたときの処理
tapCount += 1
}
.font(.title)
.padding()
.buttonStyle(.borderedProminent)
}
}
}
#Preview {
ContentView()
}
2-2. 新しく追加した機能の解説
🔘 Button - タップできるボタン
Button("タップしてね") {
tapCount += 1
}
- "タップしてね" → ボタンに表示される文字
- { tapCount += 1 } → ボタンを押したときの処理
- tapCount += 1 は「今の数に1を足す」という意味
📝 文字列補間 - 変数を文字に埋め込む
Text("タップ回数: \(tapCount)")
- (変数名)で変数の値を文字列の中に入れられます
- tapCountが3なら「タップ回数: 3」と表示されます
- リアルタイムで値が更新されます
📱UIの構成
🎯 @Stateとは？
@State private var tapCount = 0
@Stateは「この値が変わったら、画面を更新してね」とSwiftUIに伝える印です。
- @Stateをつけた変数の値が更新されると、画面が自動的に更新される
2-3. 動作の流れ
- 最初はtapCount = 0
- ボタンをタップ
- tapCountが1増える（0→1）
- @Stateが変化を検知！
- 画面が自動更新される
- 「タップ回数: 1」と表示される
従来のプログラミングでは：
1. ボタンが押された
2. 数を増やす
3. 画面を更新するコードを書く ← これが面倒！
SwiftUIでは：
1. ボタンが押された
2. 数を増やす
3. 自動で画面が更新される！ ← 楽！
これを宣言的UIと呼びます。「どう見えるか」を書くだけで、「どう更新するか」は SwiftUI にお任せ！