【react-markdown】Markdown-HTML 変換コンポーネントを15分で作る
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
📝 Markdown to HTML Conversion with Next.js
この段落では、Next.jsを使用してマークダウン記法で書かれたテキストをHTMLに変換して表示する方法について説明しています。MDXは使用せず、代わりにデータベースに保存されたマークダウンテキストを読み込み、HTMLに変換するコンポーネントを作成し、再利用性を高める方法が紹介されています。プロジェクトの作成から、必要な設定やスタイルの変更まで、ステップバイステップのガイドが提供されています。
🎨 Tailwind CSSとreact-markdownの統合
第二段落では、Tailwind CSSを使用してreact-markdownで変換されたHTMLをスタイリングする方法が説明されています。Tailwind Typographyプラグインの導入と設定方法が紹介されており、これによりマークダウンから生成されたHTMLに適切なスタイルが適用されます。さらに、highlight.jsを使用してコードブロックのハイライト表示を実現する方法も解説されています。
🔗 GitHub Flavored Markdown (GFM) とスタイルの調整
第三段落では、GitHub Flavored Markdown (GFM)のサポートを追加し、さらにスタイルを調整する方法が説明されています。react-markdownにGFMプラグインを追加し、URLのリンクを反映させる方法が紹介されています。また、背景色を調整するため、特定の要素にTailwind CSSのクラスを追加する方法も説明されています。最後に、デプロイに向けてCloudflare Pagesを使用する意図と、これまでの経験を共有する意図が語られています。
Mindmap
Keywords
💡マークダウン記法
💡HTML変換
💡NEXT.JS
💡MDX
💡データベース
💡コンポーネント化
💡リアクティブ
💡Tailwind CSS
💡ハイライト
💡GitHub Flavored Markdown (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に変換するプロセスを共有し、クラウドフレアへのデプロイに焦点を当てる
クラウドフレアで使える技術と使えない技術を理解し、無料で試すことができる
チャンネル登録を呼びかけ、今後の動画で一緒に学び続けることを促す
Transcripts
今回はマークダウン記法で書かれた
テキストをHTMLに変換して表示する
方法を見ていきますNEXT.JSの
ドキュメントを見るとMDXが紹介されて
いますしかしMDXは使いません代わりに
マークダウンで書いた内容をテキストとし
て読み込みHTMLに変換して表示します
これはファイルで管理せずにデータベース
にマークダウンテキストを保存することを
想定していますそしてその機能を実装した
コンポーネントを作成します
コンポーネントにしておくことで再利用し
やすくなりますこの動画を見ていただけれ
ばマークダウン記法で書かれたテキストを
HTMLに変換して表示できますまた
コンポーネント化することでいろんな
アプリに再利用できますこの動画で学習し
て思ったことや気づいたことはコメント欄
にアウトプットしてくださいアウトプット
こそがあなたにとって理解する近道です
それでは早速始めましょうカーソルを起動
したらターミナルを開きますCD
Desktop/m/mprojを実行し
て移動しますmkdMARダウンブログを
実行してプロジェクトを作成する
ディレクトリを作成しますCDMAR
ダウンブログを実行して移動しますNPM
createCloudfare@
latest.を実行してプロジェクトを
作成しますまずはどのようなアプリを作る
のか選択します4番目のWEBサイトor
WebAppを選択します次にどのような
フレームワークを使うのか聞かれます7番
目のNEXTを選択します質問されますが
全てそのまま答えてくださいタイプ
スクリプトは使うのでyesESlint
は使うのでyesテウンCSSは使うので
yesソースディレクトリは使わないので
Noアルタは使うのでyesインポート
エリアスは使わないのでNoプロジェクト
が作成されるまで時間がかかるので早送り
します次にESlintのプラグインを
使うかどう聞かれますYESを選択します
また早送りして最後にデプロイするかどう
か聞かれますデプロイは後でするのでノー
を選択しますからだったマークダウン
ブログディレクトリにプロジェクトが作成
されましたコードドを実行して新たに
カーソルを立ち上げます不要なコードを
削除しますアディレクトリを開きます
Page.TSXを開きますメインタグの
中のdivタグを閉じて全て削除します
メインタグの間にホームと入力してきます
メインタグのクラスネームも削除しておき
ますglobals.CSSを開きます
コロンルート以降を閉じて全て削除します
layout.TSXを開いています
フォントを変更しますまずはいつものよう
にintをGoogleフントのnot
SanJAPANに変更しますまずは
インポートされているinをnotSan
JPに変更してコピーしますinを選択し
てコピーしたnotSSjpを貼り付け
ますオブジェクトを確納している変数
インターとボディタグのクラスネームの
インタを選択しますそしてnotアバS
アバJPに変更します言語設定を変更し
ますHTMLタグのラングプロパティを
enからJAに変更しますメタデータを
変更しますタイトルをマークダウンブログ
アプに変更しますマークダウンをHTML
に変更して表示するためのコンポーネント
を作成しますPage.TSXを開きます
ホームを削除してマークダウンプレビュー
コンポーネントを追加します
コンポーネントのファイルを作成します
アップディレクトリの中にアバ
component/mDown
preview.TSXを作成します
RFCを入力してsnipedを呼び出し
ますスネイクケースのマークダウン
プレビューをパスカルケースに変更します
Page.TSXに戻りますマークダウン
プレビューの1文字を入力し直して
インポートしますターミナルを開いて簡易
サーブを立ち上げますターミナルは閉じて
おきますブラウザで確認します小さいので
大きくしますマークダウンプレビューが
表示されていますマークダウンプレビュー
コンポーネントがちゃんと呼び出されてい
ますカーソルに戻りますマークダウンを
HTMLに変更するために今回はリアクト
マークダウンというパッケージを使います
名前で分かる通りリアクトに対応した
パッケージですデモが用意されているので
見てみましょうデモページを開きます
スクロールしてみますシンタックス
ハイライトに対応していますこれはコード
を色分けして表示することで分かりやすく
するためですカーソルでコードを編集する
時にカラフルに表示されているのも同じ
機能ですデモではリハイプハイライトと
いうプラグインを使っていますコードを
見るとリハハイライトがインポートされて
リハプラグインズにリハハイライトが指定
されていますこれで適用できるようです
再びスクロールするとgitHUB
フレイバーマークダウンgfmに対応して
いますデモではリマーgfmというプラグ
インを使っています右上にあるユリマー
gfmをチェックしてみますgfmが反映
されてテーブルに変換されたりURLの
リンクが反映されますURLを別
Windowで開いてみます開くことが
できましたスクロールすると他にも載って
いますが各自で見てくださいgitHUB
のページを開きますページを参考に
リアクトマークダウンパッケージを
インストールします下にスクロールして
インストールの項目に移動しますコマンド
をコピーしますカーソルに戻って
ターミナルを開きますコマンドを貼り付け
て実行しますインストールが終わったら
ターミナルは閉じますマークダウンの
ダミーデータを作成しておきますルート
ディレクトリにコンスタンツ/mDESを
作成しますエポーコンストMD=バッコ
バックコートの中にダミーのマークダウン
を入力します事前に用意していたものを
コピペします変数MDにマークダウンを
格納しますバックコートで囲うことで複数
業の文字列を格納できますまたマーク
ダウンの中に波線を3つ並べていますが
バックコートで囲っているのでバック
コートの代わりに波線を3つ並べています
ダミーのマークダウンをマークダウン
プレビューコンポーネントに表示させます
MARDownpreview.TSXを
開きますデブタグの中のマークダウン
プレビューを削除して変数MDを呼び出し
ますが表示されるので1番上を選択して
インポートしますブラウザで確認します
まだDIVタグで囲っているだけなので
文字列として表示されていますこれを
リアクトマークダウンを使ってHTMLに
変更しますカーソルに戻りますリアクト
マークダウンにはマークダウンという
コンポーネントが用意されていますこれを
使うことでマークダウンをHTMLに変更
できます違いが分かるように何もしない
場合とマークダウンコンポーネントを使う
場合を一緒に表示しますDIVタグを追加
してその中に元々あったDIVタグを移動
しますその下にマークダウンタグを追加し
て1文字入力し直して1番上のリアクト
マークダウンを選択してインポートします
そしてマークダウンタグの間に変数MDを
呼び出しますブラウザで確認します
ちょっと分かりにくいですがこの部分が
DIVタグのマークダウンですそしてこの
部分がマークダウンタグのマークダウン
ですマークダウンがHTMLに変換されて
表示されています今の状態ではマーク
ダウンをHTMLに変換されただけで
CSSは当たっていませんそこでTAIL
wndCSS公式のプラグインテルウン
タイポグラフィを使いますマークダウン
から変換されたhtmlをいい感じに表示
するCSSを提供していますまずはテウン
タイポグラフィーをインストールします
gitHUBのページを見ます下に
スクロールして導入方法を見ます
ライブラリーをインストールして
Window.config.TSに設定
を追加する必要があるようですまずは
インストールのコマンドをコピーします
カーソルに戻りますターミナルを開いて
貼り付けて実行しますターミナルを閉じ
ますgitHUBのページに戻ってT
Window.config.TSに追加
するコードをコピーしますカーソルに戻っ
てtailwind.config.TS
を開きますプラグインズの角括弧の中に
コピーしたコードを貼り付けますgit
HUBのページに戻りますスクロールして
使い方を見ますクラスネームを追加して
プローズを指定するといいようですね
カーソルに戻ってMarkdown
preview.TSXを開きますマーク
ダウンタグにクラスネームを追加して
プロズを指定しますブラウザで確認します
CSSが反映されて表示されました
リアクトMARダウンのデモで使われてい
たリハイプハイライトを導入しますgit
HUBのリhipeハイライトのページを
見ますスクロールしてインストールの項目
に移動しますインストールのコマンドを
コピーしますカーソルに戻ってターミナル
を開きますコマンドを貼り付けて実行し
ますターミナルは閉じておきますGHUB
のページに戻りますスクロールして
インポート文をコピーしますカーソルに
戻ってコピーしたインポート文を貼り付け
ますマークダウンタグにリププラグインズ
かかこリハイプハイライトマークダウン
タグにリププラグインズプロパティを追加
してリプハイライトを渡しますブラウザで
確認しますまだ色が反映されていません
これはhighlight.JSから
CSSファイルをインポートする必要が
あるからですhighlight.JSの
ドキュメントを見ます配色のCSSを直接
インポートできるのでインポート文を
コピーしますカーソルに戻りますコピーし
たインポート文を貼り付けますブラウザで
確認します反映されてコードに配色されて
いますしかし背景が白と黒でチグハグに
なってしまっています気持ち悪いので白1
色に変更しますデベロッパーツールを開い
て要素を見ます要素を開いていくとコード
の部分はプレタグの中にコードタグがあっ
てその中にコードの内容がありますという
ことはプレタグにクラスネームを追加して
BGホワイトを指定することで背景色を
白色にできますではどのようにプレタグに
クラスネームを追加することができるかと
言うとマークダウンにコンポーネント
プロパティを追加してその中に設定を追加
します少し特殊な書き方ですが追加してみ
ましょうリアクトマークダウンのgit
HUBのページを開きますアンッB
コンポーネントを見るとコンポーネント
プロパティの使い方が載っています使い方
に載っているコードを利用しましょう
コードをコピーしますカーソルを開きます
コンポーネントプロパティを追加して波
括弧の中に波括弧を追加しますその中に
コピーしたコードを貼り付けますMをプレ
に変更しますリターンの後のiをプレに
変更してスタイルを削除します代わりに
クラスネームプロパティを追加してBG
ホワイトを指定しますブラウザで確認し
ますブラウザを更新すると背景色が白色に
変更されましたまたデベロッパーツールを
見るとプレタグにクラスが追加されてBG
ホワイトが指定されていますもし分から
なかった方は動画を戻してみて見比べてみ
てください最後にリマークgfmを導入し
ますリマーgfmのgitHUBのページ
を開きますスクロールしてインストールの
項目に移動しますインストールする
コマンドをコピーしますカーソルに戻って
ターミナルを開きますコピーしたコマンド
を貼り付けて実行します終わったら
ターミナルは閉じておきますマークダウン
タグにリマークプラグインズかかこリマー
gfm候補が表示されるので1番上を選択
してインポートしますブラウザで確認し
ますブラウザを更新してみますリンクが
反映されませんすいませんURLを間違え
ていましたカーソルに戻ってMD.TSを
開きますURLを修正しますブラウザで
確認しますリンクが反映されていますね
またデベロッパーツールを見るとPタグの
URLにAタグが追加されていますもし
分からなかった方は動画を戻してみて
見比べてみてくださいリンクに色をつけて
みますカーソルに戻ってMarkdown
preview.TSXを開きますプレ
タブの設定をコピペします2つのプレオA
に変更してBGホワイトをテキストブルー
500に変更しますブラウザで確認します
リンクに色がついていますねまた
デベロッパーツールを見るとAタグに
クラスが追加されてテキストブルー500
が指定されていますもし分からなかった方
は動画を戻してみて見比べてみてください
マークダウンプレビューコンポーネントに
引数を追加します変更前のデモを表示する
デブタグは削除しますマークダウンタグの
丸かこの中に波かこコンテンツコロン波
かこコンテンツコロンスリングマーク
ダウンタグの間の引数MDを削除して
コンテンツに変更しますPage.TSX
を開きますマークダウンプレビュータグに
コンテンツプロパティを追加して引数MD
を指定しますついでに見やすくします
メインタグのクラスネームにMAXwxl
mxoを指定しますブラウザで確認します
問題なく表示されていますねまた最大幅を
576Pixelに制限して中央に配置し
しました左端にも余白ができて見やすく
なったと思います今回はマークダウンを
HTMLに変換するコンポーネントを作成
しましたがいかがだったでしょうか実は
最初MDXを使って記事を管理するブログ
を作成していましたしかしエランタイムが
原因でクラウドフレアページズにデプロイ
できませんでしたそこで今回のやり方を
使ってデータベースで記事を管理する
ブログを作成することにしましたその中で
今回使ったことを皆さんと共有できればと
思い動画にしましたマイナーな話題なので
皆さんの多くに役立つかどうか分かりませ
んが私の裏の目的はクラウドフレアに
デプロイできるアプリやAPIを作成する
ことですクラウドフレアは無料で使える
機能が多く商用利用もできますクラウド
フレアで使える技術と使えない技術が
分かれば迷うことなく試すことができます
また無料で試すことができれば皆さんが
運用するハードルがぐと下がります私は皆
さんと一緒にいろんなアプリを作成して
サービスを公開したいと思っています私も
道半ばですが皆さんもお付き合い
いただければ幸いですいかがだった
でしょうかもし分かりやすかったよって方
は高評価をお願いしますまた分からなかっ
たよって方はコメントからご意見をお願い
します頂いたご意見は今後の動画の改善の
ために参考にいたします是非チャンネル
登録していただいて私と一緒に学んでいき
ましょうそれでは次の動画でお会いし
ましょう
Посмотреть больше похожих видео
Learn NEXT.JS 14 🔥 Build a Static Markdown Blog Site
ChatTTS - Best Quality Open Source Text-to-Speech Model? | Tutorial + Ollama Setup
Next.js 14 Tutorial - 2 - Hello World
How to use PowerPoint Live during a Teams meeting | Microsoft
Building Microsoft Graph Toolkit apps with React
Laravel Routing basics | Laravel 10 tutorial #4
5.0 / 5 (0 votes)