SwiftUIで数式を入力する方法

はじめに

SwiftUIを学び始めてなんとなく要領がつかめてきた所で,
「そういえばSwiftUIで数式を表示する方法ってあるのかな」と考えて探していました.
UIKitであれば「iosMath」があったのですが、SwiftUIでは使えなさそうな感じ.
そこで, SwiftUIでも数式を入力する方法が見つかったのでここにアウトプットしておきます.

開発環境

macOS Ventura13.4.1 M1チップ
Xcode 14.3.1

使用するパッケージ

今回使用するパッケージは「LaTexSwiftUI」というものです.

詳細は以下より↓
https://github.com/colinc86/LaTeXSwiftUI

導入方法

Xcodeを起動したら「File」→「Add Packages...」で,
「Search or Enter Package URL」に「 https://github.com/colinc86/LaTeXSwiftUI 」　
を入力してパッケージをインストールします.

プログラムの例

ここではいくつかの簡単な使用例を載せておきます

まず使用するファイルでライブラリをインポートします.

import LaTeXSwiftUI

基本的な使い方

数式を入力する時はLaTeXを使います.

ContentView.swift

import SwiftUI
import LaTeXSwiftUI

struct ContentView: View {
    var body: some View {
            LaTeX("$x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

実行した時のSimulatorの写真↓

色を変えたりする

LaTexはTextでサポートされる修飾子を使うことができるので,
Textと同じように文字の色を変えたりできます.

ContentView.swift

import SwiftUI
import LaTeXSwiftUI

struct ContentView: View {
    var body: some View {
            LaTeX("$x = \\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$")
            .foregroundColor(.red)
            .font(.title2)
            .frame(width: 300)
            .border(Color.blue)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

実行した時のSimulatorの写真↓

文字も含めた使い方

デフォルトの状態では文字を含めたものを入力すると数式だけがレンダリングされます.
文字も含めてレンダリングしたい場合は修飾子を付けます.

ContentView.swift

import SwiftUI
import LaTeXSwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            Text("式①")//デフォルト状態
            LaTeX("Euler's identity is  $e^{i\\pi}+1=0$.")
            
            Text("式②")//onlyEquationsを明示
            LaTeX("Euler's identity is  $e^{i\\pi}+1=0$.")
                .parsingMode(.onlyEquations)
            
            Text("式③")//文字も含めてレンダリング
            LaTeX("\\text{Euler's identity is } e^{i\\pi}+1=0\\text{.}")
                .parsingMode(.all)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

実行した時のSimulatorの写真↓

おわりに

ここでは簡単に数式を入力する方法を述べました.
どれくらい実用的なものかは分かりませんが,
色々入力してみると楽しいのではないかと思います.
他にも機能はあるらしいので実際にgithubを参考にしてみてください.
LaTexの入力方法は以下のサイトなどを参考にしていただければ良いと思います.

ちなみに上のサイトに記載されているものをそのままコピー&ペーストすると
エラーが起こります.
必ず「\」を追加して入力するようにしてください
ex)πを表したい時は「\pi」ではなく「\ \pi」にする