[SwiftUI] 新規プロジェクトの作成とHello World

SwiftUI SwiftUI

前回の記事からだいぶ時間が経ってしまいましたが、改めて SwiftUI によるアプリケーション開発の記事を書いていくことにします。
まずは、Xcode による 新規プロジェクトの作成方法について説明します。

 

スポンサーリンク

環境

 

OS: macOS Big Sur 11.2.1
Xcode: 12.4
Swift: 5.2.4

 

スポンサーリンク

新規プロジェクトの作成

 

Xcode を起動したら、「Create a new Xcode project」を選択します。

新規プロジェクトの作成

新規プロジェクトの作成

 

続いて、テンプレート選択画面(Choose a template for your new project)が表示されるので、[iOS]タブを選択して、一覧から「App」を選択して [Next] ボタンをクリックします。

テンプレートの選択

テンプレートの選択

次に、プロジェクトの設定を行います。
Product Name に任意のプロダクト名を、Organization Identifier には、ユニークな組織名を入力します。一般的には、URL を逆にして入力します。Interface は「SwiftUI」を選択し、Life Cycle は「SwiftUI App」を選択します。最後に [Next] ボタンをクリックします。

プロジェクトの設定

プロジェクトの設定

 

続いてプロジェクトの保存先を選択して [Create] ボタンをクリックします。このとき、必要に応じて「Create Git repository on my Mac」を選択します。

保存先の選択

保存先の選択

 

先程の画面で「Create Git repository on my Mac」を選択した場合で、Git が未設定のときは、以下のようにな画面が表示されます。この場合は [Cancel] ボタンをクリックして後から設定をするか、[Fix] ボタンをクリックして設定を完了させます。

Git 設定未実施の場合

Git 設定未実施の場合

 

[Fix]ボタンをクリックすると、以下のように「Source Control」の設定が表示されますので、Author Nameと Author Email を入力します。Ignored Files は、必要に応じてソース管理に登録したくない対象のファイルを入力します。

ソースコードの管理設定

ソースコードの管理設定

 

スポンサーリンク

Xcode の画面構成

 

プロジェクトの作成が完了すると、Xcode は下図のようになります。 一番左側はナビゲータエリアで、プロジェクトに関連するファイルの選択などができます。
中央のエディターエリアは、ナビゲータエリアで選択したファイルの表示をしたり、デバッグ情報を表示するエリアです。
一番右側は、インスペクタエリアで、選択されている項目の設定などを行います。

Xcode の画面構成

Xcode の画面構成

 

スポンサーリンク

Hello World を表示するアプリケーションを作成する

ソースコードの編集

 

それでは Hello World を表示するアプリケーションを作成しましょう と言いたいところですが、プロジェクトを作成した時点で、すでに Hello World が表示されるアプリケーションになっています。
そこで、「Hello World」ではなく「Hello Swift」を表示するアプリケーションを作成してみましょう。
エディターエリアにはすでに、ContentView.swift のコードが表示されていますが、このコードがアプリ画面に表示される内容を決定しています。
もしも、ContentView.swift が表示されていない場合は、Xcode の左側にあるナビゲータエリアから ContentView.swift を選択してください。
ソースコードを以下の5行目のように「Hwllo, World」から「Hello, Swift」に編集します。

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, Swift!")  // ←ここを修正
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

実行画面をプレビューで確認する

 

ソースコードの編集が完了したら、プレビューで実行時の画面を確認してみましょう。
エディターエリアの右側でプレビュー確認をすることができます。
はじめに Xcode の上部で任意のシミュレータを選択します(下図の赤枠部分)。現時点で最新の iPhone 12 シリーズも選択可能です。

 

シミュレータの選択

シミュレータの選択

シミュレータの選択が完了したら、エディターエリア右側上部にある [Resume] をクリックします。

[Resume] によるプレビュー表示

[Resume] によるプレビュー表示

しばらくすると、下図のようにプレビューが表示されます。

プレビュー画面の表示

プレビュー画面の表示

スポンサーリンク

まとめ

 

今回は、Xcode を使用して Hello Swift! を表示するまでの手順について説明しました。
Xcode にはじめて触れた方には、すこし難しく感じれられる場合もあるかと思いますが、繰り返し操作しているうちに慣れてきますので、細かいところはあまり気にせずに取り組むようにしましょう。

SwiftUI
スポンサーリンク
スポンサーリンク
Swift Life

コメント

タイトルとURLをコピーしました