Next.js + Material UI でコンテンツ部分にマークダウンを使うことを考えます。
メタデータ（Front-matter）を含むやつは今回は対象外です。
経緯
GLSLサンプルのように形式が決まった複数の内容を書くときに、コンテンツ部分を分離するためにマークダウンを使っていました。
「ドレミだけで作る音ツール」を作ったときに説明文の説明だけでごちゃついたので、数行以上の文章は全部マークダウンにしたくなりました。
マークダウンによる置き換え
今回使うライブラリは react-markdown です。
元の JSX の説明文章を見てみます。
Material-UI を使っているのでこんな感じになっています。
HTML と独自コンポーネントが混ざり合って違和感があるし長い。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<Box mb={2}> <Typography>ドレミのようにカタカナ入力で音楽を作れます。</Typography> <Typography> 音楽知識はないけどなんとなくメロディーを作りたいときに。 </Typography> <br /> <ul> <li> <Typography>音楽は再生後にダウンロード可能です</Typography> </li> <li> <Typography> 作業中のパラメータをリンクにして保存、共有できます </Typography> </li> <li> <Typography> 楽譜は直接入力の他、最下部のボタンでも追加できます </Typography> </li> <li> <Typography> 「ドーレ-ミーファ-」のように伸ばし棒で倍の長さの音符になります </Typography> </li> <li> <Typography> 「ド＃レ#ミ♯ファｂソbラ♭」のようにシャープ、フラット記号を使えます </Typography> </li> <li> <Typography> 「ド８レ8ミ８ファ4ソ１６ラ32シ２ド１」のように数字を付けると全音符から３２分音符まで変更できます </Typography> </li> </ul> <br /> <Typography> オクターブ「8va, 8vb, 15ma, 15mb」などはどうするか考え中...。 </Typography> </Box> |
文書を全部マークダウンにもっていって、require で文字列として読み込みます※。
コンテンツ部分が非常に見やすくなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import Markdown from "react-markdown"; ... <Box mb={2}> <Markdown source={require("./index.md").default}/> </Box> ----- index.md ----- ドレミのようにカタカナ入力で音楽を作れます。 音楽知識はないけどなんとなくメロディーを作りたいときに。 - 音楽は再生後にダウンロード可能です - 作業中のパラメータをリンクにして保存、共有できます - 楽譜は直接入力の他、最下部のボタンでも追加できます - 「ドーレ-ミーファ-」のように伸ばし棒で倍の長さの音符になります - 「ド＃レ#ミ ♯ ファｂソ b ラ ♭」のようにシャープ、フラット記号を使えます - 「ド８レ 8 ミ８ファ 4 ソ１６ラ 32 シ２ド１」のように数字を付けると全音符から３２分音符まで変更できます オクターブ「8va, 8vb, 15ma, 15mb」などはどうするか考え中...。 |
デフォルトだと普通の HTML として作られるので見た目がかわってしまうのでレンダラを設定して Material-UI 対応します。
具体的には <p> と <li> の中身を <Typography> に変更します。
複数行の改行も Markdown のみだと出来ないので escapeHtml をオフにして <br> タグを使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<Box mb={2}> <Markdown source={require("./index.md").default} escapeHtml={false} renderers={{ paragraph: Typography, listItem: ({ children }) => ( <li> <Typography>{children}</Typography> </li> ), }} /> </Box> ----- index.md ----- ドレミのようにカタカナ入力で音楽を作れます。 音楽知識はないけどなんとなくメロディーを作りたいときに。 <br> - 音楽は再生後にダウンロード可能です - 作業中のパラメータをリンクにして保存、共有できます - 楽譜は直接入力の他、最下部のボタンでも追加できます - 「ドーレ-ミーファ-」のように伸ばし棒で倍の長さの音符になります - 「ド＃レ#ミ ♯ ファｂソ b ラ ♭」のようにシャープ、フラット記号を使えます - 「ド８レ 8 ミ８ファ 4 ソ１６ラ 32 シ２ド１」のように数字を付けると全音符から３２分音符まで変更できます <br> オクターブ「8va, 8vb, 15ma, 15mb」などはどうするか考え中...。 |
これで元と同じ表示になります。
結局コード量自体は大きく変わりませんが管理のしやすさが大幅に上がります。
注釈※
今回みたいに直接読み込むには webpack で md ファイルに対して raw-loader を使う設定にする必要があります。
メタデータ解析付きの gray-matter を使ったサンプルですが fs.readFileSync を使った例のようにするのもいいかと思います（@blog-starter）。