Markdown & MDX Cheat Sheet

このページは、Astroで利用できるMarkdown記法と、MDX特有の動的な機能を実例とともに紹介します。

---

1. MDX 独自の機能 (MDX Specifics)

MDXは単なるMarkdownではありません。JavaScriptの変数や式、コンポーネントを直接埋め込むことができます。

{/* 
  MDX内での変数定義（エクスポート）の例 
  ここで定義した変数は、このファイル内のどこでも {year} のように使用できます。
*/}
export const year = 2025;
export const highlightStyle = {
  padding: '0.2em 0.4em',
  borderRadius: '4px',
  backgroundColor: '#e0f7fa',
  color: '#006064',
  fontWeight: 'bold'
};

1-1. 変数と式 (Variables & Expressions)

JavaScriptの式を {} で囲むことで、計算結果や変数を表示できます。

現在の年は {year} 年です。
来年は {year + 1} 年になります。

出力結果: 現在の年は 2025 年です。 来年は 2026 年になります。

1-2. インラインスタイル (JSX Styles)

HTMLタグに直接React/JSXライクなスタイルオブジェクトを適用できます。

<div style={{ padding: '1rem', backgroundColor: '#f3f4f6', borderLeft: '4px solid #3b82f6' }}>
  <h4 style={{ margin: 0, color: '#1d4ed8' }}>カスタムスタイルのボックス</h4>
  <p style={{ margin: 0 }}>CSSファイルを作らなくても、このように装飾できます。</p>
</div>

1-3. コンポーネントのインポートと使用

Astroコンポーネント、React、Vue、Svelteなどをインポートして使用できます。

---
# フロントマター、または下記のようにimport文を書けます
---
import MyButton from '../components/MyButton.astro';
import { Icon } from 'astro-icon';

## コンポーネントの使用
<MyButton variant="primary">クリック</MyButton>

## クライアントサイドのハイドレーション (React/Vueなど)
JavaScriptが必要なコンポーネントには `client:*` ディレクティブを付けます。
<InteractiveCounter client:load initialCount={5} />

1-4. MarkdownとJSXの混在

Markdown記法の中にコンポーネントを混ぜたり、逆にコンポーネントの中にMarkdownを書いたりできます。

<div className="note-box">
  
  ### ここはMarkdownの見出し
  
  - リストも書けます
  - <span style={highlightStyle}>変数やスタイル</span> も適用可能
  
</div>

---

2. 標準 Markdown 記法 (Standard Markdown)

2-1. 見出し (Headings)

# H1
## H2
### H3

2-2. テキスト装飾 (Emphasis)

記法	出力	意味
**太字**	太字	Strong
*イタリック*	イタリック	Emphasis
~~取り消し線~~	取り消し線	Strikethrough
`コード`	コード	Inline Code

2-3. リスト (Lists)

- 番号なしリスト
  - ネスト
1. 番号付きリスト
   1. ネスト

2-4. リンクと画像 (Links & Images)

[Astro公式サイト](https://astro.build)
![ロゴ](https://astro.build/assets/press/astro-logo-light.png)

Astro公式サイト

2-5. 引用 (Blockquotes)

> 知識は力なり。
> 
> > ネストされた引用

知識は力なり。

ネストされた引用

2-6. コードブロック (Code Blocks)

ファイル名を表示する機能はAstroのテンプレートやプラグイン（rehype-pretty-code等）に依存しますが、基本は以下の通りです。

```typescript title="example.ts"
const greeting: string = "Hello Astro";
console.log(greeting);
```

const greeting: string = "Hello Astro";
console.log(greeting);

2-7. テーブル (Tables)

| 機能 | Markdown | MDX |
| :--- | :---: | :---: |
| 静的コンテンツ | ✅ | ✅ |
| 変数・計算 | ❌ | ✅ |
| コンポーネント | ❌ | ✅ |

機能	Markdown	MDX
静的コンテンツ	✅	✅
変数・計算	❌	✅
コンポーネント	❌	✅

2-8. 脚注 (Footnotes)

Astroはとても高速です[^1]。

[^1]: アイランドアーキテクチャのおかげです。

Astroはとても高速です¹。

---

3. その他の便利な記法

3-1. キーボードキー (KBD)

<kbd>Ctrl</kbd> + <kbd>S</kbd> で保存

Ctrl + S で保存

3-2. 詳細折りたたみ (Details)

<details>
  <summary>ネタバレ注意！</summary>
  ここに隠しテキストが入ります。Markdownも使えます。
  - リスト1
  - リスト2
</details>

ネタバレ注意！

ここに隠しテキストが入ります。Markdownも使えます。

• リスト1
• リスト2

---

4. Frontmatter レイアウト

AstroのMDXでは、Frontmatterで layout を指定することで、Markdown全体を包むレイアウトコンポーネントを指定できます。

---
layout: ../layouts/BaseLayout.astro
title: "私の記事"
---

これで、自動的に BaseLayout コンポーネントの中にMDXのコンテンツが <slot /> として挿入されます。

Footnotes

1. アイランドアーキテクチャのおかげです。 ↩