photo
photo
  1. トップ
  2. アプリ開発
  3. SwiftUIとは?入門者向けチュートリアルで使い方を理解しよう

SwiftUIとは?入門者向けチュートリアルで使い方を理解しよう

『SwiftUI』は、iPhoneアプリ開発で用いられる新しいUIフレームワークのことです。従来のUIKitに比べてコードが少ないなどのメリットがあり、iOS開発において主流になりつつあります。実際にiOS開発に携わりたいと思っている方の中には、一度は耳にしたことがあるのではないでしょうか。

この記事では、SwiftUIの基礎知識とメリット、チュートリアルの使い方を解説します。

SwiftUIとは?入門者向けに解説

「SwiftUI」とは、iPhoneなどAppleプラットフォームのユーザーインターフェースを、従来よりも簡単に構築できるUIフレームワークのことです。2019年6月にAppleによって発表された新しいフレームワークとして注目を集めています。

SwiftUIは、iPhoneだけでなくiPadやMacOSX、Apple Watchなど、Apple製品のプラットフォームすべてに対応しているUIフレームワークです。

SwiftUIの最大の魅力は、シンプルなコードで実装できることです。

Swift UIを使うメリット

従来では、iOS開発においてはObjective-Cというプログラミング言語が使われ、ユーザーインターフェースを構築する際は、UIKitというフレームワークが使われていました。

Objective-CとUIKitを使った開発では、端末ごとに違う画面サイズによってレイアウトを調整する必要があったり、コードの記述量がとても多かったりと、複雑なものでした。

一方、SwiftUIなら少ないコードで記述でき、外部コントロラーも必要ないため、効率的に開発できます。

なお、SwiftUIの対応OSは、デバイスがiOS13以降、開発ツールはXcode11以降となっています。そのため、利用する前に環境を確認する必要があります。

SwiftUIのメリットとは?

SwiftUIには、以下のようなメリットがあります。

  • データを更新したとき自動でViewに反映
  • シミュレーターを立ち上げる必要がない
  • デフォルトでダークモードに対応
  • コードがシンプルで、開発エンジニアの負担を軽減

それぞれのメリットについて簡単に解説します。

◎データを更新したとき自動でViewに反映される

SwiftUIには、データの更新を常にチェックする仕組みがあります。これにより、データ更新を行った場合、自動でViewに反映され、確認することができます。

◎シミュレーターを立ち上げる必要がない

シミュレーターを立ち上げる必要がないという点も、SwiftUIのメリットです。シミュレーターは立ち上がるまでに時間がかかるため、開発効率を下げてしまう要因のひとつでした。SwiftUIでは、常にXcodeの右側にプレビューが表示されます。プレビューを見て動作確認ができるため、開発効率アップを期待できるでしょう。

◎デフォルトでダークモードに対応している

ダークモードの対応もメリットのひとつです。ダークモードは目への負担軽減やバッテリーの消費を抑えられるなどの特徴があり、ダークモードに対応するアプリも多くなっています。SwiftUIでは、デフォルトで対応しているだけあり、ダークモードへの対応が簡単にできます。また、選択すればライトモードのみにすることも可能です。

◎コードがシンプルなので開発エンジニアの負担が軽減される

エンジニアの負担が軽減されるというメリットもあります。先述の通り、SwiftUIは自動更新やシミュレーターの立ち上げが不要など、エンジニアの開発効率を阻害する要素を取り除いたフレームワークだといえます。また、最小限のコードでUIを実現できるため、大幅な負担軽減と開発効率の向上を期待できます。

 

入門者にはSwiftUIチュートリアルがおすすめ

SwiftUIを学ぶ際には、Apple公式のチュートリアルがおすすめです。チュートリアルではSwiftUIの基本的な使い方、書き方や仕組みを理解しできます。学習時間は、4時間25分となっています。

ただし、Apple公式のチュートリアルは英文です。そのため、英語が苦手な方は、翻訳機能など利用する必要があります。

なお、SwiftUIのチュートリアルをはじめる前に、MacOSおよびXcodeを最新バージョンにしておきましょう。SwiftUIはXcode11以降でしか使用できませんので、古いバージョンを利用するとチュートリアルをはじめることができません。

Apple公式のチュートリアルは、以下のような4つのチャプターで構成されています。

  • Chapter.1 SwiftUIの必須要件
  • Chapter.2 描画とアニメーション
  • Chapter.3 アプリのデザインとレイアウト
  • Chapter.4 フレームワークの統合

それぞれのチャプターで何を学ぶのかを簡単に紹介します。

SwiftUIの必須要件

Chapter.1のSwiftUIの必須要件では、もっとも基本的なことを学びます。具体的にはシンプルなビューの作成や結合、リストの表示、ユーザー入力処理などです。これらのUIパーツはすべてのアプリケーションで使われるため、まずはこちらから始めましょう。

Chapter.1は、「Creating and Combining Views」、「Building Lists and Navigation」、「Handling User Input」の3つの章で構成されています。学習に必要な所要時間は1時間35分です。

なお、この記事の最後では、SwiftUIチュートリアルのChapter.1部分の内容を日本語で紹介しています。

描画とアニメーション

Chapter.2では、描画とアニメーションを学びます。描画とは、画面に図形を表示させたり、グラデーションで色を塗ったりする工程です。アニメーションでは、動くボタンを作成したり、フェードインやフェードアウトの方法を学んだりします。

Chapter.2は、「Drawing Paths and Shapes」と「Animating Views and Transitions」で構成されています。合計の所要時間は45分です。

アプリのデザインとレイアウト

Chapter.3はアプリのデザインとレイアウトについての章です。ホームビューやカテゴリリスト、ユーザープロファイルへのリンクの作成などを学びます。

Chapter.3は、「Composing Complex Interfaces」と「Working with UI Controls」の2つで構成されており、所要時間は45分です。

フレームワークの統合

Chapter.4はフレームワークの統合です。UIKitについて学んだり、MacOSやApple Watchのアプリを作成したりします。

「Interfacing with UIKit」「Creating a watchOS App」「Creating a macOS App」の3つで構成されており、所要時間は1時間15分です。

 

SwiftUIチュートリアルの進め方を日本語で解説

ここでは、AppleによるSwiftUIの公式チュートリアルChapter.1のうち、ビューの作成と結合まで解説していきます。

1.まずは下記のURLにアクセスしてください。

https://developer.apple.com/tutorials/swiftui/#swiftui-essentials

2.アクセスしたWebサイトから“Get started”のボタンをクリックします。

SwiftUIチュートリアルGet started

3.ページが遷移したら下部にあるProject filesをクリックします。

SwiftUIチュートリアルプロジェクトファイル

4.ダウンロードを開始してください。

5. CreatingAndCombiningViewsのファイルをクリックし、下記の画像のように完全版と画像素材が入っていることを確認してください。

チュートリアルの完全版と画像素材

6.Xcodeを立ち上げてください。

7.Create a new Xcode projectをクリックして新規プロジェクトを作成します。

新規プロジェクトの立ち上げ

8.Single View Appを選択してください。

SwiftUIチュートリアルの選択

9.Project Nameに任意のプロジェクト名、適切なOrganization Identifierを入力し、User InterfaceはSwiftUIを選択してください。その後、Nextボタンをクリックします。

ProductNameの入力

10.ContentView.swiftをクリックしてください。

ContentView.swift

11.次にResumeをクリックしてください。

Resume

12. これでプレビュー表示が可能です。また、ビューの作成が完了になります。

SwiftUIチュートリアルビューの作成完了

13.次は、ContentViewのHello,Worldの部分を適当な文字に変更してください。

SwiftUIチュートリアルのHello World

14.リロードすることなく、プレビュー画面でテキストの変更が反映されました。

即時反映されるSwiftUI

この記事では、SwiftUIについての解説と、Apple公式のチュートリアルをご紹介しました。今回はChapter.1のはじめのステップの解説となりましたが、段階を踏んでチュートリアルを進めていくことで、SwiftUIの仕様に慣れることができます。

SwiftUIをマスターし、アプリ作成に取り掛かりましょう。

 

エンジニアに役立つ目的別講座

Pythonの基本~応用をマスター

現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル
現役シリコンバレーエンジニアが教えるPython 3 入門 + 応用 +アメリカのシリコンバレー流コードスタイル

現役シリコンバレーエンジニアが教えるPython入門講座。Python3の基本を取得できます。

Webサイトのコーディングができるように

ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!
ウェブ開発入門完全攻略コース - プログラミング をはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!

HTML, CSS, Bootstrap, JavaScript, MySQL, Ruby, Ruby on Rails, AWS Cloud9, Git, GitHubを用いたWebアプリケーション開発の方法を総合的に学べます。

AWSを基礎から学ぶ

これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)
これだけでOK! AWS 認定ソリューションアーキテクト – アソシエイト試験突破講座(SAA-C02試験対応版)

AWSの基本資格「AWS 認定ソリューションアーキテクト – アソシエイト試験」を合格を目指し、そのための知識や経験を獲得できるように!

オリジナルのウェブサイトを作ろう

WordPress開発マスター講座
WordPress開発マスター講座

WordPressのカスタマイズ手法を身につけ、自身のサイト構築や開発案件の受託などを目指しましょう。