Tweet
Tweet

Slide 1

Slide 1 text

8BDLFSͭ·Έ͙͍3FBDU

Slide 2

Slide 2 text

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 ಠࣗλάʹΑΔཁૉͷΧϓηϧԽ
 ࠶ར༻ੑɾϞδϡʔϧੑͳͲͷ؍఺͔Βخ͍͠ΑͶ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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 
 ϞδϡʔϧͷόϯυϦϯά͕ඞཁ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

+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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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