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

elmから学ぼう

3204f6241aaca4a1082bfe1202e60d69?s=47 mather
April 04, 2016

 elmから学ぼう

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

3204f6241aaca4a1082bfe1202e60d69?s=128

mather

April 04, 2016
Tweet

Transcript

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

  2. ࣗݾ঺հ • ܂ാ ӳࢿ (32) • גࣜձࣾΞϥλφ • ීஈ͸όοΫΤϯυ΍ͬͯ·͢ •

    Scalaͱ͔Haskellͱ͔ • ΧϝϥͱεΩϡʔόμΠϏϯά͕झຯ
  3. ࠓ೔ͷ಺༰ • elmͷ঺հ • σϞ • ؔ਺ܕͱϦΞΫςΟϒ • ·ͱΊ

  4. elm

  5. elm • http://elm-lang.org/ • ·ͩൃల్্(ݱࡏver. 0.16.0)ͳݴޠ • ؔ਺ܕϦΞΫςΟϒͳϑϩϯτΤϯυݴޠ • HTML,

    JavaScript(, CSS)Λੜ੒͢Δ • HaskellϥΠΫͳهड़͕Ͱ͖Δ
  6. લஔ͖ • elm͸·࣮ͩ༻తͳஈ֊Ͱ͸͋Γ·ͤΜ • elm͕࢖͑ͳͯ͘΋ྑ͍Ͱ͢ • Τοηϯε͚ͩͳΜͱͳ͘Θ͔ͬͯ͘ΕΔͱ͋ Γ͕͍ͨͰ͢(^_^ʎ

  7. σϞ

  8. TodoMVC (ެࣜσϞ)

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

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

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

    ෳ਺ͷঢ়ଶΛಉظ͢ΔͨΊͷίʔυ͕૿͑Δ
  12. ґଘ͍ͯ͠Δ͸ͣͷঢ়ଶ var str = “hoge”; var len = str.length; var

    str = “fugafuga”; if (str.length === len) { // 正常 } else { // 例外処理!? }
  13. ؅ཧ͢Δঢ়ଶΛ࠷খݶʹ͢Δ ΞϓϦέʔγϣϯͷ શͯͷঢ়ଶ ҰͭͷλεΫͷ ঢ়ଶ

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

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

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

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

    ʹϦΞΫςΟϒ(Reactive)
  18. ·ͱΊ

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

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

    ঢ়ଶ͔Β஋ΛऔΓग़͢Α͏ʹ͢Δ
  21. ͋Γ͕ͱ͏͍͟͝·ͨ͠