railsのviewの中でVue.jsを使ってマークダウンプレビューできるようにする

2017年4月17日

みなさんこんにちは、個別指導塾コミット塾長、AWESOMEの開発担当の船津です。

最近塾で使うアプリをまたrailsで作りはじめました。
流行りものが好きなのでVue.jsを使ってアプリを作ることにしました。

今回はデータバインディングを利用して、フォームの入力値をマークダウンプレビューできるようにしてみましょう。

先に結果を載せておきます。

githubはこちら

インストールと下準備

使用するバージョンは5.1.0 rcです。

いきなりwebpackオプションでvueをセットアップします。
rails new --webpack=vue

適当な入力フォームとデータを作りたいのでscaffoldします
rails g scaffold question title:string text:text
rails db:migrate

Webpackの設定がしんどいので以下のgemをdevelopment環境に追加します。

Procfileを作成して以下のように記述します

Guardfileを作成して以下のように記述します。

追加したらbundle install

ここまでできていたらforeman startでサーバーが3001番ポートで立ち上がります。

ルートを設定しておきましょう

ついでにテンプレートエンジンをslimにしましょう。以下のgemを追加してからbundle installしてください

コマンドラインで以下のコマンドを叩くとviewの中のファイルがslimに置き換わります。

注意点

Turbolinksが動作していると正常にVue.jsが動作しないので、切っておきましょう。解決策があれば教えてください。

Vue.jsを使う

ここまででvueを使う準備はできているので、早速使ってみましょう。
今回は新規作成時、または編集時にマークダウンでプレビューしたいので_form.html.slimをいじります。
またpack配下のファイルは簡単のために、hello_vue.jsをいじります。

マークダウン記法のライブラリ導入

yarn add markedでライブラリを追加した後に
hello_vue.jsを以下のように編集します。
– 以下のサイトを参考にしました。

データバインディングを利用する

_form.html.slimを以下のように編集します。
– questionのデータはjsの変数として下段で出力されています。
hello_vue.jsはjavascript_pack_tagで出力されています。

Vueとのデータやり取りは直接railsからの出力をjsの変数として出力しています。
複雑なやり取りをするのであれば、rails側にもっとAPIっぽい挙動をさせた方が良いかもしれないですね。

結果

ここまでできていると、編集画面が以下のようになります。

しっかりプレビューと保存ができていますね。

おわり

いかがでしょうか。
rails5.1からこんな感じに標準機能で気軽にvueやreactを使った開発ができるようになっています。どんどん使って遊んでおもしろいものを作っていきましょう。

Instagram Feed

Load More

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →