Document-Driven 概念を知りたい

nuxt/content v2 の Document-Driven Mode がどういうものなのか、実際に Document-Driven Mode にするとどうなるのかというのが何もわからなかったのでざっと調べてまとめたもの。社内のテックランチで発表した内容。

Transcript

1. Document-driven 概念を知りたい
2. Document-driven 概念を知りたい nuxt/content v2 でサラっと推されている Document-driven モードと はなんなのか、どうイケてるのかを知りたかったので調べた。
3. Document-driven 概念を知りたい nuxt/content v2 でサラっと推されている Document-driven モードと はなんなのか、どうイケてるのかを知りたかったので調べた。
4. （その前に）nuxt/content はいいぞ ざっくり言うと nuxt に内臓された Headless CMS レイアウトを作ってしまえば、コンテンツは markdown ベースでモ リモリ書ける 最終的なアウトプットが静的なメディアや個人ブログ、ドキュメ ントなどを作る際に強い
5. （その前に）nuxt/content はいいぞ 少し前に nuxt3 の世界に対応した v2 が出た v2 の良さを軽く紹介させてほしい
6. nuxt/content v2 の良さ
7. nuxt/content v2 の良さ その1: 抜本的なコンテンツ表示方法の変更
8. 抜本的なコンテンツ表示方法の変更 v1 だと markdown の中身表示用の page を作って、script 内で fetch してきたものを表示する、みたいな言ってしまえば他の Headless CMS とあまり変わらない心地だった v2 だとテンプレートに <ContentDoc /> を書くだけで markdown の 中身を出すだけなら終わる ※その他にも <ContentList> とか <ContentNavigation> みたいな よくあるものを生成するコンポーネントが用意されていて強い
9. <template> <article> <h1>{{ page.title }}</h1> <nuxt-content :document="page" /> </article> </template> <script> export default { async asyncData ({ $content }) { const page = await $content('home').fetch() return { page } } } </script>
10. <template> <content-doc /> </template>
11. nuxt/content v2 の良さ その1: 抜本的なコンテンツ表示方法の変更
12. nuxt/content v2 の良さ その1: 抜本的なコンテンツ表示方法の変更 その2: markdown スタイルのカスタマイズ
13. markdown スタイルのカスタマイズ v1 のときは <nuxt-content :document="page"> で markdown を渡す と <div class="nuxt-content">（中身）</div> という HTML が吐き出 されるのでそのクラス（ .nuxt-content ）の中で各要素の CSS を書 いていた markdown 用の CSS テーマをどっかからもってくる場合は別に良 いが、自分で調整するとなると面倒な仕様だった
14. markdown スタイルのカスタマイズ v2 は各 HTML 要素（ <p> とか <h1> とか）ごとにデフォルトのコ ンポーネントが用意されている。 それをオーバーライドすることで CSS だけでなくコンポーネント単位でカスタマイズできるようにな っている
15. nuxt/content v2 の良さ その1: 抜本的なコンテンツ表示方法の変更 その2: markdown スタイルのカスタマイズ その3: MDC Syntax
16. MDC Syntax MDC = Markdown Components。 components/content/ 以下のコン ポーネントを明示的なインポート無しで（若干気持ち悪い構文で記 述すると） markdown 内でしゅっと使える機能。 markdown だけだと表現しにくい見た目とか動きをコンポーネント として切り出してそこだけ SFC で管理できる
17. MDC Syntax v1 でも一応利用可能ではあったが、markdown内で <component-name></component-name> という記法で記述し、「その markdown ファイルを使うページ」の script 内で import してきて components に登録する、という手順を踏まなければならなかった ので使い勝手が悪かった
18. MDC Syntax <template> <div class="card"> <slot /> </div> </template> <style scoped> .card { padding: 1.5rem; border-width: 1px; border-style: solid; border-color: #000; border-radius: 0.25rem; } </style>
19. MDC Syntax # ページタイトル この辺は通常の markdown だよ。本文本文本文。 - リスト - リスト ::card ← これ カードコンポーネントの中身をここに記述できる（コンポーネント側の `<slot />` に渡る） ::
20. MDC Syntax
21. Document-driven 概念を知りたい nuxt/content v2 でサラっと推されている Document-driven モードと はなんなのか、どうイケてるのかを知りたかったので調べた。
22. Document-driven モードとは ドキュメントによると The Document-driven development mode gives a lot more power to Markdown-based websites. とのことら しい。
23. Document-driven モードとは ドキュメントによると The Document-driven development mode gives a lot more power to Markdown-based websites. とのことら しい The Document-driven development mode が give する a lot more な power とはなんなのかを調べるために我々は南米へ飛んだ
24. Document-driven モードにするには nuxt.config.ts で content: { documentDriven: true } にするだけ export default defineNuxtConfig({ modules: ['@nuxt/content'], content: { documentDriven: true // ← これ } })
25. Document-driven モードにすると...
26. Document-driven モードにすると... ルートが app.vue （ないし pages/index.vue ）ではなく、 content/index.md になる
27. Document-driven モードにすると... ルートが app.vue （ないし pages/index.vue ）ではなく、 content/index.md になる content/ 以下のディレクトリが直接ページにバインドされる 例: content/page1.md は /page1 に対応する
28. Document-driven モードにすると... ルートが app.vue （ないし pages/index.vue ）ではなく、 content/index.md になる content/ 以下のディレクトリが直接ページにバインドされる 例: content/page1.md は /page1 に対応する useContent() によるグローバル変数の提供 特に何も記述しなくても現在のコンテンツに基づいた参照情報を もってこれる ナビゲーション、前後のページのタイトル・パス、抜粋、目 次、など...
29. まとめ Document-driven 概念は markdown の文書（＝コンテンツ）がま ず大元にあり、「web サイトの体裁」にするために必要なレイアウ トやスタイル、コンポーネントを実装していくスタイル...と解釈し た
30. まとめ Document-driven 概念は markdown の文書（＝コンテンツ）がま ず大元にあり、「web サイトの体裁」にするために必要なレイアウ トやスタイル、コンポーネントを実装していくスタイル...と解釈し た コンテンツ本体とその他レイアウト等の分離の仕方が v1 と比べ て洗練されて、筋がいいなという印象を受けた こうして調べていくと第一印象は最悪だった MDC Syntax が、上 記の良さに貢献しているなと感じた