【画像付き】SwiftUI チュートリアル解説 ep.1 前編 (2020年最新版)

3 min

皆さんこんにちは!たいちです。

この記事は、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プロジェクトを作りましょう。

 

Xcodeプロジェクトの作成方法

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テスト用のファイルを追加します。

入力し終わったら保存先を決定しましょう。

ステップ4, 5 ContentViewを開くように指示される

次に進むと、ContentView.swiftを開くように指示されます。

Xcodeでプロジェクトを作成した後、最初に現れる画面

左側のメニューが出て来なければ、右上の3つのボタンをいろいろいじってみましょう。

メニューの表示・非表示ボタン

ステップ4では「デフォルトでは、SwiftUIビューファイルは2つの構造を宣言します。最初の構造はViewプロトコルに準拠し、ビューのコンテンツとレイアウトを記述します。2番目の構造はそのビューのプレビューを宣言します。」と書かれています。

初心者の方がこれを全部覚えようとすると、ほぼ確実に頭がこんがらがってきます。そのため、次の2点だけ覚えましょう。

  • ビュー(見た目)は、struct ビューの名前: View {}のように、構造体で定義される。
  • {}の中に、var body: some View {}で、bodyを宣言し、{}の中にコンテンツを配置する。

Viewの定義

この文法を覚えておけば、ビューを新しく作ることができます。

コードの左半分にある構造体はプレビュー用の構造体です。プレビュー構造体のカスタマイズ

ステップ6 Text(“Hello World!”)の中身を変えてみましょう。

Hello SwiftUI! に変更。))

Swiftの文法上、String型(文字列)は、他の型や変数と区別するために、””(ダブルクオーテーション)で囲みます。

shiftキーを押しながら、2を押すと入力できます。

 画面左のコードを書き換えると、右側のプレビューも更新されます。

セクション2 テキストビューをカスタマイズする。

セクション2

次に、テキストビューをカスタマイズしてみましょう。

Inspect... をクリック
キーボード左下のcommandキーを押しながら、プレビューのテキストをクリックしてみましょう。その後、inspect…をクリックします
フォントの変更
テキストの基本的な修飾ができます。フォントや、文字の太さ、色、右揃えや左揃えなど…

ここが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で出てくる部品ライブラリーからドラッグ&ドロップする。
  • コードに直接書き込む

これらを試してみてくださいね。

コードを書かずとも、ドラッグ&ドロップで部品を配置できます。
プレビューを表示した状態で、shift + command + L で表示します。 プレビューの表示・非表示は、option(alt) + command + Enter で切り替えます。

 

modifierの意味

Text(“Turtle Rock”)の下にある、.font(.title)や、.bold()などのコードは、Modifierといいます。テキストを修飾したり、プロパティを変更する役割を持っていてます。上から順番に適用されるので、順番を変えると得られる効果が変わることがあります。

Modifierは、必ず最後に()がつくので、これを忘れるとエラーが出ます。

長くなったので、セクション3からは次の記事に書きます。

こちらから(準備中)  

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です