wacker#17-wreact

和歌山のエンジニアコミュニティ Wackerの勉強会で使用したスライドです。

Transcript

1. 8BDLFS
   
   ͭ·Έ͙͍
   3FBDU
2. 8FC
   $PNQPOFOUT 
   ᓺ΀)5.-
   
 IFBEFS
   
   
   VM
   SPMFtOBWJHBUJPO
   DMBTTOBWJHBUJPO
   
   
   
   
   MJB
   ISFGϯϸδBMJ
   
   
   
   
   MJB
   ISFGϯϸδBMJ
   
   
   
   
   MJB
   ISFGϯϸδBMJ
   
   
   VM
   IFBEFS
   NBJO
   
   
   EJW
   DMBTTBSUJDMF
   
   
   
   
   IτΩύϰI
   
   
   
   
   EJWθϸϋϸωEJW
   
   
   EJW
   
   
   EJW
   DMBTTBSUJDMF
   
   
   
   
   IτΩύϰI
   
   
   
   
   EJWθϸϋϸωEJW
   
   
   EJW
   NBJO 
   θϸϢ⑲ϒϸύΛͩ͟ᆚ
   
 IFBEFS
   
   
   /BWJHBUJPO
   
   IFBEFS
   NBJO
   
   
   "SUJDMF
   
   
   
   "SUJDMF
   
   NBJO ಠࣗλάʹΑΔཁૉͷΧϓηϧԽ
 
   ࠶ར༻ੑɾϞδϡʔϧੑͳͲͷ؍఺͔Βخ͍͠ΑͶ
3. ϑϨʔϜϫʔΫ React Angular IUUQTBOHVMBSJP IUUQTGBDFCPPLHJUIVCJPSFBDU IUUQSJPUKTDPN Riot IUUQTKQWVFKTPSH Vue.js
4. 3FBDU
   $PNQPOFOU JNQPSU
   3FBDU
   GSPN
   SFBDU
   JNQPSU
   \
   SFOEFS
   ^
   GSPN
   SFBDUEPN
   
   )FMMP
   $PNQPOFOU
   DMBTT
   )FMMP
   FYUFOET
   3FBDU$PNQPOFOU
   \
   
   
   SFOEFS
   \
   
   
   
   
   SFUVSO
   
   
   
   
   
   
   
   EJW
   DMBTT/BNFIFMMP
   
   
   
   
   
   
   
   
   Q\
   )FMMP
   
   UIJTQSPQTOBNF
   ^Q
   
   
   
   
   
   
   EJW
   
   
   
   
   
   
   
   ^
   ^
   
   (0
   SFOEFS )FMMP
   OBNFXBDLFS
   
   EPDVNFOUHFU&MFNFOU#Z*E BQQ ৭ʑॻ͖ํ͸͋Δ͕ɺ+49ͱ&$."4DSJQU
   Ͱهड़͢Δ͜ͱ͕Ұൠత
 
   τϥϯεύΠϧ͕ඞཁ
 ίϯϙʔωϯτࢦ޲ͷԸܙΛड͚ΔͨΊͷϞδϡʔϧ
   JNQPSUɾFYQPSU 
 
   ϞδϡʔϧͷόϯυϦϯά͕ඞཁ
5. ϞδϡʔϧόϯυϦϯάɾτϥϯεύΠϧ อकੑΛอͪͭͭɺϒϥ΢β࣮૷ͱͷޓ׵ੑΛ֬อ͢Δɹ JavaScript (ES6 source) React Component (ES6 source, JSX) JavaScript (ES6 module) JavaScript (CommonJS module) JavaScript (ES5 distribution) Bundler (webpack
   
   Browserify) Transpiler (Babel)
6. 3FBDUͷڊେͳγεςϜ
   ֶͿ΂͖ʁ &$."4DSJQU
    +49 τϥϯεύΠϥ Ϟδϡʔϧόϯυϥ 3FEVY 3FBDU
   3PVUFS #BCFM XFCQBDL 5ZQF4DSJQU 549 ʜ &O[ZNF +FTU TUPSZCPPL 3FBDU
   "1*
7. 3FBDUͷڊେͳγεςϜ
   ֶͿ΂͖ʁ ൒೥ޙʹԿ͕Ͳ͏มΘ͍ͬͯΔ͔͸༧૝Ͱ͖ͳ͍ɻ
 ͭ·Έ͙͍͓ͯ͘͜͠ͱ͸ɺগͳ͘ͱ΋ྑͦ͞͏ɻ
8. ϋϯζΦϯ IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU WReact — Easy React Template 
   HJU
   DMPOF
   HJU!HJUIVCDPNXBLBZBNBIBDLFSXSFBDUHJU
 
   DE
   XSFBDU
 
   OQN
   JOTUBMM
   
   OQN
   TUBSU
 
   PQFO
   MPDBMIPTU IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU
9. 3FBDU
   $PNQPOFOUͷ࡞੒ 
   ͭͷํ๏
   
   ΫϥεએݴɺQVSF
   SFOEFS
   GVODUJPO 
   ಺ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͞͹͟Ν
   DMBTT
   &YBNQMF
   FYUFOET
   3FBDU$PNQPOFOU
   \
   
   
   SFOEFS
   \
   SFUVSO
   
   
   
   
   
   Q)FMMPQ
   
   
   
   
   
   
   
   
   
   
   
   ^
   ^
   
   ಺ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͞͹͟ͼ͖gQSPQTΤ᳃͝ΛᗀͣᲔΝͲͣ
   DPOTU
   &YBNQMF
   
   QSPQT
   
   \
   
   
   
   
   SFUVSO
   
   
   
   
   
   
   
   
   
   Q)FMMP1
   
   
   
   
   
   ^
10. +49 DMBTT
    &YBNQMF
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    SFOEFS
    \
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    EJW
    DMBTT/BNFIFMMP
    
    
    
    
    
    
    
    
    Q\
    )FMMP
    
    UIJTQSPQTOBNF
    ^Q

    
    
    
    
    
    
    
    VM

    
    
    
    
    
    
    
    
    
    
    
    \
    UIJTQSPQTMJTUTNBQ MJTU
    
    \

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    MJ
    LFZ\
    MJTUJE
    ^\
    MJTUWBMVF
    ^MJ
    
    
    
    
    
    
    
    
    
    
    
    
    ^
    ^
    
    
    
    
    
    
    
    
    VM
    
    
    
    
    
    
    EJW
    
    
    
    
    
    
    
    ^
    ^ 
    )5.-λάΛ௚઀هड़Ͱ͖Δ+BWB4DSJQU֦ு
 
    λάͷ಺෦Ͱ
    \^
    Λ࢖͏ͱ+49ࣜΛೖΕࢠͰهड़Ͱ͖Δ
    
    DMBTTଐੑɺGPSଐੑͳͲɺ+BWB4DSJQUͷ༧໿ޠʹ͋Δଐੑ໊͕࢖͑ͳ͘ͳΔ
    DMBTT
    
    DMBTT/BNFɺ
    GPS
    
    IUNM'PS
11. 4UBUF
    ಺෦ঢ়ଶ Λར༻͢Δ DMBTT
    &YBNQMF
    FYUFOET
    3FBDU$PNQPOFOU
    \
    

    
    DPOTUSVDUPS QSPQT
    \
    
    
    
    
    TVQFS QSPQT
    
    
    
    
    UIJTTUBUF
    
    \
    
    ᰮ࿴ঢ়ᴋ
    
    ^
    
    
    ^

    
    SFOEFS
    \

    
    
    
    DPOTU
    TFMG
    
    UIJT
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    CVUUPO
    PO$MJDL\
    
    
    TFMGTFU4UBUF \
    
    ᙮͖ͩঢ়ᴋ
    
    ^
    ^δϯψδCVUUPO
    
    
    
    
    
    
    ^
    ^  ίϯετϥΫλͰॳظঢ়ଶ
    UIJTTUBUF
    ΛΦϒδΣΫτͱͯ͠ఆٛ
 ʢΦʔόʔϥΠυ͢Δͱ͖ʹඞͣϕʔεΫϥεͷίϯετϥΫλ TVQFS ΛݺͿʣ
     ΠϕϯτϋϯυϥͰ
    TFU4UBUF
    ؔ਺Λ࢖ͬͯ಺෦ঢ়ଶΛߋ৽͢Δ
     σʔλͷยํ޲όΠϯσΟϯά
    TFU4UBUF
    
    SFOEFS
    
    <଴ػ>
    
    <JOUFSBDUJPO>
    
    TFU4UBUF
    
    
12. 1SPQTΛར༻͢Δ DMBTT
    $IJME
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    SFOEFS
    \
    
    
    
    
    
    
    DPOTU
    OBNF
    
    UIJTQSPQTOBNF
    SFUVSO
    
    
    
    
    
    Q*
    BN
    \
    OBNF
    ^Q
    
    
    
    
    
    
    
    
    
    
    
    ^
    ^
    DPOTU
    1BSFOU
    
    QSPQT
    
    \
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    
    
    EJW$IJME
    OBNF\
    GPP
    ^
    EJW
    
    
    
    
    
    ^  ਌ίϯϙʔωϯτͰ͸ΤϨϝϯτͷଐੑͱͯ͠هड़
    
    GPPlCBS
    
     ࢠͷίϯϙʔωϯτͰ͸ɺUIJTQSPQT
    ܦ༝ͰΞΫηε
13. *NNVUBCJMJUZ DMBTT
    &YBNQMF
    FYUFOET
    3FBDU$PNQPOFOU
    \
    

    
    DPOTUSVDUPS QSPQT
    \
    
    
    
    
    TVQFS QSPQT
    
    
    
    
    UIJTTUBUF
    
    \
    
    ᰮ࿴ঢ়ᴋ
    
    ^
    
    
    ^

    
    SFOEFS
    \

    
    
    
    DPOTU
    TFMG
    
    UIJT
    
    
    
    
    SFUVSO
    
    
    
    
    
    
    
    CVUUPO
    PO$MJDL\
    
    
    TFMGTUBUF
    
    \
    
    ᙮͖ͩঢ়ᴋ
    
    ^
    ^δϯψδCVUUPO
    
    
    
    
    
    
    ^
    ^  ௚઀
    UIJTTUBUFΛߋ৽͢ΔͱյΕ·͢ɻԿ͕ى͖Δ͔෼͔Γ·ͤΜ
     UIJTTUBUFMJTUTQMJDF 
    
    
    
    /(
     ഁյతͳϝιου͕࢖͑ͳ͍
     0CKFDUBTTJHO
    ͳͲΛ׆༻ͯ͠
    JNNVUBCJMJUZ
    ෆมੑ
    ʹ഑ྀ͢Δ NG!
14. εϥΠυͰ৮Ε͍ͯͳ͍τϐοΫ 
    XFCQBDLDPOpHKTͷઃఆ
    
    #BCFMͷઃఆ
    
    ϑΥʔϜΛ࢖͏
    
    ֤छͷϥΠϑαΠΫϧϝιου͕͋Γ·͢
    
    ίϯϙʔωϯτͷNPVOUɺSFOEFSɺQSPQTͷड͚औΓͳͲͷλΠϛϯάʹϑοΫ ͯ͠೚ҙͷॲཧΛ࣮ߦͰ͖·͢
    
    QSPQTͷ਌ࢠ౉͕ͭ͠Β͍໰୊
    
    3FEVY
    
    ΫϥΠΞϯταΠυϧʔςΟϯά
    
    3FBDU
    3PVUFS
    
    ݎ࿚ʹ࡞Γ͍ͨ৔߹
    
    5ZQF4DSJQUͰίϯϙʔωϯτΛهड़͢Δ
    
    ίϯϙʔωϯτͷϢχοτςετ
    
    &O[ZNF
    
    FUD
15. ँࣙ 8BDLFS
    
    ͭ·Έ͙͍3FBDU
    ͷ։࠵ʹ͋ͨΓɺਖ਼࿨৘ใαʔϏε
    ༷ʹձ৔Λ ఏڙ͍͖ͨͩ·ͨ͠ɻޚྱਃ্͛͠·͢ɻ
 
 'BDFCPPLϖʔδ
    
 IUUQTXXXGBDFCPPLDPN4FJXB+PIP
    
 ΢ΣϒαΠτ
 IUUQXXXTFJXBKPIPDPKQ