React+Webpackを利用したRailsアプリケーションをHerokuで本番運用するノウハウ

https://eventdots.jp/event/599919
「【クラウドワークス×クラスメソッド×ネクスト】『新サービス・技術に興味があるエンジニア向け勉強会 』今サービスづくりをするのに選びたい技術はこれだ。」登壇資料

Transcript

1. React+WebpackΛར༻ͨ͠ RailsΞϓϦέʔγϣϯΛ HerokuͰຊ൪ӡ༻͢Δϊ΢ϋ΢ Yoshiki IIDA
2. ࣗݾ঺հ ൧ాҙݾ ! yo-iida Web੍࡞ձࣾʢ2012.4~2015.3ʣ
 Ϋϥ΢υϫʔΫεʢ2015.5~ݱࡏʣ ΤϯλʔϓϥΠζࣄۀ෦޲͚։ൃΛ୲౰
3. ࠷ۙͷΞ΢τϓοτ
4. Ϋϥ΢υϫʔΫε
5. Ϋϥ΢υϫʔΫε Ϋϥ΢υϫʔΫεʢCrowdWorksʣ͸ɺ
 ΦϯϥΠϯ্Ͱاۀͱݸਓ͕௚઀ͭͳ͕Γɺ
 ࢓ࣄͷϚονϯάɾडൃ஫Λߦ͏͜ͱ͕Ͱ͖Δ
 ೔ຊ࠷େڃͷʮΫϥ΢υιʔγϯάʯαʔϏεɻ
6. ΤϯλʔϓϥΠζࣄۀ • Ϋϥ΢υϫʔΫεͷ๏ਓ޲͚αʔϏε
7. ΤϯλʔϓϥΠζࣄۀ • Ϋϥ΢υϫʔΫεͷ๏ਓ޲͚αʔϏε • େྔͷςΩετϥΠςΟϯά΍ޱίϛऩूɺ
 Ξϯέʔτ΍શࠃௐࠪͳͲͷෳࡶͳۀ຿Λ
 Ұׅ੥ෛ͠ɺϫʔΧʔʹൃ஫
8. ΤϯλʔϓϥΠζࣄۀ • Ϋϥ΢υϫʔΫεͷ๏ਓ޲͚αʔϏε • େྔͷςΩετϥΠςΟϯά΍ޱίϛऩूɺ
 Ξϯέʔτ΍શࠃௐࠪͳͲͷෳࡶͳۀ຿Λ
 Ұׅ੥ෛ͠ɺϫʔΧʔʹൃ஫ • ࣾ಺ͷ੍࡞νʔϜͷ࡞ۀޮ཰ԽͷͨΊʹ༷ʑ ͳγεςϜԽରԠ͕ඞཁʂ "
9. ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠
10. ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍
11. ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠ • ΍Δ͜ͱຬࡌ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍
12. ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠ • ΍Δ͜ͱຬࡌ • ٕज़తνϟϨϯδ΋͍ͨ͠ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍ "
13. Ͳ͏΍Δ͔
14. ։ൃମ੍ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍ • ൒೥Ͱ6໊ͷνʔϜʹ૿͑Δʢ͏ͪΤϯδχΞ4໊ʣ • Α͋͘ΔεΫϥϜ • ΤϯδχΞҎ֎΋εΫϥϜͷϓϩηεΛҰॹʹ΍Δ
 & GitHub্Ͱίϛϡχέʔγϣϯ
15. αʔόʔαΠυ • શһ͕Ұ൪׳Ε͍ͯΔRails • Ͳ͜ͰͳΜͷॲཧΛ΍Δ΂͖͔ํ਑Λͭ͘Δ • มߋ͕ͭΒ͘ͳΒͳ͍Α͏ͳઃܭΛ໨ࢦ͢
16. ϑϩϯτΤϯυ • ۀ຿γεςϜͰjQueryͰDOM͍͡Γ·͘Δͱ ΍͹ͦ͏ • શһ஌ݟθϩ͚ͩͲReactνϟϨϯδ͍ͨ͠
17. Πϯϑϥ • Πϯϑϥʹਂ͍஌ݟͷ͋Δϝϯόʔ͕͍ͳ͍ • ͋·Γ࣌ؒΛ͔͚ΒΕͳ͍ • ॳظίετ΋ӡ༻ίετ΋཈͍͖͍͑ͯͨ
18. ࠾༻ٕͨ͠ज़ελοΫ • αʔόʔαΠυ
 Ruby 2.3.0ɺRails 4.2.5 • ϑϩϯτΤϯυ
 React(ES2015)ɺReduxɺWebpack • Πϯϑϥ
 Herokuʢ֤छAdd-onؚΉʣɺAWS S3 "
19. େมͩͬͨ͜ͱ
20. ϑϩϯτΤϯυ • React/ReduxͷνϡʔτϦΞϧ͸ྫ͕γϯϓϧ ͳͷͰɺۀ຿ϨϕϧʹͳΔͱͲ͏ॻ͍͍͍ͯ ͷ͔Θ͔ΒΜ໰୊ • ίϯϙʔωϯτઃܭ͕Ͱ͖ͯͳ͍໰୊ • ຊ൪Ͱى͖ͨΤϥʔΛͲ͏ݕ஌ͯ͠Ͳ͏ରॲ ͢Δ͔໰୊
21. Πϯϑϥ • Herokuຊ൪ӡ༻ܦݧ͕ͳ͔ͬͨͨΊ४උ͕େ มͩͬͨ໰୊ • ࣮ࡍʹӡ༻͠͸͡ΊͨΒϝϞϦؔ࿈ͷτϥϒ ϧ͕ଟൃͨ͠໰୊ "
22. Ͳ͏ରԠ͔ͨ͠
 ʢϑϩϯτΤϯυฤʣ
23. νϡʔτϦΞϧ͸
 ྫ͕γϯϓϧͳͷͰɺ ۀ຿ϨϕϧʹͳΔͱͲ͏ॻ͍ ͍͍ͯͷ͔Θ͔ΒΜ໰୊
24. ՝୊ͩͬͨ͜ͱ • νϡʔτϦΞϧ΍ͬͯΈͨهࣄ͸ଟ͍͚Ͳίʔ υ͸͋·ΓࢀߟʹͳΒͳ͍͜ͱ͕ଟ͍ • ͱ͘ʹɺRails+React+ReduxͰͦΕͧΕΛͲ ͏࿈ܞͤ͞Δͷ͕Α͍ͷ͔Θ͔Γʹ͍͘
25. (ࣾ಺ͷ)ৄ͍͠ਓͷίʔυΛΈΔ • suzan2go/react-rails-redux-sample
 (RailsͱReactͱReduxͷ૊Έ߹Θͤ) • suzan2go/rails_with_webpack
 (RailsͱWebpackͷ૊Έ߹Θͤ) • h3poteto/fascia
 (ReactͱReduxͷ૊Έ߹Θͤ)
26. খ͘͞͸͡ΊΔ https://speakerdeck.com/dex1t/xin-gui-railsapurinixiao-sakudao-ru-surureact
27. ݱঢ়ͷReactಋೖঢ়گ • gem͸react-railsΛ͔ͭͬͯreact_componentܦ༝ͰpropsΛ౉͍ͯ͠Δ • ඇSPAͰϖʔδͷҰ෦ͷΈReactԽ • ίϯϙʔωϯτ͸frontendσΟϨΫτϦʹஔ͍ͯWebpackͰϏϧυ • ES2015 • ίϯϙʔωϯτ͕ෳࡶͳͱ͜Ζ͸Ұ෦Redux • Webpackଆ͸Assets Pipeline͔Β੾Γ཭͍ͯ͠Δ • jQuery΍ଞͷϥΠϒϥϦ΋ڞଘ "
28. ίϯϙʔωϯτઃܭ͕
 Ͱ͖ͯͳ͍໰୊
29. ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾
30. ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾ → ݟ௨͕͠ѱ͍ɺ࠶ར༻ੑ͕௿͍ͱ͍ͬͨ໰୊ʹܨ͕Δ
31. ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾ → ݟ௨͕͠ѱ͍ɺ࠶ར༻ੑ͕௿͍ͱ͍ͬͨ໰୊ʹܨ͕Δ → 1ίϯϙʔωϯτʹ٧ΊࠐΈ͗͢Δͱ
 ɹ ਏ͞తʹ͸jQueryͰखଓ͖తʹ΍͍ͬͯΔͷͱมΘΒͳ͘ͳΔ
32. ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾ → ݟ௨͕͠ѱ͍ɺ࠶ར༻ੑ͕௿͍ͱ͍ͬͨ໰୊ʹܨ͕Δ → 1ίϯϙʔωϯτʹ٧ΊࠐΈ͗͢Δͱ
 ɹ ਏ͞తʹ͸jQueryͰखଓ͖తʹ΍͍ͬͯΔͷͱมΘΒͳ͘ͳΔ → ίϯϙʔωϯτͷ੹຿ɾؔ৺ࣄΛݟ௚͢
33. ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍
34. ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍ → BootstrapͰͳΜͱͳ͘͸͡Ίͯ͠·ͬͨͷͰແ๏஍ଳͩͬͨ
35. ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍ → BootstrapͰͳΜͱͳ͘͸͡Ίͯ͠·ͬͨͷͰແ๏஍ଳͩͬͨ → ίϯϙʔωϯτͷ੹຿ɾؔ৺ࣄͰߟ͍͑ͯ͘ͱ
 ɹ ࠷খ୯Ґͷίϯϙʔωϯτʹ͍͖ͭ͘
36. ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍ → BootstrapͰͳΜͱͳ͘͸͡Ίͯ͠·ͬͨͷͰແ๏஍ଳͩͬͨ → ίϯϙʔωϯτͷ੹຿ɾؔ৺ࣄͰߟ͍͑ͯ͘ͱ
 ɹ ࠷খ୯Ґͷίϯϙʔωϯτʹ͍͖ͭ͘ → Atomic DesignϕʔεͷCSSઃܭ "
37. ຊ൪Ͱى͖ͨΤϥʔΛ
 Ͳ͏ݕ஌ͯ͠Ͳ͏ରॲ͢Δ͔ ໰୊
38. RollbarͷΤϥʔ಺༰
39. RollbarͷΤϥʔ಺༰ ͳΔ΄ͲΘ͔ΒΜ(Ň‒䞦‒)
40. ՝୊ͩͬͨ͜ͱ • ίϯύΠϧޙͷjsͰΤϥʔ͕ు͔Εͯ΋Rollbar Ͱरͬͨͱ͖ʹͲ͏͍͏Τϥʔ͔Θ͔Βͳ͍ • σόοά͕ͭΒ͍
41. SourceMapରԠ • Webpack͔ΒSourceMapΛੜ੒͢ΔΑ͏ʹͨ͠ • σϓϩΠͷࡍʹRollbarͱ࿈ܞ • ৄࡉ͸
 ΤϥʔϞχλϦϯάαʔϏε Rollbar ͱ GitHub Issue Λ ར༻ͨ͠ΤϥʔରԠϑϩʔ
 ʢhttp://engineer.crowdworks.jp/entry/2016/08/29/111434ʣ
42. SourceMapରԠޙͷRollbar
43. SourceMapରԠޙͷRollbar ͲͷίϯϙʔωϯτͷͲͷpropsͰΤϥʔ͕ى͖ͯΔ͔Θ͔Δʂ
 ˞͖͞΄Ͳͷ΋ͷͱ͸ผͷΤϥʔͰ͢m(_ _)m "
44. Ͳ͏ରԠ͔ͨ͠
 ʢΠϯϑϥฤʣ
45. Herokuຊ൪ӡ༻ܦݧ͕
 ͳ͔ͬͨͨΊ४උ͕
 େมͩͬͨ໰୊
46. ՝୊ͩͬͨ͜ͱ • Staging, Production,...ͦΕͧΕͷ؀ڥʹͲΕ ͚ͩͷϓϥϯΛ༻ҙ͢Ε͹͍͍ʁ • Herokuͷ؂ࢹͬͯͲ͏΍Δʁ • ௐ΂ͯ΋͋·Γৄ͍͠৘ใ͕ग़ͯ͜ͳ͍
47. ৘ใ͕গͳ͍ͷͰ΍ͬͯΈΔ͠ ͔ͳ͍ • ख୳ΓͰ͍Ζ͍Ζઃఆͯ͠Έͨ݁Ռ͕
 http://engineer.crowdworks.jp/entry/2016/ 09/05/154304

48. ৘ใ͕গͳ͍ͷͰ΍ͬͯΈΔ͠ ͔ͳ͍ • ख୳ΓͰ͍Ζ͍Ζઃఆͯ͠Έͨ݁Ռ͕
 http://engineer.crowdworks.jp/entry/2016/ 09/05/154304

49. ಛʹ΍͓͍ͬͯͯΑ͔ͬͨ͜ͱ • Τϥʔ؂ࢹ(Rollbar) • ϩά؂ࢹ(PaperTrail) • ϝτϦΫε؂ࢹ(Librato)
50. ಛʹ΍͓͍ͬͯͯΑ͔ͬͨ͜ͱ • Τϥʔ؂ࢹ(Rollbar) • ϩά؂ࢹ(PaperTrail)
 →RollbarͰरΘΕͳ͍ΤϥʔΛर͏ • ϝτϦΫε؂ࢹ(Librato)
 →ϝϞϦ౳ͷ੍໿͕ڧ͍HerokuΛ࢖͏ͳΒඞਢ "
51. ࣮ࡍʹӡ༻͠͸͡ΊͨΒ
 ϝϞϦؔ࿈ͷτϥϒϧ͕ଟൃ ͨ͠໰୊
52. ՝୊ͩͬͨ͜ͱ • ӡ༻͕࢝·ͬͯ਺ϲ݄ͨͬͨ͋Δ೔ɺɺ
53. ՝୊ͩͬͨ͜ͱ • ӡ༻͕࢝·ͬͯ਺ϲ݄ͨͬͨ͋Δ೔ɺɺ ϝϞϦ࢖༻ྔ͕ٸ্ঢ(Ň‒䞦‒)
54. ՝୊ͩͬͨ͜ͱ
55. ՝୊ͩͬͨ͜ͱ
56. ՝୊ͩͬͨ͜ͱ Ͳ͏΍Βڊେͳσʔλ͕ొ࿥͞ΕͨͬΆ͍
57. ՝୊ͷ੔ཧ • HerokuͷεϫοϓൃੜͷΤϥʔ(R14)͕அଓతʹൃੜ͠ ͍ͯΔ ※Heroku͸ϝϞϦফඅྔ͕εϫοϓ߹Θͤͯ200%ʹͳΔͱ Dynoࣗମ͕Kill͞ΕΔ(R15Τϥʔ) • େྔͷσʔλ͕౤ೖ͞ΕͯɺͦΕΒΛҰؾʹѻ͏ॲཧ͕ Ͳ͔͜ʹ͋ͬͯɺϝϞϦΛ৯͍௵ͯ͠ΔͬΆ͍ • ϝϞϦΛղ์͢ΔͨΊͷॲཧΛԠٸॲஔͰ͍ΕΔ͜ͱͱɺ ϝϞϦΛେྔফඅ͍ͯ͠ΔॲཧΛಛఆͯ͠ରԠ͕ඞཁ
58. ରԠͨ͜͠ͱ • pumaͷworkerϓϩηεΛ1ʹ͢Δ • puma_worker_killerΛಋೖ͠ɺఆظతʹ workerΛkill͢Δ͜ͱͰϝϞϦΛղ์͢Δ • ϝϞϦϓϩϑΝΠϥͷAdd-on(Scout)Λಋೖ͠ ϝϞϦফඅͷܹ͍͠ॲཧΛಛఆ͢Δ
59. pumaʹ͍ͭͯ • ϚϧνϓϩηεɺϚϧνεϨουͰಈ͔ͤΔ ΞϓϦέʔγϣϯαʔόʔ • Herokuਪ঑
 Puma is Now the Recommended Ruby Webserver
 (https://devcenter.heroku.com/changelog-items/594)
60. pumaͷฒྻ౓ʹ͍ͭͯ • R14Τϥʔ͕ग़Δ৔߹͸ฒྻ౓ͷઃఆΛ௿͘͠ ͯΈͯͶɺͱެࣜʹॻ͍ͯ͋Δ
 https://devcenter.heroku.com/articles/ruby-memory- use#too-many-workers-at-boot $ heroku config:set WEB_CONCURRENCY=1
61. puma_worker_killerʹ͍ͭͯ • schneems/puma_worker_killer • pumaͷworkerϓϩηεΛఆظతʹkillͯ͠
 ϝϞϦΛղ์͢ΔͨΊͷgem • ͋͘·ͰԠٸॲஔ
 ʢworker࠶ىಈͷ෼εϧʔϓοτ͸Լ͕Δɻຊ ࣭తղܾͰ͸ͳ͍ɻʣ
62. ϝϞϦϓϩϑΝΠϥ RailsͰϝϞϦϓϩϑΝΠϦϯάΛߦ͍͍ͨ৔߹ ͍͔ͭ͘બ୒ࢶ͕͋Δ • HerokuެࣜͰݴٴ͞Ε͍ͯΔ΋ͷ • derailed_benchmarks(gem) • Scout(Add-on) • ͦͷଞ • skylight.io
63. ϝϞϦϓϩϑΝΠϥ RailsͰϝϞϦϓϩϑΝΠϦϯάΛߦ͍͍ͨ৔߹ ͍͔ͭ͘બ୒ࢶ͕͋Δ • HerokuެࣜͰݴٴ͞Ε͍ͯΔ΋ͷ • derailed_benchmarks(gem) • Scout(Add-on) • ͦͷଞ • skylight.io ←Add-onͰ؆୯ͦ͏ͩͬͨͷͰ࢖ͬͯΈͨ
64. Scoutͱ͸ • ϝϞϦϓϩϑΝΠϥͱN+1Λݕग़ͯ͘͠ΕΔ ϞχλϦϯάπʔϧ • ·ͩϕʔλ൛Β͘͠ɺHerokuͰ͸ແྉͰ࢖͑ ΔΑ͏ʹͳ͍ͬͯΔ
 ※ຊ൪Ͱ࢖͏ʹ͸೦ͷͨΊಈ࡞ݕূΛ͓͍ͯͨ͠΄͏͕Αͦ͞͏
65. Scoutͱ͸
66. Scoutͱ͸
67. ScoutಋೖʹΑΓ • ϝϞϦফඅͷܹ͍͠ίϯτϩʔϥΛಛఆͰ͖ͨ • ࠓճ͸େ͖ͳσʔλͷΠϯελϯεͷϨϯμϦϯ ά͕ϘτϧωοΫʹͳ͍ͬͯͨͨΊɺద੾ʹϖʔ δϯάΛ͍ΕΔ͜ͱͰճආͰ͖ͨ
68. ScoutಋೖʹΑΓ • ϝϞϦফඅͷܹ͍͠ίϯτϩʔϥΛಛఆͰ͖ͨ • ࠓճ͸େ͖ͳσʔλͷΠϯελϯεͷϨϯμϦϯ ά͕ϘτϧωοΫʹͳ͍ͬͯͨͨΊɺద੾ʹϖʔ δϯάΛ͍ΕΔ͜ͱͰճආͰ͖ͨ ϝϞϦ໰୊ΛHerokuͷ੍໿ͱͯ͠ߟ͑ΔͷͰ͸ͳ ͘ɺϝϞϦ໰୊ʹහײʹରԠ͍ͯ͘͜͠ͱʹΑΓ ΤίͳΞϓϦέʔγϣϯΛ࡞ΕΔͱߟ͑Α͏ "
69. ·ͱΊ
70. ·ͱΊ • ஌ݟθϩ͔ΒͰ΋Rails+React+Redux+Webpackߏ੒Ͱ
 ϓϩμΫτ͸࡞ΕΔ • ׳Ε͍ͯͳ͍ஈ֊Ͱ͸ৗʹߏ੒ΛٙͬͯઌΛݟਾ͑ͳ͕Β
 ։ൃͨ͠΄͏͕Αͦ͞͏ • ͱΓ͋͑ͣಈ͘Α͏ʹͳͬͨ΋ͷ͸ɺ·֦ͩுੑ΍ϝϯςφϯεੑͷߴ͍ ઃܭɾߏ଄ʹͳͬͯͳ͍Մೳੑେ • Ͱ΋ɺ΍Δͱ͖͸ࢥ͍੾ͬͯಋೖͯ͠΋ҙ֎ͱͳΜͱ͔ͳΔ • Heroku͸੍໿͕͋Δ͕ɺ্ཱ͔ͪ͛ΒετϨεͳ͘Πϯϑϥߏ ஙͰ͖Δʢͦͷ੍໿ͷதͰಈ͘ͱ͍͏ϝϦοτ΋ੜ·ΕΔʣ
71. We are hiring! ण࢘ϥϯν΍ͬͯ·͢ https://crowdworks.co.jp/recruit/engineer/
72. ࠲ஊձͰ͍͍ͨͩͨQ&A
73. Q.
 ReactͱRailsͷ૬ੑͬͯඍົ͡Όͳ͍Ͱ͔͢ʁ SPAͱ͔ͩͱGoͱ͔ʹͨ͠΄͏͕Αͦ͞͏͡Όͳ͍Ͱ͔͢ʁ A. • ͦͷ௨Γͩͱࢥ͍·͢ɻαʔόʔαΠυ͕RailsͰ͋Δඞવੑ͸ͳ͘ɺ΍ΕΔ͔Ͳ͏͔ͩͱ ࢥ͍ͬͯ·͢ɻ • զʑͷ৔߹͸νʔϜϝϯόʔͷεΩϧηοτͱͯ͠Rails͕Ұ൪ࣄۀతʹίϛοτͰ͖Δ͔Β ͱ͍͏എܠ͕͋ΓɺͦͷதͰJavaScript΋ͳΜΒ͔ͷܗͰߏ଄Խ͍ͨ͠ͱ͍͏Ϟνϕʔγϣ ϯͰ͜ͷ૊Έ߹ΘͤΛબ୒͍ͯ͠·͢ɻ • SPAͰ͋Ε͹αʔόʔαΠυ͸׬શAPIͱͯ͠GoʹৼΓ੾Δͷ͸ਖ਼͍͠ͱࢥ͍·͕͢ɺͦΕ ͳΓͷ֮ޛ΋ඞཁʹͳͬͯ͘Δͱࢥ͍·͢ɻ
 (Ҿ༻) SPAͱ֮ޛ http://www.slideshare.net/teppeis/spa-66093931 • ࣄۀత੒Ռͱٕज़తʹΑ͍ϓϩμΫτ͔Ͳ͏͔͸τϨʔυΦϑʹͳΒ͟ΔΛಘͳ͍ঢ়گ΋͋ Δͱࢥ͍·͢ͷͰɺϓϩδΣΫτͦΕͧΕͰόϥϯεΛߟ͑ͯબ΂͹Α͍ͱߟ͍͑ͯ·͢ɻ
74. Q. ϑϩϯτΤϯυͷςετͬͯͲ͏ͯ͠· ͔͢ʁ A. • Feature SpecʢRspec+Capybara+FirefoxʣͰ୲อ͍ͯ͠·͢ɻ • ςετํ਑ͱͯ͠͸ɺࡉ͔͍ςετ͸ModelͱServiceΛத৺ʹ ୯ମςετͰԡ͍͖͑ͯ͞ɺେࡶ೺ͳਖ਼ৗܥͷςετ͸Feature ͔Βԡ͍͑ͯ͘͞ͱ͍͏ํ਑Λͱ͍ͬͯ·͢ɻ • JavaScriptͷ୯ମςετ͸΍͍ͬͯ·ͤΜɻʢ༨༟͕ͰͨΒ΍ͬ ͯ΋͍͍͔΋ɺɺ͘Β͍ʣ
75. Q.
 ৽نͩͱReact͍Ε΍͍͚͢Ͳطଘͷେ͖͘ͳͬͯ͠ ·ͬͨjQueryͷϦϓϨΠε͸΍ͬͺΓେมͰ͢ΑͶ A. • ͔ͨ͠ʹ৽نϓϩμΫτ͔ͩΒখ͘͞͸͡ΊΔͱ͍͏ߟ͑ํ͕ద༻Ͱ͖ͨͱ͍͏ ͜ͱ͸͋Δͱࢥ͍·͢ɻ • Ϋϥ΢υϫʔΫεͷຊମͷαʔϏε͸ංେԽͨ͠jQuery͕ଘࡏ͍ͯͯ͠ɺ͍ͭ͘ ͔͸vue.jsʹஔ͖׵͑ͨ෦෼͕͋Γ·͕͢ɺ΍͸ΓҠߦ͸೉͔ͬͨ͠Α͏Ͱ͢ɻ • ΍Δͱͨ͠Βػೳ୯ҐͰ͔͠ஔ͖׵͑ΒΕͳ͍ͱࢥ͏ͷͰɺ̍ϖʔδ͝ͱʹͰ͔ ͍ίϯϙʔωϯτ܈Λʮ͍͑΍ʯͰ࡞͍ͬͯ͘͜ͱʹͳΓͦ͏Ͱ͢Ͷ… • ͦͷͨΊʹ͸΍͸ΓFeature SpecͳΜͳΓͷE2EࢼݧͰಈ࡞୲อ্ͨ͠ͰਐΊͯ ͍͘ͷͩͱࢥ͍·͢ɻ