Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Aa5b922fefbf18bea89972521971dfea?s=47 Yoshiki Iida
September 29, 2016
1.3k

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

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

Aa5b922fefbf18bea89972521971dfea?s=128

Yoshiki Iida

September 29, 2016
Tweet

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ࢼݧͰಈ࡞୲อ্ͨ͠ͰਐΊͯ ͍͘ͷͩͱࢥ͍·͢ɻ