前書き

こんにちは！Swift愛好会&Kotlin愛好会主催の@jollyjoesterです。本書を手に取っていただき、ありがとうございます。

本書はSwiftを愛するメンバーが集まるSwift愛好会とKotlinを愛するメンバーが集まるKotlin愛好会の有志メンバーがネタを持ち寄って作成した技術同人です。言語についての話にとどまらず、Swift/Kotlinに関連の深いプラットフォームやサービスについての話など多岐にわたるネタについて盛り込んでいます。

各章は独立しています。著者紹介でそれぞれの章の概要を紹介しますので、興味を持った章から読み進めてください。楽しんでいただけるととても嬉しいです。

免責事項

本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

著者紹介

@jollyjoester
Swift&Kotlin愛好会主催。SwiftやKotlinをわいわい楽しむための場やネタを作り続けています。今回のネタはSwiftUI。「ボタンを押したらラベルの文字列が変わる」という超シンプルアプリを開発することでSwiftUIを最短キャッチアップします。
@417_72ki
SEという名のなんでも屋(iOS、Android、バックエンド、etc...)から脱却してiOSエンジニアに転身。現在は資産運用のスタートアップで内製アプリのグロースに携わっています。Qiita記事はよく書いていますが、技術書と呼ばれるものに関わるのは初めてです。「コードの自動生成って意外と簡単だった」って事をお伝えできればと思っています。
@bannzai
OSS作るのが好きです。スター乞食です。スターください。http://github.com/bannzai
@o_chicchi
Swift愛好会運営、Kotlin愛好会もたまに手伝っています。本職は、SIer で、SAPテクニカルコンサルタントをしています。AWSなど、他の仕事をしていることも多いです。
@akatsuki
業務でのSwift歴約4年、Kotlin歴約4ヶ月のあかつき（@akatsuki174）です。先日、Androidほぼ未経験なのにAndroidエンジニアとして転職するという無謀チャレンジをしました。Android楽しい（しかしわからん）。Androidエンジニア、KotlinエンジニアとしてもっとKotlinと仲良くなれるよう、初歩的な部分をまとめてみました。Kotlinをこれから始めてみようと思う方におすすめの章（となっているはず）です。
@tarumzu
元バックエンド＆インフラエンジニアで、現在はJapanTaxiでAndroidエンジニアをやっている、たる（@tarumzu）です。Android開発がエンジニア人生の中で一番萌えました。
@D_R_1009
StudyplusというEdTechベンチャーでAndroidエンジニアをやっている若宮です。最近iOSアプリ開発にも参加中です。今回はAndroid Architecture Componentsの開発中ブランチを探検していきたいなと思っています。2億のAndroidデバイスで動くKotlinを愛でていきましょう！

第1章　SwiftUI プレチュートリアル

1.1　はじめに

ドーモ！jollyjoesterです。

SwiftUIが正式リリースされて数ヶ月。みなさん入門できていますでしょうか？チュートリアルがとてもしっかりしているのでちゃんと学ぶにはまずそちらをじっくり読み込むことが重要です。

  • SwiftUI Tutorials - Creating and Combining Views*1

が、まずはさくっと入門したい方向けにここでは「ボタンを押したら表示されているテキストが変わる」という超シンプルなアプリの作り方を紹介します。SwiftUIの雰囲気を掴んでさくっとキャッチアップしていきましょう！

なお、SwiftUIを使うには下記の環境が必要です。古い環境の方はアップデートしてから始めましょう。

  • macOS Catalina 10.15以上
  • Xcode 11以上

1.2　プロジェクト作成

まずプロジェクトの作成です。

これまで通り「Create a new Xcode project」からプロジェクトを作っていきましょう。

新しいプロジェクト作成

図1.1: 新しいプロジェクト作成

プロジェクトのテンプレートは「iOS」の「Single View App」を選びます。

プロジェクトのテンプレート選択

図1.2: プロジェクトのテンプレート選択

適当にプロジェクト名等を設定し、Languageに「Swift」、User Interfaceに「SwiftUI」を選択します。SwiftUIという名前だけあってLanguageが「Objective-C」だとそもそも選択できません。

言語とユーザーインターフェース選択

図1.3: 言語とユーザーインターフェース選択

プロジェクト保存のために適当なディレクトリを選択して、「Create」を押せばプロジェクトの作成完了です。

1.3　プロジェクトの構成

プロジェクトの構成を見てみましょう。「AppDelegate.swift」「SceneDelegate.swift」「ContentView.swift」などが作成されていますが、「ContentView.swift」が今回の主役です。

ContentView.swift

図1.4: ContentView.swift

「ContentView.swift」を選択すると下記のように左側に「ソースコード」が、右側に「Preview」が表示されます。

ContentView.swiftを選択

図1.5: ContentView.swiftを選択

ContentView.swiftの中身を見ていきましょう。２つあるstructのうち、ContentViewの方のvar body: some Viewの中身にUIをごりごり書いていくことになります。

リスト1.5: ContentView.swift

import SwiftUI

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

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

1.4　テキストの設定

ソースコード中のText("Hello, World!")の部分にカーソルを置くと、対応するTextのAtrributes inspector（Xcode画面右側の部分）が開きます。

Text("Hello, World!")にカーソルをあてる

図1.6: Text("Hello, World!")にカーソルをあてる

このAttributes inspectorでTextの属性をいろいろ設定することができます。設定を変えるとすぐPreviewに見た目が反映されるのと、ソースコード側に該当する実装が反映されるのでとても便利です。

例えば下図はTextのFontに「Large Title」を設定した場合です。.font(.largeTitle)という部分が追加されているのがわかります。もちろん同じ実装をソースコード側でごりごりしていってもOKです。

TextのFontにLarge Titleを設定

図1.7: TextのFontにLarge Titleを設定

1.5　ボタンの配置

それではボタンを追加してみましょう。

①ソースコード上でボタンを追加したい場所にカーソルをあて、②Xcode画面右上にある「＋」ボタンを押し、③出てきた画面でButtonを探して追加します。そうするとButtonのソースコードが追加されます。

Buttonを追加

図1.8: Buttonを追加

ところがそれだけだとエラー*2になってしまいます。

エラーが発生

図1.9: エラーが発生

解説はここでは省きますが、とりあえず縦方向のレイアウトを作るためのコンテナであるVStack*3でTextとButtonを囲ってあげるとエラーを解消できます。

リスト1.5: ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, World!")
                .font(.largeTitle)
            Button(action: {}) {
                Text("Button"/)
            }
        }
    }
}

TextとButtonが近すぎなので間にSpacerをはさんでレイアウトを調整しましょう。間（height）を適当に100に設定します。

リスト1.5: ContentView.swift

        VStack {
            Text("Hello, World!")
                .font(.largeTitle)
            Spacer()
                .frame(height: 100.0)
            Button(action: {}) {
                Text("Button")
            }
        }

これでこんな見た目ができました。

TextとButton

図1.10: TextとButton

1.6　ボタンのアクション

最後にボタンを押したらテキストが変わるようにしてみましょう。

SwiftUIで変化するUIは下記のように扱います。

  • @Stateを付けたvarの変数を宣言する
  • その変数をUIの変化する部分で利用する（値を変更していく）
  • するとSwiftUI上で表示が同期される

UIが変化する＝Viewが状態を持つってことで、その状態を表す変数に@Stateをつけるってのはわかりやすいですね。状態は変わるのでここでの変数はもちろんvarで宣言します。

例えばボタンを押したらTextに表示している文字列が変わる場合を下記に示します。

まず元々Textの引数に直接指定していた文字列をstrという変数で設定するようにします。

リスト1.5: ContentView.swift

struct ContentView: View {

    @State var str = "Hello, World!"

    var body: some View {
        VStack {
            Text(str)
                .font(.largeTitle)
            Spacer()
                .frame(height: 100.0)
            Button(action: {}) {
                Text("Button")
            }
        }
    }
}

次にButtonの引数の action: {} 内で変数str文字列を設定し直す実装を追加します。

リスト1.5: ContentView.swift

struct ContentView: View {

    @State var str = "Hello, World!"

    var body: some View {
        VStack {
            Text(str)
                .font(.largeTitle)
            Spacer()
                .frame(height: 100.0)
            Button(action: {
                self.str = "Hello, SwiftUI!"
            }) {
                Text("Button")
            }
        }
    }
}

これで以上です。動作確認はPreview画面の右下にあるボタンからLive Previewを起動したり、Simulatorを起動することで確認できます。ボタンを押したら「Hello, World!」が「Hello, SwiftUI!」に変わったら成功です！

Live Preview

図1.11: Live Preview

1.7　まとめ

最低限の要素だけ押さえてSwiftUIを使ってみました。雰囲気は掴めたでしょうか？

すぐに見た目が確認できるところや、すべてがソースコードで管理できる（ソースコードとStoryboardで設定がバラけない）ところがとても良いですね。この先はチュートリアルをやってみるも良し、ごりごり自分で試してみるも良しということでどんどんやっていきましょう〜。

みなさんの知見をSwift愛好会などで共有していただけるのをお待ちしております！

[*2] Function declares an opaque return type, but has no return statements in its body from which to infer an underlying type（戻る）

[*3] 横方向のレイアウトを作る場合はHStack（戻る）

試し読みはここまでです。
この続きは、製品版でお楽しみください。