swiftui

iOSアプリ開発

初心者でもiOSアプリ開発ができるSwiftUIを触ってみよう

「アプリ開発って難しそう」「アプリを作ってみたいけど作り方がわからない」という人は多いと思います。iOSアプリの開発は、UIやカメラといったデバイスの機能を使う際にiOS特有の機能に沿って開発してくことが多々あります。そういった中で2019年のWWDCでより直感的にUI構築ができるように設計されたSwiftUIが発表されました。SwiftUIは初心者でも触りやすく作られており、今回は入門編としてSwiftUIについて紹介していきます。

SwiftUIって何?

SwiftUIは、今までiOSアプリ開発で使ってきたUIKitよりも、より簡単でインタラクティブにUIを実装できるようにしたフレームワークです。SwiftUIは、Xcode 11から利用することができるのでこれからアプリ開発を始めるという人におすすめです。Xcode 11は、MacOSをCatalina以上にアップデートしている必要があります。

UIKitとの違いと手軽さ

iOSアプリ開発では今までUIKitというフレームワークを使って、アプリのUIを実装してきました。このUIKitは、開発者がビューのライフサイクルに合わせてサイズの変更やレイアウトの調整などをするようにコーディングしています。そのため、デバイスのサイズごとに微調整が実装を複雑にしていました。

SwiftUIはUIKitと比べて設計自体が変わっていて、階層化されていてUIの配置がわかりやすくなっていたり、レイアウトなどを調整してくれるようになっていたり、デザインの変更が簡単にできるようにインターフェースがわかりやすくなっています。

Xcodeを使ってSwiftUIを触ってみる

ここからは、実際にSwiftUIを触ってみようとおもいます。なお、Xcodeの使い方については、以下の記事を参考にしてください。

ContentView

SwiftUIを選択して新規プロジェクトを作ると、ContentView.swiftというファイルが作られます。SwiftUIの実装は、初めのうちはContentViewの中に実装していくことになります。


struct ContentView: View {
    var body: some View {
        ZStack {
            GeometryReader { geometry in
                // Blue Circle (behind)
                Circle()
                    .foregroundColor(.blue)

                // Green Half Rectangle (ahead)
                Rectangle()
                    .size(width: geometry.size.width / 2.0, height: geometry.size.height)
                    .foregroundColor(.green)
            }
        }
    }
}

Previwe機能

ContentViewに実装したUIはPreviewという機能で確認できるようになっています。


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

まとめ

SwiftUIは直感的で初心者にもわかりやすく、アプリを作ったことがない人でも簡単にUIなどが作りやすく設計されています。アプリを作ってみたいという方は、SwiftUIを使って作ってみることをおすすめします。

Related post

  1. swiftui

    iOSアプリ開発

    StateとObservableを使ってSwiftUIのビューを変更する方法

    SwiftUIフレームワークを使っているとStateやObserved…

  2. iOSアプリ開発

    xcconfigを使って本番とテスト環境を切り替える方法

    iOSアプリを開発していると、本番の環境とテストする環境を切り替えて開…

  3. テクノロジー

    iOSアプリ開発者になる人が読んでいる12の本を紹介 2020年版

    「iOSエンジニアになるために、どんな本を読んで勉強すれば良いですか?…

  4. Pythonでスクレイピング

    スクレイピングでヘッダー情報を付与する方法とその目的

    今回は、前回試したスクリプトにヘッダー情報を加えたリクエストを投げれる…

  5. iOSアプリ開発

    iOSアプリ開発者が本当にオススメする6つの技術系サイト

    今回は、iOSアプリエンジニアとして実際に良く参考にしているサイトを紹…

  6. テクノロジー

    IBDesignable、IBInspectableを使ってStoryboardでデザインする方法

    iOSアプリ開発をStoryboardを使って開発している方も増えてき…

PAGE TOP