elmから学ぼう

関数型リアクティブなフロントエンド言語であるelmの紹介

Transcript

1. elm͔Βֶ΅͏
   2016/04/02 ܂ാ ӳࢿ
   #satoimo
   

   View Slide

2. ࣗݾ঺հ
   • ܂ാ ӳࢿ (32)
   • גࣜձࣾΞϥλφ
   • ීஈ͸όοΫΤϯυ΍ͬͯ·͢
   • Scalaͱ͔Haskellͱ͔
   • ΧϝϥͱεΩϡʔόμΠϏϯά͕झຯ
   

   View Slide

3. ࠓ೔ͷ಺༰
   • elmͷ঺հ
   • σϞ
   • ؔ਺ܕͱϦΞΫςΟϒ
   • ·ͱΊ
   

   View Slide

4. elm
   

   View Slide

5. elm
   • http://elm-lang.org/
   • ·ͩൃల్্(ݱࡏver. 0.16.0)ͳݴޠ
   • ؔ਺ܕϦΞΫςΟϒͳϑϩϯτΤϯυݴޠ
   • HTML, JavaScript(, CSS)Λੜ੒͢Δ
   • HaskellϥΠΫͳهड़͕Ͱ͖Δ
   

   View Slide

6. લஔ͖
   • elm͸·࣮ͩ༻తͳஈ֊Ͱ͸͋Γ·ͤΜ
   • elm͕࢖͑ͳͯ͘΋ྑ͍Ͱ͢
   • Τοηϯε͚ͩͳΜͱͳ͘Θ͔ͬͯ͘ΕΔͱ͋
   Γ͕͍ͨͰ͢(^_^ʎ
   

   View Slide

7. σϞ
   

   View Slide

8. TodoMVC (ެࣜσϞ)
   

   View Slide

9. ׬ྃͨ͠λεΫΛ࡟আ
   ະ׬ྃͷλεΫ਺ ͲͷλεΫ͕ݟΕΔঢ়ଶ͔ʁ
   λεΫ͸
   ׬ྃͨ͠ʁ
   λεΫϦετ
   

   View Slide

10. ؔ਺ܕͱϦΞΫςΟϒ
    

    View Slide

11. ঢ়ଶͷ਺ͱෳࡶ͞
    • ؅ཧ͢Δঢ়ଶͷ਺͕ଟ͍ˠෳࡶʹͳΔ
    • ϑϥάͷ؅ཧɺදࣔ༻ͷ਺஋ɺetc…
    • ࣮ࡍʹ͸ผͷঢ়ଶʹґଘ͍ͯ͠Δ͜ͱ΋
    • ґଘ͍ͯ͠Δ͸ͣͷঢ়ଶ͕ಉظ࿙Εˠόά
    • ෳ਺ͷঢ়ଶΛಉظ͢ΔͨΊͷίʔυ͕૿͑Δ
    

    View Slide

12. ґଘ͍ͯ͠Δ͸ͣͷঢ়ଶ
    var str = “hoge”;
    var len = str.length;
    var str = “fugafuga”;
    if (str.length === len) {
    // 正常
    } else {
    // 例外処理！？
    }
    

    View Slide

13. ؅ཧ͢Δঢ়ଶΛ࠷খݶʹ͢Δ
    ΞϓϦέʔγϣϯͷ
    શͯͷঢ়ଶ
    ҰͭͷλεΫͷ
    ঢ়ଶ
    

    View Slide

14. ঢ়ଶ͔Β஋Λಋ͘
    λεΫϦετΛ༩͑Δͱʜ
    ඞཁͳ஋ΛλεΫϦετ͔Β
    ಋ͖ग़ͯ͠ʜ
    )5.-Λॻ͖ग़͢ ؔ਺ܕ 'VODUJPOBM
    
    

    View Slide

15. ΞΫγϣϯͷͨͼʹ࣍ͷঢ়ଶ΁
    "DUJPOΛड͚ͯࠓͷঢ়ଶ͔Β
    ৽͍͠ঢ়ଶ΁
    ʢߋ৽͸͠ͳ͍ʣ
    

    View Slide

16. ΞΫγϣϯ΋ܾΊ͓ͯ͘
    

    View Slide

17. Ͳ͏΍ͬͯߋ৽͢Δʁ
    .PEFM .PEFM .PEFM
    λεΫ௥Ճ λεΫ׬ྃ
    ׬ྃࡁΈ
    λεΫ࡟আ
    ೖྗ͞ΕͨΞΫγϣϯʹ
    ൓Ԡͯ͠৽͍͠ঢ়ଶʹ͢Δ
    ʹϦΞΫςΟϒ(Reactive)
    

    View Slide

18. ·ͱΊ
    

    View Slide

19. ϦΞΫςΟϒདྷͯ·͢
    • ϦΞΫςΟϒ΋ͩΜͩΜਁಁ͖ͯͨ͠
    • React.jsͱͦͷϑϨʔϜϫʔΫ(Flux)
    • FluxϑϨʔϜϫʔΫͷҰͭRedux͸elmΛࢀ
    ߟʹ͍ͯ͠Δ
    

    View Slide

20. ঢ়ଶΛ೺Ѳͯ͠·͔͢ʁ
    • ஌Β͵ؒʹ૿͑Δϑϥά
    • ঢ়ଶύλʔϯͷݟམͱ͠ɾෆ੔߹
    • ͦΕɺؔ਺ܕͷߟ͑ํͰ͍͚·͢Αʁ
    • ඞཁͳঢ়ଶΛߜΓࠐΉ
    • ঢ়ଶ͔Β஋ΛऔΓग़͢Α͏ʹ͢Δ
    

    View Slide

21. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide