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アプリ開発

    DispatchQueueを使って容量のあるファイルをダウンロードする方法

    アプリなどで画像のようなファイルデータをダウンロードすることはよくあり…

  3. iOSアプリ開発

    iOSアプリ初心者が覚えておきたい10のUIクラス

    iOSアプリを開発したいけど、最初は何を知っていたら開発できるのかわか…

  4. テクノロジー

    Appleの新しいMessagesで何ができるのか。

    WWDC 2016では数多くのセッションが行われました。WWDC 20…

  5. テクノロジー

    ReactiveXとは?RxJSの入門と導入手順

    Rx (Reactive Extension)とはここ数年で話題になっ…

  6. テクノロジー

    CSSによるセンタリングの方法と注意点についてのまとめ

    HTMLとかCSSの勉強を始めると、divやsectionなどで作った…

PAGE TOP