日本語を含むMarkdownの表で、桁がずれて見える理由

今回は、日本語混じりのMarkdownの表が、書いている最中に崩れて見える話です。

こういう状態のことです。

| 商品名 | 単価 | 区分 |
| ------ | ---- | ---- |
| りんご | 120 | 果物 |
| アイスクリーム | 380 | 冷凍食品 |
| 水 | 90 | 飲料 |

| の位置がバラバラで、どこが何列目なのか追いづらい状態です。

原因は文字の幅

原因は単純で、日本語の文字が半角文字のおよそ2倍の幅を持っているためです。

等幅フォントで表示したとき、りんご は6文字ぶんの幅を占めます。
一方 apple は5文字ぶんです。
文字数だけを数えて空白を詰めると、見た目の幅は揃いません。

多くの変換ツールは半角前提で桁を揃えているので、日本語を入れた瞬間にこうなります。

表示結果には影響しない

先に書いておくと、ソースがずれていても、表示された表は正しく整列します。

Markdownの表は | の位置ではなく、| で区切られた個数で列を判断しています。
なので、桁が揃っていなくても表示は崩れません。
極端な話、こう書いても結果は同じです。

|商品名|単価|区分|
|-|-|-|
|りんご|120|果物|

それでも揃える意味

表示に影響しないなら揃える必要はないのですが、実際には揃っている方が助かります。

• 後から1行足すとき、どの列に何を書くのか目で追える
• 値の入れ間違い（単価の欄に区分を書いてしまう等）に気づきやすい
• 差分（Gitのdiff等）で変更箇所を見つけやすい

書いて終わりの表なら気にしなくていいと思いますが、後で編集するものは揃えておいた方が結局は楽になります。

全角を考慮した桁揃え

このツールでは、文字数ではなく表示上の幅で桁を計算しています。
全角文字を幅2として数えているので、日本語の表でも | が縦に並びます。

※ 揃うのは等幅フォントで見た場合です。プロポーショナルフォントのエディタで開くと、どのみち揃って見えません。
※ 絵文字は環境によって表示幅が変わるので、揃わない場合があります。