技術記事で計算式を読みやすく表示したいとき、よく登場するのがTeX、LaTeX、MathJaxです。名称が一緒に使われることも多いため、最初は役割の違いが分かりにくいかもしれません。
先に結論を示すと、TeX・LaTeX風の記法で書いた数式を、WordPressなどのWebページ上に表示するための仕組みがMathJaxです。
ただし、MathJaxはTeXやLaTeXそのものではありません。また、WordPressに数式を書いただけで必ず表示されるわけでもありません。この記事では、それぞれの役割と実際の記述方法、数式データを再利用するための保存方法を整理します。
MathJax-LaTeX 外部 wordpress.org This plugin enables MathJax (http://www.mathjax.org) functionality for WordPress (http://www.wordpress.org).TeX・LaTeX・MathJax・WordPressの役割
それぞれの役割は次のように分けられます。
| 要素 | 主な役割 |
|---|---|
| TeX | 文書や数式を組版するためのシステム、およびその記法の基礎 |
| LaTeX | TeXを使いやすくするための文書作成システム |
| TeX／LaTeX数式記法 | 分数、添字、ギリシャ文字などをテキストで表現する書き方 |
| MathJax | TeX／LaTeX風の数式記法をブラウザ上で数式として表示するJavaScriptライブラリ |
| WordPress | 記事本文や数式文字列を保存し、Webページとして配信するCMS |
| WordPressプラグイン等 | WordPress上でMathJaxを読み込み、数式を処理できるようにする手段 |
関係を簡略化すると、次のようになります。
TeX／LaTeX風の数式記法
→ WordPressに文字列として保存
→ MathJaxがブラウザ上で解釈
→ 読みやすい数式として表示したがって、「WordPressでTeXを扱うものがMathJax」という理解は概ね正しいですが、より正確には、WordPress内のTeX／LaTeX風数式記法をWebブラウザでレンダリングするものがMathJaxです。
MathJaxはLaTeX文書全体を処理するものではない
MathJaxは、LaTeXで作成された論文や文書全体を、そのままWebページへ変換するためのものではありません。主な対象は数式です。
LaTeXには、文書クラス、ページレイアウト、目次、参考文献など、文書全体を組版する機能があります。一方、MathJaxはWebページ内に記述された数式部分を検出し、ブラウザで見やすく表示します。
この違いは、次のように考えると分かりやすくなります。
- LaTeX：文書全体を作る仕組み
- MathJax：Webページ内の数式を表示する仕組み
なお、MathJaxが対応するのはTeX／LaTeXの全機能ではなく、主として数式に関係する記法です。
WordPressでの基本的な数式の書き方
インライン数式
文章の途中に数式を入れる場合は、一般に \(...\) で囲みます。
流量は \( Q = Av \) で求められます。この記述をMathJaxが処理すると、文章中に \( Q = Av \) が表示されます。
独立した数式
数式を本文とは別の行に大きく表示する場合は、一般に \[...\] で囲みます。
\[
\Delta p = \lambda \frac{L}{D}\frac{\rho v^2}{2}
\]これは、配管の圧力損失を表すダルシー・ワイスバッハの式です。
\[ \Delta p = \lambda \frac{L}{D}\frac{\rho v^2}{2} \]
よく使う数式記法
| 表したいもの | TeX記法 | 使用例 |
|---|---|---|
| 分数 | \frac{a}{b} | \frac{Q}{A} |
| 上付き文字 | x^2 | v^2 |
| 下付き文字 | x_1 | p_1 |
| 複数文字の添字 | x_{out} | p_{out} |
| 平方根 | \sqrt{x} | \sqrt{2gh} |
| ギリシャ文字 | \rho、\lambda | 密度、管摩擦係数 |
| 掛け算記号 | \times | 2 \times 3 |
| 単位付き数値 | 100\,\mathrm{mm} | 数値と単位の間に適度な空白を入れる |
工学数式の記述例
流量・断面積・流速
\[ Q = Av \]
ここで、
- \(Q\)：体積流量
- \(A\)：流路断面積
- \(v\)：平均流速
です。
油圧シリンダの推力
\[ F = pA \]
ここで、
- \(F\)：推力
- \(p\)：圧力
- \(A\)：受圧面積
です。実機では摩擦、背圧、機械効率なども考慮する必要があるため、これは理想的な基本式です。
円形配管内の平均流速
\[ v = \frac{Q}{A} = \frac{4Q}{\pi D^2} \]
ここで、\(D\) は配管内径です。計算時には、流量と内径の単位を整合させる必要があります。
WordPressでMathJaxを使うために必要なもの
WordPressの記事内にTeX記法を書くだけでは、通常は数式として表示されません。WordPress側でMathJaxを読み込む必要があります。
主な方法は次のとおりです。
- MathJax対応のWordPressプラグインを利用する
- テーマや子テーマでMathJaxのスクリプトを読み込む
- 独自プラグインやサイト共通コードとして設定する
導入方法によって、利用できる区切り記号や設定が異なる場合があります。たとえば、独立数式に \[...\] を使う構成もあれば、$$...$$ を使える構成もあります。
記事を大量に作る前に、次の最小テストを行うのが安全です。
インライン数式：\( Q = Av \)
独立数式：
\[
Q = Av
\]公開画面だけでなく、スマートフォン表示、記事編集後の再保存、キャッシュ適用後の表示も確認します。
示表現であり、そのままでは安全で確実な計算ロジックにならないためです。
有名な数式をMathJaxで表示する例
ここでは、よく知られている5つの数式を使って、TeX記法の入力方法とMathJaxによる表示例を紹介します。「記入例」にはWordPressへ入力するコードを、「表示例」にはMathJaxで変換される数式を示します。
三平方の定理
直角三角形の斜辺とほかの2辺の関係を表す式です。上付き文字は、記号の後ろに ^ を付けて記述します。
記入例
\[
a^2 + b^2 = c^2
\]表示例
\[ a^2 + b^2 = c^2 \]
二次方程式の解の公式
二次方程式の解を求める公式です。分数は \frac{分子}{分母}、平方根は \sqrt{} で記述します。
記入例
\[
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
\]表示例
\[ x = \frac{-b \pm \sqrt{b^2 – 4ac}}{2a} \]
オイラーの等式
指数関数、虚数単位、円周率を結び付ける有名な等式です。円周率は \pi、指数部分に複数の文字を入れる場合は波括弧で囲みます。
記入例
\[
e^{i\pi} + 1 = 0
\]表示例
\[ e^{i\pi} + 1 = 0 \]
ガウス積分
正規分布などに関係する積分公式です。積分記号は \int、無限大は \infty で記述します。積分範囲は下付き文字と上付き文字で指定します。
記入例
\[
\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
\]表示例
\[ \int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi} \]
質量とエネルギーの等価性
アインシュタインの特殊相対性理論で知られる式です。質量とエネルギーが等価であることを表しています。
記入例
\[
E = mc^2
\]表示例
\[ E = mc^2 \]
このように、TeX記法を使うと、分数、平方根、指数、積分、ギリシャ文字などをテキストとして記述できます。WordPress側でMathJaxが読み込まれていれば、これらのコードがブラウザ上で整った数式として表示されます。
MathJaxとKaTeXの違い
WebでTeX数式を表示する方法には、MathJaxのほかにKaTeXもあります。
| 項目 | MathJax | KaTeX |
|---|---|---|
| 特徴 | 対応範囲と柔軟性を重視 | 高速な表示を重視 |
| 向いている用途 | 複雑な技術・学術数式、幅広い記法 | 高速表示が重要なWebアプリや記事 |
| WordPressでの利用 | プラグインやスクリプト読込み | 対応プラグインや独自実装 |
どちらを使う場合も、元データをTeX文字列として分離しておけば、表示ライブラリを変更しやすくなります。
まとめ
WordPressとTeX数式の関係は、次のように整理できます。
- TeX／LaTeX数式記法は、数式をテキストで表現する書き方
- MathJaxは、その数式記法をWebブラウザ上で表示する仕組み
- WordPressは、記事本文と数式文字列を保存・配信する場所
- WordPress側では、プラグインなどによってMathJaxを読み込む必要がある
- MathJaxはLaTeX文書全体ではなく、主に数式部分を処理する
- 再利用を考えるなら、TeX数式、変数、単位、前提条件、計算コードを分離する
実務的には、Markdownで解説本文を管理し、TeX文字列で数式を保持し、WordPressではMathJaxを表示層として使う構成が扱いやすい方法です。この役割分担を守れば、WordPress記事だけでなく、設計計算、データベース、Webツール、AI検索などへ同じ知識を展開できます。
MathJax-LaTeXプラグインの公式ページはこちらです。
WordPress管理画面で検索するときは、
MathJax-LaTeX
作者名は、
knowledgeblog
を確認してください。
プラグイン公式ページの説明でも、今回使用している次の記法に対応しています。
\( E = mc^2 \)
$$ E = mc^2 $$
ただし、\(...\)などのネイティブMathJax記法だけを使う記事では、記事内に次を追加してMathJaxを明示的に読み込ませる仕様です。
[mathjax]
