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

by Yoshihide TANIGUCHI

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ຊ೔ͷ࿩୊

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

͘͞Βͷઐ༻αʔό ϑϩϯτΤϯυ։ൃ ͷ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

w 'SPOUFOE7VFKT7VF3PVUFS7VFY 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*υΩϡϝϯτͰڞ༗ ΞϓϦέʔγϣϯߏ੒

Slide 17

Slide 17 text

͜ͷΞϓϦέʔγϣϯͰ࣮ફ͍ͯ͠Δ σ ΟϨΫτϦߏ੒ Τϥʔݕ஌ ςετ ύοέʔδͷΞοϓσʔτ ࠔΓ͝ͱʢ࣮ફ͍ͯ͠Δʜʁʣ ʹ͍ͭͯڞ༗͠·͢

Slide 18

Slide 18 text

σ ΟϨΫτϦߏ੒

Slide 19

Slide 19 text

σ ΟϨΫτϦߏ੒ ϖʔδ 63- ʹدΒͣ࢖͏ίϯϙʔωϯτ܈ ྫɿϩʔσ ΟϯάΞχϝʔγϣϯɺϖʔδωʔγϣϯ TUPSFʹΞΫηε͠ͳ͍ ྫ֎ͱͯ͠ϔομʔ΍άϩʔόϧφϏͳͲɺ  ڞ௨ͷϨΠΞ΢τΛ੒͢΋ͷ͸TUPSFΞΫηεՄ ·ͨͲ͏ͯ͠΋HFUUFSΛ࢖͍͍ͨ΋ͷ͸ DPNQPOFOUTHMPCBMTҎԼʹஔ͍ͯ࢖͏ ϧʔϧ͸&4-JOUͷϩʔΧϧϧʔϧʹͯ͠อূ

Slide 20

Slide 20 text

σ ΟϨΫτϦߏ੒ ϖʔδ 63- ʹඥͮ͘ίϯϙʔωϯτ܈ ύϥϝʔλΛؚΉ63-͸@JEͰද͢

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Τϥʔݕ஌ w 4FOUSZΛར༻ w γϡοͱಋೖͰ͖ͯศརɺݱঢ়ࠔͬͯͳ͍ w )551ϦΫΤετʹ͍ͭͯ͸ηογϣϯ੾ΕʹΑΔɺ  "1*ଆͷόϦσʔγϣϯΤϥʔʹΑΔҎ֎Λه࿥ w 7VF8BSO͸։ൃ࣌ϨϏϡʔ࣌ʹਓ͕ؒݕ஌͢Δํ਑ w ัଊ͍ͨ͠ͳΒ7VFDPOpHXBSO)BOEMFSʹDBQUVSF͢ Δؔ਺Λొ࿥͠ͱ͍ͯEFWNPEFͰಈ͔͢

Slide 23

Slide 23 text

ςετ w ίϯϙʔωϯτͷςετ͸͋·Γॻ͍ͯͳ͍ʜ w ΍΍ෳࡶͳػೳɾ࣮૷ΛؚΉ΋ͷʹ͍ͭͯɺͦͷڍಈΛઆ໌͢ΔͨΊͷς ετ͕͋Δ͘Β͍ w TUPSFͷϝιουͷ͏ͪσʔλϑϩʔҎ֎ͷϩδοΫ  FYσʔλͷՃ޻ ΛؚΜͰ͍Δ΋ͷʹ͍ͭͯςετॻ͍ͯΔ w ॻ͍ͯͳ͍ྫड͚औͬͨ΋ͷΛDPNNJU͢Δ͚ͩͷBDUJPO w KTʹ੾Γग़͞Ε͍ͯΔϝιουʹ͍ͭͯ΋ςετॻ͍ͯΔ w +FTU 7VF5FTU6UJMT w HJUQVTI୯ҐͰ$*ճͯ͠ςετBVEJU

Slide 24

Slide 24 text

ςετྫ αʔόʔ৘ใΛऔಘ͢ΔBDUJPO

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ςετྫ αʔόʔ৘ใΛऔಘ͢ΔBDUJPO w IUUQHFU ʹϞοΫΦϒδΣΫτΛ஫ೖ w ςετͷഎܠͱͳΔݕࡧ৚݅ͱظ଴͢Δ IUUQHFU ʹ౉ΔύϥϝʔλΛઃఆ w IUUQHFU ʹ౉͍ͬͯΔύϥϝʔλ͕ظ଴Ͳ͓Γ Ͱ͋Δ͜ͱɺϦΫΤετ݁Ռ͕DPNNJU͞ΕΔ ͜ͱΛݕূ w ݕࡧ৚݅ʹԠͯ͡ਖ਼͘͠ߜΓࠐ·ΕΔ͔ɺ͸  ϑϩϯτΤϯυͷ੹຿Ͱͳ͍ͷͰ֬ೝ͠ͳ͍

Slide 27

Slide 27 text

ύοέʔδͷΞοϓσʔτ w ZBSOVQHSBEFͯ͠ϓϧϦΫΛ  ౤͛Δ+FOLJOTλεΫΛिͰ  ಈ͔ͯ͠Δ w खಈͰͷಈ࡞֬ೝ͕ଟ͍ʜͷͰ  ςετͰอূ͢Δׂ߹Λ্͍͛ͨ w ϝδϟʔόʔδϣϯΞοϓ͸  ਓ͕ؒԹ͔͘΍ͬͯΔ w XFCQBDLͱ͔#BCFMͱ͔

Slide 28

Slide 28 text

ࠔΓ͝ͱσβΠφʔͱͷڠۀ w σβΠϯͷڞ༗ɾ࣮૷͕΍΍৑௕ w ʮ99ϖʔδͷσβΠϯͰ͖·ͨ͠ʢ4LFUDIͰσβΠϯΛڞ༗ʣʯ  ʰ͜͜ͷ༨ന෯ࢦఆແ͍Ͱ͚͢ͲͲ͏͠·͠ΐ͏͔  ɹ͋ͱͬͯ͜͜จষ௕͘ͳͬͨΒ่Ε·ͤΜʁ  ͦΕͱ͜͜͸จষ͕ۭͷ৔߹͸ͦΕͱ෼͔ΔจݴΛӠʑʜʱ w ίϯϙʔωϯτͷࡉ͔͍ڍಈɾ਺஋શͯΛ4LFUDIͰ఻͑Δͷ͕େมɺ  σβΠφʔͷϦιʔε͕଍Γͳ͍ w ࠓ͸)5.-$44΋ؚΊͯશͯϑϩϯτΤϯυΤϯδχΞ͕ॻ͍͍ͯΔ͕ɺ 4UPSZCPPLΛಋೖͯ͠ϥϑըΛݩʹίϯϙʔωϯτͷ਽ܗΛΤϯδχΞ͕ॻ͖$44 ΛσβΠφʔʹॻ͍ͯ΋Β͏ͱ͔ͰվળͰ͖Δͷ͔΋ʜʁ w ʮ΢ν͸͜͏΍ͬͯΔʯ࿩Λͥͻ͓ฉ͖͍ͨ͠Ͱ͢ʂ

Slide 29

Slide 29 text

·ͱΊ w 7VFKTΛར༻ͨ͠։ൃͰ࣮ફ͍ͯ͠Δ͜ͱΛ͋Ε͜Ε ڞ༗͠·ͨ͠ w σ ΟϨΫτϦߏ੒ɺΤϥʔݕ஌ɺςετɺύοέʔ δ؅ཧɺࠔΓ͝ͱ w ࠙਌ձͰͥͻ͋Ε͜Ε͓࿩͠·͠ΐ͏