15分で わかった気になるVite Amon Keishima 2021.07.07

"NPO,FJTIJNB -*/&(SPXUI5FDIOPMPHZ6*55FBN -*/&ϙΠϯτΫϥϒͷ։ൃʹैࣄ 1FSGVNF͕͖͢Ͱ͢

IUUQTWJUFKTEFWΛϕʔεʹ Ұ෦ਂງΓͭͭ͠ ෼Ͱ7JUFΛΘ͔ͬͨؾʹͤͪ͞Ό͓͏ あ " そ " ゆ " こ と ね 完 全 に 理 解 し た ※この発表が終わった後の みなさんのイメージ

7JUFͬͯͳʹ &WBO:PV 7VFKTͷ࡞ऀͰ͓ͳ͡Έ ͕࡞ͬͨ࣍ੈ୅ͷϑϩϯτΤϯυπʔϧ ϑϥϯεޠͰʮ଎͍ʯΛҙຯ͢Δ 7JUF WJU ໊͕લʹͳ͍ͬͯΔ

։ൃ࣌͸αʔόʔ ຊ൪Ϗϧυ࣌͸όϯυϥʔͱͯ͠ಈ͘ ಛ௃ 7JUFͬͯͳʹ ։ൃ࣌ʹ͸ FTCVJME Λ࢖༻ͯ͠ߴ଎ʹґଘύοέʔδΛϏϧυ ϒϥ΢βͷ&4.PEVMFରԠΛ͏·͘ར༻ͨ͠ߴ଎ͳ։ൃମݧ &4.PEVMF &4.PEVMF EZOBNJDJNQPSUରԠϒϥ΢β͕λʔήοτ !WJUFKTQMVHJOMFHBDZΛ࢖͏͜ͱͰɺϨΨγʔϒϥ΢β޲͚ͷαϙʔτ͸Ͱ͖Δ ʢ7JUFࣗମͰ*&ͷαϙʔτ͸ߦ͑ΔͬΆ͍͕ɺ7VF͸*&Λαϙʔτ͠ͳ͍఺ʹ஫ҙʣ 7VFҎ֎ͷϑϩϯτΤϯυϥΠϒϥϦʹ΋ରԠ 3FBDU1SFBDU -JU&MFNFOU7BOJMMB+4ʹରԠ͍ͯ͠Δ

%FQFOEFODZ1SFCVOEMJOH 7JUF͸ԿΛ͍ͯ͠Δͷ ͱ͍͏Α͏ͳίʔυ͕͋Ε͹ɺ OPEF@NPEVMFTWJUF ͷԼʹ FTCVJME ͰϏϧυͨ͠ϑΝΠϧΛஔ͍ͯɺͦΕΛࢀরͤ͞Δػೳ ͜ͷͱ͖ $PNNPO+4 6.%ˠ &4.΁ͷม׵΋ඞཁʹԠͯ͡ߦ͏ ˞ग़యɿIUUQTFTCVJMEHJUIVCJP import { chunk } from 'lodash-es'; ˞ग़యɿ IUUQTWJUFKTEFWHVJEFEFQQSFCVOEMJOHIUNM

%FQFOEFODZ1SFCVOEMJOH 7JUF͸ԿΛ͍ͯ͠Δͷ

#BSFNPEVMFJNQPSUΛॻ͖׵͑Δ 7JUF͸ԿΛ͍ͯ͠Δͷ ϒϥ΢β্Ͱ &4.PEVMF ͷ JNQPSUΛߦ͍ͬͯ͘ 7JUF Λ࢖ͬͨ։ൃ؀ڥͰ͸ import Vue from 'vue'; ͱ͍ͬͨίʔυͰ 7VFΛਖ਼͘͠ղܾ͢Δ͜ͱ͕Ͱ͖ͳ͍ ͦͷͨΊ 7JUF Ͱ͸ import Vue from ‘/node_modules/.vite/vue.js?v=f3sf2ebd'; ͷΑ͏ͳܗ΁ͱॻ͖׵͑ͯ͘ΕΔ max-age=31536000,immutable ͰڧྗʹΩϟογϡ͠·͢ ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNM

#BSFJNQPSUΛॻ͖׵͑Δ 7JUF͸ԿΛ͍ͯ͠Δͷ

)PU.PEVMF3FMPBE ).3 7JUF͸Կ͕Ͱ͖Δͷ 7VF4'$΁ͷαϙʔτͱ 3FBDU'BTU3FGSFTI΁ͷαϙʔτΛϑΝʔετύʔςΟͰߦ͍ͬͯΔ 1SFBDU ΋αʔυύʔςΟͷ !QSFGSFTIWJUF Ͱαϙʔτ͍ͯ͠Δ ͱ͍͍ͭͭ΋ʜ OQN JOJU !WJUFKTBQQͰ࡞ΒΕͯͨ 7VF3FBDU1SFBDU 4WFMUFϓϩδΣΫτʹ͍ͭͯ͸ ࠷ॳ͔Β).3͕αϙʔτ͞Εͨঢ়ଶͰ։ൃΛ࢝ΊΔ͜ͱ͕Ͱ͖Δ ஫IUUQTHJUIVCDPNWJUFKTWJUFUSFFNBJOQBDLBHFTDSFBUFBQQ Λݟͨײ͡ MJUFMFNFOUͱ WBOJMMB͸ະରԠ ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMIPUNPEVMFSFQMBDFNFOU

5ZQF4DSJQUͷτϥϯεύΠϧ 7JUF͸Կ͕Ͱ͖Δͷ 5ZQF4DSJQU͸࠷ॳ͔ΒରԠࡁΈɻͨͩ͠ɺܕνΣοΫΛߦΘͣτϥϯεύΠϧ͚ͩߦ͏ɻ ΈΜͳ74$PEFͳΓɺ*OUFMMJ+ͳΓɺΤσΟλࣗ਎͕54ͷܕνΣοΫͰ͖Δ؀ڥͰॻ͍ͯΔΑͶʁ ͱ͍͏͜ͱͬΆ͍ FTCVJME ͕ 54ͷτϥϯεύΠϧΛߦ͏͕ɺUTD ʹൺ΂ͯഒ଎͍Β͍͠ ҰԠ੒໿΋͋ͬͯɺDPOTUFOVN ͱ͔ JNQMJDJUUZQFPOMZJNQPSUT͸࢖͑ͳ͍ͱ͍ͯ͠Δ Λ͢Δ͜ͱΛਪ঑͞Ε͍ͯΔ λʔϛφϧ΍$*؀ڥͳͲͰܕνΣοΫ௨Βͳ͔ͬͨΒΤϥʔʹ͢Δʜͱ͔΍Γ͚ͨΕ͹ Λ࢖͑͹0, tsc --noEmit // or vue-tsc --noEmit ˞WVFUTD ʹ͍ͭͯ͸࠷ޙʹ৮Ε·͢ compilerOptions.isolatedModules = true ˞ग़యɿ IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMUZQFTDSJQU

7VFͷαϙʔτ 7JUF͸Կ͕Ͱ͖Δͷ 7VF͸ 7JUF ͕ެࣜαϙʔτ͍ͯ͠Δ 4'$+49ڞʹ 7VF΋ VOEFSGJOWJUFQMVHJOWVFΛ࢖͏͜ͱͰ 7JUF Λར༻Մೳ ).3΋͋ΔΑ ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMWVF

$44$PEF4QMJUUJOH #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ '06$ 'MBTIPGVOTUZMFE DPOUFOU Λ๷͙ͨΊɺEZOBNJDJNQPSUͰಡΈࠐΉ DIVOL͕ ௥Ճͷ DTT Λ ಡΈࠐΉ৔߹͸ɺઌʹ $44ͷ MPBE͕ऴΘ͔ͬͯΒ DIVOLΛಡΉΑ͏ʹͯ͘͠ΕΔ ˞ग़యɿIUUQTHJUIVCDPNWJUFKTWJUFCMPCNBJOQBDLBHFTWJUFTSDOPEFQMVHJOTJNQPSU"OBMZTJT#VJMEUT- IUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMDTTDPEFTQMJUUJOH const e = await h( (() => import("./lib-a.5453f0dd.js")), [ "/assets/lib-a.5453f0dd.js", "/assets/common.16805b00.js", "/assets/common.3313c481.css” ] ) ˢ Ϗϧυ͞ΕͨίʔυͷҰ෦

1SFMPBE%JSFDUJWFT(FOFSBUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ ॳظಡΈࠐΈ࣌ʹඞཁʹͳΔDIVOLʹରͯ͠ MJOLSFMlQSFMPBEzλάΛIUNMʹຒΊࠐΜͰ͘ΕΔ Vite App ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMQSFMPBEEJSFDUJWFTHFOFSBUJPO

"TZOD$IVOL-PBEJOH0QUJNJ[BUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ %ZOBNJDJNQPSUͰ JNQPSUͨ͠ ෳ਺ͷ DIVOL͔Β ͞Βʹڞ௨ͷ DIVOLʹରͯ͠ EJSFDUJNQPSUΛ͢Δέʔε $PNNPODIVOL$ $IVOL" %ZOBNJDJNQPSU &OUSZ $IVOL# %JSFDUJNQPSU ͜ͷέʔεͰɺΑΓޮ཰ͷ͍͍νϟϯΫͷऔΓํΛ͢ΔΑ͏ʹίʔυΛ࠷దԽ͠·͢ ˞ग़యɿIUUQTWJUFKTEFWHVJEFGFBUVSFTIUNMBTZODDIVOLMPBEJOHPQUJNJ[BUJPO

"TZOD$IVOL-PBEJOH0QUJNJ[BUJPO #VJMEͷ࠷దԽ 7JUF͸Կ͕Ͱ͖Δͷ %FW 1SPE

3PMMVQ༻ͷ1MVHJOΛαϙʔτ 1MVHJO 7JUF͸Կ͕Ͱ͖Δͷ 7JUF ʹ͸ SPMMVQΛϕʔεʹͨ͠ϓϥάΠϯγεςϜ͕ଘࡏ͢Δɻ Ұൠతͳ 8FC։ൃͷ৔߹ 7JUF Ͱଟ͘ͷϢʔεέʔεΛΧόʔͰ͖Δ͜ͱ͔Β ϓϥάΠϯ͢Βඞཁͳ͍Αͱͭͭ͠΋ɺ3PMMVQ༻ͷ QMVHJOΛ࢖͏͜ͱ΋Ͱ͖Δ ˞ग़యɿIUUQTWJUFKTEFWHVJEFVTJOHQMVHJOTIUNM !SPMMVQQMVHJOFTMJOU ΛೖΕͯΈͨྫ

.VMUJQBHF"QQͷαϙʔτ 7JUF͸Կ͕Ͱ͖Δͷ .VMUJQBHF"QQͷߏ੒Ͱ΋ SPMMVQ0QUJPOT ʹ JOQVUΛ௥Ճ͢Δ͚ͩͰ0, ҎԼͷྫͷ৔߹ IUUQMPDBMIPTUOFTUFEJOEFYIUNM ͰΞΫηεͰ͖ΔΑ͏ʹͳΔ ˞ग़యɿIUUQTWJUFKTEFWHVJEFCVJMEIUNMNVMUJQBHFBQQ

-JCSBSZ.PEFΛ࢖ͬͨϥΠϒϥϦ࡞੒ͷαϙʔτ 7JUF͸Կ͕Ͱ͖Δͷ ϥΠϒϥϦΛ࡞Δͱ͖΋7JUF͸ศར JOEFYIUNM ͱ͔ͷ TSD σΟϨΫτϦ͸ EFNP΍ ϥΠϒϥϦ։ൃͷ؀ڥͱ͓͍ͯ࣋ͬͯͯ͠ OQN SVOCVJME͢Δͱ ϥΠϒϥϦͷίʔυ͚͕ͩ EJTU ʹు͖ग़͞ΕΔ ˞ग़యɿIUUQTWJUFKTEFWHVJEFCVJMEIUNMMJCSBSZNPEF

4OPXQBDL ଞͷόϯυϥʔͱൺ΂ͯ ʮ&4.PEVMF ͕ϕʔεʹ͋Δʯ ʮ։ൃத͸όϯυϧ͠ͳ͍΋ͷΛ TFSWF͢ΔʯΈ͍ͨͳɺํ޲ੑ͸ࣅ͍ͯΔͬΆ͍ 7JUFT EFQFOEFODZQSFCVOEMJOHJTBMTPJOTQJSFECZ4OPXQBDLW ͱ͋ΔΑ͏ʹɺӨڹΛड͚͍ͯΔ෦෼΋͋ΔΑ͏ͩ ͍ΖΜͳόϯυϥʔͱʮ޿͘ઙ͘ʯͱ͍ͬͨҹ৅ͷ4OPXQBDLʹൺ΂ͯ 7JUF ͸ 3PMMVQͱΨοπϦ JOUFHSBUFE͞Ε͍ͯΔͷͰɺ΍ΕΔ͜ͱ͕ଟ͍ͱݴΘΕ͍ͯΔ ʢݸਓతʹ͸ 'JSTUDMBTTͷ 7VF αϙʔτ͕σΧ͍ͱࢥͬͯ·͢ʂʣ ʢ͜ͷ͋ͱͷࡾ޷͞Μͷൃද΍ 6*5*OTJEFͰ΋ 4OPXQBDLʹ͍ͭͯ৮Ε͍ͯΔͷͰΑ͔ͬͨΒʜʣ ˞ग़యɿIUUQTWJUFKTEFWHVJEFDPNQBSJTPOTIUNM

XFCQBDL ଞͷόϯυϥʔͱൺ΂ͯ XFCQBDLͱൺ΂Δͱͦ΋ͦ΋ͷ࡞Γ͕ҧ͏ XFCQBDL͸όϯυϧΛ࡞͔ͬͯΒ TFSWFSSFBEZʹͳΔ ରͯ͠ʜ 7JUF ͸·ͣ TFSWFSSFBEZʹͳΔɻ &4.PEVMF ͷ EZOBNJDJNQPSUΛར༻͢Δ͜ͱͰ େ͖ͳόϯυϧΛ࡞Βͳͯ͘ࡁΉ͔Β଎͍ɻ FTCVJME ͷύϫʔ΋आΓΔ͜ͱͰɺ&4.PEVMF ͷϏϧυ΋଎͍ɻ ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMTMPXTFSWFSTUBSU

'"2

ຊจλΠτϧ ຊ൪޲͚ʹ͸όϯυϧ࡞ͬͯΔͷʁ&4.PEVMF࢖Θͳ͍ͷʁ ଎͍ͷ͸Θ͔ͬͨɺͰ΋ͳΜͰʜ &4.͕ଟ͘ͷϒϥ΢βͰαϙʔτ͞ΕΔΑ͏ʹͳͬͨ΋ͷͷ όϯυϧ͞Ε͍ͯͳ͍&4.͸·ͩඇޮ཰ͳ໘΋͋ΔͨΊɻ ࠷దԽ͞Εͨίʔυ͸΍ͬͺΓڧ͍ USFFTIBLJOH MB[ZMPBEJOH DPNNPODIVOLTQMJUUJOH Ωϟογϡ໘Ͱڧ͍ ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMXIZCVOEMFGPSQSPEVDUJPO

ͳΜͰຊ൪޲͚΋FTCVJMEͰόϯυϧ͠ͳ͍ͷʁ ଎͍ͷ͸Θ͔ͬͨɺͰ΋ͳΜͰʜ ։ൃͰ࢖͏෼ʹ͸े෼଎͍͚Ͳɺ͍͔ͭ͘ͷόϯυϥͱͯ͠ॏཁͳػೳ͕8*1Ͱ͋Δɻ ʢྫʣDPEFTQMJUUJOHͱ͔ $44ͷϋϯυϦϯάͱ͔ɻ ͜ͷ͋ͨΓΛߟ͑Δͱ SPMMVQ͕͍͍ΑͶʂͬͯ͜ͱʹͳͬͨɻ ͨͩɺ͜Ε͸ͱΓ͋͑ͣࠓͷ͏ͪ͸ͬͯ͜ͱͰ͋ͬͯ কདྷతʹ FTCVJME ʹͳΔ͜ͱ΋͋Δ͔΋Ͷ తͳ͜ͱ͕υΩϡϝϯτͰॻ͔Ε͍ͯΔ ˞ग़యɿIUUQTWJUFKTEFWHVJEFXIZIUNMXIZOPUCVOEMFXJUIFTCVJME

WVFDMJͳ͔͚ͬͨͬʁ݁ہͲ͕ͬͪະདྷͳͷʁ 7JUF͕Πέ͍ͯΔͷ͸Θ͔ͬͨɺͰ΋ʜ 7VFKT "NTUFSEBNʹͯ &WBO:PV͕ݴ͍ͬͯͨΑ͏ʹ ୹͍໨ͰݟΕ͹྆ํଘࡏ͢Δ ௕͍໨Ͱݟͨ৔߹ɺ7JUF ͷ଎౓ WVFDMJͷแׅతͳαϙʔτ ྆ํͷϝϦοτΛड͚͍ͨ ͱ͍͏͜ͱͷΑ͏ɻ ʢݸਓతͳߟ͑Ͱ͕͢ʣ ͱΓ͋͑ͣ͸޷͖ͳํΛ࢖͑͹͍͍ͷͰ͸ʁ ˞ग़యɿ IUUQTXXXZPVUVCFDPNXBUDI W&M+X$'KH

WVFUTD ͬͯͳʹʁ ͖ͬ͞ݴͬͯͨʜ WVFUTD ͸ UTD WTDPEFWVFMBOHVBHFTFSWJDF Λ૊Έ߹Θͤͨ΋ͷ 7PMBS 74$PEF ֦ுػೳ ͷத਎Ͱ΋͋Δ WTDPEFWVFMBOHVBHFTFSWVJDF Ͱ͸ ςϯϓϨʔτ্ͷܕνΣοΫ΋ߦͬͯ͘ΕΔͷͰɺඇৗʹ։ൃମݧ͕ྑ͔ͬͨͰ͢ɻ

WVFUTD ͬͯͳʹʁ ͖ͬ͞ݴͬͯͨʜ ͪͳΈʹʜ7FUVSͰ΋ WFUVSWBMJEBUJPOUFNQMBUF1SPQT ΛΦϯʹ͢Δ͜ͱͰಉ༷ͷνΣοΫ͕Մೳ

THANK YOU