wacker#17-wreact

8BDLFSͭ·Έ͙͍3FBDU

8FC$PNQPOFOUT ᓺ΀)5.-  IFBEFS VMSPMFtOBWJHBUJPODMBTTOBWJHBUJPO MJBISFGϯϸδBMJ MJBISFGϯϸδBMJ MJBISFGϯϸδBMJ VM IFBEFS NBJO
EJWDMBTTBSUJDMF IτΩύϰI EJWθϸϋϸωEJW EJW EJWDMBTTBSUJDMF IτΩύϰI EJWθϸϋϸωEJW EJW NBJO θϸϢ⑲ϒϸύΛͩ͟ᆚ  IFBEFS /BWJHBUJPO IFBEFS NBJO "SUJDMF "SUJDMF NBJO ಠࣗλάʹΑΔཁૉͷΧϓηϧԽ  ࠶ར༻ੑɾϞδϡʔϧੑͳͲͷ؍఺͔Βخ͍͠ΑͶ

ϑϨʔϜϫʔΫ React Angular IUUQTBOHVMBSJP IUUQTGBDFCPPLHJUIVCJPSFBDU IUUQSJPUKTDPN Riot IUUQTKQWVFKTPSH Vue.js

3FBDU$PNQPOFOU JNQPSU3FBDUGSPNSFBDU JNQPSU\SFOEFS^GSPNSFBDUEPN )FMMP$PNQPOFOU DMBTT)FMMPFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO EJWDMBTT/BNFIFMMP
Q\)FMMP UIJTQSPQTOBNF^Q EJW ^ ^ (0 SFOEFS )FMMPOBNFXBDLFS EPDVNFOUHFU&MFNFOU#Z*E BQQ ৭ʑॻ͖ํ͸͋Δ͕ɺ+49ͱ&$."4DSJQUͰهड़͢Δ͜ͱ͕Ұൠత  τϥϯεύΠϧ͕ඞཁ  ίϯϙʔωϯτࢦ޲ͷԸܙΛड͚ΔͨΊͷϞδϡʔϧ JNQPSUɾFYQPSU   ϞδϡʔϧͷόϯυϦϯά͕ඞཁ

ϞδϡʔϧόϯυϦϯάɾτϥϯεύΠϧ อकੑΛอͪͭͭɺϒϥ΢β࣮૷ͱͷޓ׵ੑΛ֬อ͢Δɹ JavaScript (ES6 source) React Component (ES6 source, JSX)
JavaScript (ES6 module) JavaScript (CommonJS module) JavaScript (ES5 distribution) Bundler (webpackBrowserify) Transpiler (Babel)

3FBDUͷڊେͳγεςϜֶͿ΂͖ʁ &$."4DSJQU +49 τϥϯεύΠϥ Ϟδϡʔϧόϯυϥ 3FEVY 3FBDU3PVUFS #BCFM XFCQBDL 5ZQF4DSJQU
549 ʜ &O[ZNF +FTU TUPSZCPPL 3FBDU"1*

3FBDUͷڊେͳγεςϜֶͿ΂͖ʁ ൒೥ޙʹԿ͕Ͳ͏มΘ͍ͬͯΔ͔͸༧૝Ͱ͖ͳ͍ɻ  ͭ·Έ͙͍͓ͯ͘͜͠ͱ͸ɺগͳ͘ͱ΋ྑͦ͞͏ɻ

ϋϯζΦϯ IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU WReact — Easy React Template HJUDMPOFHJU!HJUIVCDPNXBLBZBNBIBDLFSXSFBDUHJU  DEXSFBDU  OQNJOTUBMM
OQNTUBSU  PQFOMPDBMIPTU IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU

3FBDU$PNQPOFOUͷ࡞੒ ͭͷํ๏ΫϥεએݴɺQVSFSFOEFSGVODUJPO ಺ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͞͹͟Ν DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO
Q)FMMPQ ^ ^ ಺ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͞͹͟ͼ͖gQSPQTΤ᳃͝ΛᗀͣᲔΝͲͣ DPOTU&YBNQMF QSPQT \ SFUVSO Q)FMMP1 ^

+49 DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO EJWDMBTT/BNFIFMMP Q\)FMMP UIJTQSPQTOBNF^Q  VM 
\UIJTQSPQTMJTUTNBQ MJTU\  SFUVSO MJLFZ\MJTUJE^\MJTUWBMVF^MJ ^ ^ VM EJW ^ ^ )5.-λάΛ௚઀هड़Ͱ͖Δ+BWB4DSJQU֦ு  λάͷ಺෦Ͱ\^Λ࢖͏ͱ+49ࣜΛೖΕࢠͰهड़Ͱ͖Δ DMBTTଐੑɺGPSଐੑͳͲɺ+BWB4DSJQUͷ༧໿ޠʹ͋Δଐੑ໊͕࢖͑ͳ͘ͳΔ DMBTTDMBTT/BNFɺGPSIUNM'PS

4UBUF ಺෦ঢ়ଶ Λར༻͢Δ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\   DPOTUSVDUPS QSPQT \ TVQFS QSPQT
UIJTTUBUF\ ᰮ࿴ঢ়ᴋ ^ ^  SFOEFS \  DPOTUTFMGUIJT SFUVSO CVUUPOPO$MJDL\ TFMGTFU4UBUF \ ᙮͖ͩঢ়ᴋ ^ ^δϯψδCVUUPO ^ ^ ίϯετϥΫλͰॳظঢ়ଶUIJTTUBUFΛΦϒδΣΫτͱͯ͠ఆٛ  ʢΦʔόʔϥΠυ͢Δͱ͖ʹඞͣϕʔεΫϥεͷίϯετϥΫλ TVQFS ΛݺͿʣ ΠϕϯτϋϯυϥͰTFU4UBUFؔ਺Λ࢖ͬͯ಺෦ঢ়ଶΛߋ৽͢Δ σʔλͷยํ޲όΠϯσΟϯά TFU4UBUFSFOEFS<଴ػ><JOUFSBDUJPO>TFU4UBUF

1SPQTΛར༻͢Δ DMBTT$IJMEFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ DPOTUOBNFUIJTQSPQTOBNF SFUVSO Q*BN\OBNF^Q
^ ^ DPOTU1BSFOU QSPQT \ SFUVSO EJW$IJMEOBNF\GPP^EJW ^ ਌ίϯϙʔωϯτͰ͸ΤϨϝϯτͷଐੑͱͯ͠هड़ GPPlCBS ࢠͷίϯϙʔωϯτͰ͸ɺUIJTQSPQTܦ༝ͰΞΫηε

*NNVUBCJMJUZ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\   DPOTUSVDUPS QSPQT \ TVQFS QSPQT UIJTTUBUF\
ᰮ࿴ঢ়ᴋ ^ ^  SFOEFS \  DPOTUTFMGUIJT SFUVSO CVUUPOPO$MJDL\ TFMGTUBUF\ ᙮͖ͩঢ়ᴋ ^^δϯψδCVUUPO ^ ^ ௚઀UIJTTUBUFΛߋ৽͢ΔͱյΕ·͢ɻԿ͕ى͖Δ͔෼͔Γ·ͤΜ UIJTTUBUFMJTUTQMJDF /( ഁյతͳϝιου͕࢖͑ͳ͍ 0CKFDUBTTJHOͳͲΛ׆༻ͯ͠JNNVUBCJMJUZ ෆมੑ ʹ഑ྀ͢Δ NG!

εϥΠυͰ৮Ε͍ͯͳ͍τϐοΫ XFCQBDLDPOpHKTͷઃఆ #BCFMͷઃఆ ϑΥʔϜΛ࢖͏ ֤छͷϥΠϑαΠΫϧϝιου͕͋Γ·͢ ίϯϙʔωϯτͷNPVOUɺSFOEFSɺQSPQTͷड͚औΓͳͲͷλΠϛϯάʹϑοΫ ͯ͠೚ҙͷॲཧΛ࣮ߦͰ͖·͢ QSPQTͷ਌ࢠ౉͕ͭ͠Β͍໰୊3FEVY ΫϥΠΞϯταΠυϧʔςΟϯά3FBDU3PVUFS ݎ࿚ʹ࡞Γ͍ͨ৔߹5ZQF4DSJQUͰίϯϙʔωϯτΛهड़͢Δ
ίϯϙʔωϯτͷϢχοτςετ&O[ZNF FUD

ँࣙ 8BDLFSͭ·Έ͙͍3FBDUͷ։࠵ʹ͋ͨΓɺਖ਼࿨৘ใαʔϏε༷ʹձ৔Λ ఏڙ͍͖ͨͩ·ͨ͠ɻޚྱਃ্͛͠·͢ɻ    'BDFCPPLϖʔδ  IUUQTXXXGBDFCPPLDPN4FJXB+PIP   ΢ΣϒαΠτ  IUUQXXXTFJXBKPIPDPKQ

wacker#17-wreact

wacker#17-wreact

KamataRyo

More Decks by KamataRyo

Other Decks in Technology

Featured

Transcript

8BDLFSͭ·Έ͙͍3FBDU

8FC$PNQPOFOUT ᓺ΀)5.-  IFBEFS VMSPMFtOBWJHBUJPODMBTTOBWJHBUJPO MJBISFGϯϸδBMJ MJBISFGϯϸδBMJ MJBISFGϯϸδBMJ VM IFBEFS NBJO

ϑϨʔϜϫʔΫ React Angular IUUQTBOHVMBSJP IUUQTGBDFCPPLHJUIVCJPSFBDU IUUQSJPUKTDPN Riot IUUQTKQWVFKTPSH Vue.js

3FBDU$PNQPOFOU JNQPSU3FBDUGSPNSFBDU JNQPSU\SFOEFS^GSPNSFBDUEPN )FMMP$PNQPOFOU DMBTT)FMMPFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO EJWDMBTT/BNFIFMMP

ϞδϡʔϧόϯυϦϯάɾτϥϯεύΠϧ อकੑΛอͪͭͭɺϒϥ΢β࣮૷ͱͷޓ׵ੑΛ֬อ͢Δɹ JavaScript (ES6 source) React Component (ES6 source, JSX)

3FBDUͷڊେͳγεςϜֶͿ΂͖ʁ &$."4DSJQU +49 τϥϯεύΠϥ Ϟδϡʔϧόϯυϥ 3FEVY 3FBDU3PVUFS #BCFM XFCQBDL 5ZQF4DSJQU

3FBDUͷڊେͳγεςϜֶͿ΂͖ʁ ൒೥ޙʹԿ͕Ͳ͏มΘ͍ͬͯΔ͔͸༧૝Ͱ͖ͳ͍ɻ  ͭ·Έ͙͍͓ͯ͘͜͠ͱ͸ɺগͳ͘ͱ΋ྑͦ͞͏ɻ

ϋϯζΦϯ IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU WReact — Easy React Template HJUDMPOFHJU!HJUIVCDPNXBLBZBNBIBDLFSXSFBDUHJU  DEXSFBDU  OQNJOTUBMM

3FBDU$PNQPOFOUͷ࡞੒ ͭͷํ๏ΫϥεએݴɺQVSFSFOEFSGVODUJPO ಺ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͞͹͟Ν DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO

+49 DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO EJWDMBTT/BNFIFMMP Q\)FMMP UIJTQSPQTOBNF^Q  VM

4UBUF ಺෦ঢ়ଶ Λར༻͢Δ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\   DPOTUSVDUPS QSPQT \ TVQFS QSPQT

1SPQTΛར༻͢Δ DMBTT$IJMEFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ DPOTUOBNFUIJTQSPQTOBNF SFUVSO Q*BN\OBNF^Q

*NNVUBCJMJUZ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\   DPOTUSVDUPS QSPQT \ TVQFS QSPQT UIJTTUBUF\

ँࣙ 8BDLFSͭ·Έ͙͍3FBDUͷ։࠵ʹ͋ͨΓɺਖ਼࿨৘ใαʔϏε༷ʹձ৔Λ ఏڙ͍͖ͨͩ·ͨ͠ɻޚྱਃ্͛͠·͢ɻ    'BDFCPPLϖʔδ  IUUQTXXXGBDFCPPLDPN4FJXB+PIP   ΢ΣϒαΠτ  IUUQXXXTFJXBKPIPDPKQ