システム開発＜基本編＞Xcodeでプロジェクト作成

システム開発＜基本編＞開発言語：Swiftの紹介

Mac環境で動作する、ソフトウェアやアプリケーションの開発スタイルについて紹介します。 iOS開発を行うには、Macパソコン、Apple ID、Xcode（IDE）の「3種の神器」を準備する必要が有ります。

前回は、Mac環境で動作するソフトウェアやアプリケーションの開発スタイルについて

紹介しました。

Apple社製品で動作するソフトウェア開発（iOS開発）を行うには、最低限、

次の3種の神器を準備する必要が有ります。

Mac環境：専用パソコン
Apple ID：アカウント
Xcode（IDE）：統合開発環境

今回は、上記の3：Xcode（IDE）で、プロジェクト作成の記事を紹介しようと思います。

Xcodeでプロジェクト作成

習得内容
Xcode（IDE）
1. Xcode（IDE）の起動
2. プロジェクト作成
プロジェクト名+App
1. ソース例：プロジェクト名＋App.swift
ContentView
まとめ

習得内容

今回、Xcode（IDE）でプロジェクト作成の記事で、習得出来る内容は下記になります。

プロジェクト作成
ContentView：Stack View
テキスト（Text）、イメージ（Image）

Xcode（IDE）

先ずは、記事の上記に記載した「3種の神器」の中のXcode（IDE）を起動します。

Xcode（IDE）の起動

MacBook（パソコン）で、下記のXcode（IDE）のアイコンをクリックします。

アイコンが画面下のDockに無い場合は、Launchpadのアイコンをクリックしてみて下さい。

Launchpadが開いて、Xcode（IDE）のアイコンが見つかると思います。

プロジェクト作成

Xcode が起動したら、次に上部タブの　File → New → Project を選択します。

次にテンプレートを選択する画面が表示されますので、アプリケーションのAppを選択します。

Nextボタンをクリックして、プロジェクト名を指定します。

Nextボタンをクリックして、プロジェクトをMacBook（パソコン）に保存します。

プロジェクトが作成されたら、下記のような画面が表示されます。

プロジェクトが作成されると、Xcode は、自動的に下記の2つのファイルを作成します。

プロジェクト名＋App.swift：初期起動プログラム　→　ContentViewを呼び出す
ContentView.swift：初期起動画面

プロジェクト名+App

それでは、SwiftUIのソースを見て行きましょう。

ソース例：プロジェクト名＋App.swift

Xcodeが生成した、プロジェクト名+App.swiftの例を紹介します。


import SwiftUI

@main
struct SwiftMenuApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

上記は、プロジェクト名を SwiftMenu と指定したので、SwiftMenuApp.swift になります。

こちらは、アプリを起動した時に、最初に動作する処理を実装しています。

自動生成したソースを確認すると、ContentViewを呼び出している事が分かると思います。

SwiftUI では、コード（ソース）の構造として、struct：構造体を採用しています。

一方、UIKit や Objective-C では、コード（ソース）の構造として、class：クラスを

採用しています。

UIKit や Objective-C でも、Web APIを利用して、取得したレスポンスデータ（JSON）

を格納する際に、struct：構造体を使用する事は有ります。

ContentView

ソース例：Hello world!

次に、Xcode が生成した、ContentView.swift を紹介します。


import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

こちらは、最初に動作する処理を実装したSwiftMenuApp.swift から呼び出されたソースで、

最初に表示される画面になります。

イメージ（Image）の上に記述されている VStack {} は、Stack View とも呼ばれて、

{} 内に配置したイメージやテキストのようなUI部品（View）を、画面の縦方向（y軸）

に垂直（Vertical）に揃えるという命令です。

実際に、地球儀の小さなイメージと、Hello, world のテキストが、画面の縦方向に

垂直（Vertical）に表示されているかどうか、確認してみましょう。