はじめに

Appleが提供するSwift言語は、モダンで使いやすい言語としてiOS、macOS、watchOS、tvOSアプリ開発に広く使われています。この記事では、iOS開発をする際に、新しいSwiftプロジェクトを作成した時に自動で生成されるシンプルなコード（Hello World）の中身について解説します。意味を理解せずに使っている方も多いと思いますので、初心者の方々に向けて、このコードの意味を紐解いていきます。

ソースコード

新規プロジェクト作成時に、最初に自動で生成される以下のコードには、SwiftやSwiftUIの基本的な使い方が詰まっています。このコードが理解できれば、SwiftやSwiftUIの全体像がつかみやすくなるはずです。

import SwiftUI

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

#Preview {
    ContentView()
}

解説

1. `import SwiftUI`

最初に記述されているこの行は、SwiftUIフレームワークをインポートしています。

import SwiftUI

SwiftUIは、UIを作成するためのフレームワークです。この行を追加することで、SwiftUIに含まれている部品を使えるようになります。もしこの行がなければ、TextやImageなどのビューを使用することができません。

2. `struct ContentView: View`

struct ContentView: View

ここでは、ContentViewという名前のビューを定義しています。SwiftUIでは、画面に表示したい内容を「ビュー（View）」として表現します。ビューは、structというキーワードによって構造体で定義され、ContentViewは構造体の名前になります。ContentViewに、実際にアプリ画面に表示される部分を記述します。

3. `var body: some View`

var body: some View

bodyプロパティは、ビューの中身を定義します。つまり、ここに書いた内容が実際に画面に表示されるものとなります。some Viewという記述は、戻り値の型が「何かしらのビュー型」であることを意味します。SwiftUIでは、ビューを構成する要素（TextやImageなど）はすべてbody内に配置します。

4. `VStack`

VStack {

VStackは、縦にビューを積み重ねるためのコンテナです。中に入れたビューが縦方向に並ぶことになります。例えば、VStackの中にImageとTextを入れた場合、それらは上下に並んで表示されます。

もしビューを横に並べたい場合は、HStackを使います。また、ビューを重ねて表示したい場合はZStackを使用します。

5. `Image(systemName: "globe")`

Image(systemName: "globe")

ここでは、AppleのSF Symbolsというアイコンセットから「globe」を表示しています。SF Symbolsは、iOSアプリでよく使われるアイコンが集められたセットで、シンプルなシステムアイコンを簡単に使うことができます。例えば、「globe」は地球儀のアイコンで、アプリに国際的な意味合いを持たせるときに使えるアイコンです。

systemNameを指定することで、Appleが用意したアイコンを簡単に画面に表示できます。

6. `.imageScale(.large)`

.imageScale(.large)

ビューの後に「.」で記述し、ビューに対して何かしらの変化を加えるためのものをモディファイアと言います。.モディファイアという形で記述します。この行は、アイコンの大きさを指定するモディファイアを記述しています。.imageScale(.large)はアイコンを大きく表示するための指定です。Imageにはサイズを調整するモディファイアがいくつかあり、.small、.medium、.largeなどを使ってアイコンの大きさを変更できます。

7. `.foregroundStyle(.tint)`

.foregroundStyle(.tint)

.foregroundStyle(.tint)は、アイコンの色を変更するモディファイアです。.tintは、アプリで設定されているアクセントカラー（テーマカラー）を自動的にアイコンに適用します。これにより、アプリ全体のデザインを統一することができます。

8. `Text("Hello, World!")`

Text("Hello, World!")

ここでは、画面に「Hello, World!」という文字を表示しています。Textは、SwiftUIでテキストを表示するための基本的なビューです。この中身を変更すれば、画面に表示するテキストを自由にカスタマイズできます。

9. `.padding()`

.padding()

padding()は、余白を追加するモディファイアです。この場合、ビューの周りにデフォルトの余白を追加しています。padding()は、文字やアイコンが画面の端にくっつかないようにするためによく使います。余白の大きさを調整したい場合は、引数を指定することもできます。

10. `#Preview { ContentView() }`

#Preview {
    ContentView()
}

最後の部分は、プレビュー機能を有効にするためのコードです。これを追加することで、コードを書きながら実際にどのように画面が表示されるかを確認できます。Xcodeでは、プレビューがリアルタイムで更新されるため、アプリのデザインをすぐに確認できて便利です。

おわりに

この記事では、新しいSwiftプロジェクトで最初に生成される「Hello, World!」のコードを一行ずつ解説しました。Swiftはシンプルで読みやすい言語ですが、その基本的なコードがどのように動作するのかを理解することは、アプリ開発を進める上で非常に重要です。

今回解説した内容をもとに、次は自分自身で新しいUI要素を追加してみたり、アプリの挙動を変更してみたりして、実際に手を動かして学んでいきましょう。SwiftやiOSアプリ開発には、まだまだ学ぶべきことがたくさんありますが、まずは基礎をしっかり固めて、自分のペースでステップアップしていくことが大切です。

引き続き、Swiftの学習を深めていき、オリジナルのアプリを作り上げていきましょう。

はじめに

ソースコード

解説

1. import SwiftUI

2. struct ContentView: View

3. var body: some View

4. VStack

5. Image(systemName: "globe")

6. .imageScale(.large)

7. .foregroundStyle(.tint)

8. Text("Hello, World!")

9. .padding()

10. #Preview { ContentView() }