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

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

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

2017/05/23 に行われたイベント「「ふつう」のRuby on Rails ウェブサービス開発(Clipla x みんなのウェディング)」での発表資料です。

https://mwed.connpass.com/event/55698/

Daichi Hioki

May 25, 2017
Tweet

More Decks by Daichi Hioki

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Ͳ͏ͯ͠7VFKTΛબΜ
    ͩ

    View full-size slide

  6. 7VFKTಋೖ౰࣌ͷ೥݄ͷϝϞʹΑΔͱʜ
    ֶशίετ͕௿͍ɻ

    ࣮ࡍʹ௿͔ͬͨؾ͕͠·͢ɻ
    ඞཁ࠷௿ݶͷػೳ͕ଗ͍ͬͯΔɻ
    σʔλόΠϯσΟϯά
    ίϯϙʔωϯτͳͲ
    ࣮੷͕͋Δɻ
    $MJQMBͷ։ൃΛ͓ख఻͍ͯ͠΋Β͍ͬͯΔձࣾͰ͢Ͱʹ࣮੷͕
    ͋ͬͨΑ͏Ͱ͢ɻ
    "OHVMBSKT&NCFSKT7VFKT3FBDUKT
    ͷத͔Βͷཧ༝Ͱ7VFKT͕બ͹ΕͨΑ͏Ͱ͢ɻ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. ۩ମతʹͲΜͳײ͡Ͱ
    7VFKTPO3BJMTͯ͠Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    7JFX

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    +4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    +4

    View full-size slide

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

    7JFX

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    +4

    +4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    7JFX

    View full-size slide

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

    View full-size slide

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

    7JFX

    View full-size slide

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

    View full-size slide

  36. 7VFKTܥʹ
    ͠ͳ͍ͷ

    View full-size slide

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

    View full-size slide