自然科学や技術系の HTML ドキュメントを記述する場合，数式の表示が問題でした．これまで，私は数式を別に LaTeX で作成し，画像情報 (png, svg) に変換し，それを HTML ドキュメントに埋め込んでいました．自動化しても，とても面倒な作業です．MathJax はこれを解決します．HTML ドキュメント内の LaTeX 表現の数式が，LaTeX でのコンパイルと同じようにブラウザで表示されます．

ウィキペディアでは，「MathJax はMathML、LaTeX、ASCIIMathML（英語版）で記述された数式をウェブブラウザ上で表示するクロスブラウザ（英語版）のJavaScriptライブラリである」と書かれています．詳しいことは分かりませんが，TeXの数式を JavaScript ライブラリーを使って表示するようです．数式が多い web ページには大変便利です．これまで，私はTeXで数式を作り，pngやsvgに変換して表示していました．結構な手間です．MathJaxを使うとその手間が省けます．ブラウザで表示する数式の仕上がりもきれいで，満足できます．

日本語の説明は，東北大学の黒木玄先生の「MathJaxの使い方」が大変詳しいです．このページもこの黒木先生のページを参考にして作成しています．MathJaxのホームページには，詳細な説明があります．

[注意] これまで使われていた MathJax CDN 2017年4月30日にシャットダウンするようです．ただし，これへの対応は簡単です．HTML ファイルの <head> — </head> を書き換えるだけです．詳細は，MathJax の WEB サイトの Alternative CDN providers を確認ください．

まず使ってみよう

ここは，これから始める人や初心者向けの説明です．ほとんどの人は，ここの例をコピー/ペーストするだけで，十分です．御託を並べるよりも，まず使ってみましょう．ここの HTML ソースをコピー/ペーストするだけで，MathJax を使うことができます．

最もシンプル

最も簡単な例は，以下のとおりです．

MathJax を使った最も簡単な HTML コード

001   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
002   <html lang="ja">
003     
004     <head>
005       <script type="text/javascript" async 
006           src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
007       </script>
008     </head>
009        
010     <body>
011       <p>フーリエ変換は次のように定義されます．</p>
012   
013       \begin{align}
014       F(\omega) = \cfrac{1}{\sqrt{2\pi}}\int_{-\infty}^{+\infty}f(t)e^{i\omega t}dt
015       \end{align}
016   
017     </body>
018   </html>

HTML文書のタグ <head> 内の 005 – 007行目で MathJax を読み込みます．そして本文中で，LaTeX の数式コマンドを記述します．の HTML ドキュメントは，ブラウザで以下のように表示されます．

簡単でしょう．たった3行 (リスト1の 005 – 007 行) を追加することで，HTML 文書で LaTeX の数式コマンドが使えます．

実用に耐える

先の簡単な例でもかなり使えます．さらに，数式番号が使えるとぐっと実用的になります．

数式番号を使った HTML コード

001   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
002   <html lang="ja">
003     
004     <head>
005       <script type="text/x-mathjax-config">
006          MathJax.Hub.Config({TeX:{equationNumbers:{autoNumber:"AMS"}}});
007       </script>
008       <script type="text/javascript" async 
009           src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML,/www_func/MathJax/MyConfig.js">
010       </script>
011     </head>
012        
013     <body>
014       <p>\eqref{sin}は正弦関数，\eqref{cos}は余弦関数の定義です．</p>
015   
016       \begin{align}
017       \sin x = x-\frac{x^3}{3!}+\frac{x^5}{5!}+\cdots \label{sin} \\
018       \cos x = 1-\frac{x^2}{2!}+\frac{x^4}{4!}+\cdots \label{cos}
019       \end{align}
020     </body>
021   </html>

先な例 (リスト1) との違いは，005 – 007 行目です．これを付け加えるだけで，式番号が使えます．

式番号を呼び出すコマンドは「\eqref(ラベル)」です．

設定

ここからは，中級者向けの説明です．もう少し本格的に使うためには，ある程度の設定が必要です．

MathJax の JavaScript の設定

MathJax の JavaScript は，WEB サイトのリモートファイルを使う方法と，それをダウンロードしローカルファイルとして使う方法があります．詳細はドキュメント「MathJax Documentation」を参照ください．

リモートファイル

WEB サイトのサーバー「cdnjs.cloudflare.com」にある MathJax を使う方法で，これは設定がとても簡単です．HTML ファイルの <head> – </head> に以下を記述するだけです．

<script type="text/javascript" async
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

これは，web プラットフォームの設定を読み込んでいるようです．問題なく読み込まれると，HTML 文書で$\LaTeX$のコマンドを使った数式の表示が可能になります．

ローカルファイル

自分のサーバーに MathJax のファイルを保管することで，「cdnjs.cloudflare.com」が変わってしまった場合でも安心です．少し設定が面倒ですが，私はローカルファイルを使っています．設定方法は，以下のとおりです．

MathJax のサイト「Obtaining MathJax via an archive」から，最新バージョン「Current Version: MathJax-2.7 (33.0MB)」(2017/5/20)をダウンロードします．
ダウンロードしたファイルを解凍します．
```
$ unzip MathJax-2.7.1.zip
```
解凍作業により出来上がったディレクトリー「MathJax-2.7.1」をサーバーの適当な場所に，保管します．
ディレクトリーのパーミッションを変更します．ディレクトリーは「755」に，ファイルは「644」に．
```
$ find MathJax-2.7.1 -type d -exec chmod 755 '{}' \;
$ find MathJax-2.7.1 -type f -exec chmod 644 '{}' \;
```

以上で，サーバー側の設定は完了です．

このローカルファイルを HTMLドキュメントに反映させるためには，<head> — </head>に，以下を記述します．

<script type="text/javascript"
   src="パス/MathJax-2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

パスは，サーバーの環境に合わせてください．

筆者流の設定

先に示した簡単な設定だと不便なことがあります．そこで，筆者は <head> – </head> に以下を記述します．最初の <script> で数式番号の自動割り付けの指定，二番目でローカルファイルと設定ファイル (local.js) を読み込みます．

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({ TeX: { equationNumbers: { autoNumber: "AMS" } }});
</script>
<script type="text/javascript" 
    src="相対パス/js/MathJax-2.7.1/MathJax.js?config=TeX-MML-AM_CHTML,local/local">
</script>

この場合，設定ファイルのパスは「パス/js/MathJax-2.7.1/config/local/local.js」です．

このユーザー設定ファイル (local.js) はインストール時に同時に保管させる「local.js」を修正し，作成します．筆者の場合は，以下のようにしました．こうすることにより，どのページからでも同じマクロを使うことができて，便利です．

筆者の MathJax の設定ファイル(local.js)

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
  var TEX = MathJax.InputJax.TeX;

  TEX.Macro("unit","{\\,[\\mathrm{#1}]\\,}", 1);
  TEX.Macro("diff","{\\mathrm{d}}");
  TEX.Macro("vm","{\\boldsymbol{#1}}", 1);
  TEX.Macro("grad","{\\nabla #1}", 1);
  TEX.Macro("div","{\\nabla\\cdot #1}", 1);
  TEX.Macro("rot","{\\nabla\\times #1}", 1);
  TEX.Macro("pdiffA","{\\frac{\\partial #1}{\\partial #2}}", 2);
  TEX.Macro("pdiffB","{\\frac{\\partial^{#1} #2}{\\partial #3^{#1}}}", 3);
  TEX.Macro("ddiffA","{\\frac{\\diff #1}{\\diff #2}}", 2);
  TEX.Macro("ddiffB","{\\frac{\\diff^{#1} #2}{\\diff #3^{#1}}}", 3);
});

MathJax.Hub.Config({
    tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
    },
    TeX: { extensions: ["[Contrib]/siunitx/unpacked/siunitx.js"] }
});

MathJax.Ajax.loadComplete("[MathJax]/config/local/local.js");

マクロの書き方は非常に簡単です．$\LaTeX$のコマンド「\newcommad」とそっくりです．ただ，引数をともなう場合は，その個数が必要です．また，バックスラッシュ(or 円マーク)を使う場合はエスケープする必要があり，二つ重ねます．

使い方

インラインの数式

$ と $ で数式を囲んむと，インライン表示できます．

入力

有名なオイラーの公式は，\(e^{i\theta}=\cos\theta+i\sin\theta\) です．

出力

有名なオイラーの公式は，$e^{i\theta}=\cos\theta+i\sin\theta$です．

別行立ての数式

別行立ての数式も可能です．\begin{align} 数式 \end{align} が使えます．式番号が不要なときには，\begin{align*} 数式 \end{align*}とします．これらは大変便利です．

入力

二階の反対称テンソル
\begin{align*}
  f_{\mu\lambda}=
  \begin{bmatrix}
     0    &  cB_z & -cB_y & -iE_x \\
    -cB_z &  0    &  cB_x & -iE_y \\
     cB_y & -cB_x &  0    & -iE_z \\
     iE_x &  iE_y &  iE_z &  0
  \end{bmatrix}
\end{align*}
になる．

出力

二階の反対称テンソル \begin{align*} f_{\mu\lambda}= \begin{bmatrix} 0 & cB_z & -cB_y & -iE_x \\ -cB_z & 0 & cB_x & -iE_y \\ cB_y & -cB_x & 0 & -iE_z \\ iE_x & iE_y & iE_z & 0 \end{bmatrix} \end{align*} になる．

数式番号とその参照

手入力

\tag{式番号} で式番号が手入力できます．式には \label{ラベル名} でラベルを付けることができ，\eqref{ラベル名} で参照可能です．

入力

ガウスの発散定理は，
  \begin{align}
    \int_V \nabla\cdot AdV=\int_S A\cdot n dS
    \tag{1}
    \label{eq:gauss}
  \end{align}
です．式\eqref{eq:gauss}は，微分の体積分はものの関数の面積分になる，と言っています．

出力

ガウスの発散定理は， \begin{align} \int_V \nabla\cdot AdV=\int_S A\cdot n dS \tag{1} \label{eq:gauss} \end{align} です．式\eqref{eq:gauss}は，微分の体積分はものの関数の面積分になる，と言っています．

自動割り付け

HTML ファイルの <head> と </head> の間に以下を入れると，数式番号は自動的に割り付けられます．これもまた，式には\label{ラベル名} でラベルを付けることができ，\eqref{ラベル名} で参照可能です．

数式番号の自動割り付けのためには，htmlのヘッダー部に以下を記述

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "AMS" } }
});
</script>

ヘッダー部の設定を行うと，\begin{align} 数式 \end{align} のような別行立ての数式に，式番号が割り付けられます．

入力

式\eqref{eq:Cauchy-Riemann}はコーシー・リーマンの関係式です．
\begin{align}
  &\frac{\partial u}{\partial x}=\frac{\partial v}{\partial y}&
  &\frac{\partial u}{\partial y}=-\frac{\partial v}{\partial x}&
  \label{eq:Cauchy-Riemann}
\end{align}
そして，式\eqref{eq:Cauchy-int}はコーシーの積分公式です．
\begin{align}
  \oint_C \frac{f(z)}{z-z_0}=2\pi i f(z_0)
  \label{eq:Cauchy-int}\end{align}
\end{align}

出力

式\eqref{eq:Cauchy-Riemann}はコーシー・リーマンの関係式です． \begin{align} &\frac{\partial u}{\partial x}=\frac{\partial v}{\partial y}& &\frac{\partial u}{\partial y}=-\frac{\partial v}{\partial x}& \label{eq:Cauchy-Riemann} \end{align} そして，式\eqref{eq:Cauchy-int}はコーシーの積分公式です． \begin{align} \oint_C \frac{f(z)}{z-z_0}=2\pi i f(z_0) \label{eq:Cauchy-int} \end{align}

式番号が不要なときは，\begin{align*} 数式 \end{align*} のように，アスタリスクを付けます．あるいは，\nonumber を使います．$\LaTeX$と同じです．

マクロ

設定ファイルにマクロの定義を書くと，マクロを使うことができます．LaTeX の \newcommand のようなことができます．ただし，\if — \else は使えないようです．マクロに関しては，オンラインドキュメントの Defining TeX macros に詳しい説明が有ります．

マクロを使うと複雑な式も簡単に記述できます．以下にその例を示します．

入力

マクスウェルの方程式は次の4組の微分方程式，
\begin{align*}
  &\div{\vm{D}}=\rho\\
  &\rot{\vm{E}}=-\pdiffA{\vm{B}}{t}\\
  &\div{\vm{B}}=0\\
  &\rot{\vm{H}}=j+\pdiffA{\vm{D}}{t}
\end{align*}
のことです．

出力

マクスウェルの方程式は次の4組の微分方程式， \begin{align*} &\div{\vm{D}}=\rho\\ &\rot{\vm{E}}=-\pdiffA{\vm{B}}{t}\\ &\div{\vm{B}}=0\\ &\rot{\vm{H}}=j+\pdiffA{\vm{D}}{t} \end{align*} のことです．

ページ作成情報

参考資料

東北大学の黒木玄先生の「MathJaxの使い方」は大変参考になります．
MathJaxのホームページには，ささざまな情報があります．

更新履歴

2013年08月15日	ページの新規作成
2016年04月09日	更新内容の説明
2017年05月20日	「2 まず使ってみよう」の記述．「MathJax CDN」シャットダウンに伴い，関連の記述の修正．

WEB数式 MathJax

目次

はじめに