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の方はお好みでお願いします。

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

【Vue.js】コンポーネントのテストコードをvue-test-utilsとJestで実装

1 はじめに2 セットアップ3 コンポーネントのテスト3.1 Shallow 描画3.2 基本的な例3.3 プロパティを渡す3.4 ユーザーの操作をシミュレーションする3.5 イベントを検証する3.6 ...

react-icon

react-intl (Format.js) を使ってi18n対応

1 はじめに2 react-intlとは?3 react-intlの導入4 使い方4.1 IntlProviderの実装4.2 メッセージ定義4.3 <Foramatted*>コンポーネン ...

Next.jsのMetadataとOGP (with AppRouter)

1 はじめに2 Metadataとは?3 動的に設定するには4 OGP画像4.1 カスタムフォント5 netlifyへデプロイ6 さいごに7 おすすめ書籍 はじめに 今回はNext.jsでApp Ro ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

フォロー

blog-page_side_responsive

2017年9月
 12
3456789
10111213141516
17181920212223
24252627282930

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。