はじめに
従来、学校の教科書や、生徒・児童が授業中にメモするノートはすべて紙に印刷されていたり、ペンで自筆していました。
ところが近年では学校現場でのデジタル化が進み、教科書やノートもPCやタブレットにインストールされているブラウザを用いてWebアプリケーションを利用することが増えてきています。
WebアプリケーションはHTMLやJavaScriptを用いて作成されますが、算数や数学・理科で利用されるような「数式」を表示するためにはどうすればよいのでしょうか。
この記事では、「数式」をWebアプリケーションで表示するために必要な知識をいくつか紹介します。
数式を表示する難しさ
1+1=2のようなシンプルな数式であれば、単なる文字列として表現することは可能です。
一方、「二次方程式の解の公式」のような、分数や根号、累乗などが使われた複雑な数式はどうでしょうか。
分数は、分子・分母が上下に分かれており、その間に直線が引かれています。
根号は、「√」が一番左にある上で、その中の数式全体を覆うように直線が上部に引かれます。
累乗は、底の右上に少し小さなサイズで指数が表示されます。
これらを単なる文字列として表現するためには、CSSやJavaScriptを駆使してスタイルを調整する必要があります。
数式で利用される数学記号は他にも連立方程式や絶対値など多岐にわたり、そのすべてに対応するのはとても難易度が高いです。
数式は、特殊なフォントで表現されることが多いです。
二次方程式の解の公式の例で見ても、変数である「x」が通常のフォントとは異なっていることがわかります。
Webで利用できる数式フォントはフリーで配布されているものを探したり、自分でデザインして作成したりしなければならず、そういった面でも非常に大変です。
数式をブラウザで表示する
数式はHTML5で標準化されているMathMLを用いて表示することができます。
二次方程式の解の公式を例にとると、以下のような記述となります。
MDNのMathMLのチュートリアルで紹介されている、「Latin Modern Math」というWebフォントも使ってみましょう。
これをブラウザで表示したものが以下です。
（Google Chromeのスクリーンショット画像）
数式をブラウザで表示することができました。
他にも、連立方程式や絶対値、三角関数の表現なども可能です。
（Google Chromeのスクリーンショット画像）
数式のデータフォーマット
これまではどのように数式をブラウザで表示するか、ということについて説明してきました。
ここからは、数式の「データ」について、一般的によく用いられているフォーマットをご紹介します。
数学や科学などの学術論文においてよく使われる文書生成ツールのひとつにLaTeXというシステムがあります。
LaTeXは「ラテフ」や「ラテック」などと呼ばれることが多いです。
このシステムではテキストベースで様々な表現が可能で、数式を表現することも可能です。
LaTeXの数式表現は先ほどのMathMLよりも人間が理解しやすいフォーマットであり、小さいデータサイズで数式を表すことができます。 また、一部の他のアプリケーションでも利用可能な数式表現となっています。
二次方程式の解の公式を表すと、このようになります。
LaTeXの数式表現では、分数や根号、累乗などを決まったフォーマットで表します。
他にもベクトルや行列、連立方程式など複雑な数式を表すフォーマットも用意されているほか、文字色・太字などのスタイルや数式内の改行なども表すことができます。
このように、幅広い数式をシンプルな文字列として記述することができるため、Webアプリケーションが数式を保持する内部形式として利用するのも便利です。
さいごに
ブラウザで数式を表示する方法と、数式のデータフォーマットについてご紹介しました。
LaTeXの数式表現からMathMLを出力できるサードパーティー製のツールなども存在しているので、比較的容易に数式をWebアプリケーションで表示できるのではないでしょうか。
2025年9月にはSKYMENU Cloudの発表ノート上で数式を入力・保存・共有できる機能をリリースいたしました。
記事冒頭で掲載した二次方程式の解の公式の画像は、発表ノートを用いて作成しております。
発表ノートでは、他にもいろいろな使い方ができますので、ぜひご活用ください。
