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

革命と秩序とSPA

joe_re
September 16, 2016

 革命と秩序とSPA

Frontend Meetup vol.1 LT
http://connpass.com/event/38112/
react + flux + floetypw

joe_re

September 16, 2016
Tweet

More Decks by joe_re

Other Decks in Technology

Transcript

  1. Who am I? • twitter: @joe_re • github: @joe-re •

    freeeͱ͍͏ޒ൓ాͷ
 ձࣾͰಇ͍͍ͯ·͢ • Ϋϥ΢υձܭιϑτΛ
 ࡞͍ͬͯ·͢
  2. ͬ͘͟ΓϑϩϯτΤϯυͷྺ࢙ΛৼΓฦΔ "KBYͷൃݟ
 1SPUPUZQFKTɺK2VFSZͷ੮ר #BDLCPOFKTͷొ৔
 ϑϩϯτΤϯυʹ.7$͕࣋ͪࠐ·ΕΔ XBZCJOEJOHͷྲྀߦ .77. 
 "OHVMBSKTɺ7VFKTɺ.BSJOPOFUUFKTFUDʜ ձܭGSFFFϩʔϯν

    7JSUVBM%0.ͷొ৔
 %FLVɺ3FBDUɺ7VFKT Y FUDʜ main topics of fronted history of freee 2010 2005 2012 2014 څ༩ܭࢉGSFFFϩʔϯν ձܭGSFFF։ൃ։࢝ ձࣾઃཱGSFFFϩʔϯν now!
  3. freee-mvc-frameworkͰ
 ΍͍ͬͯΔ͜ͱ • backbone.jsΛϥοϓͯ͠ػೳڧԽ • viewͷΤϯτϦʔϙΠϯτͱͳΔ’page view’ͷ௥Ճ • backbone.jsͷϥΠϑαΠΫϧΛڧԽ •

    renderingͷޙʹɺ1౓͚ͩΑ͹ΕΔϥΠϑαΠΫϧ΍renderingޙʹݺͿϥΠϑαΠΫ ϧͷ௥ՃͳͲͳͲ • ঢ়ଶ؅ཧ΋ڧԽͯ͠ɺin-documented͔ͦ͏Ͱͳ͍͔ͳͲΛߟྀͨ͠͏͑Ͱͷ
 ϋϯυϦϯά΋Մೳʹͨ͠ • ਌ࢠؔ܎ͷDOMૢ࡞ɺΠϕϯτϋϯυϦϯάͷڧԽ • ͋ͱద౰ʹศརౕΛಥͬࠐΉ
  4. Flux͓͞Β͍ • ୯ํ޲σʔλϑϩʔΛ࣮ݱ͢Δ࣮૷ύλʔϯ • ActionCreator → Dispatcher → Store →

    View • Component͔Βঢ়ଶ͸੾Γ཭͞ΕɺStoreʹ֨ೲ͞ΕΔ • ඳըͷͨΊʹඞཁͳϩδοΫ͸StoreʹͭΊ͜ΈɺViewʹ͸ඳըʹඞཁͳ৘ใ͕ߏ੒ࡁΈ
 Ͱ௨஌͞ΕΔͷͰݟ௨͕͠ྑ͘ͳΔ
  5. 2015೥ॳ಄ɺԶ͕࠷ڧͷFlux ࣮૷ͩઓ૪ຄൃ • Alt • Reflux • Fluxxor • Fluxible

    • nuclear-js • Arda • Material Flux • Delorean • Flummox • Redux • etc...
  6. flowtype͓͞Β͍ • Facebook੡ͷJavaScriptͷੈքʹ੩తͳܕνΣοΫΛಋೖͰ͖Δπʔϧ • OCaml੡ • ASTղੳͯ͠ɺґଘؔ܎ͷ͋Δ΋ͷ͚ͩΛ
 νΣοΫର৅ʹ͢ΔͷͰ2౓໨Ҏ߱ͷίϯύΠϧ͕ര଎ • ڧྗͳܕਪ࿦

    • ఏڙ͢Δͷ͸ܕ෇͚༻ͷγϯλοΫεͱɺͦͷղੳͱิ׬ͷΈ
 (Not AltJS) • ͢ͰʹbabelΛ࢖͍ͬͯΔ৔߹ʹ͸pluginΛ௥Ճ͢Δ͚ͩͰ͙͢࢖͑Δ
  7. flow-typed component UZQF1SPQT\ UJUMFTUSJOH  WJTJUFECPPMFBO  PO$MJDL WPJE 

    ^ DMBTT#VUUPOFYUFOET3FBDU$PNQPOFOU\ QSPQT1SPQT TUBUF\ EJTQMBZTUBUJDcIPWFScBDUJWF ^ ʜ ^ Ϋϥε௚Լʹ1SPQTɺ4UBUFͷUZQFΛࢦఆ
 ˞ཁUSBOTGPSNDMBTTQSPQFSUJFT TUBHF
  8. flow-typed component FYQPSUEFGBVMUDMBTT)PHF$PNQPOFOUFYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSO  #VUUPOUJUMFIJHFWJTJUFE\GBMTF^  

    ^ ^ PO$MJDLϓϩύςΟΛ౉͠๨Ε͍ͯΔͷͰ
 Τϥʔ͕ग़Δ qPX )PHF$PNQPFOUOKTY #VUUPOUJUMFIJHFWJTJUFE\GBMTF^ ???????????????????????????????????????3FBDUFMFNFOUA#VUUPOA QSPQT1SPQT ?????QSPQFSUZAPO$MJDLA1SPQFSUZOPUGPVOEJO4FFCVUUPOKTY #VUUPOUJUMFIJHFWJTJUFE\GBMTF^ ???????????????????????????????????????QSPQTPG3FBDUFMFNFOUA#VUUPOA
  9. flow-typed action UZQF'&5$)@"--\UZQFbGFUDI@BMM` IPQFT"SSBZ)PHF^ UZQF4"7&\UZQFTBWF IPHF)PHF^ UZQF%&-&5&\UZQFEFMFUF JEOVNCFS^ FYQPSUUZQF"DUJPO5ZQFT'&5$)@"--c4"7&c%&-&5& GVODUJPOEJBQBUDI

    QBSBNT"DUJPO5ZQFT \ "QQ%JTQBUDIFSEJTQBUDI QBSBNT  ^ FYQPSUEFGBVMU\ GFUDI"MM \ HFU bIPHF` UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFTEBUBIPHFT^ ^  ^ TBWF IPHF)PHF \ QVU AIPHF\IPHFJE^A \ ʜIPHF`TQBSBNT ^ 
 UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^ ^  ^ EFMFUF JEOVNCFS \ EFMFUF AIPHF\JE^A UIFO @EBUB EJTQBUDI \UZQFbEFMFUF` JE^  ^ ֤"DUJPOͷUZQFΛఆٛ͠ɺ
 VOJPOUZQFTͱͯ͠·ͱΊΔ BDUJPOͰEJTQBUDI͢ΔUZQFΛ
 ఆٛͨ͠VOJPOUZQFTʹ͢Δ ֤EJTQBUDI͸ఆٛͨ͠
 VOJPOUZQFTͷ͍ͣΕ͔Λ
 ຬͨ͢
  10. flow-typed action FYQPSUEFGBVMU\ GFUDI"MM \ HFU bIPHF` UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM`

    IPHFTEBUBIPHFT^ ^  ^ TBWF IPHF)PHF \ QVU AIPHF\IPHFJE^A \ ʜIPHF`TQBSBNT ^ 
 UIFO EBUBEJBQBUDI \UZQFbGFUDI@BMM` IPHFEBUBIPHF^ ^  ^ EFMFUF JEOVNCFS \ EFMFUF AIPHF\JE^A UIFO @EBUB EJTQBUDI \UZQFbEFMFUF` JE^  ^ FYQPSUEFGBVMU)PHF$PNQPOFOUFYUFOET3FBDU$PNQPOFOU\ IBOEMF$MJDL%FMFUF)PHF F \
 "DUJPOEFMFUF \JEUIJTTUBUFTFMFDUFE^  ^
 ʜ ^ Action Component $PNQPOFOU͔Β"DUJPO$SFBUFS Λୟ͘ࡍͷ*'΋อূ͞ΕΔ
  11. flow-typed state JNQPSUUZQFT\"DUJPO5ZQFT^GSPN)PHF"DUJPO FYQPSUUZQF4UBUF\IPHFT\<LFZOVNCFS>)PHFT^^ DMBTT)PHF4UPSFFYUFOET3FEVDF4UPSF4UBUF\ HFU*OJUJBM4UBUF 4UBUF\ SFUVSO\)PHFT\^^ ^ SFEVDF

    TUBUF4UBUF BDUJPO"DUJPO5ZQFT 4UBUF\ TXJUDI BDUJPOUZQF \ DBTFGFUDI@BMM SFUVSO\IPHFTBDUJPOIPHFTSFEVDF D W \ D<WJE>W SFUVSOD ^ \^ ^ DBTFTBWF DPOTUIPHF\^ IPHF<BDUJPOIPHFJE>BDUJPOIPHF SFUVSO0CKFDUBTTJHO \^ TUBUF IPHF  DBTFEFMFUF SFUVSOTUBUFIPHFTTFMFDU IPHFIPHFJEBDUJPOJE  ʜ "DUJPO5ZQFT VOJPOUZQFT ΛJNQPSU 4UBUFΛఆٛͯ͠4UPSFʹ౉͢
 ࢖͍Έͪ͸ޙड़ DBTFจʹΑͬͯVOJPOUZQFT͕ߜΒΕΔ
 BDUJPOTIPHFTʹΞΫηεͰ͖Δͷ͸GFUDI@BMMԼͷϒϩοΫ͚ͩ BDUJPOTIPHFʹΞΫηεͰ͖Δͷ͸TBWFԼͷϒϩοΫ͚ͩ BDUJPOTJEʹΞΫηεͰ͖Δͷ͸EFMFUFԼͷϒϩοΫ͚ͩ
  12. flow-typed store EFDMBSFNPEVMFqVYVUJMT\ EFDMBSFDMBTT3FEVDF4UPSF5\ HFU4UBUF 5  ^ ^ JNQPSU)PHF4UPSFGSPN)PHF4UPSF

    JNQPSUUZQF\4UBUF^GSPN)PHF4UPSF DMBTT)PHF$POUBJOFSFYUFOET3FBDU$PNQPOFOU\ TUBUF4UBUF TUBUJDHFU4UPSFT \SFUVSO<)PHF4UPSF>^ TUBUJDDBMDVMBUF4UBUF @QSFW4UBUF4UBUF 4UBUF\ SFUVSO)PHF4UPSFHFU4UBUF  ^ SFOEFS \ ʜ Declare ReduceStore Component HFOFSJDTͰ4UPSFʹ༩͑ͨ
 ܕΛHFU4UBUFͰड͚औΕΔΑ͏ʹ͢Δ 3FEVDF4UPSFͷHFU4UBUFΛݺͼग़ͨ࣌͠ʹ
 4UPSFͰఆٛͨ͠ܕ৘ใΛड͚औΕΔ