/PEFֶԂ
࣌ݶ໨ ετοΫϚʔΫגࣜձࣾ
ங୩
ڤ೭ 7VF
Ͱେ͖ͳσʔλΛ
ѻ͏ͱ͖ͷੑೳվળख๏ 1 

© 2021 Stockmark Inc. ࣗݾ঺հ w ங୩
ڤ೭
5BLBZVLJ
5TVLJUBOJ
w ετοΫϚʔΫגࣜձࣾͰɺ"TUSBUFHZͱ͍͏΢ΣϒαʔϏεΛ։ൃ͓ͯ͠Γɺ ओʹϑϩϯτΤϯυΛ୲౰
w ޷͖ͳΤσΟλ͸7JN
w 4/4
w 5XJUUFS
!UTVLLFF
w (JU)VC
UTVLLFF 2 

© 2021 Stockmark Inc. ͪΐͬͱ͚ͩετοΫϚʔΫͱ"TUSBUFHZͷ঺հ w ετοΫϚʔΫגࣜձࣾ
w ࣗવݴޠॲཧΛ׆༻ͨ͠#UP#ͷ΢ΣϒαʔϏεΛఏڙ͍ͯ͠ ΔελʔτΞοϓ
w "OFXT"TUSBUFHZ"TBMFTͱ͍ͬͨෳ਺ͷϓϩμΫτΛఏڙ
w ౦༸ܦࡁ
͍͢͝ϕϯνϟʔ
೥࠷৽൛
w "TUSBUFHZ
w ΢Σϒχϡʔε͔ΒࣗવݴޠॲཧͰࢢ৔τϨϯυ΍اۀಈ޲ Λநग़͠ɺߏ଄ԽɾՄࢹԽ͢Δ͜ͱͰϏδωεͷҙࢥܾఆΛ αϙʔτ
w ٕज़తͳશମߏ੒ʹ͍ͭͯ͸ฐࣾςοΫϒϩάͷهࣄΛ͝ཡ ͍ͩ͘͞ "TUSBUFHZ 3 

© 2021 Stockmark Inc. ϑϩϯτΤϯυͰେ͖ͳσʔλΛѻ͏ w "TUSBUFHZͰ͸ɺΠϯλϥΫςΟϒͳૢ࡞΋͋Δ ͷͰɺେ͖ͳσʔλΛҰׅͰऔಘ͠ϑϩϯτΤϯ υͰదٓม׵ͯ͠ՄࢹԽ
w ͜͜ͷઃܭͷੋඇ͸Ұ୴ஔ͍͓ͯ͘
w ৔߹ʹΑͬͯ͸ฏؾͰ.#લޙͷ+40/͕όο ΫΤϯυ͔ΒඈΜͰ͘Δ͜ͱ͕͋ΓɺͦΕΛߴ଎ ʹऔΓѻ͏ඞཁ͕͋Δ 4 

© 2021 Stockmark Inc. "TUSBUFHZͰऔΓ૊Μͩੑೳվળ w "TUSBUFHZͰ͸ϑϩϯτΤϯυʹ7VF
Λ࠾༻͍ͯ͠Δ
w 7VF
΁͸Ҡߦ४උதʜ
w Ұޱʹੑೳͱݴͬͯ΋৭ʑ͋Δ͕ɺେ͖͍σʔλΛऔΓ ճͯ͠ΠϯλϥΫςΟϒͳίϯςϯπΛ࡞Δͱ͍͏͜ͱ Ͱɺࠓճ͸͍ΘΏΔϥΠϯλΠϜੑೳͷ࿩
w ʮਪଌ͢ΔͳɺܭଌͤΑʯͷమଇʹैͬͯɺ$ISPNF
%FW5PPMTͰϓϩϑΝΠϦϯάͯ͠ϘτϧωοΫΛݟͭ ͚Δˠվળ͢Δͷ܁Γฦ͠
w %FW5PPMTͷ࢖͍ํࣗମ͸ެࣜυΩϡϝϯτͳͲΛ ࢀর͍͚ͨͩΕ͹ Ҏ߱ͷܭଌ͸ɺҎԼͷ؀ڥͰ࣮ࢪ
w .BD#PPL
1SP
Πϯν

w 
()[
ίΞ
*OUFM
$PSF
J
w ϝϞϦ
(#
w NBD04

w 7VF
 5 

© 2021 Stockmark Inc. αϯϓϧΞϓϦ w "TUSBUFHZશମͩͱ༁͕෼͔Βͳ͍ͷͰɺੑೳվળͷޮՌ͕ ෼͔Γ΍ͦ͢͏ͳখ͞ͳαϯϓϧΛ࡞ͬͨ
w IUUQTHJUIVCDPNUTVLLFFWVFIBOEMFCJHEBUB

w σʔλϩʔυΛԡ͢ͱɺ݅ͷσʔλ͕Ϧετͱͯ͠ දࣔ͞ΕɺνΣοΫϘοΫεΛԡ͢ͱରԠ͢ΔՕॴ͕ϋΠϥ Πτ͞ΕͨΓ͢Δ
w ಺༰ʹ͋·Γҙຯ͸͋Γ·ͤΜʜ
w νΣοΫϘοΫεΛԡ͢ͱϦετͷҰ෦͕ϋΠϥΠτ͞Ε Δɺ͚ͩͳͷʹ͘͢͝஗͍ʜ 6 

© 2021 Stockmark Inc. ଌΔʂ w νΣοΫϘοΫεΛԡ͔ͯ͠Βը໘ʹ൓ө͞ΕΔ·ͰΛϓϩϑΝΠϥͰܭଌͯ͠ΈΔ %0.ͷߋ৽ʹ͕͔͔͍࣌ؒͬͯΔ 7 

© 2021 Stockmark Inc. 7JSUVBM
4DSPMMΛಋೖ͢Δ w ը໘ʹදࣔ͞Ε͍ͯΔཁૉ͚ͩΛඳը͢ΔΑ͏ʹ͢Δ࢓૊Έ
w ͞Βʹ%0.Λ࢖͍ճ͢͜ͱͰɺ%0.ͷੜ੒ɾഁغͷίετ΋࡟ݮ͍ͯ͠Δ
w 7VF޲͚ʹ͍͔ͭ͘ϥΠϒϥϦ͕͋ΔͷͰద౰ʹબఆ͢Δͱྑ͍
w IUUQTHJUIVCDPN"LSZVNWVFWJSUVBMTDSPMMFS
w ˢαϯϓϧͰ͸ͪ͜ΒΛར༻
w IUUQTHJUIVCDPNUBOHCDWVFWJSUVBMTDSPMMMJTU
w "TUSBUFHZͰ͸ɺҰ෦ͷը໘͕ෳࡶʹͳ͍ͬͯΔՕॴ͸طଘϥΠϒϥϦ͕࢖͑ͳ͔ͬͨͷͰɺ *OUFSTFDUJPO0CTFSWFSΛ࢖ͬͯࣅͨΑ͏ͳ࢓૊ΈΛࣗ࡞͍ͯ͠Δ 8 

© 2021 Stockmark Inc. 7JSUVBM
4DSPMMಋೖ࣌ͷ஫ҙ w 7JSUVBM
4DSPMMΛಋೖ͢Δͱɺ౰વը໘֎ͷςΩετ͕ϒϥ ΢βͷςΩετݕࡧʹͻ͔͔ͬΒͳ͘ͳΔͷͰɺผ్ϑΟ ϧλΛ࣮૷͢ΔͳͲͷิॿ͕ඞཁʹͳΔ͔΋
w 7JSUVBM
4DSPMMࣗମͷॳظԽ࣌ؒ΋਺͕ଟ͘ͳͬͯ͘Δͱແ ࢹͰ͖ͳ͍
w "TUSBUFHZͩͱɺը໘্ʹʙͷ7JSUVBM
4DSPMMϦ ετ͕ஔ͔ΕΔ͜ͱ͕͋Γ໰୊ʹͳͬͨ
ˠ
ॳظঢ়ଶͰ͸Ϧετͷ্Ґ͙݅Β͍͚ͩΛී௨ ʹදࣔ͠ɺNPVTFPWFSͰ7JSUVBM
4DSPMMʹஔ͖׵͑Δ ͳͲɺॳظԽΛ஗Ԇͤ͞Δͱྑ͍ ੺࿮ͷՕॴ͕શ෦7JSUVBM
4DSPMMϦετͰɺ
ͦΕͧΕ਺ͷاۀ໊͕ฒΜͰ͍Δ 9 

© 2021 Stockmark Inc. ͞ΒʹଌΔʂ w %0.ͷͱ͜Ζ͸΄ͱΜͲফ͕͑ͨDPNQVUFE(FUUFS NT͙Β͍ ʹվળͷ༨஍͕͋Δ BEE%FQΈ͍ͨͳͷ͕ΊͪΌͪ͘ΌεύΠΫ͍ͯ͠Δʁ 10 

© 2021 Stockmark Inc. 7VFͷ3FBDUJWJUZʹ͍ͭͯ w 7VF
Ͱ͸ɺίϯϙʔωϯτʹσʔλ͕౉͞ΕΔͱɺࣗಈతʹͦͷ σʔλΛ࠶ؼతʹḷͬͯ͢΂ͯͷϓϩύςΟΛHFUUFSTFUUFSͰϥοϓ ͯͦ͠ͷதͰมߋݕ஌͍ͯ͠Δ
w ৄࡉ͸ެࣜυΩϡϝϯτʹͯ
w ͳͷͰɺେ͖ͳσʔλΛ౉͢ͱɺͦͷ௕େͳߏ଄Λશ෦࠶ؼతʹม׵ ͠ɺ͔ͭɺมߋݕ஌ͷͱ͖ʹͦΕΒશͯʹ͍ͭͯґଘؔ܎Λܭࢉ͢Δ ͖ͬ͞ͷBEE%FQ͕ͦͷҰ෦ ʜΈ͍ͨͳ͜ͱ͕ى͜Δ
w গͳ͍σʔλྔͰ͕͜͜໰୊ʹͳΔ͜ͱ͸΄΅ͳ͍͕ɺେ͖͍ σʔλͩͱ໰୊ʹͳΔ
w 7VF
Ͱ͸3FBDUJWJUZͷ࣮૷͕1SPYZϕʔεʹมΘ͍ͬͯΔͷͰɺ Ϛγʹͳ͍ͬͯΔ͔΋ʁ ཁݕূ 7VF
ͷEBUBΛDPOTPMFMPH ͨ͜͠ͱ͕͋ Ε͹ɺΦϒδΣΫτʹ@@PC@@ͱ͔ SFBUJWF(FUUFSͱ͔͕෇͍͍ͯͯɺͳΜ͡Ό ͜ΓΌʁͱࢥͬͨํ΋͍Δ͔΋ 11 

© 2021 Stockmark Inc. 7VFͷ3FBDUJWJUZΛ཈੍͢Δ w Α͘ߟ͑ΔͱɺόοΫΤϯυ͔ΒಘΒΕͨσʔλͷத਎ͷҰ෦͕ޙ͔ΒมΘΔ͜ͱ͸ͳ͍ͷͰɺ࠶ؼతʹมߋݕ ஌͢Δඞཁ͸ͳ͍
w ͕ɺ7VF
 ͷ0QUJPO
"1* ͩͱͦ͜Λ੍ޚ͢Δज़͕ͳ͍ʜʁ
w ࣮͸ɺJT'SP[FOͳΦϒδΣΫτ͸3FBDUJWF΁ม׵͞Εͳ͍ʂ
w ֘౰Օॴ
IUUQTHJUIVCDPNWVFKTWVFCMPCGGEGDCFCF TSDDPSFPCTFSWFSUSBWFSTFKT--
w ࢀߟهࣄ
IUUQTSFTJEFJDHJUIVCJPCMPHIBOEMJOHMPOHBSSBZTQFSGPSNBOUMZJOWVFKT
w ͭ·ΓɺόοΫΤϯυ͔ΒಘΒΕͨσʔλ͸0CKFDUGSFF[F ͓ͯ͘͠ͱྑ͍ const data = await fetch(...); // όοΫΤϯυ͔ΒσʔλΛऔಘͯ͠… this.data = Object.freeze(data); // freezeͯ͠Vueͷίϯϙʔωϯτʹ౉͚ͩ͢ 12 

© 2021 Stockmark Inc. ͞Βʹ͞ΒʹଌΔʂ w DPNQVUFE(FUUFSͷॲཧ͕໿NTˠNTʹݮগʂ
w "TUSBUFHZ͸͞Βʹෳࡶͳߏ଄ʹରͯ͠΋ͬͱ΍΍͍͜͠ܭࢉΛ͍ͯͨ͠ͷͰɺ΋ͷ͍͢͝ޮՌ͕͋ͬͨ 13 

© 2021 Stockmark Inc. $PNQPTJUJPO
"1* w 7VFͰ͸ɺίϯϙʔωϯτͷ࡞Γํͱͯ͠ɺچདྷ͔Βͷ0QUJPO
"1*ͱɺ7VF
͔Βಋೖ͞Ε 7VF
ʹ΋όοΫϙʔ τ͞Ε͍ͯΔ $PNQPTJUJPO
"1*ͷେ͖͘छྨ͕͋Δ
w ͜͜·Ͱ͸0QUJPO
"1*Ͱͷ࿩ͩͬͨ
w $PNQPTJUJPO
"1*Ͱ͸ɺ3FBDUJWF΁ͷม׵͸ࣗಈతʹͰ͸ͳ͘໌ࣔతʹߦ͏ඞཁ͕͋ΓɺͦͷͨΊͷ"1*ͷதʹ TIBMMPX3FBDUJWFTIBMMPX3FGͱ͍͏࠶ؼతʹ3FBDUJWFʹม׵͠ͳ͍΋ͷ΋͋Δ
w ެࣜυΩϡϝϯτͰ΋4LJQQJOH
QSPYZ
DPOWFSTJPO
DBO
QSPWJEF
QFSGPSNBODF
JNQSPWFNFOUT
XIFO
SFOEFSJOH
MBSHF
MJTUT
XJUI
JNNVUBCMF
EBUB
TPVSDFTΈ͍ͨͳهड़͕͋Δ

w ͢ͳΘͪɺ0QUJPO
"1*Ͱ0CKFDUGSFF[F ͨ͠ͱ͖ͱಉ౳ͷޮՌ͕ಘΒΕΔ // const data = ref([]); //Α͋͘Δఆٛํ๏ const data = shallowRef([]); // shallowRefͰσʔλΛఆٛ data.value = await fetch(...); // ͜͜Ͱ࠶ؼతʹreactiveʹ͸ͳΒͳ͍ 14 

© 2021 Stockmark Inc. ͓·͚
7VFͰΑ͘΍Δ࠷దԽ w ͜͜·Ͱ঺հͨ͠಺༰Ҏ֎ʹ΋ɺ"TUSBUFHZͰ͸7VFͰΑ͘΍Δ࠷దԽ΋ద࣮ٓࢪ͍ͯ͠Δ
w ద੾ͳཻ౓ͰͷίϯϙʔωϯτԽ
w DPNQVUFEͷద੾ͳར༻
w ͳͲͳͲ
w ։ൃʹ͋ͨͬͯࢀߟʹͤͯ͞௖͍ͨهࣄ
w IUUQTRJJUBDPNNJZBPLBJUFNTDFBFF
w IUUQTRJJUBDPNTIVOJUFNTCFBFDCBG
w IUUQTUFDIBOEQBEDPKQFOUSZ
w ͳͲͳͲ
15 

© 2021 Stockmark Inc. ͓·͚
+BWB4DSJQUϨϕϧͰͷ࠷దԽ w େ͖ͳσʔλΛऔΓճ্͢Ͱɺ+BWB4DSJQUϨϕϧͰͷ࠷దԽ͕ඞཁͳ͜ͱ΋
w ྫ͑͹ʜ
w ഑ྻͷ݁߹͸ɺBSSBZDPODBU BSSBZ ΑΓBSSBZQVTI BSSBZ ͷํ͕ૣ͍
w ࢀߟهࣄ
IUUQTEFWUPVJMJDJPVTKBWBTDSJQUBSSBZQVTIJTYGBTUFSUIBOBSSBZDPODBUPLJ
w ޙऀ͸ഁյతมߋͳͷͰݫີʹ͸ಉ͡ڍಈͰ͸ͳ͍ͷ͸஫ҙ
w େ͖͍σʔλશମͷ഑ྻʹͳ͍ͬͯΔϓϩύςΟΛूΊͯ͘ΔɺΈ͍ͨͳूܭॲཧΛॻ͘ͱ͖ʹ͸ؾʹֻ ͚͓ͯ͘ͱྑ͍
w "TUSBUFHZͰ΋͜Ε͕ΊͬͪΌޮ͘৔໘͕͋Γ·ͨ͠
w ഑ྻͷϢχʔΫॲཧ͸"SSBZGSPN OFX
4FU BSSBZ Λ࢖͏ͱ؆୯

ૣ͍
w ࢀߟهࣄ
IUUQTRJJUBDPNQJSPPSJUFNTDGGCGB

16 

© 2021 Stockmark Inc. ·ͱΊ w 7VFͰେ͖ͳσʔλΛѻ͏ͱ͖ͷੑೳվળͰؾΛ෇͚Δ͜ͱ
w ·ͣ͸ͱʹ͔͘$ISPNF
%FW5PPMTͳͲͰܭଌ͢Δ
w ෆཁͳ%0.ͷߋ৽͕ͳ͍͔Λ֬ೝͯ͠ରॲ͢Δ
w 7VFͷ3FBDUJWJUZͷ࢓૊ΈΛཧղ੍͠ޚ͢Δ
w ͪ͜Β͸7VF


$PNQPTJUJPO
"1*Ͱ͍ͩͿྑ͘ͳΔͷͰɺૣ͘Ҡߦ͍ͨ͠ʂ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ 17