Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

古き良きRailsプロジェクトに wepbackとvue.jsを導入した話

196 views

Published on

Railsにfrontendディレクトリを導入しwebpackとVue.jsを導入しまた話になります。

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

古き良きRailsプロジェクトに wepbackとvue.jsを導入した話

  1. 1. 古き良きRailsプロジェクトに wepbackとVue.jsを導入した話 Yuya Taki
  2. 2. self.inspect [1] https://github.com/muramurasan/okuribito ➢ gemのロゴを書いたり・・・ ➢ たまにQiitaの記事を書いたり・・・ ➢ 新卒で某SIerに入社したのあと、渋谷のベン チャー企業にてRuby on Railsを学び、2016年10 月エネチェンジに入社。 ➢ なぜかPaypal、ベリトランス、SMBC、YDSなど決 済周り、請求周りを実装することが多い。 ➢ 最近、ちょくちょくお客様先に行くこともあり。 Name : Yuya Taki GitHub : yuyasat Qiita : yuyasat [1] 若輩者ですので、何卒優しくご教授いただけ ればと思います。 (commitはしていない) ➢ 初めて勉強会で喋ります。 ➢ フロントエンドとかあまり詳しくないで す!
  3. 3. Web版(React.js実装): https://poject.herokuapp.com/ Android版(Java実装): https://play.google.com/store/apps/details?id=yuyasat.pojectandr oid&hl=ja(PojectAndroidで検索) ※とりあえず動くクソコードなので大目にみて self.inspect(frontendに関連して) ➢ React.jsで実装したゲーム ➢ 4色繋げると消える、まるで◯よぷ◯のようなゲーム ➢ 自動で落ちてこないので、自由に連鎖を組める( 崩珠) ➢ まるで昭和のゲームのよう
  4. 4. enechangeとは ➢ 2016年電力自由化・2017年ガス自由化に伴い、電気代やガス代を比較でき るサービスを運営。 ➢ 比較だけでなく、申し込みも受け付けている。 https://enechange.jp/
  5. 5. enechange.jpで使われているVue.jsたち https://enechange.jp/orders/tepco/preapply?o=1https://enechange.jp/try/input https://enechange.jp/gas try/input preapply gas
  6. 6. enechangeのfrontend状況 ➢ Railsデフォルトのasset pipelineに乗っかっている ➢ Javascript ○ jQuery ○ ライブラリなどは職人が手で置いていく ➢ CSS ○ sassc-rails ○ compass ■ cf. compass-railsが導入されたRailsにsassc-railsを導入する
  7. 7. webpack・Vue.js導入の経緯 ➢ 5月頃、このプロジェクト発足前に、preapplyの仕様がそこそこ複雑なので、 enechangeのfrontendをどうしようかという議論を行った。 ➢ 開発期間が短いこともあり、既存の基盤のままいくことになった。 ➢ 8月末、preapplyのfrontendの開発に着手した当初、jQueryで実装しようと試 みた。 ➢ やや複雑な仕様の中、4時間ぐらい粘ったところで、Vue.jsを使えばもっとシン プルに実装できるのにという思いが強まる。 ➢ 誰にも相談することなく、Vue.jsで実装を始める。
  8. 8. preapplyでの仕様 https://enechange.jp/orders/tepco/preapply?o=1 https://enechange.jp/orders/tepco/preapply?o=2 ガス単独申し込みの場合は、従量 電灯Bでは申し込めないのでエラー を出す ガス・電気セット申し込みの場合は、既 契約が従量電灯Bの場合は、「契約プラ ンを変更する」にセット スタンダードSで電気の契約プラン を変更しようとすると、エラーを出 す etc... jQueryでの実装に挫折した! 電気料金プランにはいろんな区分けが ありまして・・・ ・規制プラン ・自由化プラン(新規申込可) ・自由化プラン(新規申込不可) ・アンペアブレーカ契約 ・主開閉器契約 ・実量制契約 ガスに申し込むには、電気は自由化プ ランじゃないといけなく・・・
  9. 9. slackで相談 simchangeで実績があるということと、 try/inputでもVue.jsを利用しようとしていた こともあり、意外にすんなり受け入れられた!
  10. 10. Vue.jsをどうRailsに組み込んだか ➢ vuejs-rails(gem)を使う ○ JSライブラリ自体のバージョンに追いついていけるか不安 ➢ Webpackerを使う ○ enechangeは残念ながらまだRails 4.2 ○ webpackをラップしている。webpackの進歩についていけるか不安 ➢ frontendのエコシステムを利用する ○ npmで管理 rails └── frontend ├── config │ ├── development.js │ └── production.js ├── package.json └── src └── javascripts └── このディレクトリ以下に jsファイルを置いて行く。 ・digest付与 ・minify sprockets app/assets/javascripts/packed/ 2015.11.29 WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する ゆるやかにsprocketsを利用
  11. 11. もっとsprocketsから離れることもできる rails └── frontend ├── config │ ├── development.js │ └── production.js ├── package.json └── src └── javascripts └── このディレクトリ以下に jsファイルを置いて行く。 ・digest付与 ・minify sprockets webpack-manifest-plugin webpack.optimize.UglifyJsPlugin() app/assets/javascripts/packed/ ➢ digest付与はwebpack-manifest-pluginでできるし、minifyもUglifyJsPlugin使えばできるから sprocketsはもういらないのでは。。 ➢ とはいえ、jsが不要なところもあるし、 cssの方はasset pipelineに乗っかるのが便利だから sprokets とのお付き合いは絶やす必要はないか。。 [1] Webpacker を使わずに webpack で頑張る [1]
  12. 12. トランスパイルしたjsファイルどうする問題 ➢ 現状enechangeではcommitしてしまっている。 ➢ 開発者(デザイナ含む)開発環境でコマンド叩けるならcommitしなくても良さそ う。 ➢ Docker使っていれば、起動オプション等で入れ込めば良い。 ● EC2上でnginx、unicornなどで本番環境に近い形で構成で開発 ● rails serverを使う(postgresql、python serverなど自力でlocalに構築) ● Dockerを使う (参考)enechangeの3つの開発環境 全開発環境のDocker化や開発者のfrontend のリテラシーが高まれば、commitしないよ うにしていきたい。 [1] https://twitter.com/_yasaichi/status/827495684295122945 [1]
  13. 13. webpackerも使ってみた ➢ 冒頭の◯よぷ◯風自作ゲーム(React.js実装)でwebpacker を使ってみた。 ➢ ほぼjsのアプリですが、Railsエンジニアとしての足掻きで、 Railsにのっけてあった。 webpacker版 : https://poject.herokuapp.com/poject_webpacker ➢ webpackの知識は必要。 ➢ webpack使えば良いのでは。 ➢ 継続して意義を考えていきたい。
  14. 14. 資料 2017.06.23 Webpacker is installed(Misoca) 2015.11.29 WebPackを使ってRailsからJavaScriptを楽に良い感じに分離する 2017.03.02 Webpacker を使わずに webpack で頑張る 2014.12.05 Sprockets再考 モダンなJSのエコシステムと Railsのより良い関係を探す 2016.06.08 Rails 4.2でSprocketsを捨ててwebpackに移行する 2016.12.13 もし、僕らのRailsにSprocketsがなかったら 2017.01.10 Rails & Webpackerでフロントエンド開発環境を整える 2017.01.19 Rails5.1から追加されると噂の Webpackerを使ってReact.jsを動かす。 2017.03.27 Webpackerを使ったRailsでのJavaScript開発(Cookpad) 2017.05.31 Roppongi.rb #3 "Rails x Frontend-Tech"(Roppingi.rb) 2017.05.22 Railsフロントエンド技術の今とこれから webpacker 2017.02.27 Rails5.1から導入されるwebpacker.gemは本当にRailsのフロントエンド開発に福音をもたらすのか ? 2017.10.21 Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト 試案〜
  15. 15. ご静聴ありがとうございました。

×