電卓アプリで学ぶReact/Redux入門/wajs1_lt2

We Are JavaScripters! @1st【初心者登壇歓迎！LT大会】 https://wajs.connpass.com/event/44567/ の発表資料です。

参考リンク
・電卓アプリで学ぶReact/Redux入門(基礎知識編)
http://qiita.com/nishina555/items/affcb3684e67cd0ee897

・電卓アプリで学ぶReact/Redux入門(実装編)
http://qiita.com/nishina555/items/9ff744a897af8ed1679b

・ソースコード
https://github.com/nishina555/redux-calculator

Transcript

1. ి୎ΞϓϦͰֶͿ 3FBDU3FEVYೖ໳  ਔՊ
   ढ़੖
2. ࣗݾ঺հ w໊લ
   
   
   
   
   
   
   
   
   
   ਔՊढ़੖
   wΞΧ΢ϯτ
   OJTIJOB
   wۀ຿಺༰
   
   
   
   +BWB 4QSJOH ͰαʔόʔαΠυ։ൃ
   w࢖༻ݴޠ
   
   
   
   +BWB
   3VCZ
   3FBDUKT 
3. ࠓճͷൃද಺༰ʹ͍ͭͯ w࿩͢͜ͱ
    3FBDUKTͱ3FEVYͷ֓ཁʹ͍ͭͯ
    ి୎ΞϓϦΛྫʹɺ
 3FBDU3FEVYͷ۩ମతͳσʔλͷྲྀΕʹ͍ͭͯ
   w࿩͞ͳ͍͜ͱ
    3FBDUKT΍&4ͳͲͷৄࡉͳจ๏ͷղઆ
    ి୎ΞϓϦ࡞੒खॱ

   νϡʔτϦΞϧͷϦϯΫ͸ผ్ڞ༗͠·͢ 
4. 3FBDU3FEVYͷ֓ཁ 
5. 3FBDUKTʹ͍ͭͯ w.7$Ϟσϧͷ7 7JFX ͷ໾ׂΛ୲͏+BWB4DSJQU
 ϥΠϒϥϦ
    ֶशίετ͕௿͍ͱ͍͏ϝϦοτ
   w$PNQPOFOUͷ૊Έ߹ΘͤʹΑͬͯΞϓϦΛߏ੒͢Δ
   wԾ૝%0.Λ࣋ͭ
    σʔλΛड͚औΓɺߋ৽͕ඞཁͳ෦෼ͷ%0.Λ
 ಈతʹมߋ͢Δ 
6. 3FEVYʹ͍ͭͯ w'MVYϕʔεͷঢ়ଶ؅ཧϑϨʔϜϫʔΫͷͭ
    ঢ়ଶͱ͸ి୎ΞϓϦͰ͍͏ʮݱࡏͷ߹ܭ஋ʯͳͲ
 w3FBDUKT͚ͩͰͳ͘ɺ༷ʑͳKTϑϨʔϜϫʔΫ
 ͱ૊Έ߹ΘͤΔ͜ͱ͕Մೳ 
7. 'MVYͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ
   ֓ཁ w"DUJPO
   
   %JTQBUDIFS
   
   4UPSF
   
   7JFXͷ
 Ұํ޲Ͱσʔλͷঢ়ଶ͕఻ൖ
   Լͷ໼ҹ 
 wϢʔβʔͷߦಈʹΑͬͯ7JFX͔Β"DUJPOΛൃߦ͠
 σʔλͷঢ়ଶΛ఻ൖͤ͞Δ͜ͱ΋Ͱ͖Δ
   ্ͷ໼ҹ 
8. 'MVYͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ
   "DUJPO wσʔλͷঢ়ଶΛมߋ͢ΔϦΫΤετΛૹΔͱ͜Ζ
    ి୎ΞϓϦͰ͍͏ͱ͜Ζͷʮ஋ΛՃࢉ͍ͨ͠ʯ
 ͱ͍ͬͨ෦෼ʹ͋ͨΔ 
9. 'MVYͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ
   %JTQBUDIFS wϦΫΤετΛड͚औΓσʔλΛૹΔɺ
 ͍ΘΏΔαʔόʔͷΑ͏ͳ໾ׂΛ͍ͯ͠Δͱ͜Ζ 
10. 'MVYͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ
    4UPSF wσʔλͷঢ়ଶΛอ͓࣋ͯ͘͠ͱ͜Ζ
     ి୎ΞϓϦͰ͍͏ʮೖྗ͞Εͨ஋ʯʮݱࡏͷ߹ܭ஋ʯ΍ ʮ݁ՌΛදࣔ͢Δ͔Ͳ͏͔ʯͱ͍ͬͨ෦෼ʹ͋ͨΔ
    w%JTQBUDIFS͕αʔόʔͩͱͨ͠Βɺ4UPSF͸σʔλϕʔε
    w4UPSFͷঢ়ଶ͕7JFXʹ൓ө͞ΕΔ 
11. 3FEVYͰ৽ͨʹग़ͯ͘Δ֓೦ w3FEVDFS
     "DUJPOͷϩδοΫΛ୲͏
     ి୎ΞϓϦͰ͍͏ͱ͜Ζͷʮ਺ࣈΛՃࢉ͢Δʯ
 ॲཧ͕3FEVDFSͰ࣮૷͞ΕΔ 
12. 3FBDUKTͱ3FEVYΛ૊Έ߹ΘͤΔͱ͸ w3FBDUKT͸7JFXͷ໾ׂʹಛԽ͢ΔͷͰ
 σʔλͷঢ়ଶ؅ཧ͸ۤख
 w3FEVY͸ঢ়ଶ؅ཧʹಛԽͨ͠ϑϨʔϜϫʔΫ  w3FEVYͱ૊Έ߹ΘͤΔ͜ͱͰɺ3FBDUKTͰ΋؆୯ ʹσʔλͷঢ়ଶΛ؅ཧ͠ɺ7JFXʹ൓өͰ͖Δ
13. ి୎ΞϓϦͷ࣮૷ 
14. ి୎ΞϓϦͷશମ૾ wσʔλͷྲྀΕ
    $POUBJOFS
 ˣ
    $PNQPOFOU
    ˣ
    "DUJPO
    ˣ
    3FEVDFS
    ˣ
    4UPSF
    ˣ
    $POUBJOFS  ਺ࣈϘλϯΛԡͨ͠৔߹Λྫʹઆ໌Λ͠·͢
15. $POUBJOFSͷݺͼग़͠  wΞϓϦΛىಈ͢Δͱɺ·ͣ͸Ұ൪֎ଆʹଘࡏ͢Δ $POUBJOFS͕ݺ͹ΕΔ
16. $PNQPOFOUͷݺͼग़͠
    "DUJPOൃߦ  w$POUBJOFS಺Ͱ$PNQPOFOUͱ"DUJPO͕؅ཧɺ ඥ෇͚͞Ε͍ͯΔ
     ਺ࣈϘλϯΛԡͨ͠Β਺ࣈϘλϯΛԡͨ࣌͠ͷ ΞΫγϣϯΛ࣮ߦ
17. $PNQPOFOUͷத਎  w$PNQPOFOU͸7JFXΛߏ੒͢Δύʔπ
18. "DUJPOͷ࣮ߦ wࢦఆ͞Εͨ"DUJPOΛൃߦɺ࣮૷͸3FEVDFSͰߦ͏
     ਺ࣈϘλϯΛԡ͞ΕͨΒɺ਺ࣈͷೖྗʹؔ͢Δ
 ॲཧΛߦͬͯ΋Β͍͍ͨͱ͍͏ఆٛ 
19. 3FEVDFSͷ࣮ߦ  wൃߦ͞Εͨ"DUJPOΛड͚औΔ
    wσʔλͷঢ়ଶ TUBUF Λมߋ͢Δ
     ਺ࣈϘλϯΛԡͨ͠৔߹ʮೖྗ͞Εͨ஋Λߋ৽ʯʮܭࢉ݁Ռ͸ग़͞ͳ͍ʯ
    w˞
    JOJUJBM"QQ4UBUF͸ॳظ஋
     ೖྗ஋
    ܭࢉ݁Ռ
    ݁Ռ͸ݟͤͳ͍
20. 4UPSFͷߋ৽
    7JFX΁ͷड͚౉͠ w3FEVDFSʹΑͬͯσʔλͷঢ়ଶΛมߋ͢Δ
    wมߋ͞Εͨঢ়ଶΛ$POUBJOFSʹ౉͢͜ͱͰ
 7JFX΋มߋ͞ΕΔ 
21. ·ͱΊ w3FBDUKT
     7JFXʹಛԽͨ͠+BWB4DSJQUϥΠϒϥϦ
    w3FEVY
     σʔλͷঢ়ଶΛ؅ཧ͢ΔϑϨʔϜϫʔΫ
    w3FBDUKTͱ3FEVYΛ૊Έ߹ΘͤΔ
     3FBDUKTͰ΋σʔλͷঢ়ଶ؅ཧ͕؆୯ʹͳΔ
    w3FBDU3FEVYͷσʔλϑϩʔ
     $POUBJOFS
    
    $PNQPOFOU
    
    "DUJPO
    
    3FEVDFS
    
    4UPSF 
22. ৄࡉ͸ҎԼʹ·ͱΊ·ͨ͠ wి୎ΞϓϦͰֶͿ3FBDU3FEVYೖ໳ جૅ஌ࣝฤ
     IUUQRJJUBDPNOJTIJOBJUFNT B⒎DCFDEFF
 wి୎ΞϓϦͰֶͿ3FBDU3FEVYೖ໳ ࣮૷ฤ
     IUUQRJJUBDPNOJTIJOBJUFNT ⒎BBGFEC
 wιʔείʔυ
     IUUQTHJUIVCDPNOJTIJOBSFEVYDBMDVMBUPS