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

© 2021 Stockmark Inc. ࣗݾ঺հ w ங୩ڤ೭ 5BLBZVLJ5TVLJUBOJ w ετοΫϚʔΫגࣜձࣾͰɺ"TUSBUFHZͱ͍͏΢ΣϒαʔϏεΛ։ൃ͓ͯ͠Γɺ ओʹϑϩϯτΤϯυΛ୲౰ w ޷͖ͳΤσΟλ͸7JN w 4/4 w 5XJUUFS!UTVLLFF w (JU)VCUTVLLFF 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#PPL1SP Πϯν w ()[ίΞ*OUFM$PSFJ 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. 7JSUVBM4DSPMMΛಋೖ͢Δ w ը໘ʹදࣔ͞Ε͍ͯΔཁૉ͚ͩΛඳը͢ΔΑ͏ʹ͢Δ࢓૊Έ w ͞Βʹ%0.Λ࢖͍ճ͢͜ͱͰɺ%0.ͷੜ੒ɾഁغͷίετ΋࡟ݮ͍ͯ͠Δ w 7VF޲͚ʹ͍͔ͭ͘ϥΠϒϥϦ͕͋ΔͷͰద౰ʹબఆ͢Δͱྑ͍ w IUUQTHJUIVCDPN"LSZVNWVFWJSUVBMTDSPMMFS w ˢαϯϓϧͰ͸ͪ͜ΒΛར༻ w IUUQTHJUIVCDPNUBOHCDWVFWJSUVBMTDSPMMMJTU w "TUSBUFHZͰ͸ɺҰ෦ͷը໘͕ෳࡶʹͳ͍ͬͯΔՕॴ͸طଘϥΠϒϥϦ͕࢖͑ͳ͔ͬͨͷͰɺ *OUFSTFDUJPO0CTFSWFSΛ࢖ͬͯࣅͨΑ͏ͳ࢓૊ΈΛࣗ࡞͍ͯ͠Δ 8

© 2021 Stockmark Inc. 7JSUVBM4DSPMMಋೖ࣌ͷ஫ҙ w 7JSUVBM4DSPMMΛಋೖ͢Δͱɺ౰વը໘֎ͷςΩετ͕ϒϥ ΢βͷςΩετݕࡧʹͻ͔͔ͬΒͳ͘ͳΔͷͰɺผ్ϑΟ ϧλΛ࣮૷͢ΔͳͲͷิॿ͕ඞཁʹͳΔ͔΋ w 7JSUVBM4DSPMMࣗମͷॳظԽ࣌ؒ΋਺͕ଟ͘ͳͬͯ͘Δͱແ ࢹͰ͖ͳ͍ w "TUSBUFHZͩͱɺը໘্ʹʙͷ7JSUVBM4DSPMMϦ ετ͕ஔ͔ΕΔ͜ͱ͕͋Γ໰୊ʹͳͬͨ ˠॳظঢ়ଶͰ͸Ϧετͷ্Ґ͙݅Β͍͚ͩΛී௨ ʹදࣔ͠ɺNPVTFPWFSͰ7JSUVBM4DSPMMʹஔ͖׵͑Δ ͳͲɺॳظԽΛ஗Ԇͤ͞Δͱྑ͍ ੺࿮ͷՕॴ͕શ෦7JSUVBM4DSPMMϦετͰɺ ͦΕͧΕ਺ͷاۀ໊͕ฒΜͰ͍Δ 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 ެࣜυΩϡϝϯτͰ΋4LJQQJOHQSPYZDPOWFSTJPODBOQSPWJEFQFSGPSNBODFJNQSPWFNFOUTXIFO SFOEFSJOHMBSHFMJTUTXJUIJNNVUBCMFEBUBTPVSDFTΈ͍ͨͳهड़͕͋Δ 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 OFX4FU BSSBZ Λ࢖͏ͱ؆୯ૣ͍ w ࢀߟهࣄIUUQTRJJUBDPNQJSPPSJUFNTDGGCGB 16

© 2021 Stockmark Inc. ·ͱΊ w 7VFͰେ͖ͳσʔλΛѻ͏ͱ͖ͷੑೳվળͰؾΛ෇͚Δ͜ͱ w ·ͣ͸ͱʹ͔͘$ISPNF%FW5PPMTͳͲͰܭଌ͢Δ w ෆཁͳ%0.ͷߋ৽͕ͳ͍͔Λ֬ೝͯ͠ରॲ͢Δ w 7VFͷ3FBDUJWJUZͷ࢓૊ΈΛཧղ੍͠ޚ͢Δ w ͪ͜Β͸7VF$PNQPTJUJPO"1*Ͱ͍ͩͿྑ͘ͳΔͷͰɺૣ͘Ҡߦ͍ͨ͠ʂ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂ 17