[28日でiOSアプリ開発]Day01 開発環境を整える

2025年8月30日

当ページのリンクには広告が含まれています。

今回からSwiftUIシリーズを投稿します。初心者の状態から28日(4週間)でiOSアプリを作成できるようなロードマップを考えたので、iOSアプリ開発にチャレンジしてみたい方はぜひ参考にしてください！

ロードマップ

Day 01：開発環境を整える
Day 02：Swiftの超基礎（1）
Day 03：Swiftの超基礎（2）
Day 04：オプショナル＆構造体・プロトコル
Day 05：SwiftUIの基本ビュー＆修飾子
Day 06：レイアウト思考
Day 07：状態管理①（@State）
Day 08：状態管理②（@Binding / @Observable）
Day 09：Listとデータの増減
Day 10：画面遷移とモーダル
Day 11：フォーム入力と検証
Day 12：デザインの基礎
Day 13：週末ミニ作品（保存なし）
Day 14：データ永続化①（UserDefaults / Codable）
Day 15：データ永続化②（ファイル保存）
Day 16：ネットワーキング入門（async/await）
Day 17：画像読み込み・キャッシュ基礎
Day 18：アプリのライフサイクル
Day 19（オプション）：Core Data超入門
Day 20：設計の見直し（MVVM / 依存の分離）
Day 21：アクセシビリティ＆ローカライズ
Day 22：テスト入門（Unit / UI）
Day 23：デバッグ＆計測
Day 24：アプリ設計の深掘り
Day 25：セキュリティとプライバシー
Day 26：配布準備（App Storeの基礎）
Day 27：収益化の選択肢（任意）
Day 28：総仕上げ（ミニ・カプセル化プロジェクト）

この流れで進めていきます！知りたいところだけ見るのでも全然OKです！

ということで早速Day01の開発環境構築に進んでいきましょう！

Day01：開発環境を整える – Hello, SwiftUI!

今日のゴール

Macに開発環境を整え、Xcodeでプロジェクトを作成する
シミュレータ上で「Hello, SwiftUI」を動かす

1. Xcodeをインストールする

SwiftUIを使ったiOSアプリ開発には Xcode が必須です。
Mac App Storeから「Xcode」と検索してインストールしてください（数GBあるので時間がかかります）。

インストール後、初回起動時に追加のコンポーネントのインストールを求められるので指示に従って進めてください。

また、画面上部の「Xcode > About Xcode」でバージョンを確認しましょう。
最新バージョンが推奨です(現時点で16.X系)

2. 新しいプロジェクトを作る

次は新しいプロジェクトを作成していきましょう。

1.Xcodeを起動し、「Create a new project」を選択

2.「iOS」タブ → App を選択しNextを押す

3.以下のように入力します

Product Name：HelloSwiftUI
Team：Apple IDを選択（無料でもOK）
Organization Identifier：com.example など
Interface：SwiftUI
Language：Swift

Testing SystemとStrageはNoneのままでOKです。

4.保存先を選び、プロジェクトを作成します

これで最初のプロジェクトの作成は完了です！

3. プロジェクト構造を理解する

作成直後のファイル構成は以下のようになっています。

HelloSwiftUIApp.swift

import SwiftUI

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

→ アプリのエントリーポイント。@mainが付いている。

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()
}

→ 最初に表示される画面。 Text(“Hello, world!”)が書かれている。

初心者の方は「Appファイルが入口、ContentViewが最初の画面」と覚えれば大丈夫です。

4. Previewで動かす

SwiftUIには Preview 機能があります。

ContentView.swiftを開いて、画面右側にHello,world!と表示されていればOKです！

ContentView.swiftの最後に書いてある#Previewのブロックがプレビュー表示のためのコードです。
このプレビュー機能を使うことで、開発中にリアルタイムでUIの更新を確認することができます。

5. シミュレータで動かす

またプレビューよりももっと詳細に試したいときはシミュレーターで動作させることもできます。

1.Xcode上部のデバイス選択欄から、機種を選択

2.左上にあるRunボタン(▶ボタン)をクリック

これで数十秒後にシミュレータが起動されます。

終了するときはシミュレーター左上の赤いボタンで閉じて、XcodeのRunボタンの横にあるStop(⬜︎ボタン)を押せばOKです。

これで開発環境の準備は完了です！

6. 画面をカスタマイズしてみる

せっかくなので文字を変えてみましょう。ContentView.swiftを次のように変えて保存してみてください。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .foregroundColor(.blue)
            .padding()
    }
}

#Preview {
    ContentView()
}