【SwiftUI入門講座Part2】SwiftUIで簡単なアプリを作ってみよう~HelloWorld~

これからこの講座で作るアプリはこのフォルダの中に作成していきましょう。

新しくプロジェクトを作成するので、[Create a new Xcode project]を選択してください。

もしこの画面が開かないよという方は、command + shift + 1を押してください。

ここでは、プロジェクトのテンプレートを選択します。

①iOSを選択
②Appを選択
③Nextをクリック

以下の表の通り、入力したらNextをクリック

プロジェクトの保存先を選択します。

①Desktopを選択
②Practice(先ほど作ったフォルダ)
③上の部分がPracticeになっていることを確認
④Createをクリック

これでプロジェクトの作成が完了しました。

では、次にボタンを配置してみましょう。まずは、ボタンを追加する前に、VStackでTextを囲います。以下のようにしてください。

var body: some View {
    VStack {
        Text("Hello, SwiftUI!")
            .padding()
    }
}

Textの下にボタンをButtonを追記します。

VStack {
    Text("Hello, SwiftUI!")
        .padding()
    Button("ボタン") {
        print("ボタンが押されたよ")
    }
}

command + rか、左上の再生ボタンで実行して確認しましょう。

ボタンを押すと、コンソールという場所に、「ボタンが押されたよ」と表示されるはずです。

このような感じでボタンを使います。

struct ContentView: View {の下に、以下のコードを追記しましょう。

@State var str = "Hello, SwiftUI!"

Text("Hello, SwiftUI")をText(str)に変更しましょう。今まで直書きしていましたが、変数から参照する形にします。

VStack {
    Text(str)
        .padding()
    Button("ボタン") {
        print("ボタンが押されたよ")
    }
}

実行してみましょう。

Buttonを押したら、変数の値を変更したいと思います。以下のようにprint文の下に追記しましょう。

Button("ボタン") {
    print("ボタンが押されたよ")
    str = "ハローSwiftUI!"
}

これで、ボタンを押すと文字が変更できるプログラムができたはずです。実行して確認しましょう。

これで、ボタンを押したら文字を変更することができました。