15.4.2Reactで差し込む要素のテキストを、Markdownで書いてみます。JavaScriptライブラリremarkableを使えば、MarkdownのテキストをHTMLの記述に変えることができます。Reactで生のHTMLを差し込む場合のやり方についてもご説明します。Markdown記法とremarkableについて「Markdown」は、テキストの書式を定める簡易な記法です。HTMLコードよりも簡単な書き方で、文字や段落の表記が整えられます。remarkableはMarkdownのテキストをHTMLコードに変えるJavaScriptライブラリです。demo」で、Markdown記法とHTMLに変換されたテキストを見比べて、試しに入力してみることもできます。コンポーネントを組み立てる」で書いたサンプルに手を加えることにします。HTMLドキュメントには、つぎのように<script>要素でremarkableのライブラリを加えます。CDNから読み込みましたので、ダウンロードはしなくて構いません。コンポーネントを組み立てる」で外部JavaScriptファイルscript.jsに書いたコード003「新たにふたつ加えたコンポーネントのテキストとプロパティ値を示す」を書き替えてゆきます。テキストにつぎのようにMarkdown記法を加えます。「*」(アスタリスク)と「_」(アンダースコア)は同じ働きです。それを確かめるために、あえて両方用いました。記号ひとつで文字を挟めば斜体(<em>)、ふたつなら太字(<strong>)になります。author="ヘンリー・キッシンジャー">チャンスは__貯金__できない。author="マーク・トウェイン">禁煙なんてたやすい。私は*何千回*もやった。</Comment>);}});コンストラクタRemarkable()でつくったインスタンスに対してrender()メソッドを呼び出すと、引数に渡したMarkdownのテキストがHTMLの記述に変わります。引数は文字列でなければならないので、toString()メソッドを加えます。そこで、コンポーネント(Comment)を、つぎのように書き直しました。ところが、Remarkableのrender()メソッドの戻り値をそのまま差し込むと、タグがテキストとして示されてしまいます(図001)。ホンキのキホン」参照)。そのため、ReactはHTMLのタグは、そのままでは加えられないようにしたのです。テキストをHTMLとして差し込むためには、dangerouslySetInnerHTMLプロパティを用いなければなりません。innerHTML」参照)。dangerouslySetInnerHTMLプロパティにオブジェクトを直に与えるのは安全といえません。別に定めたメソッドを呼び出し、その本体でオブジェクトをつくって返すのがよいでしょう。そこで、コンポーネント(Comment)はさらにつぎのように書き替えます。すれば、要素にはRemarkableのrender()メソッドから返されたコードが、HTMLとして描かれます(図002)。書きあがったJavaScriptファイルの中身は、以下のコード001にまとめました。以下のサンプル001にサイトjsdo.itのコードを掲げています。author="ヘンリー・キッシンジャー">チャンスは__貯金__できない。author="マーク・トウェイン">禁煙なんてたやすい。私は*何千回*もやった。ライブラリのバージョン更新にともなう修正。末尾にReact入門シリーズのリンクを追加。