VanJSで数式を表示する５つの例

## はじめに

VanJSで数式を表すには、`van.tagsNS`のAPIを利用します。例えば以下のようにすることで、MathMLの`math`タグの関数の変数を宣言することができます。

```typescript:
const { math } = van.tagsNS('http://www.w3.org/1998/Math/MathML')
```

## MathMLとは

MathML（Mathematical Markup Language）は、数式などの数学的な表現を記述するためのXMLベースのマークアップ言語です。MathMLを使用すると、Webページなどの文書に整形された数式を埋め込むことができます。

## デモ

５つ数式を作ってみました。それぞれコンポーネントに分けています。

https://stackblitz.com/edit/vitejs-vite-rastjb?file=index.html,package.json&terminal=dev

## コード

```typescript:src/main.ts
import van from 'vanjs-core'

import { AdditionAndSubtraction } from './components/AdditionAndSubtraction'
import { PythagoreanTheorem } from './components/PythagoreanTheorem'
import { LawOfSines } from './components/LawOfSines'
import { QuadraticFormula } from './components/QuadraticFormula'
import { Limit } from './components/Limit'

const App = () => {
  const { div, p } = van.tags

  return div(
    div(p('足し算と引き算'), AdditionAndSubtraction()),
    div(p('三平方の定理'), PythagoreanTheorem()),
    div(p('正弦定理'), LawOfSines()),
    div(p('二次方程式の解の公式'), QuadraticFormula()),
    div(p('極限'), Limit()),
  )
}

van.add(document.getElementById('app')!, App())
```

### 足し算と引き算

![スクリーンショット 2023-09-10 15.47.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/6a1f69c7-238b-8b5c-ff7f-f9e543d6aa41.png)

```typescript:src/components/AdditionAndSubtraction.ts
import van from 'vanjs-core'

const { math, mi, mn, mo, mrow } = van.tagsNS(
  'http://www.w3.org/1998/Math/MathML',
)

export const AdditionAndSubtraction = () => {
  return math(mrow(mi('a'), mo('+'), mi('b'), mo('-'), mn('1')))
}
```

### 三平方の定理

![スクリーンショット 2023-09-10 15.47.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/17f319a2-f0e3-47b8-e8f6-3d7ccedfea47.png)

```typescript:src/components/PythagoreanTheorem.ts
import van from 'vanjs-core'

const { math, mi, mn, mo, mrow, msup } = van.tagsNS(
  'http://www.w3.org/1998/Math/MathML',
)

export const PythagoreanTheorem = () => {
  return math(
    mrow(
      msup(mi('c'), mn('2')),
      mo('='),
      msup(mi('a'), mn('2')),
      mo('+'),
      msup(mi('b'), mn('2')),
    ),
  )
}
```

### 正弦定理

![スクリーンショット 2023-09-10 15.47.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/0aba98e5-2312-40b5-e324-982547549dc3.png)

```typescript:src/components/LawOfSines.ts
import van from 'vanjs-core'

const { math, mfrac, mi, mn, mo, mrow } = van.tagsNS(
  'http://www.w3.org/1998/Math/MathML',
)

export const LawOfSines = () => {
  return math(
    mrow(
      mfrac(mrow(mi('a')), mrow(mi('sin'), mi('A'))),
      mo('='),
      mfrac(mrow(mi('b')), mrow(mi('sin'), mi('B'))),
      mo('='),
      mfrac(mrow(mi('c')), mrow(mi('sin'), mi('C'))),
      mo('='),
      mn('2'),
      mi('R'),
    ),
  )
}
```

### 二次方程式の解の公式

![スクリーンショット 2023-09-10 15.47.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/9f915622-d17f-4d75-ac7e-0d043a04d6f9.png)

```typescript:src/components/QuadraticFormula.ts
import van from 'vanjs-core'

const { math, mfrac, mi, mn, mo, mrow, msqrt, msup, mtext } = van.tagsNS(
  'http://www.w3.org/1998/Math/MathML',
)

export const QuadraticFormula = () => {
  return math(
    mrow(
      mtext('x = '),
      mfrac(
        mrow(
          mo('-'),
          mi('b'),
          mo('±'),
          msqrt(mrow(msup(mi('b'), mn('2')), mo('-'), mn('4ac'))),
        ),
        mrow(mn('2a')),
      ),
    ),
  )
}
```

### 極限

![スクリーンショット 2023-09-10 15.47.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1125523/f3b2f905-60a8-27a3-e945-567229b2186a.png)

```typescript:src/components/Limit.ts
import van from 'vanjs-core'

const { math, mi, mn, mo, mrow, munder } = van.tagsNS(
  'http://www.w3.org/1998/Math/MathML',
)

export const Limit = () => {
  return math(
    munder(mi('lim'), mrow(mi('x'), mo('→'), mn('0'))),
    mrow(mi('sin'), mi('x')),
  )
}
```

## まとめ

VanJSで数式を表示する５つの例をご紹介しました。VanJSで数式を作ることで、コンポーネント化して再利用ができるため、何度も同じ数式を表示する場合は便利だと思います。他にも行列式や微積分など表現できるので、興味がある方は試してみてください。

## 参考サイト

https://www.tohoho-web.com/ex/mathml.html

http://toshichan.be.fukui-nct.ac.jp/tsujino/mathml/index.htm

## 最後に

### GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site?qiita=4d1721532dc8c177a907