【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`にプラグインの設定を追加し、クラス名を追加して使用します。
この動画で紹介された方法で作成したブログはクラウドフレアにデプロイできますか？
-はい、この動画で紹介された方法で作成したブログはクラウドフレアにデプロイ可能です。クラウドフレアは無料で多くの機能を使用でき、商用利用も可能であるため、多くの開発者によって使われています。
この動画ではどのようにしてコメント欄でのアウトプットを促しましたか？
-この動画では、視聴者が学習し、思ったことや気づいたことをコメント欄にアウトプットするように促しました。これは理解を深める近道として位置づけられています。

Outlines

00:00

📝 Markdown to HTML Conversion with Next.js

この段落では、Next.jsを使用してマークダウン記法で書かれたテキストをHTMLに変換して表示する方法について説明しています。MDXは使用せず、代わりにデータベースに保存されたマークダウンテキストを読み込み、HTMLに変換するコンポーネントを作成し、再利用性を高める方法が紹介されています。プロジェクトの作成から、必要な設定やスタイルの変更まで、ステップバイステップのガイドが提供されています。

05:00

🎨 Tailwind CSSとreact-markdownの統合

第二段落では、Tailwind CSSを使用してreact-markdownで変換されたHTMLをスタイリングする方法が説明されています。Tailwind Typographyプラグインの導入と設定方法が紹介されており、これによりマークダウンから生成されたHTMLに適切なスタイルが適用されます。さらに、highlight.jsを使用してコードブロックのハイライト表示を実現する方法も解説されています。

10:01

🔗 GitHub Flavored Markdown (GFM) とスタイルの調整

第三段落では、GitHub Flavored Markdown (GFM)のサポートを追加し、さらにスタイルを調整する方法が説明されています。react-markdownにGFMプラグインを追加し、URLのリンクを反映させる方法が紹介されています。また、背景色を調整するため、特定の要素にTailwind CSSのクラスを追加する方法も説明されています。最後に、デプロイに向けてCloudflare Pagesを使用する意図と、これまでの経験を共有する意図が語られています。

Mindmap

Keywords

💡マークダウン記法

マークダウン記法は、テキストデータを簡単に書式設定するための軽量マークアップ言語です。このビデオでは、マークダウン記法で書かれたテキストをHTMLに変換し、ウェブ上で美しく表示する方法を学びます。例えば、スクリプトではマークダウンテキストをデータベースに保存し、それをHTMLに変換してウェブページに表示するプロセスが説明されています。

💡HTML変換

HTML変換とは、マークダウンのようなプレーンテキスト形式をウェブブラウザで表示できるHTMLコードに変換するプロセスです。ビデオでは、マークダウンテキストをHTMLに変換してウェブページに表示する方法を紹介しており、これはウェブサイトのコンテンツ管理において非常に重要な技術です。

💡NEXT.JS

NEXT.JSは、Reactフレームワークに基づいたサーバーサイドレンダリングを提供するウェブアプリケーションフレームワークです。ビデオではNEXT.JSを使用してウェブサイトを作成し、マークダウンテキストをHTMLに変換して表示するプロセスを説明しています。

💡MDX

MDXは、マークダウン記法を拡張してReactコンポーネントを直接使用できるようにした言語です。ビデオではMDXを使用する代わりに、マークダウンテキストをHTMLに変換する方法を探求しています。これはマークダウンをウェブ開発で活用する別のアプローチを示す例です。

💡データベース

データベースは、構造化されたデータを保存するためのシステムです。ビデオではマークダウンテキストをデータベースに保存し、必要に応じて取得してウェブページに表示するというアプローチを取っています。これはウェブアプリケーションのコンテンツ管理に一般的です。

💡コンポーネント化

コンポーネント化は、ソフトウェア開発で使用される手法で、大きなアプリケーションを再利用可能な小さな部品に分割します。ビデオではマークダウンテキストをHTMLに変換する機能をコンポーネント化し、異なるアプリケーションで再利用できるようにしています。

💡リアクティブ

リアクティブとは、ユーザーの操作に応じて動的に変化するウェブアプリケーションを作成するためのパラダイムです。ビデオではリアクティブなプログラミングを使用して、マークダウンテキストを動的にHTMLに変換し、ウェブページに表示するプロセスを構築しています。

💡Tailwind CSS

Tailwind CSSは、効率的にウェブデザインを作成するための高度にカスタマイズ可能なCSSフレームワークです。ビデオではTailwind CSSを使用して、マークダウンから変換されたHTMLのスタイルを調整し、美しく表示する方法を紹介しています。

💡ハイライト

ハイライトとは、コードブロック内のシンタックスを色分けして表示することで、コードの可読性を高める技術です。ビデオではhighlight.jsを使用して、マークダウン内のコードブロックをハイライト表示する方法を説明しています。

💡GitHub Flavored Markdown (GFM)

GitHub Flavored Markdownは、GitHubで使用される拡張されたマークダウン記法です。ビデオではGFMをサポートするようにマークダウンをHTMLに変換するプロセスをカスタマイズし、テーブルやリンクなどのGFM特有の機能をウェブページで正確に表示する方法を学びます。

Highlights

マークダウン記法で書かれたテキストをHTMLに変換して表示する方法を学ぶ

MDXを使用せずにマークダウンをテキストとして読み込み、HTMLに変換

データベースにマークダウンテキストを保存する機能を実装

再利用可能なマークダウンプレビューコンポーネントを作成

Next.jsを使用してプロジェクトを作成し、設定を行う

ページのメインタグとクラス名を削除してホームページを作成

Googleフォントのnoto Sans JPを使用し、フォントを変更

言語設定とメタデータを変更し、マークダウンブログアプリにタイトルを設定

react-markdownパッケージを使用してマークダウンをHTMLに変換

デモページでreact-markdownの機能を確認

Tailwind CSSのTYPOグラフィを使用してスタイルを適用

highlight.jsを使用してコードブロックに配色を適用

react-markdownのpropsを使用してスタイルをカスタマイズ

remark-gfmを使用してGitHub Flavored Markdownをサポート

URLを修正し、リンクが正しく反映されるようにする

スタイルを調整し、リンクに色をつける

コンテンツプロパティを追加して、マークダウンプレビューコンポーネントに引数を渡す

マークダウンをHTMLに変換するプロセスを共有し、クラウドフレアへのデプロイに焦点を当てる

クラウドフレアで使える技術と使えない技術を理解し、無料で試すことができる

チャンネル登録を呼びかけ、今後の動画で一緒に学び続けることを促す