【SwiftUI】Hello,World!!を表示してみよう（はじめてのSwift）

2025年1月22日

ほりうち

こんにちは！Shoriと申します。この記事では、Swift 5.10およびXcode 15.4を使用して、SwiftUIでHello, World!!を表示する方法について、サンプルコードを交えながら説明しております。

初心者の方でも分かりやすいように、サンプルコードに適宜説明を入れながら解説していくので、ぜひご覧ください。

この記事を読んで分かること…
・Textを表示する方法
・エスケープシーケンスを用いて、複数行のTextを表示する方法
・Textの左寄せ・中央寄せ・右寄せ

実行環境

・実行環境：SwiftUI+XCode
・Swift：5.10
・XCode：15.4
・サンプルコードの実行確認日：2024年12月30日（月）

※ 今回紹介する.multilineTextAlignment()は、iOS13.0+, macOS10.15+以上で動作しますので、それ未満の場合はOSのアップデートが必要な場合があります。

Textプロパティとは？

@frozen
struct Text

Textは1行もしくは複数行の読み取り専用の文章を表示することのできる部品です。

サンプルコード

import SwiftUI

struct BlogView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

#Preview {
    BlogView()
}

SwiftUIのプロジェクトを作成すると、既にコードが書いてあるのでありがたいですね！

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: Viewを継承したBlogViewという構造体を定義しています。
◾️行 3: BlogViewのなかで使うデザインをbodyブラケットの中で定義していきます。行3がハンバーガーにおけるバンズで、この中に書いていくコードがパティや野菜などであると想定すると、分かりやすくイメージできると思います。
◾️行 4: Textを用いて文章を出力しています。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

Textを改行してみよう

概要

\n

\nを用いることで、Textのなかで改行をすることが可能となります。この記事では割愛しますが、これをエスケープ文字と呼びます。

サンプルコード

import SwiftUI

struct BlogView: View {
    var body: some View {
        Text("Hello, \nWorld!")
    }
}

#Preview {
    BlogView()
}

それでは、先ほどのコードを用いて早速改行してみましょう。

出力

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: Viewを継承したBlogViewという構造体を定義しています。
◾️行 3: BlogViewのなかで使うデザインをbodyブラケットの中で定義していきます。
◾️行 4: Textを用いて文章を出力しています。今回は\nを用いて改行しています。

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。

Textの左寄せ・中央寄せ・右寄せ

せっかくなので、Textの左寄せ・中央寄せ・右寄せを実現してみようと思います。

概要

nonisolated
func multilineTextAlignment(_ alignment: TextAlignment) -> some View

multilineTextAlignmentを用いることで、設定した方向に文字を寄せることが可能です。

サンプルコード

import SwiftUI

struct BlogView: View {
    var body: some View {
        Text("I once told myself, Just one slice of pizza. Moments later, I was surrounded by empty boxes, covered in cheese, questioning my life choices. Pizza isn’t food; it’s a test of willpower. Spoiler: I fail every time. My diet? It’s simple—pizza today, regrets tomorrow. Repeat.")
            .frame(width: 280)
            .multilineTextAlignment(.center) // 中央寄せ
    }
}

#Preview {
    BlogView()
}

I once told myself, Just one slice of pizza. Moments later, I was surrounded by empty boxes, covered in cheese, questioning my life choices. Pizza isn’t food; it’s a test of willpower. Spoiler: I fail every time. My diet? It’s simple—pizza today, regrets tomorrow. Repeat.
ChatGPTに適当に生成してもらったダミーテキスト（コピー&ペースト用にお使いください）

出力

サンプルコードの説明

◾️行 1: SwiftUIをインポートしています。
◾️行 2: Viewを継承したBlogViewという構造体を定義しています。
◾️行 3: BlogViewのなかで使うデザインをbodyブラケットの中で定義していきます。
◾️行 4: Textを用いて文章を出力しています。
◾️行 5: frameを用いることでTextの幅を設定することができます。今回は280に設定しました。
◾️行 6: multilineTextAlignmentを用いて文章の寄せる位置を指定します。サンプルコード内では.centerを指定して中央寄せにしています。

以下のように指定することで寄せる位置を指定することが可能です。
・.multilineTextAlignment(.leading) 左寄せ
・.multilineTextAlignment(.center)　中央寄せ
・.multilineTextAlignment(.trailing)　右寄せ

#PreView
・ここでBlogViewを初期化してあげることで、XCodeの右部分にリアルタイムプレビューを表示させることが可能となります。