React: マークダウンの複数コメントをHTMLに変換してリストにする例

本稿では、Reactで簡単なリストをつくってみます。コンポーネントはクラスで定め、複数データをリストにするというサンプルです。また、gumi Inc. Advent Calendar 2018の12月2日「ReactのdangerouslySetInnerHTML使ってみた」を受けて、マークダウンのテキストをライブラリで変換してページに差し込んでみます。

See the Pen React: Formatting text with markdown by Fumio Nonaka (@FumioNonaka) on CodePen.

create-react-appでReactのひな形アプリケーションをつくる

まず、Reactアプリケーションのジェネレータcreate-react-appで、my-appという名前のひな形アプリケーションをつくります。create-react-appのインストールやひな形のつくりかたについては、「React: Visual Studio Codeで開発環境を整える」をお読みください。アプリケーション名のフォルダがつくられ、依存関係を含めた必要なファイルがつぎのように納められます。

コメントリストをつくる

ひな形のsrc/App.jsをつぎのように書き替えましょう。3つのコンポーネントをクラスで定めています。いずれのクラスも、備えているのはrender()メソッドだけです。メソッドの戻り値が、HTMLページに差し込まれるテンプレートになります。テンプレートの要素に属性のかたちで与えた値を取り出すのがプロパティpropsです。各コンポーネントのコードは少ないので、モジュール分けせずひとつのJavaScript(JS)ファイルとします。

import React, { Component } from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="comment-box">
                <h1>世界の金言</h1>
                <CommentList />
            </div>
        );
    }
}
class CommentList extends Component {
    render() {
        return (
            <div>
                <Comment author="ヘンリー・キッシンジャー">チャンスは__貯金__できない。</Comment>
                <Comment author="マーク・トウェイン">禁煙なんてたやすい。私は*何千回*もやった。</Comment>
            </div>
        );
    }
}
class Comment extends Component {
    render() {
        return (
            <div>
                <h2>
                {this.props.author}
                </h2>
                {this.props.children}
            </div>
        );
    }
}
export default App;

ブラウザでアプリケーションのページを開くと、テンプレートにしたがって要素の構造がつくられ、コメントのリストとして表示されます。

マークダウンのライブラリを使う

コメントのテキストにはアスタリスク(*)やアンダースコア(_)が入っています。これらをマークダウンで表示しようということです。ライブラリとしてはremarkableを使うことにします。README.mdにしたがって、npmでインストールしてください。

$ npm install remarkable --save

Remarkable()コンストラクタでつくったインスタンスにrender()メソッドでマークダウンテキストを渡せば、HTMLのフォーマットに変換されたテキストが返されます。コンポーネント(Comment)をつぎのように書き替えましょう。

import Remarkable from 'remarkable';

class Comment extends Component {
    markDown = new Remarkable();
    render() {
        return (
            <div>

                <span>
                {this.markDown.render(this.props.children.toString())}
                </span>
            </div>
        );
    }
}

ただし、このままではタグがテキストとして示されてしまいます。

dangerouslySetInnerHTMLプロパティによりHTMLのコードを差し込む

生のHTMLコードが差し込めてしまうと、「クロスサイトスクリプティング」(XSS)による攻撃を受けるかもしれません(「クロスサイトスクリプティング対策 ホンキのキホン」参照)。そのため、ReactはHTMLのタグは、そのままでは加えられないようにしたのです。

テキストをHTMLとして差し込むためには、dangerouslySetInnerHTMLプロパティを用いなければなりません。与えるのはオブジェクトで、プロパティ__htmlにHTMLコードを値として定めます(「ReactのdangerouslySetInnerHTML使ってみた」参照)。コンポーネント(Comment)はさらにつぎのように書き替えましょう。こうすれば、要素にはRemarkableのrender()メソッドから返されたマークダウンテキストが、HTMLとして描かれます。

class Comment extends Component {
    rawMarkup() {
        const markDown = new Remarkable();
        const rawMarkup = markDown.render(this.props.children.toString());
        return { __html: rawMarkup };
    }
    render() {
        return (
            <div>

                <span dangerouslySetInnerHTML={this.rawMarkup()} />
            </div>
        );
    }
}

配列データからテキストを取り出して差し込む

コメントとして表示するデータは、つぎのように配列にしてアプリケーション(App)のプロパティ(data)にもたせましょう。それを子コンポーネント(CommentList)の属性に与えます。そのデータは、Array.map()メソッドで取り出され、さらにその子のコンポーネント(Comment)のテンプレートがつくられるという流れです。アプリケーションのページの見た目は変わりません。

class App extends Component {
    data = [
        {id: 1, author: "ヘンリー・キッシンジャー", text: "チャンスは__貯金__できない。"},
        {id: 2, author: "マーク・トウェイン", text: "禁煙なんてたやすい。私は*何千回*もやった。"}
    ];
    render() {
        return (
            <div className="comment-box">
                <h1>世界の金言</h1>
                <CommentList data={this.data} />
            </div>
        );
    }
}
class CommentList extends Component {
    render() {
        const commentNodes = this.props.data.map((comment) => {
            return (
                <Comment author={comment.author} key={comment.id}>
                {comment.text}
                </Comment>
            );
        });
        return (
            <div>
            {commentNodes}
            </div>
        );
    }
}

ここまで書き終えたsrc/App.jsのコードは、以下にまとめたとおりです。冒頭のCodePenのサンプルでも中身はお確かめいただけます。ただし、ライブラリの読み込み方とその参照の仕方が、create-react-appでつくったアプリケーションと少し違いますので、その点だけお気をつけください。

import React, { Component } from 'react';
import Remarkable from 'remarkable';
import './App.css';

class App extends Component {
    data = [
        {id: 1, author: "ヘンリー・キッシンジャー", text: "チャンスは__貯金__できない。"},
        {id: 2, author: "マーク・トウェイン", text: "禁煙なんてたやすい。私は*何千回*もやった。"}
    ];
    render() {
        return (
            <div className="comment-box">
                <h1>世界の金言</h1>
                <CommentList data={this.data} />
            </div>
        );
    }
}
class CommentList extends Component {
    render() {
        const commentNodes = this.props.data.map((comment) => {
            return (
                <Comment author={comment.author} key={comment.id}>
                {comment.text}
                </Comment>
            );
        });
        return (
            <div>
            {commentNodes}
            </div>
        );
    }
}
class Comment extends Component {
    rawMarkup() {
        const markDown = new Remarkable();
        const rawMarkup = markDown.render(this.props.children.toString());
        return { __html: rawMarkup };
    }
    render() {
        return (
            <div>
                <h2>
                {this.props.author}
                </h2>
                <span dangerouslySetInnerHTML={this.rawMarkup()} />
            </div>
        );
    }
}
export default App;