Xcode SwiftUIでHot Reloadを行う

はじめに

SwiftUIで階層が深い箇所のデザイン適応などをしていると
ある程度はプレビューでも出来るのですが実際の表示も確認したくなった時にビルド→画面遷移のコストがバカになりません。

Flutterみたいにホットリロードしたいなと思っていたのですが、InjectionIIIを活用することで実現できました。

導入したXcodeのバージョンは16.2です。2025/02/05時点で動作を確認しています。

環境構築

1. InjectionIIIのReleasesからInjectionIIIアプリをダウンロードして起動します。

起動するとメニューバーに表示されます。

2. ホットリロードしたいプロジェクトを開きAdd Package Dependencies...からhttps://github.com/krzysztofzablocki/Inject.gitを追加します。

3. 忘れずにFrameworksに追加します。

4. Other Linker FlagsのDebugに-Xlinkerと-interposableを追加します。

5. Hot reloadしたいViewにコードを追加します。

import Inject // 追加

struct LargeTextListView: View {
    @ObserveInjection var inject // 追加

    var body: some View {
        List(self.dataList) { textData in
            LargeLineTextView(textData.text)
        }
        .enableInjection() // 追加
    }

6. InjectionIIIアプリのOpen Projectから、Xcodeプロジェクトがあるディレクトリを選択します。

7. Xcodeでアプリを実行します。(Command + R)

実行時にうまく出来ていればと以下のようなXcodeのログが表示されます。

💉 InjectionIII connected /path/to/SmallUIs/SmallUIs.xcodeproj
💉 Watching files under the directory /path/to/SmallUIs

8. 5で追加したViewを表示した状態で、コードを変更し保存すると以下のようなログが表示されて、数秒で変更が反映されます！

💉 Compiling /path/to/SmallUIs/SmallUIs/LargeTextListView.swift
💉 Selecting Xcode /Applications/Xcode16.2.app/Contents/Developer
💉 Loading .dylib ...
💉 Interposed 8 function references.
💉 Injected type #1 'SmallUIs.LargeTextListView'
💉 Injected type #2 'SmallUIs.LargeTextListView.TextData'

最後に

以上です。
XcodeだけではなくVSCodeやCursorでの開発でも使えるらしいです。こういうのをうまく活用して効率化していきたいと思います！