ウェブで数式を表示するためにAsciiMathを選んでみた

by

数式表示の課題：LaTeXの壁

ウェブページで数式を表示したいとき、多くの開発者がLaTeXという記法に出会います。LaTeXは確かに美しい数式を作れますが、学習コストが高いという問題があります。

例えば、単純な分数「1/2」を表示するだけでも \frac{1}{2} と書く必要があります。
平方根なら \sqrt{x^2 + y^2} です。

バックスラッシュや波括弧が頻繁に登場し、直感的とは言えません。スマートフォンでの入力を考えると、この問題はより深刻になります。特殊記号の入力は煩雑で、気軽に数式を書ける環境とは程遠い状況でした。

AsciiMathという解決策

この課題を解決するために生まれたのがAsciiMathです。2004年頃、アメリカの数学者Peter Jipsen氏1によって開発されました。

AsciiMathの基本思想は「読み方そのまま書く」です。数学を知っている人なら、プログラミングの知識がなくても直感的に数式を書けることを目指しています。

実際の記法を比較してみましょう。

平方根の場合

  • LaTeX: \sqrt{x^2 + y^2}
  • AsciiMath: sqrt(x^2 + y^2)

積分の場合

  • LaTeX: \int_0^1 x^2 dx
  • AsciiMath: int_0^1 x^2 dx

AsciiMathではバックスラッシュが不要で、英語の関数名をそのまま使います。これにより、記号の入力が困難なスマートフォンでも快適に数式を書けます。

AsciiMathの記法体系

AsciiMathの記法は3つの基本パターンに集約されます。

  • 上付き・下付き文字は ^ と _ を使います。x^2 で「x²」、x_1 で「x₁」を表現できます。
  • 関数は英語の関数名をそのまま記述します。sin(x) や log(x) といった具合です。数学に慣れ親しんだ人には自然な書き方と言えるでしょう。
  • 特殊記号は英語の略語で表現します。積分記号は int、シグマは sum、全称量詞は AA（All）、存在量詞は EE（Exists）となります。

論理演算も直感的です。論理積は ^^、論理和は vv で表現されます。記号の形状を文字で表現した巧妙な設計と言えます。

技術的な仕組み

AsciiMath.jsは、パーサーとレンダラーの2段階で動作します。

パーサー段階では、まず字句解析が行われます。入力文字列を意味のある単位（トークン）に分割する処理です。例えば x^2 + y は [x, ^, 2, +, y] というトークン列に変換されます。

次に構文解析が実行されます。トークン列をAST（抽象構文木）という木構造のデータに変換し、数学の演算子優先順位を正しく処理します。この仕組みは、プログラミング言語のコンパイラと同じ原理です。

レンダラー段階では、ASTからMathML2またはHTMLを生成します。MathMLは数学記号専用のマークアップ言語で、ブラウザが標準でサポートしています。FirefoxやSafariなどのMathML対応ブラウザでは高品質な数式表示が可能です。

MathMLに対応していないブラウザでは、自動的にHTMLフォールバックが実行されます。CSSスタイルを使って数式らしい見た目を再現する仕組みです。

他の選択肢との比較

数式表示ライブラリには、MathJax、KaTeXというLaTexベースの選択肢があります。

  • MathJaxは最も普及しているライブラリです。LaTeX記法をサポートし、高品質な出力を提供します。ただし、ライブラリサイズが大きく、初期化に時間がかかる3という欠点があります。LaTeX記法をサポートし、高品質な出力を提供します。ただし、ライブラリサイズが大きく、初期化に時間がかかるという欠点があります。
  • KaTeXは軽量で高速なライブラリです。MathJaxよりもレンダリング速度が速く、モダンなウェブアプリケーションに適しています。しかし、記法はLaTeXベースのため、学習コストの問題は残ります。

一方、AsciiMath.jsは約50KB4という軽量性と、依存関係のないPure JavaScriptという特徴を持ちます。リアルタイム変換が可能で、入力の即座のプレビューに適しています。

実装：正規表現ベースの置換エンジン

AsciiMath.jsの内部実装は、正規表現ベースの置換エンジンを使用しています。入力パターンと出力ルールのマッピングテーブルを定義し、順次変換を実行する仕組みです。

rules = [
  {input: "sqrt", output: "√", type: "function"},
  {input: "^", output: "sup", type: "operator"},
  {input: "int", output: "∫", type: "symbol"}
]
Code language: JavaScript (javascript)

この設計により、新しい記法の追加や既存ルールの修正が容易になっています。拡張性の高いアーキテクチャ5と言えるでしょう。

AsciiMathの制限と適用範囲

複雑な数式の解析では正規表現の限界も存在します。AsciiMathの簡潔さは利点ですが、同時に表現力の制限もあります。LaTeXでは記述可能でも、、AsciiMathでは困難な数式が存在することを理解しておく必要があります。

  • 複雑な多重積分は代表的な例です。
    LaTeXなら \iiint_V f(x,y,z) dx dy dz で三重積分を美しく表現できますが、AsciiMathには専用の記法がありません。
  • 場合分け関数も制限の一つです。
    LaTeXの \begin{cases} 環境のような構造化された記法はAsciiMathにはないため、複雑な条件分岐を含む関数の表現は困難になります。
  • 行列・行列式については、基本的な行列 [[a,b],[c,d]] はサポートされますが、行列式の縦線や複雑な配置オプションは限定的です。
  • 専門分野の特殊記号もAsciiMathの弱点です。
    位相数学、圏論、高度な統計学などで使用される記号は、多くがサポート対象外となります。
  • さらに、カスタムスペーシングや複雑な上下付き文字の組み合わせなど、LaTeXの細かい制御機能はAsciiMathでは再現できません。

つまり、AsciiMathは学部レベルの一般的な数学には十分対応できますが、専門的な研究論文レベルでは制限が顕在化します。用途に応じた選択が重要です。

結論

ウェブ上での数式表示において、AsciiMathは学習コストと表現力のバランスが優れた選択肢です。直感的な記法、軽量な実装、そして十分な機能性を兼ね備えています。特に、一般ユーザーが気軽に数式を入力できる環境を構築したい場合、AsciiMathの採用は合理的な判断と言えます。技術的な実装も比較的シンプルで、カスタマイズの余地も大きく残されています。

数式表示ライブラリの選択は、対象ユーザーと用途に応じて決定すべきですが、使いやすさを重視するならAsciiMathが最適解となるでしょう。

  1. Peter Jipsen氏はカリフォルニア州立大学サンベルナルディーノ校の数学・コンピュータサイエンス教授で、数理論理学とコンピュータ代数学の専門家です。 – Peter Jipsen – Academic Profile
  2. MathML（Mathematical Markup Language）は、W3Cが策定した数学記号専用のXMLベースのマークアップ言語です。数式の意味構造を正確に表現できるため、アクセシビリティやスクリーンリーダー対応にも優れています。 – MathML Specification – W3C
  3. MathJaxのフルバージョンは約1MBのサイズがあり、初期化に数秒かかる場合があります。これは大量の数式を含むページでのユーザー体験に影響を与える可能性があります。 – MathJax Performance Guide
  4. AsciiMath.jsの圧縮版ファイルサイズ。これはMathJaxの約1/20のサイズに相当し、モバイル環境での読み込み速度向上に大きく貢献します。 – AsciiMath.js GitHub Repository
  5. 正規表現ベースの設計は理解しやすく、開発者が独自の数学記法を追加することも比較的簡単です。ただし、複雑なネストした構造の解析では再帰下降パーサーなどのより高度な技術が必要になる場合があります。 – Compiler Design Principles