当サイトにおける数式レンダリングガイド

当サイトにおける数式レンダリングガイド

Technology
#MathJax#LaTeX#数式#技術解説

MathJaxを使用した数式の記述方法、パフォーマンス最適化、そして実践的なサンプル集

はじめに

当サイトでは、美しい数式表示を実現するためにMathJax 3を採用しています。この記事では、数式の記述方法、パフォーマンス最適化、そして実践的なサンプルをまとめています。

基本的な記述方法

MDX本文での記述

通常のMDX本文（コンポーネントの外）では、LaTeX記法をそのまま使用できます。

インライン数式: $...$で囲む

例: 円周率は です。

ディスプレイ数式: $$...$$で囲む

例:

コンポーネント内での記述

MathCalloutコンポーネント（Definition、Theorem、Axiom）内では、テンプレートリテラル形式を使用します。

TypeScript
<Def id="limit" category="解析学" title="極限">
関数 {`$f(x)$`} が {`$x \to a$`} のとき {`$L$`} に収束するとは、

{`$$\lim_{x \to a} f(x) = L$$`}

が成り立つことである。
</Def>

重要: コンポーネント内では {`$...$`} の形式で記述し、バックスラッシュを2つ (\\) にエスケープします。

技術的な詳細

レンダリング方式

当サイトでは2つのレンダリング方式を使い分けています：

場所方式特徴
MDX本文SSR（サーバーサイド）⚡ 超高速、初回から表示
コンポーネント内CSR（クライアントサイド）🚀 動的、MutationObserver最適化

パフォーマンス最適化

コンポーネント内の数式は、以下の技術で最適化されています：

  1. MutationObserver: DOM変更を自動検知
  2. Debounce処理: 50msの遅延で複数の変更を一括処理
  3. 重複レンダリング防止: 既存のMathJax要素をクリーンアップ

これにより、体感的にはSSRと同等の速度を実現しています。

実践的なサンプル集

基本的な数式

累乗と添字:

, , ,

分数:

, ,

平方根:

, ,

微積分

微分:

偏微分:

積分:

重積分:

線形代数

行列:

行列式:

固有値:

Note

MathJaxでは、ベクトルのボールド体表記に便利な \bf{} が使えないので \boldsymbol{} で代用する

ギリシャ文字

小文字： , , , , (), , , , , , , (),

大文字： 、、、、、、

集合と論理

集合演算:

, , , , ,

論理記号:

、、、、、、

集合の定義:

数論と代数

合同式:

総和と総乗:

二項係数:

複雑な数式

テイラー展開:

フーリエ変換:

波動方程式:

MathCalloutコンポーネントのデモ

定義（Definition）

定義

連続性

関数 $f(x)$ が点 $a$ で連続であるとは、以下の3つの条件を満たすことである：

  1. $f(a)$ が定義されている
  2. $\lim_{x \to a} f(x)$ が存在する
  3. $\lim_{x \to a} f(x) = f(a)$

より簡潔には、次のように表される：

$$\lim_{x \to a} f(x) = f(a)$$

定理（Theorem）

定理

ピタゴラスの定理

直角三角形において、斜辺の長さを $c$、他の2辺の長さを $a, b$ とすると、

$$a^2 + b^2 = c^2$$

が成り立つ。

公理（Axiom）

公理

完備性公理

空でない上に有界な実数の集合 $S \subset \mathbb{R}$ は、上限 $\sup S$ を持つ。

参照機能

[参照エラー: continuity]を使うことで、[参照エラー: pythagorean]や[参照エラー: completeness]を簡単に参照できます。

高度な数式例

確率論

正規分布:

ベイズの定理:

複素解析

定義

複素微分

複素関数 $f(z)$ が点 $z_0$ で微分可能であるとは、極限

$$f'(z_0) = \lim_{h \to 0} \frac{f(z_0 + h) - f(z_0)}{h}$$

が存在することである。ここで $h \in \mathbb{C}$ は任意の方向から $0$ に近づく。

定理

コーシー・リーマンの方程式

関数 $f(z) = u(x,y) + iv(x,y)$ が[参照エラー: complex-derivative]可能であるための必要十分条件は、$u$ と $v$ が以下のコーシー・リーマンの方程式を満たすことである：

$$\frac{\partial u}{\partial x} = \frac{\partial v}{\partial y}, \quad \frac{\partial u}{\partial y} = -\frac{\partial v}{\partial x}$$

特殊関数

ガンマ関数:

ベータ関数:

微分方程式

定義

1階常微分方程式

未知関数 $y(x)$ とその1階導関数 $y'(x)$ を含む方程式

$$F(x, y, y') = 0$$

を1階常微分方程式という。特に、$y' = f(x, y)$ の形に書ける場合を正規形という。

変数分離形の解法:

まとめ

当サイトの数式レンダリングシステムは：

  • ✅ 高速: SSRとCSRを適切に使い分け
  • ✅ 最適化: MutationObserver + Debounce処理
  • ✅ 柔軟: MDX本文でもコンポーネント内でも美しく表示
  • ✅ 機能的: 参照機能でコンテンツを相互リンク

記述方法のチートシート

場所インライン数式ディスプレイ数式エスケープ
MDX本文$f(x)$$$f(x)$$\lim
コンポーネント内{`$f(x)$`}{`$$f(x)$$`}\\lim

数式の記述に困ったら、この記事を参考にしてください！