wacker#17-wreact

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

Transcript

1. 8BDLFSͭ·Έ͙͍3FBDU
   

   View Slide

2. 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
   ಠࣗλάʹΑΔཁૉͷΧϓηϧԽ

   ࠶ར༻ੑɾϞδϡʔϧੑͳͲͷ؍఺͔Βخ͍͠ΑͶ
   

   View Slide

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

   View Slide

4. 3FBDU$PNQPOFOU
   JNQPSU3FBDUGSPNSFBDU
   JNQPSU\SFOEFS^GSPNSFBDUEPN
   )FMMP$PNQPOFOU
   DMBTT)FMMPFYUFOET3FBDU$PNQPOFOU\
   SFOEFS
   \
   SFUVSO
   EJWDMBTT/BNFIFMMP
   Q\)FMMPUIJTQSPQTOBNF^Q
   EJW
   
   
   ^
   ^
   (0
   SFOEFS )FMMPOBNFXBDLFS EPDVNFOUHFU&MFNFOU#Z*E BQQ
   
   
   ৭ʑॻ͖ํ͸͋Δ͕ɺ+49ͱ&$."4DSJQUͰهड़͢Δ͜ͱ͕Ұൠత

   τϥϯεύΠϧ͕ඞཁ

   ίϯϙʔωϯτࢦ޲ͷԸܙΛड͚ΔͨΊͷϞδϡʔϧ JNQPSUɾFYQPSU
   

   ϞδϡʔϧͷόϯυϦϯά͕ඞཁ
   

   View Slide

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

   View Slide

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

   View Slide

7. 3FBDUͷڊେͳγεςϜֶͿ΂͖ʁ
   ൒೥ޙʹԿ͕Ͳ͏มΘ͍ͬͯΔ͔͸༧૝Ͱ͖ͳ͍ɻ

   ͭ·Έ͙͍͓ͯ͘͜͠ͱ͸ɺগͳ͘ͱ΋ྑͦ͞͏ɻ
   

   View Slide

8. ϋϯζΦϯ
   IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU
   WReact — Easy React Template
   HJUDMPOFHJU!HJUIVCDPNXBLBZBNBIBDLFSXSFBDUHJU

   DEXSFBDU

   OQNJOTUBMM
   OQNTUBSU

   PQFOMPDBMIPTU
   IUUQTHJUIVCDPNXBLBZBNBIBDLFSXSFBDU
   

   View Slide

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

   View Slide

10. +49
    DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\
    SFOEFS
    \
    SFUVSO
    EJWDMBTT/BNFIFMMP
    Q\)FMMPUIJTQSPQTOBNF^Q

    VM

    \UIJTQSPQTMJTUTNBQ MJTU\

    SFUVSO MJLFZ\MJTUJE^\MJTUWBMVF^MJ
    
    ^
    ^
    VM
    EJW
    
    
    ^
    ^
    )5.-λάΛ௚઀هड़Ͱ͖Δ+BWB4DSJQU֦ு

    λάͷ಺෦Ͱ\^Λ࢖͏ͱ+49ࣜΛೖΕࢠͰهड़Ͱ͖Δ
    DMBTTଐੑɺGPSଐੑͳͲɺ+BWB4DSJQUͷ༧໿ޠʹ͋Δଐੑ໊͕࢖͑ͳ͘ͳΔ
    DMBTTDMBTT/BNFɺGPSIUNM'PS
    

    View Slide

11. 4UBUF ಺෦ঢ়ଶ
    Λར༻͢Δ
    DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\
    

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

    SFOEFS
    \

    DPOTUTFMGUIJT
    SFUVSO
    CVUUPOPO$MJDL\
    TFMGTFU4UBUF \᙮͖ͩঢ়ᴋ^
    ^δϯψδCVUUPO
    
    
    ^
    ^
    ίϯετϥΫλͰॳظঢ়ଶUIJTTUBUFΛΦϒδΣΫτͱͯ͠ఆٛ

    ʢΦʔόʔϥΠυ͢Δͱ͖ʹඞͣϕʔεΫϥεͷίϯετϥΫλ TVQFS
    ΛݺͿʣ
    ΠϕϯτϋϯυϥͰTFU4UBUFؔ਺Λ࢖ͬͯ಺෦ঢ়ଶΛߋ৽͢Δ
    σʔλͷยํ޲όΠϯσΟϯά
    TFU4UBUFSFOEFSTFU4UBUF
    
    

    View Slide

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

    View Slide

13. *NNVUBCJMJUZ
    DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\
    

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

    SFOEFS
    \

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

    View Slide

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

    View Slide

15. ँࣙ
    8BDLFSͭ·Έ͙͍3FBDUͷ։࠵ʹ͋ͨΓɺਖ਼࿨৘ใαʔϏε༷ʹձ৔Λ
    ఏڙ͍͖ͨͩ·ͨ͠ɻޚྱਃ্͛͠·͢ɻ

    

    'BDFCPPLϖʔδ

    IUUQTXXXGBDFCPPLDPN4FJXB+PIP
    

    ΢ΣϒαΠτ

    IUUQXXXTFJXBKPIPDPKQ
    

    View Slide