SwiftUIを使ったドキュメントベースアプリケーションの開発

iOS（当サイトの環境）：17.0
XCode（当サイトの環境）：15.0.1

SwiftUIではドキュメントベースのアプリケーションが、非常に簡単なプロセスで作成できるようになっています。この記事では、SwiftUIでドキュメントベースアプリケーションを開発する方法について紹介します。

ドキュメントベースアプリケーションとは？
ドキュメントベースアプリケーション開発における主要コンポーネント
ドキュメントベースアプリの開発プロセス
作成手順
1. 1.プロジェクトを新規作成
2. テンプレートコードのカスタマイズ（ツールバーの表示）
プロジェクトの動作
1. item
まとめ

ドキュメントベースアプリケーションとは？

ドキュメントベースアプリケーションは、ファイルやドキュメントの作成、編集、保存などを主要な機能とするアプリケーションです。
一般的にはテキストエディタ、画像編集アプリ、表計算アプリなどがこのカテゴリに属します。
SwiftUIを用いると、これらのアプリケーションを効率的に開発することが可能になります。

ドキュメントベースアプリケーション開発における主要コンポーネント

SwiftUIでドキュメントベースアプリケーションを開発する際には、以下のコンポーネントが中心的な役割を果たします。

1. FileDocumentプロトコル

FileDocumentプロトコルは、ドキュメントのデータモデルを定義します。
このプロトコルに準拠することで、アプリはドキュメントの読み書きを行う方法を知ることができます。

2. DocumentGroup

DocumentGroupは、アプリのエントリポイントであり、新しいドキュメントの作成や既存のドキュメントの開封を管理するためのUIを提供します。

3. ContentView

ContentViewは、ドキュメントの内容を表示し、ユーザーが操作できるビューです。
ここでテキスト編集や画像操作などが行われます。

ドキュメントベースアプリの開発プロセス

ドキュメントベースアプリケーションの開発は、以下のステップに分けて行うことができます。

データモデルの定義: FileDocumentプロトコルに準拠したデータモデルを作成します。
UIの構築: DocumentGroupを使用してアプリのメインUIを構築し、ContentViewでドキュメントの編集インターフェースを提供します。
ドキュメントの操作: ユーザーがドキュメントを作成、開封、保存できるようにします。

文章で書くとよく分からないと思いますが、実際に作業を進めてみると簡単にできます。
XCodeではドキュメントベースアプリのテンプレートプロジェクトのようなものが用意されており、試しに動かしたいだけであれば、プロジェクトを作成するだけでも動きます。

作成手順

1.プロジェクトを新規作成

Xcodeのツールバーから File -> New -> Project の順に選択します

プロジェクトのテンプレート選択で「Document App」を選択します

プロジェクト名等設定しNextを押すと、プロジェクトの保存先の設定画面が表示されるため、保存先を設定してプロジェクトを作成します

Storageに関しては、勉強目的の場合はひとまずNoneとして作成しましょう。
データを永続化する際はSwiftDataを設定すると良いのですが、コードが複雑になってしまいます。

テンプレートコードのカスタマイズ（ツールバーの表示）

テンプレートのソースコードのままだと、テキストエディタ画面に移動した後、ツールバーが表示されません。ツールバーが表示されないとテキストエディタビューが表示された後、画面の移動ができなくなってしまいます。
一部テンプレートをカスマイズしておきましょう。

以下コードにおけるTextEditorにモディファイアとして.toolbarを適用しておくと、ツールバーが表示されるようになります。

とりあえずツールバーを表示さえしておけば『戻るボタン』も表示されるようになります。

import SwiftUI

struct ContentView: View {
    @Binding var document: DocSmpProjectDocument

    var body: some View {
        TextEditor(text: $document.text)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton()
                }
            }
    }
}

#Preview {
    ContentView(document: .constant(DocSmpProjectDocument()))
}