【MathML】数式をWebに載せる方法

2022 11/17

2022/11/17

数式をWeb上で表示するためのマークアップ言語である「MathML」の使い方について紹介します。「MathML」は未対応のブラウザが多いので、「MathJax」というライブラリが必要です。

MathMLとは？

MathML(Mathematical Markup Language) は、HTMLタグを使用して数式をマークアップする手段を提供します。

ただし、 ChromeEdge などのブラウザでは MathML に対応できていません。

https://caniuse.com/#search=math

未対応のブラウザでも数式を表示するには、 MathJax というJavaScriptのライブラリが必要です。

数式を表示する他の方法

LaTeXASCIIMathMLといった方法もあります。MathJaxはこれらの方法もサポートしています。

MathJaxの導入方法

CDN 経由で MathJax を利用できます。

<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=MML_SVG"></script>

configパラメーター で「どのフォーマットを利用するのか」「どのように出力するのか」といった設定を指定できます。詳しい情報は以下ページで確認できます。

https://docs.mathjax.org/en/latest/config-files.html

主なタグ

基礎

タグ	説明
`<math>`	トップレベル要素
`<mi>`	識別子(identifier)
`<mn>`	数字(number)
`<mo>`	演算子(operator)

表、行列などに利用

タグ	説明
`<mtable>`	表または行列
`<mtd>`	表または行列のセル
`<mtr>`	表または行列の列

累乗、添字、積分などに利用

タグ	説明
`<msub>`	下付き(subscript)
`<msup>`	上付き(superscript)
`<msubsup>`	下付き上付きの組

ベクトル、総和、極限などに利用

タグ	説明
`<mover>`	真上付き
`<munder>`	真下付き
`<munderover>`	真下付きと真上付きの組

その他

タグ	説明
`<mfenced>`	括弧
`<mfrac>`	分数
`<mrow>`	グループ化された部分式
`<msqrt>`	平方根

利用例

どうのようにタグが利用されるのか紹介します。

加算 / 減算
( Addition / Subtraction )

<math>
  <mn>4</mn>
  <mo>+</mo>
  <mn>2</mn>
  <mo>+</mo>
  <mfenced>
    <mrow>
      <mn>10</mn>
      <mo>-</mo>
      <mn>3</mn>
    </mrow>
  </mfenced>
</math>

乗算 / 除算
( Multiplication / Division )

<math>
  <mn>5</mn>
  <mo>×</mo>
  <mn>3</mn>
  <mo>÷</mo>
  <mn>2</mn>
</math>

分数
( Fraction )

<math>
  <mfrac>
    <mrow>
      <mi>x</mi>
      <mo>-</mo>
      <mn>1</mn>
    </mrow>
    <mn>3</mn>
  </mfrac>
</math>

絶対値
( Absolute value )

<math style="margin-bottom: 16px">
  <mo>|</mo>
  <mrow>
    <mo>-</mo>
    <mi>a</mi>
  </mrow>
  <mo>|</mo>
</math>

連立方程式
( Simultaneous equations )

<math>
  <mo>{</mo>
  <mtable>
    <mtr>
      <mtd>
        <mn>2</mn>
        <mi>x</mi>
        <mo>-</mo>
        <mi>y</mi>
        <mo>=</mo>
        <mn>1</mn>
      </mtd>
    </mtr>
    <mtr>
      <mtd>
        <mi>x</mi>
        <mo>+</mo>
        <mn>2</mn>
        <mi>y</mi>
        <mo>=</mo>
        <mn>8</mn>
      </mtd>
    </mtr>
  </mtable>
</math>

関数f(x)
( Function )

<math>
  <mi>f</mi>
  <mo>⁡</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
</math>

累乗
( Power )

<math>
  <msup>
    <mi>x</mi>
    <mn>3</mn>
  </msup>
  <mo>+</mo>
  <msup>
    <mfenced>
      <mrow>
        <mi>x</mi>
        <mo>-</mo>
        <mn>1</mn>
      </mrow>
    </mfenced>
    <mn>2</mn>
  </msup>
</math>

対数
( Logarithm )

<math>
  <mi>y</mi>
  <mo>=</mo>
  <msub>
    <mi>log</mi>
    <mi>a</mi>
  </msub>
  <mi>x</mi>
</math>

平方根
( Square root )

<math>
  <msqrt>
    <mi>x</mi>
  </msqrt>
</math>

三角関数
( Trigonometric function )

<math>
  <mi>tan</mi>
  <mi>θ</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mi>sin</mi>
      <mi>θ</mi>
    </mrow>
    <mrow>
      <mi>cos</mi>
      <mi>θ</mi>
    </mrow>
  </mfrac>
</math>

ベクトル
( Vektor )

<math>
  <mover>
    <mi>v</mi>
    <mo>→</mo>
  </mover>
</math>

行列
( Matrix )

<math>
  <mfenced>
    <mtable>
      <mtr>
        <mtd>
          <mn>1</mn>
        </mtd>
        <mtd>
          <mn>2</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mn>-3</mn>
        </mtd>
        <mtd>
          <mn>4</mn>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
  <mfenced>
    <mtable>
      <mtr>
        <mtd>
          <mn>2</mn>
        </mtd>
        <mtd>
          <mn>2</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mn>0</mn>
        </mtd>
        <mtd>
          <mn>5</mn>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
  <mo>=</mo>
  <mfenced>
    <mtable>
      <mtr>
        <mtd>
          <mn>2</mn>
        </mtd>
        <mtd>
          <mn>12</mn>
        </mtd>
      </mtr>
      <mtr>
        <mtd>
          <mn>-6</mn>
        </mtd>
        <mtd>
          <mn>14</mn>
        </mtd>
      </mtr>
    </mtable>
  </mfenced>
</math>

総和(数列の和)
( Summation )

ギリシャ文字の Σ(シグマ) [ 総和 (Summation) の頭文字Sに相当する文字 ]を表すには ∑ を利用します。

<math>
  <munderover>
    <mi>∑</mi>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <msub>
    <mi>k</mi>
    <mi>i</mi>
  </msub>
</math>

総乗(数列の積)
( Infinite product )

ギリシャ文字の Π(パイ) [ 積 (Product) の頭文字Pに相当する文字 ]を表すには ∏ を利用します。

<math>
  <munderover>
    <mi>∏</mi>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <msub>
    <mi>k</mi>
    <mi>i</mi>
  </msub>
</math>

極限
( Limit )

<math>
  <munder>
    <mi>lim</mi>
    <mrow>
      <mi>n</mi>
      <mo>→</mo>
      <mi>∞</mi>
    </mrow>
  </munder>
  <mfrac>
    <mn>1</mn>
    <mi>n</mi>
  </mfrac>
  <mo>=</mo>
  <mn>0</mn>
</math>

微分
( Differential )

<math>
  <mfrac>
    <mrow>
      <mi>d</mi>
    </mrow>
    <mrow>
      <mi>d</mi>
      <mi>x</mi>
    </mrow>
  </mfrac>
  <msup>
    <mi>x</mi>
    <mn>3</mn>
  </msup>
  <mo>=</mo>
  <mn>3</mn>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
</math>

偏微分
( Partial differential )

<math>
  <mfrac>
    <mrow>
      <mo>∂</mo>
      <mi>f</mi>
      <mo>⁡</mo>
      <mfenced>
        <mrow>
          <mi>x, y</mi>
        </mrow>
      </mfenced>
    </mrow>
    <mrow>
      <mo>∂</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
  <mo>=</mo>
  <mn>2</mn>
  <mi>x</mi>
  <mo>+</mo>
  <mi>y</mi>
</math>

合成関数の微分
( Composite function )

<math>
  <mfrac>
    <mrow>
      <mo>d</mo>
      <mi>y</mi>
    </mrow>
    <mrow>
      <mo>d</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mo>d</mo>
      <mi>y</mi>
    </mrow>
    <mrow>
      <mo>d</mo>
      <mi>u</mi>
    </mrow>
  </mfrac>
  <mo>×</mo>
  <mfrac>
    <mrow>
      <mo>d</mo>
      <mi>u</mi>
    </mrow>
    <mrow>
      <mo>d</mo>
      <mi>x</mi>
    </mrow>
  </mfrac>
</math>

e.g.

積分
( Integral )

不定積分

<math>
  <msubsup>
    <mo>∫</mo>
  </msubsup>
  <mi>f</mi>
  <mo>⁡</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
  <mi>d</mi>
  <mi>x</mi>
</math>

定積分

<math>
  <msubsup>
    <mo>∫</mo>
    <mn>a</mn>
    <mi>b</mi>
  </msubsup>
  <mi>f</mi>
  <mo>⁡</mo>
  <mfenced>
    <mrow>
      <mi>x</mi>
    </mrow>
  </mfenced>
  <mi>d</mi>
  <mi>x</mi>
</math>

おまけ

ギリシャ文字なども、数式を書く上で必要です。

ギリシャ文字

大文字	小文字	name	名前	HTML
Α	α	alpha	アルファ	`Α` `α`
Β	β	beta	ベータ	`Β` `β`
Γ	γ	gamma	ガンマ	`Γ` `γ`
Δ	δ	delta	デルタ	`Δ` `δ`
Ε	ε	epsilon	イプシロン	`Ε` `ε`
Ζ	ζ	zeta	ゼータ	`Ζ` `ζ`
Η	η	eta	イータ	`Η` `η`
Θ	θ	theta	シータ	`Θ` `θ`
Ι	ι	iota	イオタ	`Ι` `ι`
Κ	κ	kappa	カッパ	`Κ` `κ`
Λ	λ	lambda	ラムダ	`Λ` `λ`
Μ	μ	mu	ミュー	`Μ` `μ`
Ν	ν	nu	ニュー	`Ν` `ν`
Ξ	ξ	xi	クサイ	`Ξ` `ξ`
Ο	ο	omicron	オミクロン	`Ο` `ο`
Π	π	pi	パイ	`Π` `π`
Ρ	ρ	rho	ロー	`Ρ` `ρ`
Σ	σ	sigma	シグマ	`Σ` `σ` `&sigmaf;`
Τ	τ	tau	タウ	`Τ` `τ`
Υ	υ	upsilon	ユプシロン	`Υ` `υ`
Φ	φ	phi	ファイ	`Φ` `φ`
Χ	χ	chi	カイ	`Χ` `χ`
Ψ	ψ	psi	プサイ	`Ψ` `ψ`
Ω	ω	omega	オメガ	`Ω` `ω`

主な記号

演算子	HTML	description	説明
ⅇ	`&ExponentialE;`	Natural number	ネイピア数、自然対数の底
ⅈ	`&ImaginaryI;`	Imaginary i	虚数
∞	`∞`	Infinity	無限

主な演算子

演算子	HTML	description	説明
≥	`≥`	Greater than or equal to	以上
>	`>`	Greater than	より大きい
≤	`≤`	Less than or equal to	以下
<	`<`	Less than	より小さい
≠	`≠`	Not equal to	等しくない
±	`&pm;`	Plus or minus
∈	`∈`	element of	属する
∉	`∉`	not an element of	属さない
⊂	`⊂`	subset of	部分集合
⊄	`⊄`	not a subset of
∩	`∩`	intersection	集合積
∪	`∪`	union	集合和