SlideShare a Scribd company logo
ES2015をRailsアプリに導入しようとして
思わぬ闇にハマった話
名前:
茨木暢仁
担当業務:
iQONのWebページの改修、メンテナンス
自己紹介
略歴:
大学時代は材料力学の研究に従事しながら
Webアプリケーションの開発も行う
2016年、株式会社VASILYに新卒で入社
iQONの環境
Ruby on Rails 4.1.0
CoffeeScript
Sass
JavaScript,CSSのコンパイルにはasset pipelineを使用
iQONでもES2015を書きたい
どうやるか?
browserify‑rails + browserify + babel
sprocketsを経由でフィンガープリント付与や 
自動コンパイルが可能
babelなどのNode.jsのトランスパイラを利用できる
試しに開発環境に導入
自動コンパイルが正しく動作しない
importされたファイルを変更しても、読み込み元のファイルがコ
ンパイルされない。
いろいろ試してみるが正しく動かない
同様の問題がGitHubのissueにあげられていたので 
browserify‑railsを修正済みのバージョンに上げてみる
 bundle exec rake assets:clobber で 
コンパイル済みのアセットをすべて削除
闇1
app/assets => ../public (シンボリックリンク)
一般的なRailsアプリ
RAILS̲ROOT/ 
├ app/ 
│ ├ assets/ 
│ │ ├ javascripts/ 
│ │ └ stylesheets/
iQON
RAILS̲ROOT/ 
├ app/ 
│ ├ assets => ../public  シンボリックリンク(!) 
│
├ public/ 
│ ├ javascripts/ 
│ └ stylesheets/
後からアセットパイプラインを導入する際に
アセットのディレクトリ移動なしで
アセットパイプラインを導入するための闇実装
開発環境でアセットを本来あるべき  
app/assets/以下に移動
特定のJavaScriptファイルの存在を     
確認するテストも併せて改修
#coding: utf-8
require 'spec_helper'
require 'rails_helper'
#Ensure that all javascript files are working
feature "Javascript files" do
scenario "are all active" do
js_files = YAML.load_file("#{Rails.root}/lib/js_file_list.yml")
js_files.each do | path |
expect(File).to exist("#{Rails.root}/public/javascripts/#{path}")
end
end
end
これによりが正常に動作したので解決!
闇2
意図がまったく伝わらないコメント
開発環境での動作検証&テスト通過
いざデプロイ!
大事故発生...
public/javascripts以下に他社用のJavaScriptが混在
app/assets/javascripts/以下にJavaScriptファイルを移動したことで 
他社用ファイルが404になり、大事故になってしまった。
さっきのテストは他社用JavaScriptのテストだった
Ensure that all javascript files are workingを意図がわかる 
コメントに書き換え
#coding: utf-8
require 'spec_helper'
require 'rails_helper'
#Ensure that all javascript files are working
feature "Javascript files" do
scenario "are all active" do
js_files = YAML.load_file("#{Rails.root}/lib/js_file_list.yml")
js_files.each do | path |
expect(File).to exist("#{Rails.root}/public/javascripts/#{path}")
end
end
end
まとめ
シンボリックリンクをディレクトリ移動の        
代わりに用いるのは事故の元
コメントを意図が伝わるように書くのは大事
新技術の導入はハマることも多いが         
改善のきっかけになる!

More Related Content

PDF
Flexbox しか勝たん
Tomoe Sawai
 
PDF
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Tomoe Sawai
 
PPTX
Web開発初心者がReactをチームに導入して半年経った
kazuki matsumura
 
PDF
ASP.NET WEB API 開発体験
miso- soup3
 
PPTX
【2017早めの夏休み自由研究】SPAとサーバーレスについて
kazuki matsumura
 
PDF
Vsugday2012 winter lt_sakai
Tatsuaki Sakai
 
PPTX
JAWS DAYS 2017直前! AWS総復習
Masanori Hayashi
 
PDF
AWS+WordPressでつくるFirefoxアプリ
Takayuki Miyauchi
 
Flexbox しか勝たん
Tomoe Sawai
 
Firebase Authを Nuxt + Railsの自前サービス に導入してみた
Tomoe Sawai
 
Web開発初心者がReactをチームに導入して半年経った
kazuki matsumura
 
ASP.NET WEB API 開発体験
miso- soup3
 
【2017早めの夏休み自由研究】SPAとサーバーレスについて
kazuki matsumura
 
Vsugday2012 winter lt_sakai
Tatsuaki Sakai
 
JAWS DAYS 2017直前! AWS総復習
Masanori Hayashi
 
AWS+WordPressでつくるFirefoxアプリ
Takayuki Miyauchi
 

What's hot (10)

PPTX
Amazon CloudFrontで始めるお手軽簡単CDN
Classmethod,Inc.
 
PPTX
入社100日の新人がクラスメソッドでの激速の日々を赤裸々に語る
Classmethod,Inc.
 
PPTX
本番運用で使うVisual Studio
Kazuyuki Miyake
 
PPTX
VUIアプリ(Alexaスキル)の苦悩、自動テストをGoogle Homeが解決してくれる?
Atsushi Umakatsu
 
PPTX
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
 
PDF
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
 
PDF
2016/05/01 Visual Studio with Cordova
miso- soup3
 
PDF
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
 
PPTX
XamarinでAzure AD認証 (リフレッシュトークン対応)
Kazuyuki Miyake
 
PDF
Titanium もくもく会 #4
Kosuke Isobe
 
Amazon CloudFrontで始めるお手軽簡単CDN
Classmethod,Inc.
 
入社100日の新人がクラスメソッドでの激速の日々を赤裸々に語る
Classmethod,Inc.
 
本番運用で使うVisual Studio
Kazuyuki Miyake
 
VUIアプリ(Alexaスキル)の苦悩、自動テストをGoogle Homeが解決してくれる?
Atsushi Umakatsu
 
2016/12/17 ASP.NET フロントエンドタスク入門
miso- soup3
 
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
 
2016/05/01 Visual Studio with Cordova
miso- soup3
 
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
 
XamarinでAzure AD認証 (リフレッシュトークン対応)
Kazuyuki Miyake
 
Titanium もくもく会 #4
Kosuke Isobe
 
Ad

ES2015をRailsアプリに導入しようとして思わぬ闇にハマった話