ARTICLES

MDX ドキュメント上にて、ちょっとした JavaScript を実行させたい時

2019-06-07

MDX は、JSX が書ける Markdown ドキュメントフォーマットです。このサイトも MDX にて書かれています。
仕様上 JSX および importexport そして HTML コメントを Markdown の他に記述できます。そのため、const hoge = 1 とか書いても単なるテキストになってしまいます。

このドキュメント上のみで JavaScript を使うにはどうしたらいいでしょうか。

王道を行くのであれば、このドキュメント自体を表示しているコンポーネントに書くということが考えられますが、このドキュメントのみでちょっとした JavaScript を実行したいという要望があったとします。

JSXexport が使えるということは、ざっと考えると、以下みたいなことにより実行できると思いますよね。
まず、空のコンポーネントを定義し、

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 検定プロジェクトメンバー

    著作一覧はこちら