ネイティブアプリの開発手法として、ReactNative（expo、react-native-cli）とやってきて、せっかくなのでswiftにも触れておこうというのが今回の記事の内容です。
swiftを使ったiOSアプリの環境構築と、基本的な開発方法について、公式Docを元に日本語で書いていきます。
swiftの環境構築
第一前提として必要なのはmac pc
そして最新バージョンのXcode
Xcodeのバージョンアップにより、古いOSではXcodeがインストールできなかったりもするため、古いOSのままの方はOSのアップデートから始める必要があるかもしれません。
Xcodeは他のアプリと同じようにstoreから入手するため、apple IDも必要になります。
しかし、WindowsでJAVAやPHPの環境を作る時のように言語自体のインストールなどは必要ありませんので、その点は楽ですね。
既にmacをお持ちで日常的に使っている方はXcodeのインストールで詰まる事はなさそうなので割愛。
Xcodeの始め方
Xcodeでプロジェクトを新規作成
インストールしたXcodeを起動すると、３つのメニューが表示されます。
上から「Get Started with a playground」「Create a new Xcode project」「Clone an existing project」の３つです。
Xcodeは日本語化はされていないので英語に慣れるしかありません。
playgroundって何？というと、入力したコードの結果がリアルタイムに反映される開発を捗らせる用のもの、らしいです。
そのため今回はCreate a new Xcode projectで、プロジェクトの新規作成を選択します。
以下の様にテンプレートを選択する画面が表示されます。
前もっていくつかのテンプレートが用意されていて、それを選ぶことで最低限のコードが描かれた状態で始めることができるという感じですね。
最もシンプルな「Single View App」を選択します。
次にプロジェクトに関する情報を入力します
TeamはApple Developer登録が済んでいて、AppleIDと紐づいている場合には選択肢から選択できる様になりますが、使い方を習得するためにDeveloper登録をする必要はありませんので、noneのまま。（公開時には必要になります。）
組織名は空白可、組織IDはひとまず（com.exsample）としておきます。
LanguageはSwiftとObjective-Cを選択できますが、ここは当然Swiftを選択。
コアデータの選択、単体テスト、UIテストのチェックはデフォルトのままで良さそうです。（公式DocではUIテストは未選択にしてました。）
User InterfaceはSwiftUIとStoryboardから選択できる様になっていて、簡単に書くと前者はコードでUIを実装、後者はGUIでアプリのViewを管理するやり方のようです。
今回はSwiftのコードに慣れるようにするため、SwiftUIを選択します。
NEXTをクリックすると、プロジェクトの保存場所を聞かれるので、任意のディレクトリを選択。この時、同時にGit（ソースの履歴管理ツール）のリポジトリも作成するにチェックが入っているので、これも必要に応じて選択します。
これでSwiftでHelloWorldを出力するプロジェクトが出来上がりました。
IDE（総合開発環境ツール）のXcodeに見慣れてない方にとってはツールバーの多さなどに頭が痛くなるかもしれませんが、使うときに覚えていけばいいと公式Docでも書いています。まずはふんわり見ておきましょう。
とりあえず動かす
既に動くものがあるのだからとりあえず動かすことでイメージを掴みます。
下の画像箇所でシュミレーターとして使用するデバイスを選択し、「▶︎」アイコンをクリックします。
buildが通り、シュミレータが起動し、こんな画面が表示されるかと思います。
SwiftUIはシュミレータ起動をしなくてもViewの確認ができる
ContentView.swiftファイルを開き、右側のcanvas内のResumeをクリックすると、ライブプレビューができるようになっています。
これがSwiftUIの便利なところで、本来のソースコード（左側のペイン）でコードを記述しても、右側のプレビューからViewに変更を加えても、相互に更新されます。
つぎの項目で早速Viewの変更について書いていきます。
Xcodeを使った開発手法
Viewのカスタマイズ
元々あるHello Worldの文字のViewをカスタマイズしてみましょう。
先述した通り、ソースコードを書いても、プレビューから指定しても相互に反映させることができるのですが、Swiftを初めて触る場合は指定できる装飾方法すら分からないとなるかと思いますので、最初はプレビューから変更していく方法がおすすめです。
装飾したい文字をcommandキーを押しながらクリック
メニューが出てくるので、Show SwiftUI Inspector…をクリック
Textの内容や装飾をここから変更することができ、変更した結果が即座に右側のソースに反映されることが確認できるので、いろいろいじってみましょう
Viewを組み合わせるにはスタックを使用する
先ほどのように単一のViewをカスタマイズする事はできるようになりましたが、実際のアプリケーションでは一つの画面に様々な項目などを表示します。
そこで、スタックというものを使ってViewをグループ化する方法です。
先ほどと同様にテキストのViewをCommanキーを押しながら選択し、Embed in VStackをクリックします。
ソースコードがこのように変更されるのが確認できます
変更前
var body: some View {
Text("Hello, Swift!!!!!")
.foregroundColor(.blue)
.multilineTextAlignment(.leading)
.padding(20.0)
.blendMode(/*@START_MENU_TOKEN@*/.darken/*@END_MENU_TOKEN@*/)
}
変更後
var body: some View {
VStack {
Text("Hello, Swift!!!!!")
.foregroundColor(.blue)
.multilineTextAlignment(.leading)
.padding(20.0)
.blendMode(/*@START_MENU_TOKEN@*/.darken/*@END_MENU_TOKEN@*/)
}
}テキストがVStackでWrapされています。
そして、Xcodeの右上あたりにある「＋」ボタンをクリックし、テキストビューをドラッグして、元々あるテキストニューの直後に追加します
微調整していい感じに整えます
同じ要領で、今度は先ほど追加したテキストからHStackを使用してテキストを追加します。
VStack(alignment: .leading) {
Text("Hello, Swift!!!!!")
.font(.largeTitle)
.foregroundColor(.blue)
.blendMode(/*@START_MENU_TOKEN@*/.darken/*@END_MENU_TOKEN@*/)
HStack {
Text(/*@START_MENU_TOKEN@*/"ようこそ、初めてのAppへ"/*@END_MENU_TOKEN@*/)
.fontWeight(.ultraLight)
Text(/*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
.fontWeight(.ultraLight)
}
}
こうすると、今度は水平方向にテキストの配置ができました。
つまり、VStackはVerticalなので垂直、HStackはHorizonなので水平のStackを追加できるという事ですね。
またチュートリアルでは、この後微調整として、HStackのText間にSpacer()というのを入れる事で、デバイスの幅を目一杯使うようにし、全体を囲っているVStackの後に.padding()を入れる事で内側の余白を作っています。
Custom image viewを使う
画像を取り込むためには、プロジェクト内のAssets.xcassetsディレクトリに該当ファイルをドロップする。
SwiftUI Viewテンプレートを新たに作成し、先程Assetsに追加したImageを指定する。
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4))
.shadow(radius: 10)
}
}
struct CircleImage_Previews: PreviewProvider {
static var previews: some View {
CircleImage()
}
}MapViewを作成する
先程と同様の方法で、新規でMapView.swiftを作成。
Mapを表示するには、Map Kitをimportする。
それぞれのコンポーネントをチュートリアル通りに組み合わせた結果
