React.js入門

MarkdownからHTMLに変換するメソッドを定める

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
MarkdownテキストからHTMLのオブジェクトに変換するメソッドを定めるとセキュリティが増します。
講師:
05:35

字幕

このレッスンではMarkdown のテキストをHTML に変換するという処理をメソッドとして定めてみたいと思います。現在、開いているHTML ドキュメントなんですけどもMarkdown をHTML に変換するという処理はJavaScript ライブラリのremarkable を使っています。そして、その中で script の部分は外部 JavaScript ファイルにしてあるんですけどもその中で、この2つのコンポーネントがMarkdown のテキストを持っています。ここです。__ (ダブルアンダースコア)で太字になります。_ の代わりに * (アスタリスク)を使っても良いのですけども1つで囲むと斜体(イタリック)になります。これはコンポーネントのComment という中で定義されていますのでこのコンポーネント Comment の中にMarkdown を HTML に変換するという処理が書かれていますRemarkable のオブジェクトをnew で作りそのオブジェクトに対してrender メソッドを呼び出します。引数には Markdown のテキストを渡します。Markdown のテキストはコンポーネント Comment の中の子どもということなのでコンポーネント Comment の中のthis.props でコンポーネントにアクセスすることができますのでその中の children ということでテキストを取り出しています。 これが HTML に変換されたテキストなんですけれどもこれをそのまま設定することはReact が許していません。セキュリティ上の問題です。これを設定するにはまず、プロパティdangerouslySetInnerHTML に設定しなければいけません。しかも、値はテキストのままではなくオブジェクトです。そして、オブジェクトはプロパティ名が __html と決まっていてその値としてテキストを設定する。これで初めて HTML のテキストがHTML として解釈されて表示されるということになります。確認しましょう。「ファイル」>「ブラウザーでプレビュー」Firefox で見てみます。「貯金」の部分が太字になっています。「何千回」はイタリックになっていますのでMarkdown が HTML に変換されてきちんと表示されています。動作としてはこれで良いんですけれどもセキュリティで見た場合にはちょっと危うい所があります。というのは、React はわざわざ2つのステップを用意しているわけです。まず、プロパティがdangerouslySetInnerHTML2つ目は、渡すのがテキストのままではなくてオブジェクトで渡しプロパティは __html というふうに決めてあるわけです。 それを、この1行の中でやってしまうというのはちょっと手抜きです。ちゃんと、この2つを分けた方が良いです。ですから dangerouslySetInnerHTML に設定するのは良いのですけれどこのオブジェクトを作るというのは別のかたちで具体的には、メソッドで作るというふうにした方が良いでしょう。ということで、この Comment のコンポーネントにメソッドを1つ追加します。rawMarkup というメソッド名にしましょう。そして : (コロン)で function(){ }メソッドが2つ、プロパティのかたちで設定されていますので間は , (カンマ)で区切ることになります。この中に処理を加えるのですけれどもRemarkable のオブジェクトを作ってrender メソッドを呼び出すのはこれを、このまま持って行ってしまえば良いですよね。ちょっとズレました。そして、オブジェクトを作るというところもここに入れるわけです。そして、そのオブジェクトを返す return ということですからここに return として書き込んでしまったこのオブジェクトはこちらに持っていくということになります。そして、このdangerouslySetInnerHTML の中ではこのコンポーネントに定義されたrawMarkup というメソッドを呼び出します。 ここで直接、オブジェクトを作ってしまうのではないのです。メソッドを呼び出してそのメソッドがオブジェクトを作って返してくれる。こういうかたちにすればちゃんとステップが2つに分かれいわば二重カギです。安全性が増すということになります。保存しましょう。HTML ドキュメントに切り替えてブラウザーでプレビューします。もちろん、動作は変わりません。太字になっています。斜体になっています。問題なく動いているということです。このレッスンではRemarkable を使ってMarkdown テキストをhtml に変換するという処理をメソッドとして分けました。こちらがそうです。処理のステップは変わりません。Remarkable のオブジェクトを作りrender メソッドにMarkdown のテキストを渡してそして、オブジェクトを作って返す。この様にしたのは、セキュリティ上のステップが2つあるわけですがそれをプロパティとメソッドにきちんと分けて安全性を増したということです。

React.js入門

React.jsはFacebookが開発したJavaScriptライブラリです。このコースではReact.jsで定めた要素をHTMLドキュメントに差し込むことから始まり、JSONファイルから複数のデータを読み込んでリストを作ったり、サーバーとデータをやり取りするなど段階を踏みながらひとつのWebアプリを作りあげます。

2時間21分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年09月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。