【react-markdown】Markdown-HTML 変換コンポーネントを15分で作る

TypeScriptでフルスタックエンジニアになる

28 May 202414:59

Summary

TLDRこのビデオでは、マークダウン記法で書かれたテキストをHTMLに変換してウェブに表示する方法を紹介しています。Next.jsと呼ばれるフレームワークを使用し、MDXを使わずにデータベースに保存されたマークダウンをテキストとして読み込み、独自のコンポーネントを作成して再利用性を実現します。React MarkdownパッケージとTailwind CSSを使用して、スタイルとコードのハイライト表示を実現し、さらにrehype-remarkプラグインを導入してGFM（GitHub Flavored Markdown）に対応させます。最終的には、ウェブアプリ上でマークダウンを美しく表示することができるようになります。

Takeaways

📝 今回はMarkdown記法のテキストをHTMLに変換して表示する方法を解説します。
💡 MDXを使わずに、Markdownテキストを読み込んでHTMLに変換します。
📁 Markdownテキストをファイルではなくデータベースに保存して管理します。
🔄 コンポーネント化して再利用しやすくします。
🖥 ターミナルでプロジェクトを作成し、Next.jsを選択して設定を進めます。
🔧 不要なコードを削除し、必要なコンポーネントを追加します。
📄 react-markdownパッケージを使用してMarkdownをHTMLに変換します。
🌈 Tailwind CSSのプラグインを使って、Markdownから変換されたHTMLをスタイルします。
✨ rehype-highlightを導入してコードブロックにシンタックスハイライトを適用します。
🔗 リンクやテーブルの表示にはremark-gfmを使用します。

Q & A

マークダウン記法で書かれたテキストをHTMLに変換するにはどうすれば良いですか？
-マークダウンテキストをHTMLに変換するには、リアクティブな環境で動作するReact Markdownというパッケージを使用することができます。このパッケージはGitHub Flavored Markdown (GFM)に対応しており、シンタックスハイライトなどの機能も備えています。
MDXとは何で、なぜこの動画では使わなかったのですか？
-MDXはマークダウンとJavaScriptを組み合わせて使用できるライブラリで、Next.jsと組み合わせて記事などの管理に使われます。しかし、この動画ではMDXの代わりにマークダウンをデータベースに保存し、それをHTMLに変換して表示する方法を紹介しています。
Next.jsでプロジェクトを作成する際のフレームワークとして何を選択しましたか？
-Next.jsでプロジェクトを作成する際には、フレームワークとしてNext.js自体を選択しました。また、TypeScript、ESLint、Tailwind CSSなどのツールも使用するかどうか尋ねられた際には全て「はい」を選択しました。
Tailwind CSSはプロジェクトにどのように追加しましたか？
-Tailwind CSSをプロジェクトに追加するには、まずTailwind CSSとそれに必要なプラグインをインストールします。その後、`tailwind.config.ts`にプラグインの設定を追加します。
シンタックスハイライトを実現するためにはどのようなパッケージを使用しましたか？
-シンタックスハイライトを実現するためには、highlight.jsというパッケージを使用しました。これにより、コードブロックを色分けして表示することができます。
Next.jsで作成したプロジェクトをデプロイする前に何を確認する必要がありますか？
-デプロイする前に、プロジェクトの設定や必要なプラグインが正しくインストールされているか、また、スタイルやマークダウンの表示が正しく行われているかを確認する必要があります。
マークダウンをHTMLに変換する際に使用したReact Markdownパッケージの特徴は何ですか？
-React Markdownは、Reactに対応したマークダウンをHTMLに変換するパッケージです。GFMに対応しており、プラグインを通じて様々な機能を拡張することができます。
GFMとは何で、React Markdownではどのように使用されていますか？
-GFMとはGitHub Flavored Markdownの略で、GitHubで使用されている特別なマークダウン記法です。React Markdownでは、`react-markdown/plugins/gfm`プラグインを使用してGFMを有効にすることができます。
Tailwind CSSのタイポグラフィを使用するにはどうしたら良いですか？
-Tailwind CSSのタイポグラフィを使用するには、まずTailwind CSSとタイポグラフィのプラグインをインストールする必要があります。その後、`tailwind.config.ts`にプラグインの設定を追加し、クラス名を追加して使用します。
この動画で紹介された方法で作成したブログはクラウドフレアにデプロイできますか？
-はい、この動画で紹介された方法で作成したブログはクラウドフレアにデプロイ可能です。クラウドフレアは無料で多くの機能を使用でき、商用利用も可能であるため、多くの開発者によって使われています。
この動画ではどのようにしてコメント欄でのアウトプットを促しましたか？
-この動画では、視聴者が学習し、思ったことや気づいたことをコメント欄にアウトプットするように促しました。これは理解を深める近道として位置づけられています。