このPartでは、超簡単なアプリを作ってとりあえずXcodeの使い方に慣れましょう。

簡単なアプリを作ってみよう

フォルダ作成

まずは、これからこの講座で開発していくアプリのプロジェクトを入れていくフォルダを作成します。

1. 新規フォルダ作成
   デスクトップで右クリックして、新規フォルダを選択してください。
   
   
   
2. フォルダ名変更
   フォルダ名はPracticeなど、自分のわかりやすい名前にしましょう。
   
   これからこの講座で開発していくアプリは全てこのフォルダに格納していきます。

プロジェクト作成

次に、いよいよプロジェクトを作成していきたいと思います。

1. Xcodeを起動
   まずはXcodeを起動してください。
   
   
   

2. 新規作成
   
   今回は新しくプロジェクトを作成するので、「Create a new Xcode project」をクリックしてください。
   もしこの画面が開かない場合は、command + shift + 1を押すとこの画面が開きます。

   
   

3. テンプレートを選択
   次に、プロジェクトのテンプレートを選択します。
   
   ①iOSを選択
   ②Appを選択
   ③Nextをクリック
   もしMacのアプリを作りたいときはmacOS、Apple Watchのアプリを作りたいときはwatchOSと言うふうにOSごとで開発するテンプレートが違います。その中でも今回は、一番シンプルなテンプレートのAppを使います。
   
   

4. プロジェクトの設定
   
   以下の表の通り、入力したらNextをクリック

   項目名	説明	今回の設定
   ①Product Name	プロジェクトの名前です。英数字でつけてください。	HelloSwiftUI
   ②Team	登録済みのAppleIDを選択します。初めての方は、noneでも大丈夫です。	任意
   ③Organization Identifier	一意なIDをつける必要があります。ドメインを逆にして記述することが多いです。satoriku.comなら、com.satorikuなどです。ドメインを持っていない方は、com.自分名前で良いかと思います。	任意
   ④Bundle Identifier	これがアプリのIDになります。	-
   ⑤Interface	ここでSwiftUIかStoryboardかを選択できます。	SwiftUI
   ⑥Language	使用するプログラミングが選択できます。SwiftとObjective-Cがあります。	Swift
   ⑦Use Core Data,Include Tests	ここでは、データベースやテストコードを使うときにチェックを入れます。	チェックなし

   
   

5. プロジェクトの保存先選択
   プロジェクトの保存先を決めます。
   
   ①Desktopを選択
   ②Practiceを選択
   ③上の部分がPracticeになっていることを確認
   ④Createをクリック
   これで、プロジェクトの作成が完了しました。少し待つと以下のような画面が開かれるはずです。
   

実行して確認

次に、実行して確認してみましょう。

左上の再生ボタンをクリックしてください。

少し待つと以下のようにiPhoneのようなウィンドウが表示されます。これをシミュレーターと呼びます。開発時はこのシミュレーターで動作確認をしていきます。

文字を変更

現状、世界のアイコンとHello, world!という文字が表示されています。
この文字を変更してみましょう。Hello, world!というところを、以下のようにこんにちは世界に変更してみましょう。

Text("こんにちは世界")

上記のように文字を変更すると、右側のウィンドウのiPhone内の文字も変更されると思います。
この右側のウィンドウのiPhoneのことをプレビューと言います。(シミュレーターは別のウィンドウのiPhoneのこと)

ボタンを配置

では次にボタンを配置してみましょう。
Text("こんにちは世界")の下に、以下のコードを記述してください。

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

上記のコードを記述すると、プレビューにボタンが表示されると思います。
ちなみに押してみると一瞬白くなります。

実行して確認してみましょう。
command + rか、左上の再生ボタンを押してください。

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

ボタンを押したら文字を変更

では、次にボタンを押したらテキストに表示されている文字を変更してみましょう。

1. 変数を宣言する
   struct ContentView: View {の下に以下のコードを追記しましょう。

   @State var str = "Hello, SwiftUI"
   

   追記する場所

   

   
   
2. Textから変数を参照
   Text("こんにちは世界")を以下のコードに変更してください。

   Text(str)
   

   変更する場所

   

   
   
3. 実行してみる
   実行して確認しましょう。文字がHello, SwiftUIになっているはずです。
   
   
   
4. ボタンを押したらstrを変更する
   次に、ボタンを押したらHello, SwiftUIの文字を変更しましょう。
   Button("ボタン") {の中に以下のコードを記述してください。

   str = "ハローSwiftUI!"
   

   追記する場所

   

   
   
5. 実行してみる
   実行して、ボタンを押してみると、Hello, SwiftUIがハローSwiftUIに変更されるはずです。
   
   これで、ボタンを押したら文字を変更することができました。

プレビューとシミュレーターの違いは?

SwiftUIの場合、動作確認する方法が、プレビューとシミュレーターの2パターンあります。

コードの右側のエリアの左下の再生ボタンか、command + option + pで実行するのがプレビューです。
左上の再生ボタンか、command + rで実行するのがシミュレーターです。

プレビュー

シミュレーター

それぞれ場合によって使い分けましょう。
プレビューは、画面のレイアウトや簡単な動作を確認する時に使います。
シミュレーターは、ちゃんとした動作確認をする時に使います。
という使い分けです。

基本的にレイアウトの実装では、プレビューを使って確認し、機能の実装をした後はシミュレーターで確認しましょう。