MathJaxを使ってWordpressに数式をキレイに書きたい！

株式会社ココロファン - エンジニアリング事業部所属のlindatechです。
みなさんも自分のWordpressで運用しているブログに数式を書きたいときありますよね！

Qiitaでは最初からMathJaxというライブラリが使えるようになっていますが、
自分のWordPressを使ったサイト内できれいな数式を書きたいときは、プラグインが必要です。

きれいな数式を表示するには定番の方法があります、それが研究者ならおなじみLaTeXです。
LaTeXをWebで使えるように作られたオープンソースライブラリがMathJaxです。

そもそもLaTeXとは…「テキストベースの組版処理システム」ということですが、
数式をきれいに表示させるための、原始的な組版ソフトウェアと考えて良いと思います。

一説に拠れば理工系の学生なら一度は使うとされていますが、
理工系の学生であってもWordで書いている人のほうが多いような気がします。

余談はそのくらいにしておいて、このLaTeXは記法が独特なので、
癖があるように感じますが本当にきれいに書けるのでイメージ通りに仕上がると嬉しいです。


## Wordpressに数式をキレイに書くおすすめプラグイン
ブログで使われることの多いWordpressで数式をキレイに書くということなのでプラグインを使います。

「Mathjax-Latex」もしくは「Simple Mathjax」というプラグインを追加してください。
どちらも使ってみましたが基本的には英数字で数式を書くのであればどちらでもOKです。

日本語を数式で使うのであれば「Simple Mathjax」のほうがきれいに書けます。

https://pianobeam.com/wordpress-latex-plugin/#toc7

はい、というところでWordpressに数式をきれいに書く方法は解決するのですが、
慣れるまでは基本的なところで躓いてしまうので、以下かんたんに基本の書き方をご紹介します。


## 基本的な記法
### ディスプレイスタイル
文章中に数式を書くとき、例えば下のように中央に数式を一行書きたいときは「ディスプレイスタイル」を使います。
``$$``数式ほにゃらら``$$``と記載すると以下のように表示されます。

$$　v=(v_i)_{{i\in{I}}} \in V = \times _{{i\in{I}}}V_i　$$

どのように入力しているのかと言うと、以下のようになります。

~~~
$$　v=(v_i)_{{i\in{I}}} \in V = \times _{{i\in{I}}}V_i　$$
~~~

難しそうですが、これはごちゃごちゃしているから難しそうに見えるだけで、
実際は、例えば下付き文字ならアンダーバー``_``で繋げるとか、$\in$は``\in``と記載するといった、
LaTeXのルールに従って記載しているというだけなので安心してください。

この $$ で囲う記法はQiitaでも使うことができます。
さらにQiitaでは次のように書くこともできます。

~~~
```math
v=(v_i)_{{i\in{I}}} \in V = \times _{{i\in{I}}}V_i
```
~~~

しかしこの`` ``` ``で囲う記方法は、Mathjax-LatexやSimple Mathjaxでは使えません。

### インラインスタイル
文章中に数式を入れたいとき、例えば…$　v=(v_i)_{{i\in{I}}} \in V = \times _{{i\in{I}}}V_i　$というときは、
インラインスタイルで記載します。`` $ 数式ほにゃらら $ ``と記載すると、一文の中に数式を埋め込むことができます。

これを実際に入力すると以下になります。

~~~
文章中に数式を入れたいときは、$　v=(v_i)_{{i\in{I}}} \in V = \times _{{i\in{I}}}V_i　$インラインスタイルで記載します。
~~~

Qiitaでは問題ないのですが、たまに記号の兼ね合いで特にインラインスタイルでは数式をうまく認識してくれないときがあります。
そういうときは、``$``マークではなく、Mathjax-LaTeXでは`\(ほにゃらら\)`と記載することで回避できます。

~~~
合計、\(X_{i,x,c}\)として定義される。
~~~

と入力すると、「合計、$X_{i,x,c}$として定義される。」というように表示されます。



## 知っておきたい記号入力方法

このMathJaxは非常に便利ですが、記号が数式の一部なのかタグなのかをコンピュータが認識することは難しいので、
普段は使わないような記号を使うことがあります。

以下の記号は特によく使うので覚えておくと良いです。

### バッククオート
`` ` ``は日本語キーボードならMacでもWindowsでも「shift + @」

### バックスラッシュ
`\`はMacの日本語キーボードなら「option + ¥」
Windowsの日本語キーボードでは「（半角英数字で）ろ」

## 実際にいろんな数式を書いてみる

私はメカニズムデザインに興味があるので経済学の数式を実際に書き写してみました。
以下のような説明をMathJaxを使って表示させてみます。

> 個人の集合を$ I \equiv \{ \(1,2,3...,n \} \) $、選択肢の集合を$A$とする。
$ i \in I $が$ a \in A $に対して持つ金銭換算価値である評価値を$ V_i (a) \in \mathbb{ R }$で表す。
Rの太板文字は実数を意味する記号である。
$ v : A \rightarrow \mathbb{R} $を評価関数と呼び、評価関数の全体からなる集合を$ \mathbb {R}^A $で表す。
個人のドメインとは非空集合$ V_i \subset \mathbb{R}^A$のことである。

いろいろと普段使わないような記号がたくさん出てきますが、LaTeXではこれをきれいに表示できます。

### LaTexコマンドの調べ方
「LaTeX　コマンド一覧」と調べてみるとたくさん参考になるサイトがあります。

http://www1.kiy.jp/~yoka/LaTeX/latex.html

論文を書く方はタイトルやアブスト、字下げなどをLaTeXで記載する方法にも触れられているこちらも参考になります

https://medemanabu.net/latex/latex-commands-list/

今回使われている記号は以下のようになります。

記号|入力文字|意味
-|-|-
$ \equiv $| \equiv |同値（合同）
$　\in $   | \in    |属する
$ : $ | :| 言い換える
$　\rightarrow　$　| \rightarrow |左から右への写像
$ \subset $ | \subset |部分集合

太文字アルファベットも以下のように入力することができます。

### 通常の太文字
~~~
\mathbf{A,B,C,D,E,F,G,...}
~~~

$\mathbf{A,B,C,D,E,F,G,...}$

### 二重線太文字
~~~
\mathbb{A,B,C,D,E,F,G,...}
~~~

$\mathbb{A,B,C,D,E,F,G,...}$

よって、上の引用文を実際に入力する際は以下のようになります。
~~~
個人の集合を$ I \equiv \{ \(1,2,3...,n \} \) $、選択肢の集合を$A$とする。
$ i \in I $が$ a \in A $に対して持つ金銭換算価値である評価値を$ V_i (a) \in \mathbb{ R }$で表す。
Rの太板文字は実数を意味する記号である。
$ v : A \rightarrow \mathbb{R} $を評価関数と呼び、評価関数の全体からなる集合を$ \mathbb {R}^A $で表す。
個人のドメインとは非空集合$ V_i \subset \mathbb{R}^A$のことである。
~~~

慣れるまでは一つの数式をLaTeXで書くだけで30分くらいかかりますが、
一度自分がよく使う記号が分かれば、あとはコピペしたりするだけで良いので時間が短縮できます。

ぜひ、MathJaxを使って友達にカッコいい数式を見せつけましょう！

株式会社ココロファンでは受託や自社プロダクトの開発も行なっており、やってよかったこと、やってわかったこと、便利なノウハウを皆さんに共有できるように、これからも積極的に技術記事をアップしていきたいと思います。

https://cocolofun.co.jp/