M.Hiroi's Home Page

JavaScript Programming

お気楽 MathJax 超入門

[ Home | Light | JavaScript ]

CONTENTS

はじめに

MathJax は Web ブラウザ上で数式を表示するためのオープンソース (Apache License) な JavaScript ライブラリです。インストールは不要で、HTML ファイルの <head> ～ </head> の間に、以下のスクリプトを書くだけで使用することができます。 

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

MathJax は数式を LaTex, MathML, ASCIIMathML で記述することができますが、本ページでは LaTex 形式を使うことにします。

●簡単な使い方

数式は \\( ～ \\) の間に記述すると「インラインモード」で表示されます。たとえば、二次方程式 ax2 + bx + c = 0 を MathJax で記述すると次のようになります。 

リスト : インラインモード

二次方程式 \(ax^2 + bx + c = 0\) です。
二次方程式 \(ax^2 + bx + c = 0\) です。

英数字はそれ自身が表示されます。記号は MathJax のコマンドを使って表示します。コマンドは名前の先頭に '\' を付けます。 

\コマンド名{...}{...}...

コマンドに引数がある場合、{ と } の間に記述します。また、よく使う記号 (+, -, /, =, ^ などなど) は \ を付けずにそのまま使用することができます。たとえば、^ は指数を表示するコマンドです。引数が 1 文字であれば、{ } を省略することができますが、xn-1 のように書きたいときは x^{n-1} のように { } で囲ってください。

\( x^{n-1} \)

\[ ～ ]\ または \$\$～\$\$ の間に記述すると「ブロックモード」で表示されます。ブロックモードは数式をセンタリングします。たとえば、二次方程式の解の公式は次のようになります。 

リスト : ブロックモード

\[
x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}
\]
\[ x = \frac{-b\pm\sqrt{b^2-4ac}}{2a} \]

\frac は分数を表示するコマンドです。最初の引数が分子、二番目の引数が分母です。\pm は ± を表示するコマンドです。\mp は - が上で + が下になります。\sqrt は √ を表示するコマンドです。

このように、MathJax には数式を表示するためのコマンドが多数用意されていて、それらを組み合わせることで、数式を簡単に表示することができます。コマンドの詳細は MathJax のドキュメントや 参考 URL をお読みくださいませ。

●環境

LaTex の場合、文章のレイアウト (センタリング、引用、箇条書きなどなど) は「環境 (environment)」を使って指定します。環境はコマンド \\begin{env-name} ～ \\end{env-name} で範囲を指定します。引数 env-name は環境の名前です。すべてではありませんが、MathJax でも LaTex の環境を利用することができます。

簡単な例を示しましょう。MathJax の場合、次のように複数の数式を記述しても改行されることはありません。 

\[
  x + y = 100
  2x + 4y = 272
\]
\[ x + y = 100 2x + 4y = 272 \]

複数行の数式を記述する場合は eqnarray 環境を使うと簡単です。 

\begin{eqnarray}
  x + y = 100 \\
  2x + 4y = 272
\end{eqnarray}
\begin{eqnarray} x + y = 100 \\ 2x + 4y = 272 \end{eqnarray}

eqnarray 環境はブロックモードで数式を表示します。\\( ～\\) で囲むとインラインモードで表示されます。begin ～ end の中では、\\\\ で改行することができます。eqnarray は数式を右側に揃えますが、& を使って記号の位置を揃えることもできます。 

\(
  \begin{eqnarray}
    &x& + y = 100 \\
    &2x& + 4y = 272
  \end{eqnarray}
\)
\( \begin{eqnarray} &x& + y = 100 \\ &2x&+ 4y = 272 \end{eqnarray} \)

大きな数式や複数の数式をカッコで囲む場合は \left{c} ～ \right{c} を使います。カッコの種類は文字 c で指定します。 

\(
  \left\{
    \begin{eqnarray}
      &x& + y = 100 \\
      &2x&+ 4y = 272
    \end{eqnarray}
  \right.
\)
\( \left\{ \begin{eqnarray} &x& + y = 100 \\ &2x&+ 4y = 272 \end{eqnarray} \right. \)

{, } は MathJax の構文で使用するので、\ を付けてコマンドに渡してください。

また、array 環境を使っても複数の数式を記述することができます。array 環境は二次元配列 (表) を表示するために使用します。次の例を見てください。 

\(
  \begin{array}{l}
    x + y = 100 \\
    2x + 4y = 272
  \end{array}
\)
\( \begin{array}{l} x + y = 100 \\ 2x + 4y = 272 \end{array} \) 
\(
  \begin{array}{cc}
    a + b & a \times b \\
    a - b & a \div b
  \end{array}
\)
\( \begin{array}{cc} a + b & a \times b \\ a - b & a \div b \end{array} \)

array は引数に列の数を表す文字列を渡します。文字は c, l, r の 3 種類で、成分を中央、左寄せ、右寄せで表示します。成分は & で区切ることに注意してください。eqnarray と同様に \\\\ は改行を表します。array を使って行列を表示することもできますが、matrix 環境が用意されているので、そちらを使ったほうが簡単です。

数式の場合分けは cases 環境を使うと簡単です。たとえば、階乗の定義は次のように記述することができます。 

\(
x! = \begin{cases}
       1,               & if \ x = 0 \\
       x \times (x-1)!, & if \ x \gt 0
     \end{cases}
\)
\( x! = \begin{cases} 1, & if \ x = 0 \\ x \times (x-1)!, & if \ x \gt 0 \end{cases} \)

cases は数式を左に寄せて、左側に波カッコを表示します。使い方は eqnarray とほとんど同じで、& 以降に式を書くと、それらの式を揃えて表示します。\ の後ろに空白を書くと、そこに空白が挿入されます。比較演算子は次のコマンドで表示します。

もう一つ簡単な例として、フィボナッチ関数 fibo(n) の定義を示します。 

\(
fibo(n) =
  \begin{cases}
    0,                         & if \ n = 0 \\
    1,                         & if \ n = 1 \\
    fibo(n - 1) + fibo(n - 2), & if \ n \gt 1
  \end{cases}
\)
\( fibo(n) = \begin{cases} 0, & if \ n = 0 \\ 1, & if \ n = 1 \\ fibo(n - 1) + fibo(n - 2), & if \ n \gt 1 \end{cases} \)

この他にも MathJax には便利な環境が用意されています。詳細は MathJax のドキュメントをお読みください。

簡単な例題

●指数法則

\(a^m \times a^n = a^{m+n}\)
\(a^m \times a^n = a^{m+n}\) 
\(\dfrac{a^m}{a^n} = a^{m-n} \quad (a \neq 0)\)
\(\dfrac{a^m}{a^n} = a^{m-n} \quad (a \neq 0)\) 
\((a^m)^n = a^{mn}\)
\((a^m)^n = a^{mn}\) 
\(a^{\frac{p}{q}} = \sqrt[q]{a^p} = (\sqrt[q]{a})^p \quad (p と q は正の整数)\)
\(a^{\frac{p}{q}} = \sqrt[q]{a^p} = (\sqrt[q]{a})^p \quad (p と q は正の整数)\) 
\((ab)^n = a^n b^n\)
\((ab)^n = a^n b^n\)

●対数

\(\log_{a}(RS) = \log_{a}R + \log_{a}S\)
\(\log_{a}(RS) = \log_{a}R + \log_{a}S\) 
\(\log_{a}{\dfrac{R}{S}} = \log_{a}R - \log_{a}S\)
\(\log_{a}{\dfrac{R}{S}} = \log_{a}R - \log_{a}S\) 
\(\log_{a}{R^n} = n\log_{a}R\)
\(\log_{a}{R^n} = n\log_{a}R\) 
\(\dfrac{\log_{a}R}{\log_{a}S} = \log_{S}R\)
\(\dfrac{\log_{a}R}{\log_{a}S} = \log_{S}R\)

●複素数

\(
  \begin{eqnarray}
    (a + bi) + (c + di) &=& (a + c) + (b + d)i \\
    (a + bi) - (c + di) &=& (a - c) + (b - d)i \\
    (a + bi) * (c + di) &=& (ac - bd) + (bc + ad)i \\
    \dfrac{a + bi}{c + di} &=& \dfrac{ac + bd) + (bc - ad)i}{c^2 + d^2}
  \end{eqnarray}
\)
\( \begin{eqnarray} (a + bi) + (c + di) &=& (a + c) + (b + d)i \\ (a + bi) - (c + di) &=& (a - c) + (b - d)i \\ (a + bi) * (c + di) &=& (ac - bd) + (bc + ad)i \\ \dfrac{a + bi}{c + di} &=& \dfrac{ac + bd) + (bc - ad)i}{c^2 + d^2} \end{eqnarray} \) 
\(e^{i\theta} = \sin \theta + i\cos \theta\)
\(e^{i\theta} = \sin \theta + i\cos \theta\)

●合同式

\( a \equiv b \mod n\)
\( a \equiv b \mod n\) 
\( a \equiv b \pmod n\)
\( a \equiv b \pmod n\) 
\( \gcd (a, b) = \gcd (b, a \bmod b) \)
\( \gcd (a, b) = \gcd (b, a \bmod b) \) 
\( a^{p-1} \equiv 1 \pmod p \)
\( a^{p-1} \equiv 1 \pmod p \)

●順列と組み合わせ

\(
n! = n \times (n-1) \times (n-2) \times \cdots \times 3 \times 2 \times 1 = \prod_{k=1}^{n} k
\)
\(n! = n \times (n-1) \times (n-2) \times \cdots \times 3 \times 2 \times 1 = \prod_{k=1}^{n} k\) 
\(
n! = n \times (n-1) \times (n-2) \times \cdots \times 3 \times 2 \times 1 = \displaystyle \prod_{k=1}^{n} k
\)
\(n! = n \times (n-1) \times (n-2) \times \cdots \times 3 \times 2 \times 1 = \displaystyle \prod_{k=1}^{n} k\) 
\({}_n \mathrm{P}_k = \dfrac{n!}{(n-r)!}\)
\({}_n \mathrm{P}_k = \dfrac{n!}{(n-r)!}\) 
\({}_n \mathrm{C}_r = \dbinom{n}{r} = \dfrac{{}_n \mathrm{P}_r}{r!} = \dfrac{n!}{r!(n-r)!}\)
\({}_n \mathrm{C}_r = \dbinom{n}{r} = \dfrac{{}_n \mathrm{P}_r}{r!} = \dfrac{n!}{r!(n-r)!}\)

●等差数列

\(a, \ a + d, \ a + 2d, \ a + 3d, \ \cdots, \ a + (n - 1)d, \ \cdots\)
\(a, \ a + d, \ a + 2d, \ a + 3d, \ \cdots, \ a + (n - 1)d, \ \cdots\) 
\(a_n = a + (n-1)d\)
\(a_n = a + (n-1)d\) 
\(S_n = \sum_{i=1}^{n} a_i = \frac{n(2a + (n - 1)d)}{2}\)
\(S_n = \sum_{i=1}^{n} a_i = \frac{n(2a + (n - 1)d)}{2}\) 
\(S_n = \displaystyle \sum_{i=1}^{n} a_i = \dfrac{n(2a + (n - 1)d)}{2}\)
\(S_n = \displaystyle \sum_{i=1}^{n} a_i = \dfrac{n(2a + (n - 1)d)}{2}\)

●等比数列

\(a, \ ar, \ ar^2, \ \cdots, \ ar^{n-1}, \ \cdots\)
\(a, \ ar, \ ar^2, \ \cdots, \ ar^{n-1}, \ \cdots\) 
\(a_n = ar^{n-1}\)
\(a_n = ar^{n-1}\) 
\(S_n = \displaystyle \sum_{i=1}^{n} a_i = \dfrac{a(1 - r^n)}{1 - r}\)
\(S_n = \displaystyle \sum_{i=1}^{n} a_i = \dfrac{a(1 - r^n)}{1 - r}\)

●ベクトル

●行列

\(
  \begin{matrix}
    a & b \\
    c & d
  \end{matrix}
\)
\( \begin{matrix} a & b \\ c & d \end{matrix} \) 
\(
  \begin{pmatrix}
    a & b & c \\
    d & e & f
  \end{pmatrix}
\)
\( \begin{pmatrix} a & b & c \\ d & e & f \end{pmatrix} \) 
\(
  \begin{bmatrix}
    a & b & c \\
    d & e & f \\
    g & h & e
  \end{bmatrix}
\)
\( \begin{bmatrix} a & b & c \\ d & e & f \\ g & h & e \end{bmatrix} \) 
\(
  \begin{vmatrix}
    a & b & c \\
    d & e & f \\
    g & h & e
  \end{vmatrix}
\)
\( \begin{vmatrix} a & b & c \\ d & e & f \\ g & h & e \end{vmatrix} \) 
\(
  \begin{pmatrix}
    a_1 &           &        &           & \\
        & a_2       &        & \LARGE{0} & \\
        &           & \ddots &           & \\
        & \LARGE{0} &        & a_{n-1}   & \\
        &           &        &           & a_n
  \end{pmatrix}
\)
\( \begin{pmatrix} a_1 & & & & \\ & a_2 & & \LARGE{0} & \\ & & \ddots & & \\ & \LARGE{0} & & a_{n-1} & \\ & & & & a_n \end{pmatrix} \) 
\(
A = \begin{pmatrix}
      a & b & c \\
      d & e & f \\
      g & h & i
\end{pmatrix},  \ 
A^{\mathrm{T}} = \begin{pmatrix}
      a & d & g \\
      b & e & h \\
      c & f & i
\end{pmatrix}
\)
\( A = \begin{pmatrix} a & b & c \\ d & e & f \\ g & h & i \end{pmatrix}, \ A^{\mathrm{T}} = \begin{pmatrix} a & d & g \\ b & e & h \\ c & f & i \end{pmatrix} \) 
\(
A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \ 
A^{-1} = \dfrac{1}{ad - bc} \begin{pmatrix} d & -b \\ -c & a \end{pmatrix}
\)
\( A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \ A^{-1} = \dfrac{1}{ad - bc} \begin{pmatrix} d & -b \\ -c & a \end{pmatrix} \) 
\(
A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \ 
\det A = |A| = \begin{vmatrix} a & b \\ c & d \end{vmatrix} = ad - bc
\)
\( A = \begin{pmatrix} a & b \\ c & d \end{pmatrix}, \ \det A = |A| = \begin{vmatrix} a & b \\ c & d \end{vmatrix} = ad - bc \)

●三角関数と双曲線関数

\( 
\sin \theta, \ \cos \theta, \ \tan \theta, \ 
\arcsin x, \ \arccos x, \ \arctan x, \ 
\sinh x, \ \cosh x, \ \tanh x
\)
\( \sin \theta, \ \cos \theta, \ \tan \theta, \ \arcsin x, \ \arccos x, \ \arctan x, \ \sinh x, \ \cosh x, \ \tanh x \) 
\(
  \begin{array}{l}
    \sin^2 \theta + \cos^2 \theta = 1 \\
    \sin(\alpha \pm \beta) = \sin \alpha \cos \beta \pm \cos \alpha \sin \beta \\
    \cos(\alpha \pm \beta) = \cos \alpha \cos \beta \mp \sin \alpha \sin \beta \\
    \tan(\alpha \pm \beta) = \dfrac{\tan \alpha \pm \tan \beta}{1 \mp \tan \alpha \tan \beta}
  \end{array}
\)
\( \begin{array}{l} \sin^2 \theta + \cos^2 \theta = 1 \\ \sin(\alpha \pm \beta) = \sin \alpha \cos \beta \pm \cos \alpha \sin \beta \\ \cos(\alpha \pm \beta) = \cos \alpha \cos \beta \mp \sin \alpha \sin \beta \\ \tan(\alpha \pm \beta) = \dfrac{\tan \alpha \pm \tan \beta}{1 \mp \tan \alpha \tan \beta} \end{array} \)

●微積分

\(
f’(x) = \frac{df}{dx} = \lim_{\varDelta x \to 0} \frac{f(x+\varDelta x) - f(x)}{\varDelta x}
\)
\( f’(x) = \frac{df}{dx} = \lim_{\varDelta x \to 0} \frac{f(x+\varDelta x) - f(x)}{\varDelta x} \) 
\(
f’(x) = \dfrac{df}{dx} = \displaystyle \lim_{\varDelta x \to 0} \frac{f(x+\varDelta x) - f(x)}{\varDelta x}
\)
\( f’(x) = \dfrac{df}{dx} = \displaystyle \lim_{\varDelta x \to 0} \frac{f(x+\varDelta x) - f(x)}{\varDelta x} \) 
\( \int_{-\infty}^{\infty} e^{-x^{2}} dx = \sqrt{\pi} \)
\( \int_{-\infty}^{\infty} e^{-x^{2}} dx = \sqrt{\pi} \) 
\( \displaystyle \int_{-\infty}^{\infty} e^{-x^{2}} dx = \sqrt{\pi} \)
\( \displaystyle \int_{-\infty}^{\infty} e^{-x^{2}} dx = \sqrt{\pi} \)

●集合と論理

参考 URL

  1. MathJax | Beautiful math in all browsers., (本家)
  2. MathJax Documentation, (本家)
  3. とほほのMathJax入門, (杜甫々さん)
  4. MathJaxの使い方 (PDF), (野本隆宏さん)
  5. Easy Copy MathJax, (なかけんさん)
  6. MathJax - Wikipedia

『お気楽 MathJax 超入門』の著作権は筆者「広井誠 (Makoto Hiroi)」が保持します。無断使用や無断転載は禁止いたします。本ページで作成したプログラムはフリーソフトウェアとします。ご自由にお使いください。プログラムの改造や配布もご自由にどうぞ。その際は出典を明記してくださるようお願いいたします。

ただし、これらのプログラムは無保証であり、使用したことにより生じた損害について、作者「広井誠 (Makoto Hiroi)」は一切の責任を負いません。また、これらのプログラムを販売することで利益を得るといった商行為は禁止いたします。

Copyright (C) 2023 Makoto Hiroi
All rights reserved.
[ Home | Light | JavaScript ]