はじめに

どうも@chan_kakuです
今回はタイトルにもあるようにStoryboardからSwiftUIを呼び出す方法を紹介していこと思います。
アプリの内容としてはボタンを押したらSwiftUIで作ったUIが出てくるような簡単な構成にしたいと思います。

*注意
- 普段まったくSwiftを書いてないので間違ってることがあると思いますのでご容赦ください
- SwiftUIの使い方自体はこちらの記事では説明しません

動機

ハッカソンに出る機会があり、iOS向けのアプリを作るということになりました。そこでSwiftの勉強をしていたのですが、前から耳にしていたSwiftUIがちょっと気になっていたので、SwiftUIの勉強をしてました。
しかしながら、SwiftUIはiOS13以上の端末でしか利用できないということで今後StoryboardからSwiftUIに移行していく時代がきたときにこういった使い方をしていくんじゃないかということでこのような記事を書いた次第です。
また、SwiftUI自体の記事は結構あるのですが、今回のユースケースの記事で日本語のものが全然なかった&初心者の僕に理解できるものがなかったので書いてみました！

やり方

環境

• macOS Catalina 10.15.4
• Xcode Version 11.4.1

はじめよう！

1. プロジェクトの作成

まずは既存のプロジェクト(Storyboard)を使っているところからSwiftUIを使うという想定ですのでStoryboardでプロジェクトを作成していきます。当たり前ですが実際に置き換える際はこちらの作業はスキップしてください。

こちらから「Single View App」を選択してNextボタンを押してください

こちらの画像のように「User Interface」の部分でSwiftUIではなくStoryboardを選びプロジェクトの作成を行います。

2. Storyboardでの作業

1でプロジェクトを作ってMain.storyboardを選択すると上の画像のような画面になります。これはアプリを起動した際の実際の画面になります。
それではXcodeの右上の「+」ボタンからボタンを配置していきます。

ボタンを配置したらこんな感じになります！今回はボタンのテキストをわかりやすく「SwiftUIを呼び出す」としてます。
ここでRunすると起動したあとStoryboardと同じ画面が見れると思います(ボタンが真ん中にないですが、一旦は無視していきます)

続いてボタンを押した後に出現させるSwiftUI側のUIを作っていきます。

3. SwiftUIでの作業

追加したいディレクトリで右クリックでnew Fileをします。
するとこのような画面になるので、今回は「SwiftUI View」を選択してください。

作成した後、作成したファイルを選択して、右上の「Resume」ボタンを押すとこのような画面が見れると思います！！
SwiftUIではホットモジュールリロードに対応していて、コードを修正したものがすぐに反映されて右側のプレビュー画面で見れるようになります！！
すごい便利ですよね〜〜

4. Storyboardでの作業2

そしてここでようやく3で作った「SwiftUIView」をボタンを押したタイミングで呼び出す処理を書いていきます。
Storyboardに戻って再び右上の「+」ボタンを押してください！
今回は「Hosting View Controller」を使いますので、「Hosting View Controller」を選択して以下のように配置してください。

controlボタンを押しながら「ボタン」から「Hosting Controller」に対してドラックアンドドロップしようとすると以下のような選択をすることができます。今回は「Show」を選んでいきます。それぞれの選択肢が何に当たるかは公式ドキュメント等を参考にしてください。

選択した後このように矢印が追加されます！

ちなみに今回選択した「Show」は下からニョキって出てくる感じの遷移になります。

続いてボタンを押した時に先ほどの「SwiftUIView」を呼ぶ処理を書いていきます。

この画像のように画面を2つに分割して、片方にStoryboardを右側にViewControllerを選択して表示させてください。
その後先ほどのようにcontrolボタンを押しながら右のStoryboardの矢印からViewControllerのコードに対してドラッグアンドドロップしてください。すると以下のような画面が出てきます

Nameに好きな名前をつけてください。ここでは「toSwiftUI」をいう名前にします。

追加するとViewControllerのtoSwiftUIのところにこのようなコードが追加されます。

import UIKit
import SwiftUI //追加

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


    @IBSegueAction func toSwiftUI(_ coder: NSCoder) -> UIViewController? {
        return UIHostingController(coder: coder, rootView: SwiftUIView()) // rootViewのvalueをSwiftUIView()に変更
    }
}

これでついに完成となります！！！

完成動画

終わりに

今回は初心者向けに詳しめに書きましたが、Swiftバリバリに書いてるエンジニアにとっては冗長な説明だったかなと思います！
SwiftUIは宣言的な書き方で僕はすごい好きなので、みんなiOS13以上に早くなって欲しいなと思ってます！
最初にも書きましたが、Swift全く書いてない初心者ですので間違ってるところ、もっとこっちの方がいいなどあればご指摘いただけると助かります！