MDX は、JSX が書ける Markdown ドキュメントフォーマットです。このサイトも MDX にて書かれています。
仕様上 JSX
および import
と export
そして HTML コメントを Markdown の他に記述できます。そのため、const hoge = 1
とか書いても単なるテキストになってしまいます。
このドキュメント上のみで JavaScript を使うにはどうしたらいいでしょうか。
王道を行くのであれば、このドキュメント自体を表示しているコンポーネントに書くということが考えられますが、このドキュメントのみでちょっとした JavaScript を実行したいという要望があったとします。
JSX
と export
が使えるということは、ざっと考えると、以下みたいなことにより実行できると思いますよね。
まず、空のコンポーネントを定義し、
export class ExecuteJs extends React.Component {
render() {
return null;
}
}
それを JSX
として記述する際に実行するというものです。
<ExecuteJs>{console.log("Hello World!!")}</ExecuteJs>
ただし、これを実行すると Hello World!!
がなんどもコンソールに表示されます。これは、コンポーネントのレンダリングのたびに実行されてしまうからです。マウント時に一度だけ実行したい場合はこんな風に書いてみると、実現できます。
まずは export
を使って同様にコンポーネントの定義をします。
export class ExecuteJs extends React.Component {
componentDidMount() {
if(typeof this.props.fn === 'function') {
this.props.fn()
}
}
render() {
return null;
}
}
ポイントは componentDidMount
時に props
に渡ってくる fn
という関数を実行するようにしているという部分です。
実際に JSX
にて使う場合は以下のように記述します。
<ExecuteJs fn={() => {console.log("Hello World!!")} } />
これで、マウント時に一度だけ実行できるようになりました。
この方法は、邪道かもしれませんが、どうしても JavaScript を MDX ドキュメント上のみで実行したいときに検討してみてください。
この方法はまだ考える余地はいろいろあるかもしれません。導入は慎重に。
ARTICLES
AUTHOR

原 一浩
カンソクインダストリーズ代表 / グレーティブ合同会社代表
1998年に独立し、同年、ウェブデザイン専門のメールメディア DesignWedgeの発行を開始。Webデザイン業の傍ら、海外のWebデザインに関する情報発信を行う。
雑誌への寄稿多数。主な著書に『はじめてのフロントエンド開発』『プロセスオブウェブデザイン』、『Play framework徹底入門』、『ウェブデザインコーディネートカタログ』など。自社製のWebデザインのクロール&キャプチャシステムvaqumをベースに、様々なリサーチを行っている。Web 検定プロジェクトメンバー。