Rubyエンジニア多めの現場での Vue.js1系 on Rails

by Daichi Hioki

Slide 1

Slide 1 text

3VCZΤϯδχΞଟΊͷݱ ৔Ͱͷ7VFKTܥPO3BJMT ΫϦχΧϧɾϓϥοτϑΥʔϜגࣜձࣾ ೔ஔɹେஐ

Slide 2

Slide 2 text

͸͡Ίʹ! ೥݄͔ΒΫϦχΧϧɾϓϥοτϑΥʔϜגࣜձࣾͰΤϯδχΞΛ ͍ͯ͠·͢ɻ ΫϦχΧϧɾϓϥοτϑΥʔϜגࣜձࣾ͸ࣾ໨Ͱ͢ɻ ೥ʹಇ͖࢝Ί͔ͯΒɺͣͬͱ3VCZΤϯδχΞ ࣌ʑJ04Τϯδ χΞ Λ͍ͯ͠·͢ɻ ࢓ࣄͰ͸ओʹ$MJQMBͱ͍͏Ϋϥ΢υܕిࢠΧϧςΛ7VFKTͱ3BJMTΛ࢖ͬ ͯ։ൃ͍ͯ͠ΔͷͰ͕͢ɺͦͷ஌ݟΛ঺հ͠ʹདྷ·ͨ͠ɻ 7VFKTҎ֎ͷ+BWB4DSJQUϑϨʔϜϫʔΫͷ࣮຿ܦݧ͸ແ͍ͨΊظ଴ͤͣͲ ͏ͧ

Slide 3

Slide 3 text

ͦͷલʹࣗݾ঺հ രԻ্өͰ༗໊ͳཱ઒ӺʹॅΜͰ͍·͢ɻ ձࣾ ߿ொ ·Ͱ࣌ؒ൒ऑ͔͔Γ·͕͢ɺिͰϦϞʔτϫʔ Ϋ͍ͯͯ͠ɺ͔ͭɺ࣌൒·Ͱʹग़ࣾ͢Ε͹ྑ͍ͷͰ·ͬ ͨۤ͘Ͱ͸͋Γ·ͤΜɻ झຯ झຯͱ͍͏͔ڧ੍ ͸ࢠҭͯͰ͢ ɻࡀͷঁͷࢠ͕͍·͢ ɻ ࠷ۙ͸/JOUFOEP4XJUDIͷϚϦΦΧʔτΛ΍͍ͬͯ·͢ɻϔλ ΫιͳͷͰωοτରઓͰҐҎ্ʹͳͬͨ͜ͱ͕͋Γ·ͤΜɻ

Slide 4

Slide 4 text

ΞδΣϯμ Ͳ͏ͯ͠7VFKTΛબΜ͔ͩ Ͳ͏΍ͬͯ7VFKTΛ3BJMTʹ૊ΈࠐΜ͔ͩ ۩ମతʹͲΜͳײ͡Ͱ7VFKTPO3BJMTͯ͠Δ 7VFKTܥʹ͠ͳ͍ͷ

Slide 5

Slide 5 text

Ͳ͏ͯ͠7VFKTΛબΜ ͩ

Slide 6

Slide 6 text

7VFKTಋೖ౰࣌ͷ೥݄ͷϝϞʹΑΔͱʜ ֶशίετ͕௿͍ɻ ࣮ࡍʹ௿͔ͬͨؾ͕͠·͢ɻ ඞཁ࠷௿ݶͷػೳ͕ଗ͍ͬͯΔɻ σʔλόΠϯσΟϯά ίϯϙʔωϯτͳͲ ࣮੷͕͋Δɻ $MJQMBͷ։ൃΛ͓ख఻͍ͯ͠΋Β͍ͬͯΔձࣾͰ͢Ͱʹ࣮੷͕ ͋ͬͨΑ͏Ͱ͢ɻ "OHVMBSKT&NCFSKT7VFKT3FBDUKT ͷத͔Βͷཧ༝Ͱ7VFKT͕બ͹ΕͨΑ͏Ͱ͢ɻ

Slide 7

Slide 7 text

Ͳ͏΍ͬͯ7VFKT Λ3BJMTʹ૊ΈࠐΜͩ

Slide 8

Slide 8 text

7VFKTͷΠϯετʔϧ͸3BJMT"TTFUTͰ ཧ༝ύοέʔδΞοϓσʔτΛCVOEMFSʹ೚͍͔ͤͨΒ

Slide 9

Slide 9 text

SPPU7VFJOTUBODFΛ࡞੒͢ΔͨΊʹ͸ ʮ7JFXͷཁૉʹJEΛৼͬͯɺ ͦΕΛ7VFίϯετϥΫλؔ਺ͷFMΦϓγϣϯͰࢦఆ͢Δʯ ͱ͍ͬͨ͜ͱ͕ඞཁͰ͢ɻ ཧ༝ແ͍ͱ7VF͕ಈ͔ͳ͍ SPPU7VFJOTUBODFͷ࡞੒ +4

Slide 10

Slide 10 text

˞͜ͷ࣌7VFKTEFWUPPMTͱ͍͏$ISPNFͷ֦ுػೳΛ࢖͍ͬͯΕ͹ ͷΑ͏ʹ3PPU͕ೝࣝ͞Ε·͢ɻ SPPU7VFJOTUBODFͷ࡞੒

Slide 11

Slide 11 text

ʮ7VFίϯετϥΫλؔ਺ͷFMΦϓγϣϯͰࢦఆ͢Δʯ ΛͲͷ+BWB4DSJQUϑΝΠϧͰ΍͍ͬͯΔ͔ͱ͍͏ͱɺ۩ମతʹ͸ Χϧςը໘Λදࣔ͢Δ$POUSPMMFSͰ͋Δ$IBSUT$POUSPMMFS ʹରԠ͢ΔDIBSUTDPGGFFͰ΍͍ͬͯ·͢ɻ ཧ༝BQQWJFXTMBZPVUT@IFBEIUNMIBNMϑΝΠϧ಺ͰͷΑ͏ʹͯ͠ $POUSPMMFS໊ʹରԠ͢Δ+BWB4DSJQUϑΝΠϧΛ ಡΈࠐΉΑ͏ʹ͍ͯ͠ΔͨΊ SPPU7VFJOTUBODFͷ࡞੒ 7JFX

Slide 12

Slide 12 text

SPPU7VFJOTUBODFͷ࡞੒ DPOpHJOJUJBMJ[FSTBTTFUTSCͰ΋ҎԼͷΑ͏ʹͯ͠ $POUSPMMFSʹରԠ͢Δ+BWB4DSJQUϑΝΠϧΛ ίϯύΠϧର৅ʹ௥Ճ͍ͯ͠·͢ɻ JOJUJBMJ[FS

Slide 13

Slide 13 text

۩ମతʹͲΜͳײ͡Ͱ 7VFKTPO3BJMTͯ͠Δ

Slide 14

Slide 14 text

࠷ۙߦͬͨ୯७ͳ$36%ͷ࣮૷Λ΋ͱʹͯ͠આ໌͠·͢ɻ ʮ؟Պݕࠪ࣌ͷଌఆ݁ՌΛΧϧςʹೖྗͰ͖ΔΑ͏ʹ͢Δʯ දࣔํ๏ ೖྗɾอଘํ๏ ߋ৽ํ๏ ࡟আํ๏ ͷॱͰઆ໌͠·͢ɻ

Slide 15

Slide 15 text

Ұൠతͳ3BJMTΞϓϦಉ༷ɺ·ͣ͸ ؟Պݕࠪͷଌఆ݁Ռ༻ͷ.PEFMΛఆٛ͢Δɻ DPOpHSPVUFTSCʹϧʔςΟϯάΛఆٛ͢Δɻ ϧʔςΟϯάͱରԠ͢Δ$POUSPMMFSΛॻ͘ɻ දࣔ෦෼ͷ࣮૷ΛͲ͏͍ͯ͠Δ͔

Slide 16

Slide 16 text

3BJMT͔Β7VFKT΁؟Պݕࠪ৘ใΛ౉͢ ͦͷޙ7JFXΛॻ͘ͷͰ͕͢ɺ͜ͷ࣌3BJMT͔Β7VFKTʹ ؟ՊݕࠪΠϯελϯεͷ৘ใΛ౉͍ͯ͠·͢ɻ ۩ମతʹ͸ɺࣄલʹ+BWB4DSJQUଆͰͷΑ͏ʹJEFZF5FTU$PNQPOFOUͷ άϩʔόϧίϯϙʔωϯτΛొ࿥͢Δ͜ͱͰʜ 7JFXଆͰΧελϜཁૉFZFUFTUDPNQPOFOUΛ࢖༻Ͱ͖Δঢ়ଶʹͯ͠ɺ ͷΑ͏ʹFZFUFTUDPNQPOFOUͰFZFUFTUϓϩύςΟʹରͯ͠ ؟ՊݕࠪΠϯελϯεΛ+40/Խͨ͠΋ͷΛࢦఆ͢Δ͜ͱͰ 3BJMT͔Β7VFKT΁؟Պݕࠪ৘ใΛ౉͍ͯ͠·͢ɻ +4 7JFX

Slide 17

Slide 17 text

3BJMT͔Β7VFKT΁؟Պݕࠪ৘ใΛ౉͢ ͪͳΈʹάϩʔόϧίϯϙʔωϯτΛఆٛ͢Δ+BWB4DSJQUϑΝΠϧͰ͕͢ BQQBTTFUTKBWBTDSJQUTDIBSUT@DPNQPOFOUT ഑Լʹஔ͍͍ͯ·͢ɻ ઌఔͷʮSPPU7VFJOTUBODFͷ࡞੒ʯͰ͝঺հͨ͠ BQQBTTFUTKBWBTDSJQUTDIBSUTDPGGFF಺Ͱ SFRVJSF@USFFDIBSUT@DPNQPOFOUT ͢Δ͜ͱͰಡΈࠐΜͰ͍·͢ɻ

Slide 18

Slide 18 text

FZF5FTUΦϒδΣΫτ͕ແࣄઃఆ͞ΕͨΒɺ ޙ͸FZF5FTUΦϒδΣΫτͷத਎Λ୧Γͭͭ ද͍ࣔͨ͠ͱ͜ΖͰ\\GPPCBS^^͢Ε͹ ͷΑ͏ʹͯ͠ͷVOJUͷTQIFSFͷ஋ lzΛදࣔͰ͖·͢ɻ 7JFX

Slide 19

Slide 19 text

\\VOJUTQIFSF^^͕lzͳΒ \\VOJUTQIFSFcFZF1PXFS^^͸lz ͪͳΈʹ\\VOJUTQIFSFcFZF1PXFS^^ͷAcFZF1PXFSAͷ෦෼͸ 7VFKTͷ'JMUFSͱݺ͹ΕΔػೳΛ࢖͍ͬͯ·͢ɻ $MJQMBͰ͸ͷΑ͏ʹFZF1PXFSͱ͍͏໊લͷ'JMUFS͕ఆٛ͞Ε͍ͯ·͢ɻ +4 +4

Slide 20

Slide 20 text

͍ͬͨΜɺදࣔ෦෼Λ·ͱΊ·͢ɻ Ұൠతͳ3BJMTΞϓϦಉ༷.PEFM΍SPVUJOH $POUSPMMFSΛ ॻ͘ɻ 7VFDPNQPOFOU bGPP$PNQPOFOU` ʜ Λఆٛ͢Δɻ ͢Δͱ7JFXͰGPPDPNQPOFOU͕࢖͑ΔΑ͏ʹͳΔɻ ʮ3BJMT͔Β7VFKTʹ౉͍ͨ͠ΠϯελϯεΛ+40/Խͨ͠ ΋ͷʯΛGPPDPNQPOFOUͷϓϩύςΟʹઃఆ͢Δɻ 7JFXͷද͍ࣔͨ͠ՕॴͰ\\GPPCBScGPP'JMUFS^^͢Δɻ

Slide 21

Slide 21 text

࡞੒෦෼ OFX DSFBUF ͷ࣮૷Λ Ͳ͏͍ͯ͠Δ͔ ௥ՃϘλϯͷ࣮૷ํ๏ อଘϘλϯͷ࣮૷ํ๏ ͷॱͰ͝঺հ͠·͢ɻ

Slide 22

Slide 22 text

௥ՃϘλϯͷ࣮૷ΛͲ͏͍ͯ͠Δ͔

Slide 23

Slide 23 text

௥ՃϘλϯͷ)5.-͸ ϘλϯΫϦοΫ࣌ʹBEE3FG3FTVMUΛݺΜͰ͍·͢ɻ BEE3FG3FTVMUͷத਎͸ ˞FZF5FTUΦϒδΣΫτͷ࣋ͭSFG@SFTVMUTͷ഑ྻʹର͠ ͯɺ৽نͷ3FG3FTVMUΦϒδΣΫτΛද͢ FZF5FTUOFX@SFG@SFTVMUͷ಺༰ΛQVTI͍ͯ͠Δɻ 7JFX +4

Slide 24

Slide 24 text

OFX@SFG@SFTVMUͷ۩ମతͳத਎͸ͷΑ͏ʹ৽ن3FG3FTVMUΠϯελϯε Λ3FG3FTVMU4FSJBMJ[FSͰแΜͩ΋ͷͰ͢ɻ ઌఔදࣔ࣌ͷઆ໌ 3BJMT͔Β7VFKTʹ؟Պݕࠪ৘ใΛ౉͢෦෼ Ͱͷ Α͏ͳίʔυΛ͓ݟͤ͠·͕ͨ͠ɺ ࣮͸͜ͷFZFUFTUϓϩύςΟΛઃఆ͍ͯͨ࣌͠ʹ OFX@SFG@SFTVMU΋Ұॹʹ౉͍ͯͨ͠ͷͰ͢ɻ .PEFM 7JFX

Slide 25

Slide 25 text

ͯ͞ɺFZF5FTUSFG@SFTVMUTʹQVTI͢Δ෦෼Λॻ͍ͨΒɺ ޙ͸ͷΑ͏ʹ7JFXଆͰWGPSΛ࢖ͬͯ ιʔεσʔλʹFZF5FTUSFG@SFTVMUTΛࢦఆ͢Ε͹ ޙ͸σʔλόΠϯσΟϯά͕ಇ͍ͯ FZF@UFTUSFG@SFTVMUT͕૿͑ͨ࣌ʹউखʹ ೖྗΤϦΞ΋૿͑ͯ͘ΕΔΑ͏ʹͳΓ·͢ɻ 7JFX

Slide 26

Slide 26 text

อଘͷॲཧΛͲ͏͍ͯ͠Δ͔ ௥ՃϘλϯͷ)5.-͸Ͱ͢ɻ ϘλϯΫϦοΫ࣌ʹTVCNJUΛݺΜͰ͍·͢ɻ อଘϘλϯΛΫϦοΫͨ࣌͠͸"KBYϦΫΤετΛ͍ͯ͠·͢ɻ 7JFX

Slide 27

Slide 27 text

TVCNJUͷத਎͸Ͱ͢ɻ ΫϦοΫ͞ΕͨՕॴͷGPSNΛऔಘͯ͠ɺ ͦͷGPSNΛҾ਺ʹKRVFSZVKTͷIBOEMF3FNPUFΛݺΜ Ͱ͍·͢ɻ +4

Slide 28

Slide 28 text

·ͨɺBKBYTVDDFTTͷ࣌ʹ ʮϨεϙϯεϘσ ΟͷDIBSUΦϒδΣΫτΛҾ਺ʹ DBMMCBDLϝιουΛݺͿʯ ͱ͍͏Α͏ͳΠϕϯτ΋ొ࿥͍ͯ͠·͕͢ʜ DBMMCBDLϝιου͸֤ʑͷίϯϙʔωϯτͰͷΑ͏ʹఆٛ͞Ε·͢ɻ +4 +4 +4

Slide 29

Slide 29 text

͍ͬͨΜɺ࡞੒෦෼Λ·ͱΊ·͢ɻ ௥ՃϘλϯΫϦοΫ࣌͸ɺ഑ྻʹQVTI͢Δ͚ͩɻ σʔλόΠϯσΟϯάʹΑͬͯೖྗΤϦΞ͸উखʹඳը͞ΕΔɻ อଘϘλϯΫϦοΫ࣌͸ɺTVCNJUΛݺΜͰ͍Δɻ TVCNJUͷத਎͸GPSNΛҾ਺ʹKRVFSZVKTͷIBOEMF3FNPUFΛݺ ΜͰ͍Δɻ IBOEMF3FNPUFʹΑͬͯGPSNͷEBUBଐੑͳͲ͔Βྑ͍ײ͡ ʹ"KBYϦΫΤετͯ͘͠Ε͍ͯΔɻ BKBYTVDDFTTͷίʔϧόοΫ΋ొ࿥͍ͯ͠Δɻ ίʔϧόοΫͷॲཧ಺༰͸֤ʑͷίϯϙʔωϯτͰఆٛ͞ΕΔɻ

Slide 30

Slide 30 text

ߋ৽͸ϦΫΤετ࣌ͷύϥϝʔλʔʹJEΛؚΊΕ͹ ͷΑ͏ʹWJGʹର৅ͷΦϒδΣΫτͷJEΛࢦఆ͢Δ͜ͱͰɺ ର৅ͷΦϒδΣΫτʹJE͕ଘࡏ͢Δ ͭ·ΓɺΦϒδΣΫτ͕͢Ͱʹ࡞੒͞Ε͍ͯΔ ৔߹ͷΈ JOQVUλά͕IJEEFOͰඳը͞ΕΔ ͭ·ΓɺJE͕ૹ৴͞ΕΔ Α͏ʹͳΓ·͢ɻ ߋ৽ΛͲ͏࣮૷͍ͯ͠Δͷ͔ 7JFX

Slide 31

Slide 31 text

·ͣ͸ͷʮ࡟আΞΠίϯΛΫϦοΫ͢Δͱදࣔ͞Εͳ͘ͳΔʯ෦෼ ࡟আΛͲ͏࣮૷͍ͯ͠Δͷ͔

Slide 32

Slide 32 text

࡟আΞΠίϯ͸ΫϦοΫ͞Εͨ࣌ʹSFNPWFΛݺͿΑ͏ʹͳ͍ͬͯ·͢ ޙ͸7JFXଆͰEFMFUFE͞Ε͍ͯͳ͍΋ͷ͚ͩΛදࣔ͢ΔΑ͏ʹ WJGΛॻ͚ͩ͘Ͱ͢ SFNPWFͷத਎͸ର৅ͷΦϒδΣΫτͷEFMFUFEϑϥάΛ USVFʹ͍ͯ͠·͢ +4 7JFX

Slide 33

Slide 33 text

͜ΕͰ͸දࣔ͞Εͳ͘ͳ͚ͬͨͩͰ͢ɻ ࣮ࡍʹ࡟আ͢Δʹ͸@EFTUSPZͷΑ͏ͳײ͡Ͱ ϦΫΤετ͢Δඞཁ͕͋Γ·͢ɻ ࡟আΛͲ͏࣮૷͍ͯ͠Δͷ͔ ˞.PEFMଆͰBDDFQUT@OFTUFE@BUUSJCVUFT@GPSʹ BMMPX@EFTUSPZΦϓγϣϯΛઃఆ͢Δͱ@EFTUSPZ Ͱ࡟আͯ͘͠ΕΔΑ͏ʹͳΓ·͢ɻ 3BJMTͷ.PEFM

Slide 34

Slide 34 text

࡟আΛͲ͏࣮૷͍ͯ͠Δͷ͔ ޙ͸7JFXଆͰEFMFUFE͕USVFͷ৔߹ʹ @EFTUSPZΛૹΔΑ͏ʹ͠·͢ɻ +4 7JFX

Slide 35

Slide 35 text

͍ͬͨΜɺ࡟আ෦෼Λ·ͱΊ·͢ɻ ࡟আΞΠίϯΫϦοΫ࣌͸ɺର৅ͷΦϒδΣΫτʹ EFMFUFE Λઃఆ͢Δɻ 7JFXଆͰ͸EFMFUFE͡Όͳ͍͚࣌ͩදࣔ͢ΔΑ͏ʹ͢ Δɻ อଘϘλϯΫϦοΫ࣌͸EFMFUFE͕USVFͷ࣌ʹ@EFTUSPZ ΛૹΔΑ͏ʹ͢Δɻ

Slide 36

Slide 36 text

7VFKTܥʹ ͠ͳ͍ͷ

Slide 37

Slide 37 text

͠·͢ ࠷ۙ7VFܥԽνέοτ͕ணख͞Ε·ͨ͠ɻ 7VFKT༻ͷ'MVYϥΠΫͳϥΠϒϥϦͷ7VFYͱ΍Β΋ಋ ೖ͞ΕΔ༧ఆͰ͢ɻ