Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MDXでブログを書こう
Search
tofu4956
March 12, 2022
Technology
0
490
MDXでブログを書こう
全国学生エンジニア交流会「NSEEM」 (2022/3/12)のネタ 補遺:
https://blog.tofu4956.net/posts/nseem-2022
tofu4956
March 12, 2022
Tweet
Share
Other Decks in Technology
See All in Technology
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
450
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
防災デジタル分野での官民共創の取り組み (2)DIT/CCとD-CERTについて
ditccsugii
0
310
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
600
ソースを読むプロセスの例
sat
PRO
15
9.1k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
80k
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
Liquid AI Hackathon Tokyo プレゼン資料
aratako
0
110
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
180
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
310
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
1
520
Featured
See All Featured
Visualization
eitanlees
149
16k
A designer walks into a library…
pauljervisheath
209
24k
Into the Great Unknown - MozCon
thekraken
40
2.1k
KATA
mclloyd
32
15k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Faster Mobile Websites
deanohume
310
31k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
It's Worth the Effort
3n
187
28k
GitHub's CSS Performance
jonrohan
1032
470k
Transcript
MDXでブログを書こう 2022/3/12 全国学生エンジニア交流会「NSEEM」Author: tofu4956
誰? 名前: おとうふ(@tofu4956) 会津大学 B3 / 無職 場所: 宮城県仙台市->会津->? 所属:
Zli / ASCs 最近取ったドメイン: admireve.ga やる: Typescript(React / Next.js) / Python (Keras / Pytorch) やりたい: Rust(Backend) / 絵
MDX? • mdx-js/mdx
MDX? • mdx-js/mdx • MarkdownでJSXコンポーネントを使えるようにする黒魔術 ◦ https://mdxjs.com/ • JSXのimportもできるし変数も定義出来る ◦
外部でブロック要素の置き換えも可能 • unifiedのプラグインも利用可 ◦ 今回はあまり触れません • Storybookでも使えますよ! ◦ https://storybook.js.org/docs/react/api/mdx • 最近(2月くらいに)2が出ました ◦ なんかいろいろ早くなったり増えたりしたらしい
2で早くなった Quote: https://twitter.com/wooorm/status/1488549161297498113
具体例 Quote: https://mdxjs.com
つかいかた(普通) • https://mdxjs.com/docs/getting-started/#quick-start • やることが多い!(Quick Startって書いてるのに...) ◦ jsx, bundler, フロントエンドシステム特有の設定など...
◦ 特にReact以外の場合はjsxに対応させないといけない為、別途ローダーを設定しないと駄目 • いいところ ◦ そのまんま • わるいところ ◦ 後述の方法よりも(1つだけ除く)実装が難解 ◦ これだけではblogは作りづらい ▪ コンポーネントとしてロードするために前処理が必要
つかいかた(Next.js) • https://github.com/vercel/next.js/tree/canary/packages/next-mdx ◦ packageインストールしてnext.config.jsを書いて/pagesにmdxファイルおいておわり ◦ MDXProviderもつかえます • いいところ ◦
わかりやすい ◦ 設定が楽 ◦ 上記の理由で(?)日本語記事多め • わるいところ ◦ mdxに一々ページ全体を書かないといけないので、blog等の複数のコンテンツには向かない(ス ニペットでどうにかなりそう?) ◦ メタデータがexport constでしか書けない(そのままではfrontmatterが使えない) ▪ https://mdxjs.com/guides/frontmatter/
もっとちゃんと使いたい! • hashicorp/next-mdx-enhancedを使う(deprecated) ◦ https://github.com/hashicorp/next-mdx-enhanced • いいところ ◦ デフォルトでfrontmatterが扱える ◦
デフォルトの@next/mdxよりはマシな動きをする • わるいところ ◦ もう更新されてない;; ◦ 重い(当社比)
もっとちゃんと使いたい!CMSも使いたい! • MDX on demand ◦ MDXをサーバーから読んでコンパイル ◦ https://mdxjs.com/guides/mdx-on-demand/ •
いいところ ◦ @mdx-js/mdxを直接使うので後述の方法よりも直接mdxを触れられる ◦ 任意の場所からデータを取り込める ◦ nextを使わない場合は現状この方法しかない(mdx-bundlerもあるがMDX 2非対応) • わるいところ ◦ 実運用上の実装が難解 ◦ パフォーマンスの問題が発生する可能性がある
もっとちゃんと使いたい!CMSも使いたい! • hashicorp/next-mdx-remoteを使う ◦ https://github.com/hashicorp/next-mdx-remote ◦ https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote • いいところ ◦
デフォルトでfrontmatterが扱える ◦ 任意の場所からデータを取り込めるのでCMSも利用可 • わるいところ ◦ これを使うとmdx内部でimportが出来なくなる(外部からpropを渡さないと使えなくなる) ◦ 上の問題もあってmdxの利用価値が半減する
参考: 自分のブログ Umamusume Project: © Cygames, Inc. All Rights Reserved.
参考: 自分のブログ • 中身 • https://github.com/tofu4956/vercel_pagedata ◦ blog-starter-typescriptを流用/改造 ◦ hashicorp/next-mdx-remoteを利用
• https://korejyanaide.cyou/
ところで何をしているのか • Playgroundがあるので見てみると... ◦ https://mdxjs.com/playground/
これが
これになる
❓
解説します
なんだこれ • やり方は端的にはこう 1. unifiedでvfileで入力された.mdx(.md)をmdast(Markdown AST)に変換 2. その過程でhast(Hypertext AST)に変換してASTにする 3.
Hastをsyntax-tree/hast-util-to-estreeでesast(ECMAScript AST)にする 4. 生成されたesastをJavascriptとしてestree-utilでSerialize ◦ https://github.com/mdx-js/mdx/blob/main/packages/mdx/lib/core.js
rehype-reactとreact-markdownとの違い • https://github.com/rehypejs/rehype-react ◦ https://github.com/remarkjs/remark-react(deprecated) • https://github.com/remarkjs/react-markdown • rehype-reactはhastの要素を置き換える ◦
importとかconstとか書いても動かない(そのまま出力される) ◦ 外部から任意の要素を書き換え可能なのはほぼ同じ • react-markdownはそもそもremarkのラッパー ◦ 仕組み上rehype-reactを通して、結果をReactの要素扱いにすれば同じになる ◦ https://github.com/remarkjs/react-markdown#architecture • MDXは要素そのものをJSXにする ◦ その気になればJSXなので何でもできる ◦ 2ならjs表現も使えるので小回りが利くのもメリット
まとめ • MDXを使えばブログの幅が広がる • ブログだけじゃなく色々なところでも使えます • markdownに慣れた方、こちらもどうですか?
参考 • Markdown for the component era | MDX ◦
https://mdxjs.com/ • mdx-jsの実装を解読するまでの話 ◦ https://himenon.github.io/docs/javascript/decipher-mdx-js • Next.js + MDXでブログを作った ◦ https://titanicrising.jp/blog/nextjs-mdx • Load mdx content from anywhere through getStaticProps in next.js ◦ https://github.com/hashicorp/next-mdx-remote
(おまけ)外部向けにremark/MDXを使う場合 • readme.mdにも書いてあるようにそのまま使うのは割と危険 ◦ https://github.com/remarkjs/remark#security ◦ XSS対策が行われてないので普通に攻撃されます • 不特定多数が利用するアプリケーションの場合は絶対にrehype-sanitizeを使う ◦
一応rehype-stringfyも使えるけどsyntax-tree/hast-util-santizeがないので両方使ったほうが 良い ◦ allowDangerousHtml: trueとかは言語道断(自分用ならok) • 正直現時点ではMDXを使うのは外部向けではあまりお勧めしないかも... ◦ そもそもMDXを入力させて表示するだけでも結構壁が多い ▪ セキュリティ面(一番大きい)、技術面、速度面etc… ◦ mdの独自表現が欲しいなら自分でremarkプラグインを作るか、rehype-reactを使うとよさ げ? ▪ rehype-reactのvue版を探したんですけど全部deprecatedでした。ごめんなさい! ◦ 個人用としてmdの代わりとしてなら全然あり
ありがとうございました!