「React入門 01: コンポーネントを組み立てる」(以下「React入門 01」)では、簡単なコンポーネントを組み合わせて、シンプルなSPAのページをつくりました。今回は、Reactで差し込む要素のテキストを、Markdownで書いてみます。MarkdownのテキストをHTMLの記述に変えるために使うのは、JavaScriptライブラリMarkedです。また、Reactで生のHTMLコードを差し込む場合の特別な仕組みについてもご説明します。
Markdown記法とMarkedのインストール
「Markdown」は、テキストの書式を定める簡易な記法です。HTMLコードよりも簡単な書き方で、文字や段落の表記が整えられます。JavaScriptライブラリMarkedは、npmでReactアプリケーションのディレクトリにつぎのようにインストールします。
npm install marked --save
marked()関数でMarkdownをHTMLの記述に変える
「React入門 01」で書いたJavaScriptコードに手を加えてゆきましょう。まず、src/components/CommentList.jsのテキストにつぎのようにMarkdown記法を加えます。*(アスタリスク)と_(アンダースコア)は同じ働きです。それを確かめるために、あえて両方用いました。記号ひとつで文字を挟めば強調・斜体(<em>)、ふたつなら強い重要性・太字(<strong>)になります。
const CommentList = () => {
return (
<div className="CommentList">
<Comment author="ヘンリー・キッシンジャー">
チャンスは__貯金__できない。
</Comment>
<Comment author="マーク・トウェイン">
禁煙なんてたやすい。私は*何千回*もやった。
</Comment>
</div>
);
};
テキストは子コンポーネント(src/components/Comment.js)が受け取りますので、MarkdownテキストをHTMLの記述に変換するコードは、項目のコンポーネント(Comment)に書き加えます。Markedライブラリからimportするのは関数marked()です。引数に渡したMarkdownのテキストをHTMLの記述にして返します。なお、引数は文字列でなければならないので、childrenで得た子要素はtoString()メソッドで文字列にしておきましょう。
ところが、JavaScriptコードをつぎのように書き替えて、marked()関数の戻り値をそのまま差し込むと、タグがテキストとして示されてしまいます(図001)。
import marked from 'marked';
const Comment = (props) => {
return (
<div className="Comment">
{marked(props.children.toString())}
</div>
);
};
図001■タグがテキストとして表示される
dangerouslySetInnerHTMLによりHTMLのコードを差し込む
生のHTMLコードが差し込めてしまうと、「クロスサイトスクリプティング」(XSS)による攻撃を受けるかもしれません(「クロスサイトスクリプティング対策 ホンキのキホン」参照)。そのため、ReactはHTMLのタグは、そのままでは加えられないようにしたのです。テキストをHTMLとして差し込むためには、dangerouslySetInnerHTMLプロパティを用いなければなりません(「ReactのdangerouslySetInnerHTML使ってみた」参照)。与えるのはオブジェクトで、プロパティ__htmlにHTMLコードを値として定めます。
もっとも、dangerouslySetInnerHTMLプロパティにオブジェクトを直に与えるのは安全といえません。別に定めたメソッド(rawMarkup())を呼び出し、その本体でHTMLコードをつくって返すのがよいでしょう。そこで、コンポーネント(Comment)はさらにつぎのように書き替えます。プロパティに与えるメソッドの呼び出しは、波かっこ{}でくくってください。こうすれば、コンポーネントの要素にはメソッドから返されたコードが、HTMLとして描かれるはずです(図002)。
const Comment = (props) => {
return (
<div className="Comment">
{/* {marked(props.children.toString())} */}
<span dangerouslySetInnerHTML={rawMarkup(props.children.toString())} />
</div>
);
};
const rawMarkup = (markup) => {
const rawMarkup = marked(markup);
return { __html: rawMarkup };
};
図002■MarkdownテキストがHTMLとして描かれる
書き改めたふたつのコンポーネントのJavaScriptコードは、それぞれ以下のコード001と002にまとめました。
コード001■src/components/CommentList.js
import React from 'react';
import Comment from './Comment';
const CommentList = () => {
return (
<div className="CommentList">
<Comment author="ヘンリー・キッシンジャー">
チャンスは__貯金__できない。
</Comment>
<Comment author="マーク・トウェイン">
禁煙なんてたやすい。私は*何千回*もやった。
</Comment>
</div>
);
};
export default CommentList;
コード002■src/components/Comment.js
import React from 'react';
import marked from 'marked';
const Comment = (props) => {
return (
<div className="Comment">
<h2 className="CommentAuthor">
{props.author}
</h2>
<span dangerouslySetInnerHTML={rawMarkup(props.children.toString())} />
</div>
);
};
const rawMarkup = (markup) => {
const rawMarkup = marked(markup);
return { __html: rawMarkup };
};
export default Comment;
Top comments (0)