Tweet
Tweet

Slide 1

Slide 1 text

,PUMJO+4ͷόϯυϧϑΝΠϧΛ ͪΐͬͱؤுͬͯ࡟ݮ͢Δ ,PUMJOѪ޷ձWPM ʹ͜͠Γ͞ͿΖʙ!TVCSPI@

Slide 2

Slide 2 text

"CPVU.F ʹ͜͠Γ͞ͿΖʙ ✦౦ژ౎ɾҏ౾େౡग़਎ ✦גࣜձࣾ#FBS5BJM ‣ "OESPJEΤϯδχΞ ,PUMJO+BWB ˑ ‣ 8FCΤϯδχΞ 3BJMT3FBDU

Slide 3

Slide 3 text

গ͚ͩ͠એ఻ $0-03.!45&3 w ΞΠϚεΩϟϥΫλʔͷ ΠϝʔδΧϥʔݕࡧϖϯϥΠτ w 8FC൛Λ,PUMJO+4Ͱ࣮૷ʂ ,PUMJO཰ʂ 63-IUUQTJNBTDPMPSNBTUFSXFCBQQ (JU)VCTVCSPIDPMPSNBTUFS

Slide 4

Slide 4 text

গ͚ͩ͠એ఻ $0-03.!45&3 w ,UPSLPUMJOYTFSJBMJ[FS,PEFJO w 3FBDU IPPLT 3FBDU3PVUFS .BUFSJBM6*JOFYU ϨεϙϯγϒରԠʂຊ৬"OESPJEΤϯδχΞͩ͠ʜ μʔΫςʔϚରԠʂμʔΫςʔϚΧοί͍͍͡ΌΜ ଟݴޠରԠʂւ֎޲͚ʹઆ໌͠΍͔ͨͬͨ͘͢͠

Slide 5

Slide 5 text

࿩͢͜ͱ 㾎,PUMJO+4Ͱ8FCΞϓϦΛ࣮૷ͨ࣌͠ʹಘͨɺ஌ݟͷڞ༗ 㾎ʰ+4ͷόϯυϧϑΝΠϧΛখ͘͢͞ΔʱͨΊͷ஌ݟ 㾎ࠓޙͷ,PUMJO+4ͷల๬

Slide 6

Slide 6 text

֤छϥΠϒϥϦΛ࢖͍ɺΠΠײ͡ʹ6*ϩδοΫΛ࣮૷͢Δ ࠓճ͸লུ ,PUMJOͷίʔυΛ+BWBTDSJQUͷίʔυʹม׵͢Δ (SBEMFͷ୲౰Օॴɺ,PUMJOϥΠϒϥϦͷґଘੑղܾ +BWBTDSJQUͷίʔυΛͭͷόϯυϧϑΝΠϧʹ·ͱΊΔ 8FCQBDLͷ୲౰Օॴɺ+4ϞδϡʔϧͷґଘੑղܾNJOJGZ ,PUMJO+4੡8FCΞϓϦΛϦϦʔε͢Δ·Ͱ ˞ গ͠ݹ͍͕ ,PUMJO'FTUͷ,PUMJO+4ͷηογϣϯΛࢀߟʹʜ ɹ:PV5VCFIUUQTZPVUVCF2S.*L) ϦϦʔε

Slide 7

Slide 7 text

֤छϥΠϒϥϦΛ࢖͍ɺΠΠײ͡ʹ6*ϩδοΫΛ࣮૷͢Δ ࠓճ͸লུ ,PUMJOͷίʔυΛ+BWBTDSJQUͷίʔυʹม׵͢Δ (SBEMFͷ୲౰Օॴɺ,PUMJOϥΠϒϥϦͷґଘੑղܾ +BWBTDSJQUͷίʔυΛͭͷόϯυϧϑΝΠϧʹ·ͱΊΔ 8FCQBDLͷ୲౰Օॴɺ+4ϞδϡʔϧͷґଘੑղܾNJOJGZ ,PUMJO+4੡8FCΞϓϦΛϦϦʔε͢Δ·Ͱ ˞ গ͠ݹ͍͕ ,PUMJO'FTUͷ,PUMJO+4ͷηογϣϯΛࢀߟʹʜ ɹ:PV5VCFIUUQTZPVUVCF2S.*L) ϦϦʔε

Slide 8

Slide 8 text

ʮ࣮૷Ͱ͖ͨʔʂϦϦʔε͢Δͧʯ QSPEVDUJPOϏϧυͰ.#ʂ 8FCQBDLͷܯࠂ͕ग़Δͷ͸,#Λ௒͑ͨ࣌ େ͖͗͢Δͱॳճϩʔυ͕஗͘ͳΔɹύϑΥʔϚϯε͕௿Լ͢Δ ,PUMJO+4੡8FCΞϓϦΛϦϦʔε͢Δ·Ͱ Ͳ͏ʹ͔ͯ͠όϯυϧϑΝΠϧͷαΠζΛ খ͘͞͠ͳ͚Ε͹ͳΒͳ͍ʜ

Slide 9

Slide 9 text

ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ 8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ 8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ

Slide 10

Slide 10 text

ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ 8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ 8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ ࠷΋؆୯Ͱ༗ޮʂ

Slide 11

Slide 11 text

w 8FCQBDL+4Ϟδϡʔϧͷґଘੑղܾͭͷόϯυϧʹ·ͱΊΔ 5SFF4IBLJOHະ࢖༻ϞδϡʔϧΛࣗಈݕ஌͠ɺόϯυϧ͔Βআ֎ ྫ.BUFSJBM6* w छྨҎ্ͷ6*ίϯϙʔωϯτؚ͕·ΕΔϞδϡʔϧ w #VUUPO͚ͩ࢖͍ͬͯΔˠͦΕҎ֎͸શͯόϯυϧ͔Βআ֎ʂ 8FCQBDLͷ5SFF4IBLJOH JNQPSUจΛॻ͖׵͑Δ͚ͩʂ "OESPJEͰ͸3͕୲౰͢Δॲཧ

Slide 12

Slide 12 text

w 8FCQBDL+4Ϟδϡʔϧͷґଘੑղܾͭͷόϯυϧʹ·ͱΊΔ 5SFF4IBLJOHະ࢖༻ϞδϡʔϧΛࣗಈݕ஌͠ɺόϯυϧ͔Βআ֎ ྫ.BUFSJBM6* w छྨҎ্ͷ6*ίϯϙʔωϯτؚ͕·ΕΔϞδϡʔϧ w #VUUPO͚ͩ࢖͍ͬͯΔˠͦΕҎ֎͸શͯόϯυϧ͔Βআ֎ʂ 8FCQBDLͷ5SFF4IBLJOH JNQPSUจΛॻ͖׵͑Δ͚ͩʂ "OESPJEͰ͸3͕୲౰͢Δॲཧ ͜Ε͸+BWBTDSJQUͷΈͷ৔߹ ,PUMJO+4Ͱ͸ʜʁ

Slide 13

Slide 13 text

ˑ5SFF4IBLJOHΛ༗ޮʹ͢Δʹ͸ɺίʔυ͕&4४ڌͰ͋Δ͜ͱ͕ඞਢʂ &4+BWBTDSJQUͷඪ४ن֨ɺੜͷ+BWBTDSJQUͱ͸গ͠จ๏͕ҧ͏ ˑ,PUMJO+4͔Βు͖ग़͞ΕΔ+BWBTDSJQUˠੜͷ+BWBTDSJQUίʔυ &4ʹ४ڌ͍ͯ͠ͳ͍+BWBTDSJQUίʔυ͕ੜ੒͞ΕΔ ݱঢ়ͷ,PUMJO+4Ͱ͸ 5SFF4IBLJOHΛ༗ޮʹ͢Δ͜ͱ͸ෆՄೳ 8FCQBDLͷ5SFF4IBLJOHPO,PUMJO+4 ͖͋ΒΊͯʜͨ·Δ͔ʜ

Slide 14

Slide 14 text

ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ 8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ 8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ

Slide 15

Slide 15 text

ˑ͍͔ͭ͘ηΦϦʔ͕͋Δ 8FCQBDLͷ5SFF4IBLJOH͕༗ޮʹͳΔΑ͏ίʔυΛमਖ਼͢Δ +4ϞδϡʔϧΛ֎෦Խ͠ɺ$%/͔Βऔಘ͢ΔΑ͏ʹ͢Δ 8FCQBDLͷ$PEF4QMJUUJOHΛ༗ޮʹ͢ΔFUD όϯυϧϑΝΠϧΛখ͘͢͞ΔͨΊʹ

Slide 16

Slide 16 text

ˑར༻͍ͯ͠Δ+4ϞδϡʔϧΛ$%/αʔόʔ͔Βݸผऔಘ͠ɺར༻͢Δ όϯυϧϑΝΠϧʹ֎෦ͷ+4ϞδϡʔϧΛؚ·ͳ͍ˠαΠζ࡟ݮʂ +4Ϟδϡʔϧͷ֎෦Խ CFGPSF BGUFS όϯυϧϑΝΠϧ ֎෦Խͨ͠+4Ϟδϡʔϧ $%/αʔόʔ͔ΒΩϟογϡࡁΈͷ +4ϞδϡʔϧΛऔಘˠߴ଎ʂ όϯυϧϑΝΠϧ

Slide 17

Slide 17 text

ˑ+BWBTDSJQUͷΈͷ৔߹ 8FCQBDLͷઃఆมߋ 8FCQBDL$EO1MVHJO)UNM8FCQBDL1MVHJOΛར༻͢Δ +4Ϟδϡʔϧͷ֎෦ԽPO+BWBTDSJQU 8FCQBDL$EO1MVHJOTIJSPUFDIXFCQBDLDEOQMVHJO )UNM8FCQBDL1MVHJOKBOUJNPOIUNMXFCQBDLQMVHJO

Slide 18

Slide 18 text

ˑϓϥάΠϯͷར༻ํ๏ PO+BWBTDSJQU +4Ϟδϡʔϧͷ֎෦ԽPO+BWBTDSJQU "devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack-cdn-plugin": "^3.2.2", ... } QBDLBHFKTPOʹ ϓϥάΠϯͷґଘؔ܎Λ௥Ճ config.plugins.push( new HtmlWebpackPlugin(), new WebpackCdnPlugin({ modules: [ { name: 'react', path: 'umd/react.production.min.js', }, ... ], publicPath:'/node_modules', }), ); 3&"%.&ʹैͬͯ XFCQBDLDPOpHKTʹઃఆΛ௥Ճ ,PUMJO+4ͷ৔߹΋ ΄΅ಉ͡खॱͰରԠՄೳʂ

Slide 19

Slide 19 text

ˑϓϥάΠϯͷར༻ํ๏ PO,PUMJO+4 (SBEMFʹϓϥάΠϯͷґଘؔ܎Λ௥Ճ +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 dependencies { ... implementation(devNpm("html-webpack-plugin", "^3.2.0")) implementation(devNpm("webpack-cdn-plugin", "^3.2.2")) } // v1.4-M3からは不要 fun devNpm(name: String, version: String = "*") = NpmDependency(project, name, version, NpmDependency.Scope.DEV) EFW%FQFOEFODJFTʹ ґଘؔ܎͕௥Ճ͞ΕΔΑ͏ʹ WͰ͸֦ுؔ਺ͷ ఆ͕ٛඞཁ ˞(SBEMFͷDPNQMJF0OMZͱಉ͡ҙຯ ˞W.͔Βෆཁ

Slide 20

Slide 20 text

ˑϓϥάΠϯͷར༻ํ๏ PO,PUMJO+4 Ϟδϡʔϧͷ௚ԼʹXFCQBDLDPOpHE ۭͷKTϑΝΠϧΛ࡞੒ ໊લ͸ԿͰ΋0, +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 ͜͜ʹஔ͍ͨKTϑΝΠϧͰ 8FCQBDLͷઃఆΛ্ॻ͖Ͱ͖Δʂ

Slide 21

Slide 21 text

ˑϓϥάΠϯͷར༻ํ๏ PO,PUMJO+4 8FCQBDL$EO1MVHJO)UNM8FCQBDL1MVHJOͷઃఆΛ௥Ճ +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 config.plugins.push( new HtmlWebpackPlugin({ template: path.resolve(webAppPath, '...'), filename: path.resolve(webAppPath, '...'), }), ); if (config.mode === 'production') { config.externals = [{ react: 'React' }, ...]; config.plugins.push( new WebpackCdnPlugin({ modules: [{ name: 'react', path: '...' }, ...], pathToNodeModules: path.resolve(rootPath, 'build/js'), }), ); } ৄࡉ͸1MVHJOͷ 3&"%.&NEΛࢀߟʹʜ

Slide 22

Slide 22 text

ˑ8FCQBDL1MVHJOಋೖޙͷόϯυϧαΠζ .#.#ɺ,#ͷ࡟ݮʂ +4Ϟδϡʔϧͷ֎෦ԽPO,PUMJO+4 ·ͩ.#Λ௒͑ͯ͠·͍ͬͯΔʜ ֎෦Խ͚ͨͩ͠Ͱɺ૯௨৴ྔ͸มΘΒͳ͍ʜ

Slide 23

Slide 23 text

ˑ,PUMJOͰಋೖ͞ΕΔɺ৽ͨͳ*3ίϯύΠϥόοΫΤϯυ %FBE$PEF&MJNJOBUJPOͷ࠷దԽ ˠτϥϯεύΠϧޙͷ+BWBTDSJQUϑΝΠϧͷαΠζ͕େ෯ʹখ͘͞ʂ ࠓޙͷల๬ +FU#SBJOTᐌ͘ɺ൒෼ۙ͘খ͘͞Ͱ͖ΔΒ͍͠ ϗϯϚ͔ʜʁʁʁ ग़య,PUMJO.3FMFBTFE IUUQTCMPHKFUCSBJOTDPNLPUMJOLPUMJONSFMFBTFE

Slide 24

Slide 24 text

ˑ,PUMJOͰಋೖ͞ΕΔɺ৽ͨͳ*3ίϯύΠϥόοΫΤϯυ खݩͷ,PUMJO+4ίʔυͰࢼͯ͠ΈͨˠΊͬͪΌখ͘͞ͳͬͨʂ ࠓޙͷల๬ ,#,# ֤छϥΠϒϥϦͷରԠΛ଴ͭඞཁ͸͋Δ΋ͷͷ ະདྷ͸໌Δ͍ʂ

Slide 25

Slide 25 text

ˑকདྷతʹ௥Ճ͞Εͦ͏ͳػೳ ,PUMJO+4͔Β&4ϞδϡʔϧΛੜ੒͢Δػೳ ࠓޙͷల๬ ग़య,PUMJO$POGʮ5IFTUBUFPG,PUMJO+4ʯ IUUQTSFTPVSDFTKFUCSBJOTDPNTUPSBHFQSPEVDUTLPUMJODPOGTMJEFT5IVSTEBZ"VE 4"JHOFS 5IF4UBUFPG,PUMJO+4QEG &4Ͱग़ྗ͞ΕΔͳΒ͹ 5SFF4IBLJOH͕༗ޮʹͳΔՄೳੑ͕ߴ͍ʂ

Slide 26

Slide 26 text

·ͱΊ w ,PUMJO+4ͰϦονͳ8FCΞϓϦΛ࣮૷͢Δ͜ͱ͸Մೳʂ w ຊ൪ϦϦʔε࣌ɺͲ͏ͯ͠΋ωοΫʹͳΔόϯυϧαΠζͷ࡟ݮ 8FCQBDL1MVHJOΛ࢖ͬͨ࡟ݮख๏͕,PUMJO+4Ͱ΋࢖͑Δʂ Ͱߋʹখ͘͞Ͱ͖Δ༨஍͋Γʂɹ&4ରԠɺૣ͘དྷͯཉ͍͠ʂ ೥ޙ൒Ҏ߱ɺͲΜͲΜະདྷ͕໌Δ͘ͳΓͭͭ͋Δ,PUMJO+4 +7.ͱ8FCͷੈքɺ྆ํோΊΔͷ͸ָ͍ͧ͠ʂ 5IBOLZPVGPSMJTUFOJOH ˞+BWBTDSJQUͷ࿩͹͔ͬΓͰɺ͢Έ·ͤΜͰͨ͠