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

Slide 1

Slide 1 text

React+WebpackΛར༻ͨ͠ RailsΞϓϦέʔγϣϯΛ HerokuͰຊ൪ӡ༻͢Δϊ΢ϋ΢ Yoshiki IIDA

Slide 2

Slide 2 text

ࣗݾ঺հ ൧ాҙݾ ! yo-iida Web੍࡞ձࣾʢ2012.4~2015.3ʣ  Ϋϥ΢υϫʔΫεʢ2015.5~ݱࡏʣ ΤϯλʔϓϥΠζࣄۀ෦޲͚։ൃΛ୲౰

Slide 3

Slide 3 text

࠷ۙͷΞ΢τϓοτ

Slide 4

Slide 4 text

Ϋϥ΢υϫʔΫε

Slide 5

Slide 5 text

Ϋϥ΢υϫʔΫε Ϋϥ΢υϫʔΫεʢCrowdWorksʣ͸ɺ  ΦϯϥΠϯ্Ͱاۀͱݸਓ͕௚઀ͭͳ͕Γɺ  ࢓ࣄͷϚονϯάɾडൃ஫Λߦ͏͜ͱ͕Ͱ͖Δ  ೔ຊ࠷େڃͷʮΫϥ΢υιʔγϯάʯαʔϏεɻ

Slide 6

Slide 6 text

ΤϯλʔϓϥΠζࣄۀ • Ϋϥ΢υϫʔΫεͷ๏ਓ޲͚αʔϏε

Slide 7

Slide 7 text

ΤϯλʔϓϥΠζࣄۀ • Ϋϥ΢υϫʔΫεͷ๏ਓ޲͚αʔϏε • େྔͷςΩετϥΠςΟϯά΍ޱίϛऩूɺ  Ξϯέʔτ΍શࠃௐࠪͳͲͷෳࡶͳۀ຿Λ  Ұׅ੥ෛ͠ɺϫʔΧʔʹൃ஫

Slide 8

Slide 8 text

ΤϯλʔϓϥΠζࣄۀ • Ϋϥ΢υϫʔΫεͷ๏ਓ޲͚αʔϏε • େྔͷςΩετϥΠςΟϯά΍ޱίϛऩूɺ  Ξϯέʔτ΍શࠃௐࠪͳͲͷෳࡶͳۀ຿Λ  Ұׅ੥ෛ͠ɺϫʔΧʔʹൃ஫ • ࣾ಺ͷ੍࡞νʔϜͷ࡞ۀޮ཰ԽͷͨΊʹ༷ʑ ͳγεςϜԽରԠ͕ඞཁʂ "

Slide 9

Slide 9 text

ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠

Slide 10

Slide 10 text

ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍

Slide 11

Slide 11 text

ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠ • ΍Δ͜ͱຬࡌ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍

Slide 12

Slide 12 text

ۀ຿ਐߦ؅ཧγεςϜͷ։ൃ • ͜Ε·ͰGoogleεϓϨουγʔτͰ؅ཧͯ͠ ͍ͨਐߦ؅ཧΛWebγεςϜԽ͍ͨ͠ • ΍Δ͜ͱຬࡌ • ٕज़తνϟϨϯδ΋͍ͨ͠ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍ "

Slide 13

Slide 13 text

Ͳ͏΍Δ͔

Slide 14

Slide 14 text

։ൃମ੍ • ϓϩμΫτΦʔφʔ1໊ɺΤϯδχΞ1໊Ͱൃ଍ • ൒೥Ͱ6໊ͷνʔϜʹ૿͑Δʢ͏ͪΤϯδχΞ4໊ʣ • Α͋͘ΔεΫϥϜ • ΤϯδχΞҎ֎΋εΫϥϜͷϓϩηεΛҰॹʹ΍Δ  & GitHub্Ͱίϛϡχέʔγϣϯ

Slide 15

Slide 15 text

αʔόʔαΠυ • શһ͕Ұ൪׳Ε͍ͯΔRails • Ͳ͜ͰͳΜͷॲཧΛ΍Δ΂͖͔ํ਑Λͭ͘Δ • มߋ͕ͭΒ͘ͳΒͳ͍Α͏ͳઃܭΛ໨ࢦ͢

Slide 16

Slide 16 text

ϑϩϯτΤϯυ • ۀ຿γεςϜͰjQueryͰDOM͍͡Γ·͘Δͱ ΍͹ͦ͏ • શһ஌ݟθϩ͚ͩͲReactνϟϨϯδ͍ͨ͠

Slide 17

Slide 17 text

Πϯϑϥ • Πϯϑϥʹਂ͍஌ݟͷ͋Δϝϯόʔ͕͍ͳ͍ • ͋·Γ࣌ؒΛ͔͚ΒΕͳ͍ • ॳظίετ΋ӡ༻ίετ΋཈͍͖͍͑ͯͨ

Slide 18

Slide 18 text

࠾༻ٕͨ͠ज़ελοΫ • αʔόʔαΠυ  Ruby 2.3.0ɺRails 4.2.5 • ϑϩϯτΤϯυ  React(ES2015)ɺReduxɺWebpack • Πϯϑϥ  Herokuʢ֤छAdd-onؚΉʣɺAWS S3 "

Slide 19

Slide 19 text

େมͩͬͨ͜ͱ

Slide 20

Slide 20 text

ϑϩϯτΤϯυ • React/ReduxͷνϡʔτϦΞϧ͸ྫ͕γϯϓϧ ͳͷͰɺۀ຿ϨϕϧʹͳΔͱͲ͏ॻ͍͍͍ͯ ͷ͔Θ͔ΒΜ໰୊ • ίϯϙʔωϯτઃܭ͕Ͱ͖ͯͳ͍໰୊ • ຊ൪Ͱى͖ͨΤϥʔΛͲ͏ݕ஌ͯ͠Ͳ͏ରॲ ͢Δ͔໰୊

Slide 21

Slide 21 text

Πϯϑϥ • Herokuຊ൪ӡ༻ܦݧ͕ͳ͔ͬͨͨΊ४උ͕େ มͩͬͨ໰୊ • ࣮ࡍʹӡ༻͠͸͡ΊͨΒϝϞϦؔ࿈ͷτϥϒ ϧ͕ଟൃͨ͠໰୊ "

Slide 22

Slide 22 text

Ͳ͏ରԠ͔ͨ͠  ʢϑϩϯτΤϯυฤʣ

Slide 23

Slide 23 text

νϡʔτϦΞϧ͸  ྫ͕γϯϓϧͳͷͰɺ ۀ຿ϨϕϧʹͳΔͱͲ͏ॻ͍ ͍͍ͯͷ͔Θ͔ΒΜ໰୊

Slide 24

Slide 24 text

՝୊ͩͬͨ͜ͱ • νϡʔτϦΞϧ΍ͬͯΈͨهࣄ͸ଟ͍͚Ͳίʔ υ͸͋·ΓࢀߟʹͳΒͳ͍͜ͱ͕ଟ͍ • ͱ͘ʹɺRails+React+ReduxͰͦΕͧΕΛͲ ͏࿈ܞͤ͞Δͷ͕Α͍ͷ͔Θ͔Γʹ͍͘

Slide 25

Slide 25 text

(ࣾ಺ͷ)ৄ͍͠ਓͷίʔυΛΈΔ • suzan2go/react-rails-redux-sample  (RailsͱReactͱReduxͷ૊Έ߹Θͤ) • suzan2go/rails_with_webpack  (RailsͱWebpackͷ૊Έ߹Θͤ) • h3poteto/fascia  (ReactͱReduxͷ૊Έ߹Θͤ)

Slide 26

Slide 26 text

খ͘͞͸͡ΊΔ https://speakerdeck.com/dex1t/xin-gui-railsapurinixiao-sakudao-ru-surureact

Slide 27

Slide 27 text

ݱঢ়ͷReactಋೖঢ়گ • gem͸react-railsΛ͔ͭͬͯreact_componentܦ༝ͰpropsΛ౉͍ͯ͠Δ • ඇSPAͰϖʔδͷҰ෦ͷΈReactԽ • ίϯϙʔωϯτ͸frontendσΟϨΫτϦʹஔ͍ͯWebpackͰϏϧυ • ES2015 • ίϯϙʔωϯτ͕ෳࡶͳͱ͜Ζ͸Ұ෦Redux • Webpackଆ͸Assets Pipeline͔Β੾Γ཭͍ͯ͠Δ • jQuery΍ଞͷϥΠϒϥϦ΋ڞଘ "

Slide 28

Slide 28 text

ίϯϙʔωϯτઃܭ͕  Ͱ͖ͯͳ͍໰୊

Slide 29

Slide 29 text

ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾

Slide 30

Slide 30 text

ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾ → ݟ௨͕͠ѱ͍ɺ࠶ར༻ੑ͕௿͍ͱ͍ͬͨ໰୊ʹܨ͕Δ

Slide 31

Slide 31 text

ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾ → ݟ௨͕͠ѱ͍ɺ࠶ར༻ੑ͕௿͍ͱ͍ͬͨ໰୊ʹܨ͕Δ → 1ίϯϙʔωϯτʹ٧ΊࠐΈ͗͢Δͱ  ɹ ਏ͞తʹ͸jQueryͰखଓ͖తʹ΍͍ͬͯΔͷͱมΘΒͳ͘ͳΔ

Slide 32

Slide 32 text

ࠓݟ͍͑ͯΔ՝୊ • ίϯϙʔωϯτͷංେԽ • ίϯϙʔωϯτʹػೳΛܧ͗଍ͯ͠͠·ͬͯ ͓Γɺ੾Γ෼͚͕ෆे෼ɾෆద੾ → ݟ௨͕͠ѱ͍ɺ࠶ར༻ੑ͕௿͍ͱ͍ͬͨ໰୊ʹܨ͕Δ → 1ίϯϙʔωϯτʹ٧ΊࠐΈ͗͢Δͱ  ɹ ਏ͞తʹ͸jQueryͰखଓ͖తʹ΍͍ͬͯΔͷͱมΘΒͳ͘ͳΔ → ίϯϙʔωϯτͷ੹຿ɾؔ৺ࣄΛݟ௚͢

Slide 33

Slide 33 text

ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍

Slide 34

Slide 34 text

ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍ → BootstrapͰͳΜͱͳ͘͸͡Ίͯ͠·ͬͨͷͰແ๏஍ଳͩͬͨ

Slide 35

Slide 35 text

ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍ → BootstrapͰͳΜͱͳ͘͸͡Ίͯ͠·ͬͨͷͰແ๏஍ଳͩͬͨ → ίϯϙʔωϯτͷ੹຿ɾؔ৺ࣄͰߟ͍͑ͯ͘ͱ  ɹ ࠷খ୯Ґͷίϯϙʔωϯτʹ͍͖ͭ͘

Slide 36

Slide 36 text

ࠓݟ͍͑ͯΔ՝୊2 • CSSͷઃܭ͕ෆे෼ͳͨΊίϯϙʔωϯτͱ ߹Θͤͯߟ͑ΒΕͯͳ͍ → BootstrapͰͳΜͱͳ͘͸͡Ίͯ͠·ͬͨͷͰແ๏஍ଳͩͬͨ → ίϯϙʔωϯτͷ੹຿ɾؔ৺ࣄͰߟ͍͑ͯ͘ͱ  ɹ ࠷খ୯Ґͷίϯϙʔωϯτʹ͍͖ͭ͘ → Atomic DesignϕʔεͷCSSઃܭ "

Slide 37

Slide 37 text

ຊ൪Ͱى͖ͨΤϥʔΛ  Ͳ͏ݕ஌ͯ͠Ͳ͏ରॲ͢Δ͔ ໰୊

Slide 38

Slide 38 text

RollbarͷΤϥʔ಺༰

Slide 39

Slide 39 text

RollbarͷΤϥʔ಺༰ ͳΔ΄ͲΘ͔ΒΜ(Ň‒䞦‒)

Slide 40

Slide 40 text

՝୊ͩͬͨ͜ͱ • ίϯύΠϧޙͷjsͰΤϥʔ͕ు͔Εͯ΋Rollbar Ͱरͬͨͱ͖ʹͲ͏͍͏Τϥʔ͔Θ͔Βͳ͍ • σόοά͕ͭΒ͍

Slide 41

Slide 41 text

SourceMapରԠ • Webpack͔ΒSourceMapΛੜ੒͢ΔΑ͏ʹͨ͠ • σϓϩΠͷࡍʹRollbarͱ࿈ܞ • ৄࡉ͸  ΤϥʔϞχλϦϯάαʔϏε Rollbar ͱ GitHub Issue Λ ར༻ͨ͠ΤϥʔରԠϑϩʔ  ʢhttp://engineer.crowdworks.jp/entry/2016/08/29/111434ʣ

Slide 42

Slide 42 text

SourceMapରԠޙͷRollbar

Slide 43

Slide 43 text

SourceMapରԠޙͷRollbar ͲͷίϯϙʔωϯτͷͲͷpropsͰΤϥʔ͕ى͖ͯΔ͔Θ͔Δʂ  ˞͖͞΄Ͳͷ΋ͷͱ͸ผͷΤϥʔͰ͢m(_ _)m "

Slide 44

Slide 44 text

Ͳ͏ରԠ͔ͨ͠  ʢΠϯϑϥฤʣ

Slide 45

Slide 45 text

Herokuຊ൪ӡ༻ܦݧ͕  ͳ͔ͬͨͨΊ४උ͕  େมͩͬͨ໰୊

Slide 46

Slide 46 text

՝୊ͩͬͨ͜ͱ • Staging, Production,...ͦΕͧΕͷ؀ڥʹͲΕ ͚ͩͷϓϥϯΛ༻ҙ͢Ε͹͍͍ʁ • Herokuͷ؂ࢹͬͯͲ͏΍Δʁ • ௐ΂ͯ΋͋·Γৄ͍͠৘ใ͕ग़ͯ͜ͳ͍

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

ಛʹ΍͓͍ͬͯͯΑ͔ͬͨ͜ͱ • Τϥʔ؂ࢹ(Rollbar) • ϩά؂ࢹ(PaperTrail) • ϝτϦΫε؂ࢹ(Librato)

Slide 50

Slide 50 text

ಛʹ΍͓͍ͬͯͯΑ͔ͬͨ͜ͱ • Τϥʔ؂ࢹ(Rollbar) • ϩά؂ࢹ(PaperTrail)  →RollbarͰरΘΕͳ͍ΤϥʔΛर͏ • ϝτϦΫε؂ࢹ(Librato)  →ϝϞϦ౳ͷ੍໿͕ڧ͍HerokuΛ࢖͏ͳΒඞਢ "

Slide 51

Slide 51 text

࣮ࡍʹӡ༻͠͸͡ΊͨΒ  ϝϞϦؔ࿈ͷτϥϒϧ͕ଟൃ ͨ͠໰୊

Slide 52

Slide 52 text

՝୊ͩͬͨ͜ͱ • ӡ༻͕࢝·ͬͯ਺ϲ݄ͨͬͨ͋Δ೔ɺɺ

Slide 53

Slide 53 text

՝୊ͩͬͨ͜ͱ • ӡ༻͕࢝·ͬͯ਺ϲ݄ͨͬͨ͋Δ೔ɺɺ ϝϞϦ࢖༻ྔ͕ٸ্ঢ(Ň‒䞦‒)

Slide 54

Slide 54 text

՝୊ͩͬͨ͜ͱ

Slide 55

Slide 55 text

՝୊ͩͬͨ͜ͱ

Slide 56

Slide 56 text

՝୊ͩͬͨ͜ͱ Ͳ͏΍Βڊେͳσʔλ͕ొ࿥͞ΕͨͬΆ͍

Slide 57

Slide 57 text

՝୊ͷ੔ཧ • HerokuͷεϫοϓൃੜͷΤϥʔ(R14)͕அଓతʹൃੜ͠ ͍ͯΔ ※Heroku͸ϝϞϦফඅྔ͕εϫοϓ߹Θͤͯ200%ʹͳΔͱ Dynoࣗମ͕Kill͞ΕΔ(R15Τϥʔ) • େྔͷσʔλ͕౤ೖ͞ΕͯɺͦΕΒΛҰؾʹѻ͏ॲཧ͕ Ͳ͔͜ʹ͋ͬͯɺϝϞϦΛ৯͍௵ͯ͠ΔͬΆ͍ • ϝϞϦΛղ์͢ΔͨΊͷॲཧΛԠٸॲஔͰ͍ΕΔ͜ͱͱɺ ϝϞϦΛେྔফඅ͍ͯ͠ΔॲཧΛಛఆͯ͠ରԠ͕ඞཁ

Slide 58

Slide 58 text

ରԠͨ͜͠ͱ • pumaͷworkerϓϩηεΛ1ʹ͢Δ • puma_worker_killerΛಋೖ͠ɺఆظతʹ workerΛkill͢Δ͜ͱͰϝϞϦΛղ์͢Δ • ϝϞϦϓϩϑΝΠϥͷAdd-on(Scout)Λಋೖ͠ ϝϞϦফඅͷܹ͍͠ॲཧΛಛఆ͢Δ

Slide 59

Slide 59 text

pumaʹ͍ͭͯ • ϚϧνϓϩηεɺϚϧνεϨουͰಈ͔ͤΔ ΞϓϦέʔγϣϯαʔόʔ • Herokuਪ঑  Puma is Now the Recommended Ruby Webserver  (https://devcenter.heroku.com/changelog-items/594)

Slide 60

Slide 60 text

pumaͷฒྻ౓ʹ͍ͭͯ • R14Τϥʔ͕ग़Δ৔߹͸ฒྻ౓ͷઃఆΛ௿͘͠ ͯΈͯͶɺͱެࣜʹॻ͍ͯ͋Δ  https://devcenter.heroku.com/articles/ruby-memory- use#too-many-workers-at-boot $ heroku conﬁg:set WEB_CONCURRENCY=1

Slide 61

Slide 61 text

puma_worker_killerʹ͍ͭͯ • schneems/puma_worker_killer • pumaͷworkerϓϩηεΛఆظతʹkillͯ͠  ϝϞϦΛղ์͢ΔͨΊͷgem • ͋͘·ͰԠٸॲஔ  ʢworker࠶ىಈͷ෼εϧʔϓοτ͸Լ͕Δɻຊ ࣭తղܾͰ͸ͳ͍ɻʣ

Slide 62

Slide 62 text

ϝϞϦϓϩϑΝΠϥ RailsͰϝϞϦϓϩϑΝΠϦϯάΛߦ͍͍ͨ৔߹ ͍͔ͭ͘બ୒ࢶ͕͋Δ • HerokuެࣜͰݴٴ͞Ε͍ͯΔ΋ͷ • derailed_benchmarks(gem) • Scout(Add-on) • ͦͷଞ • skylight.io

Slide 63

Slide 63 text

ϝϞϦϓϩϑΝΠϥ RailsͰϝϞϦϓϩϑΝΠϦϯάΛߦ͍͍ͨ৔߹ ͍͔ͭ͘બ୒ࢶ͕͋Δ • HerokuެࣜͰݴٴ͞Ε͍ͯΔ΋ͷ • derailed_benchmarks(gem) • Scout(Add-on) • ͦͷଞ • skylight.io ←Add-onͰ؆୯ͦ͏ͩͬͨͷͰ࢖ͬͯΈͨ

Slide 64

Slide 64 text

Scoutͱ͸ • ϝϞϦϓϩϑΝΠϥͱN+1Λݕग़ͯ͘͠ΕΔ ϞχλϦϯάπʔϧ • ·ͩϕʔλ൛Β͘͠ɺHerokuͰ͸ແྉͰ࢖͑ ΔΑ͏ʹͳ͍ͬͯΔ  ※ຊ൪Ͱ࢖͏ʹ͸೦ͷͨΊಈ࡞ݕূΛ͓͍ͯͨ͠΄͏͕Αͦ͞͏

Slide 65

Slide 65 text

Scoutͱ͸

Slide 66

Slide 66 text

Scoutͱ͸

Slide 67

Slide 67 text

ScoutಋೖʹΑΓ • ϝϞϦফඅͷܹ͍͠ίϯτϩʔϥΛಛఆͰ͖ͨ • ࠓճ͸େ͖ͳσʔλͷΠϯελϯεͷϨϯμϦϯ ά͕ϘτϧωοΫʹͳ͍ͬͯͨͨΊɺద੾ʹϖʔ δϯάΛ͍ΕΔ͜ͱͰճආͰ͖ͨ

Slide 68

Slide 68 text

ScoutಋೖʹΑΓ • ϝϞϦফඅͷܹ͍͠ίϯτϩʔϥΛಛఆͰ͖ͨ • ࠓճ͸େ͖ͳσʔλͷΠϯελϯεͷϨϯμϦϯ ά͕ϘτϧωοΫʹͳ͍ͬͯͨͨΊɺద੾ʹϖʔ δϯάΛ͍ΕΔ͜ͱͰճආͰ͖ͨ ϝϞϦ໰୊ΛHerokuͷ੍໿ͱͯ͠ߟ͑ΔͷͰ͸ͳ ͘ɺϝϞϦ໰୊ʹහײʹରԠ͍ͯ͘͜͠ͱʹΑΓ ΤίͳΞϓϦέʔγϣϯΛ࡞ΕΔͱߟ͑Α͏ "

Slide 69

Slide 69 text

·ͱΊ

Slide 70

Slide 70 text

·ͱΊ • ஌ݟθϩ͔ΒͰ΋Rails+React+Redux+Webpackߏ੒Ͱ  ϓϩμΫτ͸࡞ΕΔ • ׳Ε͍ͯͳ͍ஈ֊Ͱ͸ৗʹߏ੒ΛٙͬͯઌΛݟਾ͑ͳ͕Β  ։ൃͨ͠΄͏͕Αͦ͞͏ • ͱΓ͋͑ͣಈ͘Α͏ʹͳͬͨ΋ͷ͸ɺ·֦ͩுੑ΍ϝϯςφϯεੑͷߴ͍ ઃܭɾߏ଄ʹͳͬͯͳ͍Մೳੑେ • Ͱ΋ɺ΍Δͱ͖͸ࢥ͍੾ͬͯಋೖͯ͠΋ҙ֎ͱͳΜͱ͔ͳΔ • Heroku͸੍໿͕͋Δ͕ɺ্ཱ͔ͪ͛ΒετϨεͳ͘Πϯϑϥߏ ஙͰ͖Δʢͦͷ੍໿ͷதͰಈ͘ͱ͍͏ϝϦοτ΋ੜ·ΕΔʣ

Slide 71

Slide 71 text

We are hiring! ण࢘ϥϯν΍ͬͯ·͢ https://crowdworks.co.jp/recruit/engineer/

Slide 72

Slide 72 text

࠲ஊձͰ͍͍ͨͩͨQ&A

Slide 73

Slide 73 text

Q.  ReactͱRailsͷ૬ੑͬͯඍົ͡Όͳ͍Ͱ͔͢ʁ SPAͱ͔ͩͱGoͱ͔ʹͨ͠΄͏͕Αͦ͞͏͡Όͳ͍Ͱ͔͢ʁ A. • ͦͷ௨Γͩͱࢥ͍·͢ɻαʔόʔαΠυ͕RailsͰ͋Δඞવੑ͸ͳ͘ɺ΍ΕΔ͔Ͳ͏͔ͩͱ ࢥ͍ͬͯ·͢ɻ • զʑͷ৔߹͸νʔϜϝϯόʔͷεΩϧηοτͱͯ͠Rails͕Ұ൪ࣄۀతʹίϛοτͰ͖Δ͔Β ͱ͍͏എܠ͕͋ΓɺͦͷதͰJavaScript΋ͳΜΒ͔ͷܗͰߏ଄Խ͍ͨ͠ͱ͍͏Ϟνϕʔγϣ ϯͰ͜ͷ૊Έ߹ΘͤΛબ୒͍ͯ͠·͢ɻ • SPAͰ͋Ε͹αʔόʔαΠυ͸׬શAPIͱͯ͠GoʹৼΓ੾Δͷ͸ਖ਼͍͠ͱࢥ͍·͕͢ɺͦΕ ͳΓͷ֮ޛ΋ඞཁʹͳͬͯ͘Δͱࢥ͍·͢ɻ  (Ҿ༻) SPAͱ֮ޛ http://www.slideshare.net/teppeis/spa-66093931 • ࣄۀత੒Ռͱٕज़తʹΑ͍ϓϩμΫτ͔Ͳ͏͔͸τϨʔυΦϑʹͳΒ͟ΔΛಘͳ͍ঢ়گ΋͋ Δͱࢥ͍·͢ͷͰɺϓϩδΣΫτͦΕͧΕͰόϥϯεΛߟ͑ͯબ΂͹Α͍ͱߟ͍͑ͯ·͢ɻ

Slide 74

Slide 74 text

Q. ϑϩϯτΤϯυͷςετͬͯͲ͏ͯ͠· ͔͢ʁ A. • Feature SpecʢRspec+Capybara+FirefoxʣͰ୲อ͍ͯ͠·͢ɻ • ςετํ਑ͱͯ͠͸ɺࡉ͔͍ςετ͸ModelͱServiceΛத৺ʹ ୯ମςετͰԡ͍͖͑ͯ͞ɺେࡶ೺ͳਖ਼ৗܥͷςετ͸Feature ͔Βԡ͍͑ͯ͘͞ͱ͍͏ํ਑Λͱ͍ͬͯ·͢ɻ • JavaScriptͷ୯ମςετ͸΍͍ͬͯ·ͤΜɻʢ༨༟͕ͰͨΒ΍ͬ ͯ΋͍͍͔΋ɺɺ͘Β͍ʣ

Slide 75

Slide 75 text

Q.  ৽نͩͱReact͍Ε΍͍͚͢Ͳطଘͷେ͖͘ͳͬͯ͠ ·ͬͨjQueryͷϦϓϨΠε͸΍ͬͺΓେมͰ͢ΑͶ A. • ͔ͨ͠ʹ৽نϓϩμΫτ͔ͩΒখ͘͞͸͡ΊΔͱ͍͏ߟ͑ํ͕ద༻Ͱ͖ͨͱ͍͏ ͜ͱ͸͋Δͱࢥ͍·͢ɻ • Ϋϥ΢υϫʔΫεͷຊମͷαʔϏε͸ංେԽͨ͠jQuery͕ଘࡏ͍ͯͯ͠ɺ͍ͭ͘ ͔͸vue.jsʹஔ͖׵͑ͨ෦෼͕͋Γ·͕͢ɺ΍͸ΓҠߦ͸೉͔ͬͨ͠Α͏Ͱ͢ɻ • ΍Δͱͨ͠Βػೳ୯ҐͰ͔͠ஔ͖׵͑ΒΕͳ͍ͱࢥ͏ͷͰɺ̍ϖʔδ͝ͱʹͰ͔ ͍ίϯϙʔωϯτ܈Λʮ͍͑΍ʯͰ࡞͍ͬͯ͘͜ͱʹͳΓͦ͏Ͱ͢Ͷ… • ͦͷͨΊʹ͸΍͸ΓFeature SpecͳΜͳΓͷE2EࢼݧͰಈ࡞୲อ্ͨ͠ͰਐΊͯ ͍͘ͷͩͱࢥ͍·͢ɻ