2018年12月12日に開催された【とらのあな主催】オタクが最新技術を追うライトニングトークイベントのライトニングトーク資料です。

1. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Rails環境に導入できる
最適なVue構成を探る
2018.12.12 オタクが最新技術を追うライトニングトークイベント
株式会社虎の穴 開発室
JUNE-JUNE

2. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
今回話すこと
1. 自己紹介
2. なぜRails環境に？
3. 導入準備
4. 導入パターンその1（htmlと完全API連携）
5. 導入パターンその2（コンポーネント）
6. 次やりたいこと
2

3. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 自己紹介
名：JUNE-JUNE
‣ 現在：N代目ファンティアマン
‣ 前職：スマフォアプリサーバーサイドエンジニア
＋プロジェクトリーダーみたいなことやってた
オタク
‣ えろげ（ランス大好き）
‣ フリーゲーム（いろいろやってます）
‣ アニメ（毎週10本程度）
3

4. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
はじめに
4

5. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Vue.jsって何？
5

6. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 Vue.jsって何？
‣ 人気急上昇中のJavascriptフレームワーク
‣ PHPの神フレームワークLaravelも採用
‣ DMMとかLINEとか任天堂とかが採用している
‣ 書き方がシンプル
‣ ドキュメントがめっっっっっちゃ充実
‣ 学習効率が良い
‣ デザイナーに優しい 6

7. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
なぜRails環境に？
7

8. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 なぜRails環境に？
某プロジェクトは
Rails × Angular.js
8

9. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 なぜRails環境に？
ぶっちゃけ改修が困難
やーい、
へっぽこプログラマー
9

10. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 なぜRails環境に？
必ずしもAngularが悪いわけではないが、
当時作られたコードが読みにくい。
↓
どうせなら可読性を高めた上で、
リニューアルしたい。
10

11. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
え、どうしてRailsを使い続けるのかって？
nodeで全部作っちゃえよって？
11

12. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 Railsを使い続ける理由
controllerやmodelに蓄積されたコードを、
別言語で書き直すのは非現実的。
直すなら一気にやるのではなく、
既存の処理を残したまま１画面ずつリリースしたい。
12

13. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 導入準備
頑張ってRailsを5.1以上にする
頑張ってWebpackerを導入する
Webpacker不要論は置いておいて・・・
13

14. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 いろいろやった
# Gemfileにwebpackerを追加した後に
$ bundle install --path vendor/bundler
# webpackerが使うからにゃーんをインストールだにゃーん
$ npm i -g yarn
# rails環境にvue環境を導入
$ rake webpacker:install
$ rake webpacker:install:vue
# .vueファイルを読み込めるように loaderをインストール
$ npm install vue-loader --save
# vue公認のAPI実行ライブラリのaxiosをインストール
$ npm install axios --save
# vueを含めたコンパイルコマンド
$ bin/webpack 14

15. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその1
（htmlと完全API連携）
誰でもわかるような構成（大事）
htmlにコンパイルされたVueライブラリと、
JSコードを読み込ませる
15

16. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその1
（htmlと完全API連携）
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
そもそもVue.jsは・・・
上記のようにCDNをhtml上で
読み込むだけでも使える。
これをwebpackerを使ったコンパイル環境で
同様のことをする場合はどうすればいいのか？
16

17. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその1
（htmlと完全API連携）
webpacker+vue導入時に
デフォルトで入っている
hello_vue.jsの構成を
参考にする。
javascript_pack_tagは
app/javascript/packs/*
内のJSファイルを読む。
17

18. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその1
（htmlと完全API連携）
こういった形で読み込みたいJSファイルを記載。
18

19. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 html（erb）ファイルのサンプル
19
ここ大事！

20. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 jsファイルのサンプル
20
ここ大事！

21. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
各社がVueを採用している理由となる機能。
コンポーネントも覚える必要が。
21

22. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
ちょっと待って
導入パターンその2
（コンポーネント）
22

23. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
コンポーネントってなに？
やーい、
へっぽこプログラマー
導入パターンその2
（コンポーネント）
23

24. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
コンポーネント化とは
「「「プログラムの部品を作ること」」」
HTML
CSS
Javascript
HTML
CSS
Javascript
バラバラだった奴らを…
パーツ単位でひとつのファイルとする！
導入パターンその2
（コンポーネント）
24

25. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 導入パターンその2
（コンポーネント）
じゃあVueのコンポーネント化ってどうやるの？
→.vueという拡張子のファイルが、コンポーネントとして扱われる
***.vue
html
css
javascript
HTML
CSS
Javascript
※グローバルな参照ファイルからの
影響がなくなり、部品単位での改修が容易に
25

26. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
よしやってみよう
導入パターンその2
（コンポーネント）
26

27. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
が・・・
導入パターンその2
（コンポーネント）
27

28. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Rails環境における
Vueのコンポーネント実現のやり
方、実に謎。
やーい、
へっぽこプログラマー
導入パターンその2
（コンポーネント）
28

29. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
どうやってRailsのルーティングから
*.vueのコンポーネントまで辿り着くのか？
導入パターンその2
（コンポーネント）
29

30. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
困った時はGithub。
Rails×Vue.jsのサンプルを見つけよう！
30

31. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
良さそうなサンプルがありました。
https://github.com/gbarillot/rails-vue-demo-app
31

32. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
サンプルプロジェクトが導入していたライブラリ。
"vue" // 必須。
"vue-i18n" // 多言語化ライブラリ。今回は除外。
"vue-loader" // .vueファイルコンパイルのため必須。
"vue-router" // vueでSPAを実現するため必須。
"vue-template-compiler" // 必須。
"vuex" // 状態管理ライブラリ。今回は除外。
32

33. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
こういった流れになっております。
Rails
routes
導入パターンその2
（コンポーネント）
Rails
Controller
Rails
View
webpack
js
vue-routes
routes
vue-loader
*.vue
33

34. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴 ルーティングでVue共通のコントローラーに遷移。
Rails
routes
Rails
Controller
34

35. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
Rails
View
35
ここ大事！

36. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
（中間ソース省略）
Webpack
js
36
ここ大事！

37. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
vue-routes
routes
37

38. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
vue-routes
*.vue
嫌な予感がする
コードだなぁ…
38

39. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
そして・・・
39

40. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
画面が表示されました
※実際の画面を見てね⭐
40

41. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
え、それだけ？
41

42. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
導入パターンその2
（コンポーネント）
いやいや、次がありますよ
42

43. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
・不要論含めてWebpackerについてもっと理解する
・Vueの機能をもっと実用する
・既存の画面に影響を与えない構成をさらに研究する
・vuexの使い方を覚える
次やりたいこと
43

44. 虎の穴 虎の穴 虎の穴 虎の穴 虎の穴
虎の穴
・Webpackerの導入（依存関係でﾀﾋぬ）
・とにかくWebpackerの導入
・何よりもWebpackerの導入が大変
・Rails × Vueの事例が少なすぎる
大変だったこと
44