配置方法の解説：左寄せ、中央揃え、右寄せ

学習後の成果

• 3種類の配置方法の構文と効果を習得する
• 区切り行が配置方法を指定する仕組みを理解する
• セルのパディングアルゴリズムの動作原理を知る
• 区切り行が自動的に幅を調整する理由を理解する

現在の課題

AIがテーブルを生成しましたが、列の配置があまり美しくありません：

| 名称 | タイプ | 説明 |
|--- | --- | ---|
| ユーザー | string | ユーザー名 |
| 年齢 | number | 年齢 |
| is_active | boolean | アクティブかどうか |

特定の列を中央揃えや右寄せにして、テーブルを読みやすくしたいが、指定方法がわかりません。

いつこの方法を使うか

• テーブルの特定の列を中央揃えにしたい場合（ステータス、タグなど）
• 数値列を右寄せにしたい場合（サイズ比較を容易にするため）
• テキスト列を左寄せにしたい場合（デフォルトの動作）
• 配置の実装原理を理解したい場合

核心概念：区切り行が配置方法を決定

Markdownテーブルの配置方法は各行に書くのではなく、区切り行で一括して指定します。

区切り行の構文は：:?-+:?（コロン + ハイフン + コロン）

コロンの位置	配置方法	例
左右にある	中央揃え	:---:
右側のみ	右寄せ	---:
なし	左寄せ	--- または :---

区切り行の各セルは各列の配置方法に対応し、プラグインはこのルールに従って列全体をフォーマットします。

実践：3種類の配置方法

ステップ 1：左寄せ（デフォルト）

なぜ

左寄せはテーブルのデフォルトの動作であり、テキストデータに適しています。

構文

| 名称 | 説明 |
| :--- | :--- |    ← 左側にコロンがあるか、コロンがない場合は左寄せ
| ユーザー | ユーザー名 |

期待される結果

| 名称   | 説明   |
|--- | ---|
| ユーザー   | ユーザー名 |

区切り行は :---（左寄せマーク）として表示され、テキストは左揃えになります。

ソースコード実装

// getAlignment 関数：配置方法を解析
function getAlignment(delimiterCell: string): "left" | "center" | "right" {
  const trimmed = delimiterCell.trim()
  const hasLeftColon = trimmed.startsWith(":")
  const hasRightColon = trimmed.endsWith(":")

  if (hasLeftColon && hasRightColon) return "center"
  if (hasRightColon) return "right"
  return "left"  // デフォルトで left を返す
}

ソースコード位置：index.ts:141-149

ロジックの説明

• 左右にコロンがある（:---:）→ "center" を返す
• 右側のみにコロンがある（---:）→ "right" を返す
• その他の場合（--- または :---）→ "left" を返す（デフォルト）

ステップ 2：中央揃え

なぜ

中央揃えはステータスタグ、短いテキスト、タイトルなど、視覚的に中央に配置したいコンテンツに適しています。

構文

| 名称 | ステータス | 説明 |
|--- | --- | --- | ---|
| ユーザー | アクティブ | ユーザー名 |

期待される結果

| 名称   |  ステータス  | 説明   |
|--- | --- | ---|
| ユーザー   |  アクティブ  | ユーザー名 |

中央の列の「アクティブ」は中央に表示され、区切り行は :---:（中央揃えマーク）として表示されます。

区切り行のフォーマット原理

区切り行セルのフォーマットは formatSeparatorCell 関数で処理されます：

function formatSeparatorCell(width: number, align: "left" | "center" | "right"): string {
  if (align === "center") return ":" + "-".repeat(Math.max(1, width - 2)) + ":"
  if (align === "right") return "-".repeat(Math.max(1, width - 1)) + ":"
  return "-".repeat(width)
}

ソースコード位置：index.ts:213-217

中央揃えの数学的原理

中央揃えの区切り行フォーマットは：: + ハイフン + :

目標幅	計算式	結果
3	: + -*1 + :	:-:
5	: + -*3 + :	:---:
10	: + -*8 + :	:--------:

Math.max(1, width - 2) は少なくとも1つのハイフンを確保し、幅が2の場合に ::（区切り効果なし）になるのを防ぎます。

ステップ 3：右寄せ

なぜ

右寄せは数値、金額、日付など、右から左に比較する必要があるデータに適しています。

構文

| 名称 | 価格 | 数量 |
| :--- | ---: | ---: |    ← 右側にコロンがあると右寄せ
| 商品 | 99.9 | 100 |

期待される結果

| 名称   | 価格 | 数量 |
|--- | --- | ---|
| 商品   |  99.9 |  100 |

数値は右に揃えられ、サイズ比較が容易になります。

右寄せの数学的原理

右寄せの区切り行フォーマットは：ハイフン + :

目標幅	計算式	結果
3	-*2 + :	--:
5	-*4 + :	----:
10	-*9 + :	---------:

Math.max(1, width - 1) は少なくとも1つのハイフンを確保します。

セルのパディングアルゴリズム

プラグインはセルの両側にどれだけのスペースを埋めるかをどう決定するのでしょうか？答えは padCell 関数にあります。

ソースコード実装

function padCell(text: string, width: number, align: "left" | "center" | "right"): string {
  const displayWidth = calculateDisplayWidth(text)  // 表示幅を計算
  const totalPadding = Math.max(0, width - displayWidth)

  if (align === "center") {
    const leftPad = Math.floor(totalPadding / 2)
    const rightPad = totalPadding - leftPad
    return " ".repeat(leftPad) + text + " ".repeat(rightPad)
  } else if (align === "right") {
    return " ".repeat(totalPadding) + text
  } else {
    return text + " ".repeat(totalPadding)
  }
}

ソースコード位置：index.ts:198-211

パディングルール

配置方法	左パディング	右パディング	例（目標幅 10、テキスト "abc"）
左寄せ	0	totalPadding	abc
中央揃え	floor(total/2)	total - floor(total/2)	abc
右寄せ	totalPadding	0	abc

中央揃えの数学的詳細

Math.floor(totalPadding / 2) は左パディングが整数であることを保証し、余分なスペースは右側に追加されます。

目標幅	テキスト幅	totalPadding	左パディング	右パディング	結果
10	3	7	3 (7÷2=3.5→3)	4 (7-3)	abc
11	3	8	4 (8÷2=4)	4 (8-4)	abc
12	3	9	4 (9÷2=4.5→4)	5 (9-4)	abc

完全な例

入力テーブル（異なる列の配置方法を指定）：

| 名称 | ステータス | 価格 | 説明 |
|--- | --- | --- | ---|
| 商品A | アクティブ | 99.9 | これは商品です |
| 商品B | 非アクティブ | 199.0 | これは別の商品です |

フォーマット結果：

| 名称   |  ステータス  | 価格 | 説明         |
|--- | --- | --- | ---|
| 商品A  |  アクティブ  |  99.9 | これは商品です |
| 商品B  |  非アクティブ  | 199.0 | これは別の商品です |

各列の配置方法：

列名	区切り行構文	配置方法	説明
名称	:---	左寄せ	テキストは左揃え
ステータス	:---:	中央揃え	テキストは中央揃え
価格	---:	右寄せ	数値は右揃え
説明	:---	左寄せ	テキストは左揃え

チェックポイント

このレッスンを完了した後、以下の質問に答えられるはずです：

• [ ] 中央揃えを指定する方法は？（答：区切り行で :---: を使用）
• [ ] 右寄せを指定する方法は？（答：区切り行で ---: を使用）
• [ ] 左寄せのデフォルト構文は？（答：--- または :---）
• [ ] なぜ中央揃えで Math.floor(totalPadding / 2) を使うのか？（答：左パディングを整数にし、余分なスペースを右側に追加するため）
• [ ] 区切り行の :---: は何を意味するか？（答：中央揃えマーク、左右にコロンが1つずつ、中央はハイフン）

注意点

一般的な誤解

誤解：各行で配置方法を指定する必要がある

事実：必要ありません。区切り行のみが配置方法を指定し、データ行は列に従って自動的に配置されます。

区切り行は「設定」であり、データ行は「コンテンツ」です。設定は1行で十分です。

注意

区切り行のコロンの位置は、列と必ず対応している必要があります。

間違った例	問題
`	:---
`	:---

区切り行の列数は、ヘッダーとデータ行の列数と一致している必要があります！

レッスンのまとめ

配置方法	区切り行構文	適用シーン
左寄せ	--- または :---	テキスト、説明データ（デフォルト）
中央揃え	:---:	ステータスタグ、短いテキスト、タイトル
右寄せ	---:	数値、金額、日付

重要な関数：

関数	役割	ソースコード位置
getAlignment()	区切り行セルの配置方法を解析	141-149
padCell()	セルを指定幅にパディング	198-211
formatSeparatorCell()	区切り行セルをフォーマット	213-217

記憶のポイント：

左右コロンは中央揃え、右側コロンは右寄せ、 コロンなしはデフォルト左、区切り行でルールを決める。

次のレッスン予告

次のレッスンでは よくある質問：テーブルがフォーマットされない場合の対処法 を学習します。

学習内容：

• invalid structure エラーを素早く特定する方法
• 設定エラーのトラブルシューティング方法
• 一般的なテーブル問題の解決策

---

付録：ソースコード参照

クリックしてソースコード位置を表示

更新日時：2026-01-26

機能	ファイルパス	行番号
配置方法の解析	index.ts	141-149
セルのパディング	index.ts	198-211
区切り行のフォーマット	index.ts	213-217
配置方法の適用	index.ts	107-113

重要な関数：

• getAlignment(delimiterCell: string)：区切り行セルの配置方法を解析

  • 返回値："left" | "center" | "right"
  • ロジック：左右にコロンがある → 中央揃え、右側のみにコロンがある → 右寄せ、その他 → 左寄せ

• padCell(text, width, align)：セルを指定幅にパディング

  • 表示幅と目標幅の差を計算
  • 配置方法に基づいて左右のパディングを分配
  • 中央揃えでは Math.floor(totalPadding / 2) で左パディングを整数にする

• formatSeparatorCell(width, align)：区切り行セルをフォーマット

  • 中央揃え：: + -*(width-2) + :
  • 右寄せ：-*(width-1) + :
  • 左寄せ：-*width
  • Math.max(1, ...) を使用して少なくとも1つのハイフンを確保