Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

634 vues

Publié le

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

Publié dans : Ingénierie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

古き良き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. ご静聴ありがとうございました。

×