Submit Search
Upload
古き良きRailsプロジェクトに wepbackとvue.jsを導入した話
•
1 like
•
905 views
Y
Yuya Taki
Follow
Railsにfrontendディレクトリを導入しwebpackとVue.jsを導入しまた話になります。
Read less
Read more
Report
Share
Report
Share
1 of 15
Download now
Download to read offline
Recommended
WordBench大阪18th
WordBench大阪18th
Go Imai
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
第5回 業界中心会議でのLT予定資料です。 https://itmedia.smartseminar.jp/public/application/add/922
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Seiko Kuchida
SaCSS(札幌コーディング勉強会) vol.79の資料に補足を加えたものです。CMSを利用したサイトを制作する前、デザイナー・コーダーへの発注・着手前にディレクション関連で確認すべきことを紹介しています。
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
HTML5fun×AOITコラボイベント「現場で使えるライブラリとJavaScriptの基礎」の担当セッションで使用したスライド
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
2012/12/15 JAZUG女子部ぷれぜんつBuild祭り でのTypeScriptの話
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
SVGでアニメーションを実装する為に、必要な前提知識をまとめています。 SVGと親和性の高いJavaScriptからアニメーションを行う方法です。 また、二次元の図形を描画する際に選択肢となる、Canvasとの比較と、使い分けをまとめています。。
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第8回の資料です。Movable Typeを利用している人がa-blog cmsを利用する際に注意すべき点や、コンテンツによるレイアウト変更、マルチサイトを実装するハンズオンを紹介しています。
Recommended
WordBench大阪18th
WordBench大阪18th
Go Imai
Node.jsでサーバプログラマ デビューしよう
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
第5回 業界中心会議でのLT予定資料です。 https://itmedia.smartseminar.jp/public/application/add/922
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Seiko Kuchida
SaCSS(札幌コーディング勉強会) vol.79の資料に補足を加えたものです。CMSを利用したサイトを制作する前、デザイナー・コーダーへの発注・着手前にディレクション関連で確認すべきことを紹介しています。
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
HTML5fun×AOITコラボイベント「現場で使えるライブラリとJavaScriptの基礎」の担当セッションで使用したスライド
svelte と tailwind で始めるフロントエンド開発
svelte と tailwind で始めるフロントエンド開発
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
TypeScriptへの入口
TypeScriptへの入口
Sunao Tomita
2012/12/15 JAZUG女子部ぷれぜんつBuild祭り でのTypeScriptの話
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
SVGでアニメーションを実装する為に、必要な前提知識をまとめています。 SVGと親和性の高いJavaScriptからアニメーションを行う方法です。 また、二次元の図形を描画する際に選択肢となる、Canvasとの比較と、使い分けをまとめています。。
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第8回の資料です。Movable Typeを利用している人がa-blog cmsを利用する際に注意すべき点や、コンテンツによるレイアウト変更、マルチサイトを実装するハンズオンを紹介しています。
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
YAPC::Asia 2012
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
Takuya Mukohira
株式会社LOUPE エンジニアチームの勉強会「LOUPE Study」の発表資料です。 第一回目の担当は僕。 テーマは「SinatraでのWeb開発について」でした。
とある Perl Monger の働き方
とある Perl Monger の働き方
Yusuke Wada
Mishima.pm #01 Yusuke Wada a.k.a yusukebe 2014/07/12
How Would You Like Component Management System
How Would You Like Component Management System
Hidetaka Okamoto
CMSどうでしょう大阪LT
【勉強会】 はじめてのRuby on Rails 4入門
【勉強会】 はじめてのRuby on Rails 4入門
Yuta Nakamura
【勉強会】 はじめてのRuby on Rails 4入門 の資料です。
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第9回の資料です。WordPressを利用している人がa-blog cmsを利用する際に注意すべき点や、投稿タイプの代替としてのカテゴリーの解説、表示条件を管理画面から変更するハンズオンを紹介しています。
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。
WordCamp Tokyo 2018 by ocws
WordCamp Tokyo 2018 by ocws
kouki okuda
ocwsのWordCamp Tokyo 2018のスライド資料です!
Rails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
Ruby/ Ruby on Railsビギナーズ勉強会 第13回資料です
Node js 入門
Node js 入門
Satoshi Takami
勉強会で発表した資料。
渋谷Java#2 昔のJavaを振り返る
渋谷Java#2 昔のJavaを振り返る
Naoki Iwami
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
Miyazaki.js vol.2 Node.js基礎の基礎
How do you like knockout?
How do you like knockout?
Narami Kiyokura
『合同勉強会 in 大都会岡山 -2014 Winter-』の同名のセッションの資料 http://gbdaitokai.doorkeeper.jp/events/15289
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
Seiko Kuchida
2016年9月10日に開催された「a-blog cms in 札幌 x SaCSS」のエバンジェリストセッションのスライドです。a-blog cmsの投稿画面をカスタマイズする様々な方法を紹介しています。
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
Narami Kiyokura
2014/07/19 に OITEC 第19回勉強会にて発表した同名のセッションの資料 ASP.NETの登場から2014年7月現在までの歴史と経緯、今現在のOne ASP.NETの姿、そしてOWINから将来のvNextについてを一通り紹介するセッション
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
PHPカンファレンス関西2017発表資料。 -- Webでリアルタイム通信を実現するWebSocket。 WebSocketと言えば、Socket.IO(node)やActionCable(Rails5)なんかはメジャーですが、 さて、PHPではどうしましょうか。まだデファクトが無いですよね。 いろいろ調べて試してわかったことを、お伝えしたいと思います。
ConoHa VPSの コマンドラインツールを作った
ConoHa VPSの コマンドラインツールを作った
Hironobu Saitoh
オープンソースカンファレンス2015Tokyoのスポンサーライトニングトークで発表した内容です
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
Ruby/ Ruby on Railsビギナーズ勉強会 第5回資料です
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
東京Node学園祭2013 での発表資料です。
エネチェンジでのSTIの使い方紹介
エネチェンジでのSTIの使い方紹介
Yuya Taki
20社以上の事業者の電気切り替え申し込みを受け付けるエネチェンジでのSTIの使い方を紹介。
RustでWebAssembly
RustでWebAssembly
ceres-inc
2019年11月21日(木)に開催しました、エンジニア文化祭~新技術へのチャレンジ~の資料です。
More Related Content
What's hot
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Yusuke Wada
YAPC::Asia 2012
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
Takuya Mukohira
株式会社LOUPE エンジニアチームの勉強会「LOUPE Study」の発表資料です。 第一回目の担当は僕。 テーマは「SinatraでのWeb開発について」でした。
とある Perl Monger の働き方
とある Perl Monger の働き方
Yusuke Wada
Mishima.pm #01 Yusuke Wada a.k.a yusukebe 2014/07/12
How Would You Like Component Management System
How Would You Like Component Management System
Hidetaka Okamoto
CMSどうでしょう大阪LT
【勉強会】 はじめてのRuby on Rails 4入門
【勉強会】 はじめてのRuby on Rails 4入門
Yuta Nakamura
【勉強会】 はじめてのRuby on Rails 4入門 の資料です。
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第9回の資料です。WordPressを利用している人がa-blog cmsを利用する際に注意すべき点や、投稿タイプの代替としてのカテゴリーの解説、表示条件を管理画面から変更するハンズオンを紹介しています。
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
a-sap(a-blog cms札幌勉強会)第10回の資料です。a-blog cmsの重要な機能、モジュールとモジュールIDの詳細な解説と、モジュールの使い方のハンズオンを紹介しています。
WordCamp Tokyo 2018 by ocws
WordCamp Tokyo 2018 by ocws
kouki okuda
ocwsのWordCamp Tokyo 2018のスライド資料です!
Rails5クイックスタート
Rails5クイックスタート
Hirata Tomoko
Ruby/ Ruby on Railsビギナーズ勉強会 第13回資料です
Node js 入門
Node js 入門
Satoshi Takami
勉強会で発表した資料。
渋谷Java#2 昔のJavaを振り返る
渋谷Java#2 昔のJavaを振り返る
Naoki Iwami
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
Miyazaki.js vol.2 Node.js基礎の基礎
How do you like knockout?
How do you like knockout?
Narami Kiyokura
『合同勉強会 in 大都会岡山 -2014 Winter-』の同名のセッションの資料 http://gbdaitokai.doorkeeper.jp/events/15289
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
Seiko Kuchida
2016年9月10日に開催された「a-blog cms in 札幌 x SaCSS」のエバンジェリストセッションのスライドです。a-blog cmsの投稿画面をカスタマイズする様々な方法を紹介しています。
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
Narami Kiyokura
2014/07/19 に OITEC 第19回勉強会にて発表した同名のセッションの資料 ASP.NETの登場から2014年7月現在までの歴史と経緯、今現在のOne ASP.NETの姿、そしてOWINから将来のvNextについてを一通り紹介するセッション
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ksimoji
PHPカンファレンス関西2017発表資料。 -- Webでリアルタイム通信を実現するWebSocket。 WebSocketと言えば、Socket.IO(node)やActionCable(Rails5)なんかはメジャーですが、 さて、PHPではどうしましょうか。まだデファクトが無いですよね。 いろいろ調べて試してわかったことを、お伝えしたいと思います。
ConoHa VPSの コマンドラインツールを作った
ConoHa VPSの コマンドラインツールを作った
Hironobu Saitoh
オープンソースカンファレンス2015Tokyoのスポンサーライトニングトークで発表した内容です
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
Hirata Tomoko
Ruby/ Ruby on Railsビギナーズ勉強会 第5回資料です
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
最近はやりのjQuery Hateの謎に迫る! (というか、これであってるのか教えてほしいという発表)
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
東京Node学園祭2013 での発表資料です。
What's hot
(20)
「新しい」を生み出すためのWebアプリ開発とその周辺
「新しい」を生み出すためのWebアプリ開発とその周辺
Sinatra軽量Web開発 - LOUPE Study #1
Sinatra軽量Web開発 - LOUPE Study #1
とある Perl Monger の働き方
とある Perl Monger の働き方
How Would You Like Component Management System
How Would You Like Component Management System
【勉強会】 はじめてのRuby on Rails 4入門
【勉強会】 はじめてのRuby on Rails 4入門
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
WordCamp Tokyo 2018 by ocws
WordCamp Tokyo 2018 by ocws
Rails5クイックスタート
Rails5クイックスタート
Node js 入門
Node js 入門
渋谷Java#2 昔のJavaを振り返る
渋谷Java#2 昔のJavaを振り返る
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
How do you like knockout?
How do you like knockout?
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
a-blog cms 勉強会 in 札幌 x SaCSS 2016 投稿画面を改良してみよう
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
PHPでWebSocketを実装してみてわかったこと
PHPでWebSocketを実装してみてわかったこと
ConoHa VPSの コマンドラインツールを作った
ConoHa VPSの コマンドラインツールを作った
WindowsユーザのためのRails環境構築
WindowsユーザのためのRails環境構築
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Similar to 古き良きRailsプロジェクトに wepbackとvue.jsを導入した話
エネチェンジでのSTIの使い方紹介
エネチェンジでのSTIの使い方紹介
Yuya Taki
20社以上の事業者の電気切り替え申し込みを受け付けるエネチェンジでのSTIの使い方を紹介。
RustでWebAssembly
RustでWebAssembly
ceres-inc
2019年11月21日(木)に開催しました、エンジニア文化祭~新技術へのチャレンジ~の資料です。
台湾官公庁におけるRuby on Railsを導入する事例
台湾官公庁におけるRuby on Railsを導入する事例
Tsehau Chao
Ruby World Conference 2015
Rubyの話を少し
Rubyの話を少し
Fumitake Taniguchi
日本PostgreSQLユーザ会北海道支部 / Ruby札幌 合同セミナー 2008-02-16
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
健人 井関
2018/06/20 Fukuoka.js #4 LT
Rubyをちょっと理解しよう
Rubyをちょっと理解しよう
Shun Hikita
社内勉強会 UniStudy #1 の発表資料です。 Rubyについてちょっと話ました。
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選
Tomoe Sawai
12/26 Tadoru Meetup での発表内容です
Rubyで作るクローラー Ruby crawler
Rubyで作るクローラー Ruby crawler
Takuro Sasaki
Camp report for_kwskrb
Camp report for_kwskrb
rojiuratech
11/25 kawasaki.rb #030
ランダムにおちるfeature_system spec対策rspec-retry_ex の 紹介
ランダムにおちるfeature_system spec対策rspec-retry_ex の 紹介
Yuya Taki
scenario内の一部分をリトライできるrspec-retry_exについて紹介しています。 ブログもご覧ください。https://tech.enechange.co.jp/entry/2019/02/22/083700
Cmsdou oosaka
Cmsdou oosaka
onagatani
Movable Type & AWS S3
Shinjuku.rb #29 ActiveJobでSQS使ったのとその永続化についての話
Shinjuku.rb #29 ActiveJobでSQS使ったのとその永続化についての話
Takeuchi Yuichi
ActiveJob プロセス管理ツール ServerEngine のはなし
Meguro es7
Meguro es7
健太 田上
Meguro es7 での発表資料
クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発
Yuuji Arakaki
JAWS Festa Kyusyu 2015 というイベントの九州のAWS活用事例セッションで発表しました。 JobAntennaという求人サイトをAWSを使って構築した事例を紹介しています。
20150215勉強会
20150215勉強会
Fumiya Sakai
Rails & kaminari
第八回 #渋谷Java 最近のjava PaaS事情
第八回 #渋谷Java 最近のjava PaaS事情
Kazuhiro Serizawa
第八回 #渋谷Java 最近のjava PaaS事情 の発表スライドです
worker_threadsを使った実装の勘所
worker_threadsを使った実装の勘所
yo_waka
Gotanda.js#12のLT資料です
RakSulのInternal API開発で gRPCを導入した話
RakSulのInternal API開発で gRPCを導入した話
nixiesan
RakSulのInternal API開発で gRPCを導入した話
初めての公開Gem作り
初めての公開Gem作り
Tomoe Sawai
2020/3/13 「Ruby みやざき #1」の発表資料です
Similar to 古き良きRailsプロジェクトに wepbackとvue.jsを導入した話
(20)
エネチェンジでのSTIの使い方紹介
エネチェンジでのSTIの使い方紹介
RustでWebAssembly
RustでWebAssembly
台湾官公庁におけるRuby on Railsを導入する事例
台湾官公庁におけるRuby on Railsを導入する事例
Rubyの話を少し
Rubyの話を少し
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
Rubyをちょっと理解しよう
Rubyをちょっと理解しよう
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選
Rubyで作るクローラー Ruby crawler
Rubyで作るクローラー Ruby crawler
Camp report for_kwskrb
Camp report for_kwskrb
ランダムにおちるfeature_system spec対策rspec-retry_ex の 紹介
ランダムにおちるfeature_system spec対策rspec-retry_ex の 紹介
Cmsdou oosaka
Cmsdou oosaka
Shinjuku.rb #29 ActiveJobでSQS使ったのとその永続化についての話
Shinjuku.rb #29 ActiveJobでSQS使ったのとその永続化についての話
Meguro es7
Meguro es7
クラウドネイティブが行なういまどきWebサービス開発
クラウドネイティブが行なういまどきWebサービス開発
20150215勉強会
20150215勉強会
第八回 #渋谷Java 最近のjava PaaS事情
第八回 #渋谷Java 最近のjava PaaS事情
worker_threadsを使った実装の勘所
worker_threadsを使った実装の勘所
RakSulのInternal API開発で gRPCを導入した話
RakSulのInternal API開発で gRPCを導入した話
初めての公開Gem作り
初めての公開Gem作り
古き良きRailsプロジェクトに wepbackとvue.jsを導入した話
1.
古き良きRailsプロジェクトに wepbackとVue.jsを導入した話 Yuya Taki
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.
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.
enechangeとは ➢ 2016年電力自由化・2017年ガス自由化に伴い、電気代やガス代を比較でき るサービスを運営。 ➢ 比較だけでなく、申し込みも受け付けている。 https://enechange.jp/
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.
enechangeのfrontend状況 ➢ Railsデフォルトのasset pipelineに乗っかっている ➢
Javascript ○ jQuery ○ ライブラリなどは職人が手で置いていく ➢ CSS ○ sassc-rails ○ compass ■ cf. compass-railsが導入されたRailsにsassc-railsを導入する
7.
webpack・Vue.js導入の経緯 ➢ 5月頃、このプロジェクト発足前に、preapplyの仕様がそこそこ複雑なので、 enechangeのfrontendをどうしようかという議論を行った。 ➢ 開発期間が短いこともあり、既存の基盤のままいくことになった。 ➢
8月末、preapplyのfrontendの開発に着手した当初、jQueryで実装しようと試 みた。 ➢ やや複雑な仕様の中、4時間ぐらい粘ったところで、Vue.jsを使えばもっとシン プルに実装できるのにという思いが強まる。 ➢ 誰にも相談することなく、Vue.jsで実装を始める。
8.
preapplyでの仕様 https://enechange.jp/orders/tepco/preapply?o=1 https://enechange.jp/orders/tepco/preapply?o=2 ガス単独申し込みの場合は、従量 電灯Bでは申し込めないのでエラー を出す ガス・電気セット申し込みの場合は、既 契約が従量電灯Bの場合は、「契約プラ ンを変更する」にセット スタンダードSで電気の契約プラン を変更しようとすると、エラーを出 す etc... jQueryでの実装に挫折した! 電気料金プランにはいろんな区分けが ありまして・・・ ・規制プラン ・自由化プラン(新規申込可) ・自由化プラン(新規申込不可) ・アンペアブレーカ契約 ・主開閉器契約 ・実量制契約 ガスに申し込むには、電気は自由化プ ランじゃないといけなく・・・
9.
slackで相談 simchangeで実績があるということと、 try/inputでもVue.jsを利用しようとしていた こともあり、意外にすんなり受け入れられた!
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.
もっと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.
トランスパイルした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.
webpackerも使ってみた ➢ 冒頭の◯よぷ◯風自作ゲーム(React.js実装)でwebpacker を使ってみた。 ➢ ほぼjsのアプリですが、Railsエンジニアとしての足掻きで、 Railsにのっけてあった。 webpacker版
: https://poject.herokuapp.com/poject_webpacker ➢ webpackの知識は必要。 ➢ webpack使えば良いのでは。 ➢ 継続して意義を考えていきたい。
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.
ご静聴ありがとうございました。
Download now