WEB上できれいな数式を書きたい！【mathjax】

2022/03/13

2022/03/26

mathjax, 数学

ひょんなことから、WEB上で数式が書きたくなりました。

というのも、簡単なグラフを描いてくれるツールをWEB上で作ってみようと思っていた所、数式がないと伝わりづらいということで、試してみることにしました。

普段使うことがなかったとしても、例えば学習系のサイトを作成したりする時などに利用することがあるかもしれません。

早速見てみましょう

y = a x + b

この表示、実際にmathjaxを使用して表示してみました。実際の中身を見てみると、こんな記述になっています。

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <mi>y</mi>
    <mo>=</mo>
    <mi>a</mi>
    <mi>x</mi>
    <mo>+</mo>
    <mi>b</mi>
</math>

1〜2行目は、必要なjsをCDNから読み込んでいます。下記リンクから、必要に応じて最新バージョンをご利用ください。(https://www.mathjax.org/#gettingstarted)

mathタグに囲まれた部分が、数式表示の本体です。MathMLタグを用いて表記しています。

(MathMLタグについて詳しく知りたい方はこちら。https://www.w3.org/TR/MathML3/)

簡単にMathMLタグの説明

mi	識別子	変数や関数名など任意のテキストに使用
mn	数値	数値に使用
mo	演算子	演算子、括弧、区切り文字、またはアクセントに使用
mfrac	分数	分数に使用
mfenced	括弧	括弧を含む表現に使用
msup	上付き文字	べき乗の表現に使用

よく使うであろうMathMLタグ

とはいえ、具体例を見ないと分からないと思うので、上記のタグを使用したサンプルを書いてみたいと思います。

数式を書いてみる

2次方程式

y = a x^{2} + b

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>y</mi>
  <mo>=</mo>
  <mi>a</mi>
  <msup>
    <mi>x</mi>
    <mn>2</mn>
  </msup>
  <mo>+</mo>
  <mi>b</mi>
</math>

2次方程式の解の公式

なつかしい・・・

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mo>−</mo>
      <mi>b</mi>
      <mo>±</mo>
      <msqrt>
        <msup>
          <mi>b</mi>
          <mn>2</mn>
        </msup>
        <mo>−</mo>
        <mn>4</mn>
        <mi>a</mi>
        <mi>c</mi>
      </msqrt>
    </mrow>
    <mrow>
      <mn>2</mn>
      <mi>a</mi>
    </mrow>
  </mfrac>
</math>

グループ化したい時は、mrowタグを使えば良いようです。ちゃっかりルートも使ってしまいました。

三角関数の微分

{(\tan θ)}^{'} = \frac{1}{\cos^{2} θ}

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <msup>
    <mrow>
      <mo>(</mo>
      <mi>tan</mi>
      <mi>θ</mi>
      <mo>)</mo>
    </mrow>
    <mi>′</mi>
  </msup>
  <mo>=</mo>
  <mfrac>
    <mrow>
      <mn>1</mn>
    </mrow>
    <mrow>
      <msup>
        <mi>cos</mi>
        <mn>2</mn>
      </msup>
      <mi>θ</mi>
    </mrow>
  </mfrac>
</math>

まとめ

少しタグを覚えないといけませんが、かなり簡単に記述ができました。数式を表示したいなんていう仕事の依頼が来るかもしれませんので、頭の片隅にでも置いておいて損はないかと思います。

ちなみに、MathMLタグは他にもあり、さらに複雑な数式の表現も可能となっています。本ページではmsup(上付き文字)しか扱いませんでしたが下付き文字も可能ですし、Σなんかも書けちゃいます。

\sum_{i = 1}^{N}

みなさまのお役に少しでもたてれば幸いです。それでは。

supilog

すぴろぐ