Okachi.js にて、MDX と Next.js について話しました

3月29日に、Okachi.js vol.24 が開催されました。vol.24 なので、24 回目の開催となります。

Okachi.js は、普通の勉強会と違い、よくわかっている人が発表するという形ではなく、よくわからない部分もあるけれど、とりあえずやってみたことをやってみたところまで発表してみるというスタイルの勉強会です。なので、不特定多数の人が参加するスタイルと相性が悪いので、クローズドなスタイルで行なっています。ただし、参加者は常時受け付け中ですので、お気軽にご連絡ください。

今回は、MDX というフォーマット形式について話しました。 スライドは以下です。

• スライドはこちら : MDX and Next.js

MDX について少し解説

MDX というのは「JSX embedded in Markdown」というもので、マークダウン形式の文書内に JSX を埋め込めるというフォーマット形式です。

拡張子はデフォルトでは、.mdx です。公式サイトは以下。

• MDX

MDX を使うことで、マークダウン文書が苦手としているリッチなコンテンツ表現を補完することができます。 例えば、グラフコンポーネントなどをマークダウン文書に挿入することで、リッチな文書を実現できるというわけです。 公式サイトのトップページでは、実際にインタラクティブに MDX を試すことができるので、試してみてください。

また、公式サイトでは、以下のプロダクトへの導入方法が記載されています。

• Next.js
• Gatsby
• Create React App
• React static
• Webpack
• Parcel
• X0

加えて、VS Code 用のプラグイン もあるので、VS Code を使っている人は是非導入してみましょう。

具体的には、こんな風にレイアウトを含めて記述することが出来ます。

import { MdxDefault } from '../../components/layouts/mdxDefault'

export const title = 'Example Page'
export const ogp_url = '/ogp_url'

export default ({ children }) => <MdxDefault title={title} ogp_url={ogp_url} >{children}</MdxDefault>

# タイトル

MDX 表示テストです

上記のように、MDX 内でコンポーネントを記述することも出来ます。ちなみに、マークダウン部分は {children} としてコンポーネント内で取得が可能なため、文書のレイアウトを定義することもできます。上記のサンプルコードでは、 frontmatter を使わず export にてメタ情報を定義しています。

MDX で使えるコンポーネントの定義バリエーション

コンポーネントの定義方法ですが、いろいろな形式で書くことが出来ます。例えばこんな感じです。

export const TestComponent = function (props) {
    return (<h1>{props.name} COMPONENT 1</h1>)
}

export const TestComponent2 = (props) => <h1>{props.name} COMPONENT 2</h1>

export class TestComponent3 extends React.Component {
    render() {
            return (<h1>{this.props.name} COMPONENT TEST 3</h1>)
    }
}

React.Component を継承した Class 形式の React コンポーネントを利用する場合、React を import する必要はありません。

MDX に書いて、変換がされる部分には制限があります。例えば普通に var や let const などを使っても、そのまま出力されてしまいます。これは MDX AST に記載があり、以下のノードタイプがサポートされるとのことです。なので、変数やコンポーネント部分に export を使っているというわけです。

• jsx (instead of html)
• comment (instead of html comments)
• import
• export

あと、今回は、Next.js での実装事例の話をしました。
実はこの KANSOCK.INDUSTRIES のサイトも Next.js で出来ていて、なおかつ MDX による記述をサポートしています。(もし Next.js や MDX に興味がありましたら、お気軽にお問い合わせください)

まだまだ発展途上の MDX ですが、個人的にはものすごい可能性を感じています。

追伸

フロントエンドを取り巻く状況も以下の本を書いた時から更に変化していっています。僕は第 1 章を書いたのですが、あまりフロントエンドの現状に詳しくない人でも 1 章は結構コンパクトに当時の状況をまとめられたと思っているので、興味ある方は是非お買い求めください。