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

さくらのフロントエンド さくらの Vue.js // vue.js in SAKURA

さくらのフロントエンド さくらの Vue.js // vue.js in SAKURA

D8fb02b13755bda3ce991f198c42523a?s=128

Yoshihide TANIGUCHI

November 29, 2018
Tweet

Transcript

  1. ͘͞ΒͷϑϩϯτΤϯυ ͘͞Βͷ7VFKT ୩ޱఓӳ

  2. ୩ޱఓӳ!SBWFMMM ͘͞ΒΠϯλʔωοτגࣜձࣾd ϑϩϯτΤϯυΤϯδχΞ7VFKT3VCZPO3BJMT ڈ೥·Ͱ͸όοΫΤϯυΤϯδχΞͰ1)1΍3VCZΛॻ͍ͯ·ͨ͠

  3. ຊ೔ͷ࿩୊

  4. 6*5ͷࢀՃืूϖʔδΛݟͯΈΔͱʜ ಺༰͸7VFKTʹ·ͭΘΔ࿩୊Ͱ͋Ε͹ԿͰ΋׻ܴͰ͢ʂ ܏޲ͱͯ͠୯ͳΔٕज़঺հΑΓ΋ɺ
 ࣮ફʹجͮ͘࿩୊΍ϢχʔΫͳࣄྫ͕޷·ΕΔ܏޲͕͋Γ·͢  ͘͞ΒͱνʔϜ ͘͞Βͷઐ༻αʔό ͷϑϩϯτΤϯυ։ൃ
 ಛʹ7VFKTΛར༻ͨ͠։ൃͰ࣮ફ͍ͯ͠Δॾʑ Λ͍͔ͭ͘ڞ༗͠·͢

  5. ͘͞ΒΠϯλʔωοτ ϑϩϯτΤϯυ։ൃ ͷ

  6. αʔόʔ԰͞Μ ϑϩϯτΤϯυʁ ͷ

  7. 7VFKTɺଟ༻͍ͯ͠·͢ ར༻ࣄྫଟ͠ 3FBDU "OHVMBS 7VFKT &NCFSKT

  8. None
  9. None
  10. None
  11. w ίϯτϩʔϧύωϧʢμογϡϘʔυʣ w ໰͍߹ΘͤɾਃࠐΈϑΥʔϜ w ࣾ಺޲͚ͷӡ༻αʔϏε w ίʔϙϨʔταΠτ ͳͲͳͲ

  12. ͳͥ7VFKT  ʮ)5.-4DSJQU$44Λ໌֬ʹ෼཭ͯ͠ॻ͚ΔͷͰ
 σβΠφͱڠۀ͠΍ͦ͢͏ͩͬͨʯ ʮॾπʔϧ͕ެ͔ࣜΒग़ͯͯ҆৺ײ͕͋ͬͨʯ ʮࣾ಺ʹ7VFKTͷࢿ࢈͕݁ߏ͋ͬͨ ૿Ճ܏޲ʹ͋ͬͨʯ ʮ೔ຊޠͷυΩϡϝϯτ͕ॆ࣮͍ͯͨ͠ʯ ʮ౰࣌3FBDU͕#4% 1"5&/54ϥΠηϯεͩͬͨʯ

    ฉ͍ͯΈ·ͨ͠
  13. ͘͞Βͷઐ༻αʔό ϑϩϯτΤϯυ։ൃ ͷ

  14. ৽ίϯτϩʔϧύωϧ Ћ൛

  15. αʔϏείϯύωΛ࡮৽ͨ͠ w ϝϯςφϯεੑʹ๡͘͠อक͕ଐਓԽ͍ͯͨ͠ ˠ7VFKTϕʔεͰϦϓϨΠε

  16. w 'SPOUFOE7VFKT 7VF3PVUFS 7VFY w 41" ඇ443 /VYUKT͸࢖Θͣ w $

    git ls-files | grep -E 'vue$' | wc -l  ˞ඇ"UPNJD%FTJHO w ϩʔΧϧͷ։ൃͰ͸ϞοΫαʔό &YQSFTT Λ࢖͏
 ಈ࡞Λ֬ೝͰ͖Δ࠷খͷৼΔ෣͍͚ͩΛ࣮૷
 ࣮ࡍͷ"1*ΞϓϦέʔγϣϯΛؚΊͨ֬ೝ͸ڞ༗ͷ։ൃ༻؀ڥʹ
 σϓϩΠͯ͠ߦ͏ w #BDLFOE1ZUIPO %KBOHP  w "1*ઃܭ͸0QFO"1*υΩϡϝϯτͰڞ༗ ΞϓϦέʔγϣϯߏ੒
  17. ͜ͷΞϓϦέʔγϣϯͰ࣮ફ͍ͯ͠Δ σ ΟϨΫτϦߏ੒ Τϥʔݕ஌ ςετ ύοέʔδͷΞοϓσʔτ ࠔΓ͝ͱʢ࣮ફ͍ͯ͠Δʜʁʣ ʹ͍ͭͯڞ༗͠·͢

  18. σ ΟϨΫτϦߏ੒

  19. σ ΟϨΫτϦߏ੒ ϖʔδ 63- ʹدΒͣ࢖͏ίϯϙʔωϯτ܈ ྫɿϩʔσ ΟϯάΞχϝʔγϣϯɺϖʔδωʔγϣϯ TUPSFʹΞΫηε͠ͳ͍ ྫ֎ͱͯ͠ϔομʔ΍άϩʔόϧφϏͳͲɺ
 ڞ௨ͷϨΠΞ΢τΛ੒͢΋ͷ͸TUPSFΞΫηεՄ

    ·ͨͲ͏ͯ͠΋HFUUFSΛ࢖͍͍ͨ΋ͷ͸ DPNQPOFOUTHMPCBMTҎԼʹஔ͍ͯ࢖͏ ϧʔϧ͸&4-JOUͷϩʔΧϧϧʔϧʹͯ͠อূ
  20. σ ΟϨΫτϦߏ੒ ϖʔδ 63- ʹඥͮ͘ίϯϙʔωϯτ܈ ύϥϝʔλΛؚΉ63-͸@JEͰද͢

  21. σ ΟϨΫτϦߏ੒ ΞϓϦέʔγϣϯશମͷڍಈΛมߋ͢Δ࣮૷ 7VFVTF ͯ͠࢖͏΋ͷͷઃఆʢWBMJEBUJPOͱ͔ʣ ίϯϙʔωϯτ΍TUPSF಺Ͱॏෳ͢Δखଓ͖Λൈ͖ग़ͨ͠΋ͷ )551ϦΫΤετΛγΣʔϐϯά͢Δ܅ɺ
 BYJPTΛϥοϓͨ͠)551ΫϥΠΞϯτͱ͔

  22. Τϥʔݕ஌ w 4FOUSZΛར༻ w γϡοͱಋೖͰ͖ͯศརɺݱঢ়ࠔͬͯͳ͍ w )551ϦΫΤετʹ͍ͭͯ͸ηογϣϯ੾ΕʹΑΔɺ
 "1*ଆͷόϦσʔγϣϯΤϥʔʹΑΔҎ֎Λه࿥ w 7VF8BSO͸։ൃ࣌

    ϨϏϡʔ࣌ʹਓ͕ؒݕ஌͢Δํ਑ w ัଊ͍ͨ͠ͳΒ7VFDPOpHXBSO)BOEMFSʹDBQUVSF͢ Δؔ਺Λొ࿥͠ͱ͍ͯEFWNPEFͰಈ͔͢
  23. ςετ w ίϯϙʔωϯτͷςετ͸͋·Γॻ͍ͯͳ͍ʜ w ΍΍ෳࡶͳػೳɾ࣮૷ΛؚΉ΋ͷʹ͍ͭͯɺͦͷڍಈΛઆ໌͢ΔͨΊͷς ετ͕͋Δ͘Β͍ w TUPSFͷϝιουͷ͏ͪσʔλϑϩʔҎ֎ͷϩδοΫ
 FYσʔλͷՃ޻ ΛؚΜͰ͍Δ΋ͷʹ͍ͭͯςετॻ͍ͯΔ

    w ॻ͍ͯͳ͍ྫड͚औͬͨ΋ͷΛDPNNJU͢Δ͚ͩͷBDUJPO w KTʹ੾Γग़͞Ε͍ͯΔϝιουʹ͍ͭͯ΋ςετॻ͍ͯΔ w +FTU 7VF5FTU6UJMT  w HJUQVTI୯ҐͰ$*ճͯ͠ςετ BVEJU
  24. ςετྫ αʔόʔ৘ใΛऔಘ͢ΔBDUJPO

  25. ςετྫ αʔόʔ৘ใΛऔಘ͢ΔBDUJPO w ઃఆ͞Εͨݕࡧ৚݅Λऔಘ HFUUFSTTFBSDI$POE  w ݕࡧ৚͕݅͋Ε͹ϦΫΤετύϥϝʔλͷܗʹม׵ w ม׵ͨ͠΋ͷΛIUUQHFU

    ʹ౉͢ w IUUQHFU ͷ݁Ռ αʔόʔ৘ใ ΛDPNNJU
  26. ςετྫ αʔόʔ৘ใΛऔಘ͢ΔBDUJPO w IUUQHFU ʹϞοΫΦϒδΣΫτΛ஫ೖ w ςετͷഎܠͱͳΔݕࡧ৚݅ͱظ଴͢Δ IUUQHFU ʹ౉ΔύϥϝʔλΛઃఆ w

    IUUQHFU ʹ౉͍ͬͯΔύϥϝʔλ͕ظ଴Ͳ͓Γ Ͱ͋Δ͜ͱɺϦΫΤετ݁Ռ͕DPNNJU͞ΕΔ ͜ͱΛݕূ w ݕࡧ৚݅ʹԠͯ͡ਖ਼͘͠ߜΓࠐ·ΕΔ͔ɺ͸
 ϑϩϯτΤϯυͷ੹຿Ͱͳ͍ͷͰ֬ೝ͠ͳ͍
  27. ύοέʔδͷΞοϓσʔτ w ZBSOVQHSBEFͯ͠ϓϧϦΫΛ
 ౤͛Δ+FOLJOTλεΫΛिͰ
 ಈ͔ͯ͠Δ w खಈͰͷಈ࡞֬ೝ͕ଟ͍ʜͷͰ
 ςετͰอূ͢Δׂ߹Λ্͍͛ͨ w ϝδϟʔόʔδϣϯΞοϓ͸


    ਓ͕ؒԹ͔͘΍ͬͯΔ w XFCQBDLͱ͔#BCFMͱ͔
  28. ࠔΓ͝ͱσβΠφʔͱͷڠۀ w σβΠϯͷڞ༗ɾ࣮૷͕΍΍৑௕ w ʮ99ϖʔδͷσβΠϯͰ͖·ͨ͠ʢ4LFUDIͰσβΠϯΛڞ༗ʣʯ
 ʰ͜͜ͷ༨ന෯ࢦఆແ͍Ͱ͚͢ͲͲ͏͠·͠ΐ͏͔
 ɹ͋ͱͬͯ͜͜จষ௕͘ͳͬͨΒ่Ε·ͤΜʁ
 ͦΕͱ͜͜͸จষ͕ۭͷ৔߹͸ͦΕͱ෼͔ΔจݴΛӠʑʜʱ w ίϯϙʔωϯτͷࡉ͔͍ڍಈɾ਺஋શͯΛ4LFUDIͰ఻͑Δͷ͕େมɺ


    σβΠφʔͷϦιʔε͕଍Γͳ͍ w ࠓ͸)5.-$44΋ؚΊͯશͯϑϩϯτΤϯυΤϯδχΞ͕ॻ͍͍ͯΔ͕ɺ 4UPSZCPPLΛಋೖͯ͠ϥϑըΛݩʹίϯϙʔωϯτͷ਽ܗΛΤϯδχΞ͕ॻ͖$44 ΛσβΠφʔʹॻ͍ͯ΋Β͏ͱ͔ͰվળͰ͖Δͷ͔΋ʜʁ w ʮ΢ν͸͜͏΍ͬͯΔʯ࿩Λͥͻ͓ฉ͖͍ͨ͠Ͱ͢ʂ
  29. ·ͱΊ w 7VFKTΛར༻ͨ͠։ൃͰ࣮ફ͍ͯ͠Δ͜ͱΛ͋Ε͜Ε ڞ༗͠·ͨ͠ w σ ΟϨΫτϦߏ੒ɺΤϥʔݕ஌ɺςετɺύοέʔ δ؅ཧɺࠔΓ͝ͱ w ࠙਌ձͰͥͻ͋Ε͜Ε͓࿩͠·͠ΐ͏