FrontEnd

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

投稿日:

はじめに

久しぶりのVue.jsに関する記事です。
今回は、以前記載させていただきました、JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくるを書き換えたいと思います。

今までの記事はこちらになります。

環境構築

JSFiddleを使用します。
設定方法などはVue.js入門その1〜基本文法〜をご参照ください。

  • Vue.js: 2.2.1
  • marked (cdn.js): 0.3.6
  • lodash.js (cdn.js): 4.17.4

marked.jsの設定

CDNのロード

JSFiddleの左側、External ResourcesでCDNの設定をできます。

下記のリンクより、marked.jsのリンクを取得し、設定します。
(特に修正するわけではないので、min.jsのリンクを取得しました。)
marked

動作確認

HTMLの記述欄に記載して動くか確認してみます。

下図のように表示されるかと思います。

マークダウンを変換して表示

雛形の作成

変換の部分は後回しにし、画面表示とVueインスタンスだけ作成します。
簡易的にするため、formタグでは囲っていません。

HTML

v-modelを設定しておき、Vueインスタンスのinputプロパティと双方向バインディングをさせます。

JS

HTMLに変換して返す

Vueインスタンスに、マークダウンからHTMLに変換して返す処理を追加します。
このとき、getterとしても機能させてくれるcomputedを使用します。

やっていることはinputプロパティをmarkedメソッドで変換して返しているだけです。
これを変換後の文章を表示するエリアに埋め込みます。

innerHTMLをしてくれるv-html

HTMLを書き換えるときは、v-htmlが便利です。
これで指定したプロパティ、もしくはメソッドで書き換えてくれます。

ここまでで、変換はうまくいっているかと思います。

ただ、公式ドキュメントにも下記の通り記載がありますが、ユーザーからの入力をそのまま表示させると危険そうです。

任意の HTML をあなたの Web サイト上で動的に描画することは、XSS攻撃を招くため大変危険です。v-htmlは信頼済みコンテンツのみに利用し、絶対にユーザの提供するコンテンツには使わないでください。

サニタイズする

markedメソッドは第二引数でオプションの設定ができます。

https://github.com/chjj/marked

例えば、サニタイズしない場合は、下記のようにスクリプトを実行できます。

ここで、第二引数にsanitizeオプションを入れておきます。

タグをそのままエスケープしてくれるので、ひとまず安心です。

変換をまとめて行う

debounceを利用して、一定時間の間に行われた処理をまとめて実施したいと思います。
Vue.jsの1系ではv-modeldebounce属性があったようですが、2系で削除されました。
v-modelのdebounce削除

ドキュメントを読むとlodash.jsが勧められていたので、そちらを使用したいと思います。
lodash.jsはJavaScriptのユーティリティライブラリで、debounce以外にも便利なメソッドがたくさんあるようです。
Lodash

今回はまたExternal Resourcesで読み込もうと思いますので、CDN版を利用します。
lodash.js

HTMLの書き換え

値が変わるたびに、debounceのメソッドを呼びたいと思いますので、v-modelはやめて、v-bindv-onを使用します。

v-bindでは、textareaの値とinputプロパティを結びつけます。
v-onは特定のイベントが起きたときにメソッドを呼びます。
v-on:inputで、textareaの値が変化したら、関数を呼ぶようにします。
イベントリファレンス -input-
(関数はまだ実装していませんが、先に書いておきます。)

また、v-bindv-onにはそれぞれ省略記法があるので、そちらで書き換えてみます。

updateValueメソッドの追加

lodash.js_.debounceを利用して、プロパティの変更をまとめて実施するようにします。
_.debounceの引数はそれぞれ下記のようになります。

  • 対象の処理(関数)
  • 時間(ミリ秒)

今回は0.5秒で変更するようにしました。
(主観ですが、1秒だとけっこう遅く感じます。)

0.5秒間隔でeventObjectから値を取得し、inputプロパティにセットします。

これで、処理がまとめて実施されるようになったのではないでしょうか?

さいごに

サンプルは下記になります。
CSSの方はお好みでお願いします。

page_footer_300rect




page_footer_300rect




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

[Rails + Materialize] DateTimePickerがなかったので…

1 はじめに2 前提条件2.1 ビューのイメージ3 モデルにゲッターとセッターを追加4 入力フォームに追加4.1 JSファイルにて使用宣言4.2 HTML4.3 コントローラーのストロングパラメータを ...

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

フォロー

follow us in feedly

AppLink

page_side_300rect

2017年9月
« 8月 10月 »
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

目標を達成したい方を応援する、TODOアプリもリリースしております。 下記のアイコンから無料でダウンロードできます。

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。 下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。