React.js入門

remarkableでMarkdown記法のテキストを表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
MarkdownテキストをremarkableでHTMLに変換して表示します。
講師:
07:45

字幕

このレッスンでは JavaScript ライブラリのremarkable を使ってMarkdown のテキストを HTML に変換して表示したいと思います。これが remarkable が公開されているGitHub のページなんですけどもここを捜すには remarkable そしてremarkable は幾つかのプラットフォームに提供されていますのでjavascript とキーワードを加えた上で検索をすれば上の方に出てくると思います。そして、デモが見られますのでこの demo のリンクをクリックしてここに入力をして実際に試してみることができます。例えば「チャンスは貯金できない。」とキンシンジャーの言葉らしいんですけどここにアンダースコアで囲んであげると斜体、イタリックになります。アンダースコアの代わりにアスタリスクを使っても構いません。やはりイタリックですね。そして2つ記号を加えると太字、Bold になるということです。さて、このライブラリなんですけどもダウンロードして使っても結構ですがCDN がありますので今回は cdnjs を使うことにします。そして、中を見る必要はないのでその場合には min、minify ですね。 小さくした方のライブラリを使った方がよいでしょう。コピーで、もう Tab ごとコピーしてしまいます。スクリプト要素としてコピーします。こちらが HTML ドキュメントですけどもコードはこの script.js に書いていてこちらにタブが見えていますけどもその上ですね。そこに改行してペーストします。そして保存ですね。これで remarkable を使う準備が整ったんですが勿論 remarkable を使ったコードを書いていません。現在この script.js には2件のメッセージ、コメントが書いてあってそれを表示するような形になっていますので確認してみましょう。「ブラウザーでプレビュー」>「Firefox」で確認します。そうすると、名前とコメントが2件ありますね。このコメントの部分にMarkdown の記法を使いたいと思います。JavaScript コードの方でまずはMarkdown の記法にしましょう。それでは、ここはアンダースコア2つで太字ですね。strong に変換されることになります。それから、次はここです。今度はイタリックにしますけれどもアスタリスクでも大丈夫ということを確認する為にこちらはアスタリスクを1個加えます。 そしてこのコメントのコンポーネントですからここですね。ここに、remarkable を使うコードを書き加えます。まずは remarkable のオブジェクトを作ります。変数名は markDown としましょう。そしてオブジェクトは new でRemarkable と。これで remarkable のオブジェクトができました。そして今度は HTML に変換した後ですね。rowMarkup という変数名にします。そしてこのオブジェクトに対してコピーを持ってきましてrender というメソッドです。よく出てくるメソッド名ですね。この中に変換したいものこれが本文ですからこれを持ってきてしまうと。そうしたら、HTML に変換されたものがこの rowMarkup に入っていますのでこちらをコピーして入れると。これで HTML に変換されたテキストが本文として表示されます。ファイルを保存しましょう。HTML ドキュメントに切り替えましてそして「ブラウザーでプレビュー」>「Firefox」です。HTML に変換されました。と言っても、タグがまんま出てしまっていますね。これはReact の仕様です。敢えてこうしてあります。 タグをタグとして解釈しないんですね。文字にしてしまうわけです。何故こうするかと言うともしタグを単純にタグとして解釈してしまうしかもこのコメントを例えばユーザーが入力して送ることができるといった場合にタグをまんま解釈してしまうとScript タグを入れる可能性がありますね。そうすると、悪意のある人がプログラムで攻撃をするという方法として使えるわけです。これをクロスサイトスクリプティングの攻撃と言うんですけどもそれを避けるために敢えてこのようにしてあります。ですからセキュリティ上のステップを踏まないとHTML として表示することができません。本文に表示したい時にはこの rowMarkup変数の中に HTML のテキストが入っているんですがまんまではダメです。どうするかと言うとまず、ここはタグにします。span タグにしましょう。そして、dangerously とSetInnerHTML と。長いですね。敢えて長くしてあります。セキュリティの問題ですからしかも結構物騒な変数名ですね。dangerouslySetInnerHTML「内部的な HTML をセットしようとしているけれど危ないよ」ということですね。 まさに危ないですからこのようにしてあります。そしてタグは閉じますけれどもまだもう1つ、セキュリティ上のステップがあります。文字まんまではダメです。ここにはオブジェクトを設定する必要があります。ですから、JavaScript でオブジェクトを意味する { } を付けます。そして、オブジェクトの中身はプロパティと値ですね。プロパティ名が決まっています。ダブルアンダースコアの html というプロパティこのプロパティに対してテキストを設定するというこのような形にしないと正しく HTML のコードをHTML として解釈してくれないということになります。では保存しましょう。HTML ドキュメントに切り替えましてブラウザーでプレビューです。これで Markdown が HTML に変換されて太字になっていますね。strong です。それから斜体になっています。em ですね。このように変換することができました。このレッスンでは JavaScript ライブラリのremarkable を使ってMarkdown のテキストをHTML に変換して表示しました。remarkable の使い方はまずオブジェクトを作りそしてそのオブジェクトに対してrender というメソッドを呼び出して引数には Markdown のテキストを渡します。 これは remarkable の使い方ですね。但し、React のセキュリティ上のステップがありましてこの文字はまずオブジェクトにするプロパティ名 __html に対してテキストを設定したオブジェクトをdangerouslySetInnerHTML という物騒なプロパティに設定してこれで初めて HTML として解釈されるということでした。

React.js入門

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

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

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

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

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