開発中に学んだ新しいことをブログとして公開し、 自分だけでなく色々な人にも共有したい！

これまでパソコンでメモやノートをとる際に使ってきたMarkdown。 「これでブログ記事を書くことが出来れば！」と考えていたが、 遂にいい方法が見つかった。

MDXという形式である。

まだ使い始めたばかりで全ての機能を把握しているわけではないが、 是非ともこれを使ったブログを執筆したいと考えている。

簡単に言うと、

Reactで使われる .jsx × Markdownの .md → mdx

という感じであり、MarkdownファイルをReactで活用する事が出来るというイメージ。

実際に触ってみた感じでは、とても良い!!

どんな所がいいかというと、

• Markdownの書き方をそのまま適用させられる。
• Reactのコードを埋め込める。
• metaデータを持たせる事ができる
• 共通のフォーマットを適用させられる

といった感じである。

これらの内容を少し深堀してみる。

Markdownの書き方をそのまま適用可能

普段からMarkdownを使ってきたので、 この書き方でいいのはとてもいい。

特にソースコードなどを載せるのがとても簡単であるので、 エンジニア系の記事がとてもはかどる。

Reactのコードを埋め込め可能

他のファイルで定義しているコンポーネントをmdxファイル内に埋め込む事ができる。

公式の例ではチャート図を埋め込んだものが載せられている。

これにより、ブログの中に綺麗な図やグラフだけでなくオリジナルのデザインなども入れたりする事が出来そう。

metaデータの保持可能

ブログを書く際に重要な

• 著者
• 投稿日
• 更新日
• タイトル
• キーワード

...などをファイルに持たせ、そのファイルをReactコンポーネントに読み込ませた際に メタデータとして取得・処理できる。

共通のフォーマットの適用可能

フォーマットを用意する事で、 Markdownのコンポーネント毎に独自のレイアウトを 用意する事が出来る。

ブログ記事のデザインの幅を広げられる。

実装方法としては、 以下のようにmdx-components.tsxの中で Markdownシンタックスに対してコンポーネントを定義する形になる。

1import type { MDXComponents } from 'mdx/types'
2import SyntaxHighlighter from 'react-syntax-highlighter';
3import { agate } from 'react-syntax-highlighter/dist/esm/styles/hljs';
4
5const components: MDXComponents = {
6  // Allows customizing built-in components, e.g. to add styling.
7  h1: ({ children }) => (
8    <h1 style={{ color: 'red', fontSize: '48px' }}>{children}</h1>
9  ),
10  code: ({ children, className }) => {
11    // classNameが 'language-js' の形式で渡ってくるので、それを処理
12    const language = className?.replace('language-', '') || 'text';
13
14    return (
15      <SyntaxHighlighter language={language} style={agate}>
16        {String(children).trim()}
17      </SyntaxHighlighter>
18    );
19  },
20}
21 
22export function useMDXComponents(): MDXComponents {
23  return components
24}

上記では、Markdownの # と ` に対してレイアウトを適用させている。

対応させるシンタックスを確認するには公式のこちらのページを参考にするのが良さそう。

とても便利なもので、導入も簡単なのでとてもおすすめです。

しばらくこれを使ってみて色々な機能を試してみたいです。