s平面の左側

左側なので安定してます

勉強会「Rails 5.1 + Webpacker + Vue.js 入門」にいってきた

イベント概要

connpass.com

普段触っているのは Rails ではないものの webpack + Vue.js の事例が知りたかったのと、「お話する内容」の

主に jQuery ベースのコードを Vue.js を用いて書き換えたい人向けにお話します。

に惹かれて参加。

所感

具体的なソースコードがあるのがとても良い。

github.com

ver0 というタグが jQuery ベースの状態で、そこから jQuery を抜いていく。

しかしそれを事前情報で知れなかったのと、会場で wifi が利用できなかったので、その場で手を動かしながらついていくのは断念。事前に情報として知らせてほしかった。

Rails や yarn が動く環境が必要だった)

内容としては感覚的に 6 割 Rails 固有の話、残りが Vue.js の話という感じで得たいと思った情報はそれほど得られなかった。(ある程度覚悟の上だったので、不満はない)

逆に言えば webpacker(Rails 用に webpack を使うための gem)の設定など、Rails に特化させて必要な手間をできるだけ省こうとするのは Rails の思想らしいといえばらしいと思った。

得た情報

  • webpack ではエントリーとなる js ファイルが重要
  • vue.esm の esm は ES modules の略(ES で書く際にはこちらを使う)
  • webpack-dev-server: 自動ビルド・シンタックスエラーを検出してくれる
  • Turbolinks: Rails のページ表示高速化のための何か(Vue.js とは相性が悪いということで今回は外す手順を踏んでいた)
  • vue-data-scooper: form に予め入っている値で Vue.js の data プロパティを初期化してくれるパッケージ(今回の勉強会主催者である黒田さんが作ったもの。yarn で入れられる)
  • Vue.js の v-cloak ディレクティブを使うと Vue インスタンスコンパイルが完了するまで画面に表示しない、とかができる
  • web アプリケーションフレームワークが提供するレンダリングエンジンと、 Vue.js のレンダリングをどう使い分ける?→インタラクティブなことをやるところは Vue.js のものを使って、残りは web アプリケーションフレームワークが提供するレンダリングでいいのでは(すべてを Vue.js に置き換えるのはけっこうたいへん)

余談

上記ソースコードsfc ブランチはレンダリングをすべて Vue.js で行おうとしているバージョンになっている。

バリデーションとかが大変そう。