Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rails環境に最適なVue.js構成を探る

 Rails環境に最適なVue.js構成を探る

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

6ab47a68ee78e84c34731ce12333deff?s=128

虎の穴ラボ株式会社

December 13, 2018
Tweet

More Decks by 虎の穴ラボ株式会社

Other Decks in Programming

Transcript

  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に蓄積されたコードを、 別言語で書き直すのは非現実的。 直すなら一気にやるのではなく、 既存の処理を残したまま1画面ずつリリースしたい。 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