皆さんこんにちは！たいちです。
この記事は、SwiftUIを使ってアプリ開発をしたい方向けに書いてます！
SwiftUIとは、WWDC2019(Appleが最新技術を披露するイベント)で発表された、アプリ開発のための新しいフレームワークです。
そのSwiftUIを学ぶ最初の一歩として用意された、チュートリアルを丁寧に解説していきます。
長くなるので、前編(いまココ！)、中編、後編に分けるつもりです。【準備中】
それでは始めていきます。
※Xcodeのインストールは別記事に書いております。
Learn to Make Apps with SwiftUI
リンク: https://developer.apple.com/tutorials/swiftui/tutorials
Get startedをクリックして進みます。
ビューの作成と結合(Creating and Combining Views)
こちらのサイトを別タブか別ウィンドウで開きながら、Xcodeを動かすのがオススメです。
プロジェクトファイルをクリックすると、チュートリアルのパートごとに開始、終了した時点での2つの状態のプロジェクトファイルと、チュートリアル中に使う画像などが入ったZIPをダウンロードできます。
途中でつまづいたら、自分のコードとこのチュートリアル終了時点でのコードを見比べてみるのも、解決手段の一つです。
セクション1：新しいプロジェクトを作成してキャンバスを探索する
まず初めに、指示に従い新しいXcodeプロジェクトを作りましょう。
この画面で、プロジェクトの名前や使用言語等の初期設定を行います。
- Product Name: プロジェクトの名前
- Team: 実機ビルドしたりする際に必要になります。最初のうちはNoneで大丈夫です。
- Organization Name: アプリ制作組織の名前
- Organization Identifier: 上記の組織名のID これとプロジェクトの名前を合わせたものがBundleID (アプリのID)として設定されます。詳しくは調べてみてください。
- Language: SwiftかObjective-Cを選択
- User Interface: StoryBoardかSwiftUIを選択
- Use Core Data: CoreDataという、アプリ内に保存するデータベースライブラリを使用するかどうか。オンだAppDelegateにコードが追加されます
- User Cloud Kit:
- Include Unit Test: ユニットテスト用のファイルを追加します。
- Include UI Tests: UIテスト用のファイルを追加します。
入力し終わったら保存先を決定しましょう。
次に進むと、ContentView.swiftを開くように指示されます。
左側のメニューが出て来なければ、右上の3つのボタンをいろいろいじってみましょう。
ステップ4では「デフォルトでは、SwiftUIビューファイルは2つの構造を宣言します。最初の構造はViewプロトコルに準拠し、ビューのコンテンツとレイアウトを記述します。2番目の構造はそのビューのプレビューを宣言します。」と書かれています。
初心者の方がこれを全部覚えようとすると、ほぼ確実に頭がこんがらがってきます。そのため、次の２点だけ覚えましょう。
- ビュー(見た目)は、struct ビューの名前: View {}のように、構造体で定義される。
- {}の中に、var body: some View {}で、bodyを宣言し、{}の中にコンテンツを配置する。
この文法を覚えておけば、ビューを新しく作ることができます。
コードの左半分にある構造体はプレビュー用の構造体です。
ステップ６ Text(“Hello World!”)の中身を変えてみましょう。
Swiftの文法上、String型(文字列)は、他の型や変数と区別するために、””(ダブルクオーテーション)で囲みます。
shiftキーを押しながら、2を押すと入力できます。
画面左のコードを書き換えると、右側のプレビューも更新されます。
セクション2 テキストビューをカスタマイズする。
次に、テキストビューをカスタマイズしてみましょう。
ここがSwiftUIの強みの1つです。直感的にコードを書かずにUIを作れるので、誰でもUIを作れます。
コードに戻って、Text(“”)をcommand + クリックしてみてください。
このように、Text(“”)にできる様々な操作が現れます。それぞれの意味はそのうち覚えていくでしょう。
Show SwiftUI Inspector…をクリックするか、ctrl + option(alt)キーを押しながら、部品をクリックすることでも、その部品に対して操作を行えます。
しかし、バグなのか、Inspector…が表示されない時もあります。
[2col-box]
[2-left]
[/2-left]
[2-right]
[/2-right]
[/2col-box]
このバグが出たら、
- プレビュー上部の、Resumeボタンを押して、プレビューを再開する
- shift + command + Lで出てくる部品ライブラリーからドラッグ＆ドロップする。
- コードに直接書き込む
これらを試してみてくださいね。
Text(“Turtle Rock”)の下にある、.font(.title)や、.bold()などのコードは、Modifierといいます。テキストを修飾したり、プロパティを変更する役割を持っていてます。上から順番に適用されるので、順番を変えると得られる効果が変わることがあります。
Modifierは、必ず最後に()がつくので、これを忘れるとエラーが出ます。
長くなったので、セクション３からは次の記事に書きます。
こちらから(準備中)