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

はじめに

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

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

MathMLとは

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

デモ

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

コード

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())

足し算と引き算

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')))
}

三平方の定理

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')),
    ),
  )
}

正弦定理

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'),
    ),
  )
}

二次方程式の解の公式

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')),
      ),
    ),
  )
}

極限

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

参考サイト

最後に

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

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