SwiftUIプレイグラウンド

コードスニペットを書いて、実行して、共有できます - セットアップ不要。

ContentView.swift

プレビュー自動プレビュー

import SwiftUI

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var done = false
}

struct ContentView: View {
    @State private var items = [
        TodoItem(title: "Run SwiftUI in the browser", done: true),
        TodoItem(title: "Tap a task to check it off"),
        TodoItem(title: "Add a task of your own"),
    ]
    @State private var newTitle = ""

    var remaining: Int {
        items.filter { !$0.done }.count
    }

    var body: some View {
        NavigationStack {
            List {
                Section("\(remaining) left to do") {
                    ForEach($items) { $item in
                        Toggle(item.title, isOn: $item.done)
                    }
                }
                Section {
                    HStack {
                        TextField("New task", text: $newTitle)
                        Button("Add") {
                            items.append(TodoItem(title: newTitle))
                            newTitle = ""
                        }
                        .disabled(newTitle.isEmpty)
                    }
                }
            }
            .navigationTitle("My Tasks")
        }
    }
}

SwiftUIをオンラインで実行し、アプリをiPhoneで見る

無料のオンラインSwiftUIプレイグラウンドです。ContentView を書くと、コードの隣にあるiPhoneサイズの画面にビューが表示されます。ボタン、トグル、テキストフィールドはタップに反応するので、@State の変化が実機と同じように見えます。Mac、Xcode、シミュレーターのダウンロードは不要です。

コードはswiftcで、Coddy独自のSwiftUI実装に対してコンパイルされます。CoddyのSwiftUIレッスンのライブプレビューを動かしているのと同じ実装です。スタック、Text、Image(systemName:)、Button、Toggle、TextField、Slider、Stepper、Picker、List、ForEach、Form、NavigationStack、シートとアラート、そして @State、@Binding、ObservableObject、@Published といった日常的なAPIに対応しています。Appleのフレームワークそのものではないため、UIKit、MapKit、Core DataなどApple専用のフレームワークは使えません。

このSwiftUIプレイグラウンドが便利な理由

iPhoneのライブプレビュー: 画面はステータスバーとDynamic Islandのある端末フレームの中にiPhoneサイズで描かれるので、レイアウトがスマートフォン上と同じ見た目になります。
アプリをタップできます。ボタン、トグル、ステッパー、テキストフィールドが反応し、プレビューはタップを新しい状態で再生するので、@State と @Binding が本物のアプリと同じように動きます。
自動プレビュー: 入力を止めて少しすると画面が再ビルドされ、更新ボタンでアプリを最初から起動し直せます。コンパイラのエラーはファイルの該当行を示します。
エディタのSwiftUIコード補完: ドットの後のモディファイア、引数が受け取る値(.font(.、.foregroundStyle(.)、@ の後のプロパティラッパー、SF Symbolsの名前。
スマートフォン画面のスクリーンショットをPNGで保存し、ContentView.swift をダウンロードして後でXcodeで開けます。Xcodeから貼り付けたファイルもビルドできます。#Preview ブロックは無視されます。

SwiftUIプレイグラウンドで作れるもの

List、ForEach($items)、各行の Toggle を使ったToDoリストと、新しい行を追加する TextField とボタン。
設定画面: セクションに分けた Form に Picker、Stepper、Slider を置き、すべて @State にバインド。
ナビゲーション: タイトル付きの NavigationStack と、詳細画面を開く NavigationLink の行。
レイアウトの実験: VStack、HStack、ZStack に .padding、.frame、.background と角丸の図形を組み合わせ、モディファイアの重なり方を確かめる。

オンラインSwiftUIプレイグラウンドのよくある質問

MacなしでSwiftUIを実行できますか?

はい。このプレイグラウンドは、Windows、Linux、Chromebook、iPadなど、あらゆる最新ブラウザで動きます。コードはCoddyのサーバーでコンパイルされ、画面はページ内に描かれるので、SwiftUIを試すのにXcodeもMacもiOSシミュレーターも必要ありません。

オンラインSwiftUIプレイグラウンドは無料ですか?

はい。無料で登録も不要です。ページを開いてコードを編集し、スマートフォンの画面を見るだけです。

これはAppleのSwiftUIですか?

いいえ。SwiftUIのビュー、モディファイア、プロパティラッパーをCoddyが独自に実装したもので、swiftcでコンパイルされ、iPhoneの画面として描かれます。日常的なSwiftUIのコードはそのまま動き、プレビューはCoddyのSwiftUIレッスンが使い、採点にも使っているものと同じです。UIKit、MapKit、Core DataなどApple専用のフレームワークは使えず、アニメーションは最終状態が表示されます。

@Observableや#Previewは使えますか?

共有データには ObservableObject と @Published、@StateObject を使ってください。@Observable マクロと #Preview にはXcodeのマクロプラグインが必要です。#Preview ブロックは無視されるので、Xcodeから貼り付けたファイルもそのままビルドでき、アプリには ContentView が表示されます。独自の @main App構造体を追加することもできます。

プレイグラウンドを試した後、SwiftUIはどう学べばいいですか?

サンプルアプリを変更し、プレビューをタップしながら動かしてみてください。体系的に学びたくなったら、CoddyのSwiftUIコースで、ビュー、モディファイア、スタック、@State、リスト、ナビゲーション、@Binding、監視可能なデータを短いレッスンで学べます。どのレッスンにも同じiPhoneのライブプレビューがあります。

SwiftUIに役立つツール

SwiftUI プレイグラウンドと相性の良い、ブラウザベースの無料ツール - すべて Coddy の一部です。

SwiftUI エディタを埋め込むコーディングプラットフォームを比較