Upgrade to Pro — share decks privately, control downloads, hide ads and more …

wacker#17-wreact

 wacker#17-wreact

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

KamataRyo

July 16, 2017
Tweet

More Decks by KamataRyo

Other Decks in Technology

Transcript

  1. 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 ಠࣗλάʹΑΔཁૉͷΧϓηϧԽ
 ࠶ར༻ੑɾϞδϡʔϧੑͳͲͷ؍఺͔Βخ͍͠ΑͶ
  2. 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 
 ϞδϡʔϧͷόϯυϦϯά͕ඞཁ
  3. ϞδϡʔϧόϯυϦϯάɾτϥϯεύΠϧ อकੑΛอͪͭͭɺϒϥ΢β࣮૷ͱͷޓ׵ੑΛ֬อ͢Δɹ JavaScript (ES6 source) React Component (ES6 source, JSX)

    JavaScript (ES6 module) JavaScript (CommonJS module) JavaScript (ES5 distribution) Bundler (webpackBrowserify) Transpiler (Babel)
  4. 3FBDU$PNQPOFOUͷ࡞੒ ͭͷํ๏ΫϥεએݴɺQVSFSFOEFSGVODUJPO ಺ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͞͹͟Ν DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO 

    Q)FMMPQ   ^ ^ ಺ᐙঢ়ᴋ TUBUF ΤᬤͶͥͺ͞͹͟ͼ͖gQSPQTΤ᳃͝ΛᗀͣᲔΝͲͣ DPOTU&YBNQMF QSPQT \ SFUVSO  Q)FMMP1   ^
  5. +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
  6. 4UBUF ಺෦ঢ়ଶ Λར༻͢Δ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ 
 DPOTUSVDUPS QSPQT \ TVQFS QSPQT

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

    ^ ^ DPOTU1BSFOU QSPQT \ SFUVSO  EJW$IJMEOBNF\GPP^EJW   ^  ਌ίϯϙʔωϯτͰ͸ΤϨϝϯτͷଐੑͱͯ͠هड़ GPPlCBS   ࢠͷίϯϙʔωϯτͰ͸ɺUIJTQSPQTܦ༝ͰΞΫηε
  8. *NNVUBCJMJUZ DMBTT&YBNQMFFYUFOET3FBDU$PNQPOFOU\ 
 DPOTUSVDUPS QSPQT \ TVQFS QSPQT  UIJTTUBUF\

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