【SwiftUI】テキストエディタの作成とデータ保存

本記事では、文字を入力できるテキストエディタの作成方法とそのデータをユーザ端末内のアプリに保存して、再度開いた際にも入力した内容が確認できるアプリを作成する方法をご紹介していきます。

1. テキストエリアを配置
2. データをアプリ内に保存する
3. 最後に

テキストエリアを配置

まずはContentViewでテキストを入力するための場所を準備するため、テキストエリアを配置していきます。

今回は画面全体をテキストエリアとするため、TextEditorを使用します。

TextEditorは、テキストを入力することができるエリアの1つですが、特徴としてサイズの指定などをしなければ画面全体に広がります。

画像などにも用いられる.frameモディファイアを使用すれば、TextEditorの縦横のサイズを指定することもできます。パラメータにはバインディングのstring型を指定するため、@Stateで宣言した変数の前に$をつけて渡します。

struct ContentView: View {
    @State var value=""
    var body: some View {
        TextEditor(text: $value)
    }
}

画面からの入力を受け取る@State変数valueをパラメータとしてTextEditorに渡すことで、エディタ内に入力された値を受け取ることができます。

@Stateをつけた変数valueに対して、入力された値を代入しています。

また、画像の通りTextEditor()では文字列を複数行に渡って入力することができ、自動的に割り振られた幅を超える入力された場合には次の行に折り返されます。改行なども自由にできるようになっています。

データをアプリ内に保存する

次にTextEditor内に入力された値をアプリ内に保存する方法をご紹介していきます。

アプリ内にデータを保存するにはUserDefaultsを使用します。

UserDefaultsはアプリ内にデータを保存することができる機能で、データベースのような役割を持っています。UserDefaultsに保存したデータはアプリを閉じてもアプリ内に残し続けることが可能で、アプリの削除などを行わなければ消えません。

SwiftUIでUserDefaultsにデータを保存するには、@AppStorageを使用します。

@AppStorage("キー名") var 変数名 = ""

@AppStorage()の中に設定しているキー名で、変数に入っている値がUserDefaults上に保存されます。UserDefaultsへの新規登録・更新時には特に何もすることがなく、@AppStorageで宣言した変数に最後に代入されている値を自動で保存してくれます。

また、すでに保存されている値もキー名を正しく指定していれば、上記の宣言時に変数にその値が代入されて使用することができます。

このように@AppStorageを使用することで、処理などを特に意識することなく非常に簡単にアプリへのデータの保存・取り出しを行うことができます。

実際にテキストボックスに入力した値をUserDefaultsに保存する方法は以下になります。

struct ContentView: View {
    @AppStorage("defaultData") var defaultData = ""
    var body: some View {
        VStack{
            TextEditor(text: $defaultData)
        }
    }
}

先ほど@Stateで宣言していた変数を@AppStorage変数に置き換えています。これにより、変数defaultDataに代入された値はdefaultDataというキー名でUserDefaults内に保存され、アプリを閉じて再度開いた後にも変数defaultDataには閉じる前に保存したデータが最初から代入されている状態になります。

開発段階では、プレビュー画面では実際に保存されていることは確認できませんので、実機やシミュレータを使用して確認してみて下さい。