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
480
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
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
380
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
11k
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
170
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
870
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.2k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
120
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
260
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
940
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
250
MobileActOsaka_250704.pdf
akaitadaaki
0
100
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
770
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
BBQ
matthewcrist
89
9.7k
Building an army of robots
kneath
306
45k
What's in a price? How to price your products and services
michaelherold
246
12k
How to train your dragon (web standard)
notwaldorf
94
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Adopting Sorbet at Scale
ufuk
77
9.4k
Thoughts on Productivity
jonyablonski
69
4.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Statistics for Hackers
jakevdp
799
220k
RailsConf 2023
tenderlove
30
1.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
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の代わりとしてなら全然あり
ありがとうございました!