Rails5.2 + Docker環境にVue.js (Webpacker) を導入する

rails docker vuejs

既存のRails + Docker環境にVue.jsを導入しましたので、その手順をメモしておきます。Rails 5.1からはwebpackerを使用することで、Vue.jsやReactなどのモダンなJSフレームワークを組み込むことができるようになりましたので、そちらを使っていきます。

Dockerfileとdocker-compose.ymlの設定

Rubyコンテナを立ち上げる際に必要となるライブラリ(build-essential, libpq-dev, yarn, Node.js)をインストールします。

Dockerfile

続いてdocker-compose.ymlです。

docker-compose.yml

コンテナの起動

webpackerの導入

Gemfile に以下を追加し、bundle します。

Gemfile

これでrails webpackerコマンドが使えるようになりました。

これで以下のWebPack関連ファイルが生成されました。
・.babelrc (babel設定ファイル)
・.postcssrc.yml (PostCSS設定ファイル)
・app/javascript/packs/application.js (エントリーポイントファイル)
・bin/webpack (webpackのビルドスクリプト)
・bin/webpack-dev-server (ビルドサーバーの起動スクリプト)
・config/webpack/development.js (開発環境設定ファイル)
・config/webpack/environment.js (共通環境設定ファイル)
・config/webpack/production.js (プロダクション環境設定ファイル)
・config/webpack/test.js (テスト環境設定ファイル)
・config/webpacker.yml (webpacker設定ファイル)

Vue.jsの導入

このコマンドでは以下のVue.js関連のファイルが生成されました。
・app/javascript/app.vue (Vueコンポーネントファイル)
・app/javascript/packs/hello_vue.js (エントリーポイントファイル)
・config/webpack/loaders/vue.js (Vue.jsの環境設定ファイル)

Vue.jsファイルのビルド

それでは、Vue.js関連のコンポーネントをJavascriptにコンパイルするため、bin/webpackコマンド実行しビルドします。

ここで「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」のエラーが出た場合の対象法はこちら。

viewに次の記述をすると、app/javascript/pack以下にあるhello_vueファイルが呼び出されます!

そして railsを起動して、”Hello Vue”が表示されたら成功です!

webpack-dev-server

ただ、今のままだとVue.js用のJSを変更するたびに、毎回bin/webpackを実行してコンパイルしなければいけません。ですので、JSを変更したらすぐに変更が反映されるように、devサーバーを設定しておきます。
まず、ルートディレクトリにProcfile.devというファイルを以下のように作成します。

Procfile.dev

次に、binディレクトリの下にserverという名前のファイルを以下のように作成します。

bin/server

また、serverではforemanを使うので、Gemfileに追加します。foremanはProcfile を読み込み、複数のプロセスを管理できるツールで、rails serverとwebpack-dev-serverを一度に起動できます。

Gemfile

config/environments/development.rbに以下を追加します。

config/environments/development.rb

それらに合わせてdocker-compose.ymlを修正します。

docker-compose.yml

これでjavascriptの変更が、即座にブラウザに反映されるようになりました!

以上です!

【Vue.js】ディレクティブをいろいろ使ってみる

Vue.jsのディレクティブ(Directive)を学習を兼ねて jsfiddle でいろいろと使ってみました!よろしければ、動作させてみてください!

v-model

インプットデータをバインディングするディレクティブです。入力ボックスのデータをリアルタイムで同期できます。

次はtextareaで複数行入力する場合です。

checkboxの場合です。

SVGのデータバインディング

circleタグにおいて、中心からの半径を定義してる「r」の値を、DOM操作をしています。スライダーを動かすと”radius”の値と同期してcircleが変化します。

v-on

v-onディレクティブでは、DOMイベントを受け取ります。次の例ではクリックイベントでメソッドが呼ばれて、アラートが出ます。
v-on:clickは@clickに省略できます。

v-for, v-if

v-on:changeで _set_animal メソッドを呼んで、一つ目のセレクトに対して、二つ目のセレクトメニューの中身が変わります。v-forでは配列のインデックスを取得して、v-if=”selected_types.length > 0″のところで条件分岐しています。

v-transition

v-transitionディレクティブは、v-ifやv-showと組み合わせて状態を変化させます。vue.jsのトランジションには「enter」と「leave」の2つのフェーズが有り、DOM追加時にv-enter、削除時にv-leaveのトランジションクラスが付与されます。

次の例で使用されているv-enter-activeとv-leave-activeは、トランジション全体となり、追加される時のフェーズはv-enterからv-enter-to、削除される時はv-leaveからv-leave-toのトランジションクラスが付与されます。
同じ要素をvi-ifでグループ化する場合、keyを分ける必要があります。

参考にさせていただいたのはこちらの書籍です。


基礎から学ぶ Vue.js

bin/webpack-dev-serverコマンドで「Cannot destructure property `compile` of ‘undefined’ or ‘null’」となる対処

Rails + Docker + Vue.jsの環境構築を行なっている時に、bin/webpack-dev-serverコマンドを実行すると、「TypeError: Cannot destructure property compile of ‘undefined’ or ‘null’.」とエラーが出たのでその対処です。

実行環境はこちらです

エラー内容

解決方法

こちらのissuesにあがっていました。https://github.com/rails/webpacker/issues/1303
webpack-dev-serverのバージョンをダウングレードすればよいとのことで、yarn upgrade webpack-dev-server@^2.11.1を実行してみました。

再度、行うと…

これで無事、実行できました!!

Rails 5.2 + docker + webpackerでVue.jsの導入時に「Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」が起きた時の対処

Rails + Docker + Vue.jsの環境構築を行なう際に、JSのコンパイルにbin/webpackを実行するとエラーが出て、手が止まってしまったので、その対処についてです。

環境はこちらです

エラー内容

bin/webpackコマンドを入力すると、「Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module ‘postcss-preset-env’」と出ました。

解決方法

yarn add で postcss-preset-env というプラグインを入れてやれとのことです。ちなみに、Yarnとは Facebook、Google、Exponent、Tildeによって開発されたJavaScriptパッケージマネージャーです。

yarn add
https://yarnpkg.com/en/docs/cli/add
PostCSS Preset Env
https://github.com/csstools/postcss-preset-env

これでコマンドが通るようになりました。

やったね!!😊