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
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
150
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
100
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
190
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
520
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
290
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
4
3.7k
MobileActOsaka_250704.pdf
akaitadaaki
0
110
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
440
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
280
Designing for humans not robots
tammielis
253
25k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
RailsConf 2023
tenderlove
30
1.1k
Six Lessons from altMBA
skipperchong
28
3.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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の代わりとしてなら全然あり
ありがとうございました!