Functional JavaScript/TypeScript

Functional JavaScript/TypeScript

j5ik2oにふられたのでやった

8ba73f340ca40f9aa49a521fdc9512ce?s=128

KAZUMA Ukyo

August 28, 2013
Tweet

Transcript

  1. Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е

    Е ЕЕЕЕ Functional JavaScript / TypeScript
  2. About me KAZUMA Ukyo ൧͓͍ͬͯͩ͘͝͞

  3. ஫ҙ

  4. 'G"VSPSB͡Όͳ͍ͱಈ͖·ͤΜ ͱ͘ʹ() =>͕

  5. Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е

    Е ЕЕЕЕ Function?
  6. ݸҎ্ͷҾ਺ΛऔΓ ͭͷ৽͍͠஋Λฦ͢

  7. $ +BWB4DSJQUͰ࠷΋࢖ΘΕΔؔ਺

  8. $ +BWB4DSJQUͰ࠷΋࢖ΘΕΔؔ਺

  9. Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е

    Е ЕЕЕЕ JavaScript?
  10. JavaScript Scheme Self

  11. ͍͚Δؾ͕͢Δʂ

  12. +BWB4DSJQUͬΆ͍͜ͱ

  13. document.body.onkeyup = ['f','u','n','c','t','i','o','n'].map( c => code => String.fromCharCode(code).toLowerCase() === c

    ).reduceRight( (fn, validate) => () => (e) => { if (validate(e.keyCode)) document.body.onkeyup = fn() }, () => alert('Function!!!!!!') )() bGVODUJPO`ͱೖྗͯ͠༡Ϳ
  14. ؔ਺ܕͬΆ͍ ͔࣍Β͸·ͱ΋ͳྫΛ ݟ͍͖ͯ·͠ΐ͏

  15. ྫจࣈྻΛ݁߹

  16. ྫจࣈྻΛ݁߹ var texts = ['hoge', 'fuga', 'piyo']; var result =

    '' for (var i = 0; i < texts.length; i++) { result += texts[i]; } retrun result;
  17. ྫจࣈྻΛ݁߹ var texts = ['hoge', 'fuga', 'piyo']; var result =

    '' for (var i = 0; i < texts.length; i++) { result += texts[i]; } retrun result;
  18. ྫจࣈྻΛ݁߹ var texts = ['hoge', 'fuga', 'piyo']; var result =

    '' for (var i = 0; i < texts.length; i++) { result += texts[i]; } retrun result; ['hoge', 'fuga', 'piyo'].reduce((a, b) => { return a + b; });
  19. ྫจࣈྻΛ݁߹ ['hoge', 'fuga', 'piyo'].reduce((a, b) => { return a +

    b; });
  20. ྫจࣈྻΛ݁߹ ['hoge', 'fuga', 'piyo'].reduce((a, b) => { return a +

    b; }); var op = { '+' : function(a + b) { return a + b } } ['hoge', 'fuga', 'piyo'].reduce(op['+']);
  21. ྫจࣈྻΛ݁߹ var op = { '+' : function(a + b)

    { return a + b } } ['hoge', 'fuga', 'piyo'].reduce(op['+']); ['hoge', 'fuga', 'piyo'].join(‘’)
  22. ྫจࣈྻͷ௕͞Λ߹ܭ

  23. ྫจࣈྻͷ௕͞Λ߹ܭ var texts = ['hoge', 'fuga', 'piyo']; var length =

    '' for (var i = 0; i < texts.length; i++) { result += texts[i].lenght; } retrun result;
  24. ྫจࣈྻͷ௕͞Λ߹ܭ var texts = ['hoge', 'fuga', 'piyo']; var length =

    '' for (var i = 0; i < texts.length; i++) { result += texts[i].lenght; } retrun result; ['hoge', 'fuga', 'piyo'].reduce((a, b) => { return a.length + b.length; });
  25. ྫจࣈྻͷ௕͞Λ߹ܭ ['hoge', 'fuga', 'piyo'].reduce((a, b) => { return a.length +

    b.length; }); op['+'] ?
  26. ྫจࣈྻͷ௕͞Λ߹ܭ ['hoge', 'fuga', 'piyo'].reduce((a, b) => { return a.length +

    b.length; }); ['hoge', 'fuga', 'piyo'].map((t) =>{ return t.length }).reduce(op['+'])
  27. ྫจࣈྻͷ௕͞Λ߹ܭ ['hoge', 'fuga', 'piyo'].map((t) =>{ return t.length }).reduce(op['+'])

  28. ྫจࣈྻͷ௕͞Λ߹ܭ ['hoge', 'fuga', 'piyo'].map((t) =>{ return t.length }).reduce(op['+']) var prop

    = function(name) { return function(object) { return object[name]; } } ['hoge', 'fuga', 'piyo'].map(prop('length')) .reduce(op['+']) Currying!
  29. ؔ਺ܕͬΆ͍ ͦΕͬΆ͘ͳ͖ͬͯ·ͨ͠Ͷ

  30. ؔ਺ܕͬΆ͍ ͦΕͬΆ͘ͳ͖ͬͯ·ͨ͠Ͷ

  31. ʮؔ਺͕গͳ͍ʯ

  32. ʮ*&Ͱಈ͔ͳ͍ʯ

  33. ʮ*&Ͱಈ͔ͳ͍ʯ

  34. None
  35. None
  36. _.map(_.range(1,5), _.partial(op['*'], 2)) // -> [2,4,6,8] ͢͝ʙ͍ɺ׬ᘳʹؔ਺ܕͩΑʙ _.reduce([1,2,3,4], op['+']) //

    -> 10 ͔͜͜Β͸6OEFSTDPSFલఏͰਐΊ·͢ 6OEFSTDPSF
  37. Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е Е ЕЕЕЕ Е

    Е ЕЕЕЕ TypeScript?
  38. ʊਓਓਓਓʊ ʼɹ4DBMBɹʻ ʉ:?:?:ʉ

  39. ࡶʹݴ͑͹ Ϋϥε͕࡞Γ΍͘͢ͳΓ·ͨ͠ ؔ਺͕ॻ͖΍͘͢ͳΓ·ͨ͠ ੩తܕʹͳΓ·ͨ͠ ܕਪ࿦ͯ͘͠Ε·͢

  40. ͚Ͳ+BWB4DSJQUͰ͢

  41. ·ͬͨ͘ɺ+4͸࠷ߴͩͥʂʂ

  42. ྫɿϑΥʔϜͷόϦσʔγϣϯ

  43. ϑΥʔϜͷόϦσʔγϣϯ var name = $('#name').val(); if (!(name.length >= 1 &&

    name.length <= 100)) { $('#submit').disable(); return false } var password = $('#password').val(); if (!(password.length >= 8 && password.length <= 100)) { $('#submit').disable(); return false } $('#submit').enable(); return true
  44. ϑΥʔϜͷόϦσʔγϣϯ ͋Δ͋Δʙʙʙ var name = $('#name').val(); if (!(name.length >= 1

    && name.length <= 100)) { $('#submit').disable(); return false } var password = $('#password').val(); if (!(password.length >= 8 && password.length <= 100)) { $('#submit').disable(); return false } $('#submit').enable(); return true
  45. ϑΥʔϜͷόϦσʔγϣϯ function validation(min, max, $el) { var val = $el.val();

    return val.length >= min && val.length <= max; } validation(1, 100, $('#name')); validation(8, 100, $('#password'));
  46. ϑΥʔϜͷόϦσʔγϣϯ function validation(min, max, $el) { var val = $el.val();

    return val.length >= min && val.length <= max; } validation(1, 100, $('#name')); validation(8, 100, $('#password')); var nameValidation = _.partial(validation, 1, 100); var passwordValidation = _.partial(validation, 8, 100);
  47. ϑΥʔϜͷόϦσʔγϣϯ class Form { $el = $('#hoge-form'); $name = $('#name');

    $password = $('#password'); $submit = $('#submit'); // ... onNameAdressChange() { nameValidation($name); } onPasswordChange() { passwordValidation($password); } }
  48. ϑΥʔϜͷόϦσʔγϣϯ // ... onChange() { submit.toggleEnable( _.every([nameValidation($name), passwordValidation($password)]) ); }

    // ...
  49. ͱ͍͏ײ͡Ͱ͢

  50. ͳΜͱͳ͘෼͔ͬͯ ͍͚ͨͩͨͰ͠ΐ͏͔

  51. 001࠷ߴοʂ

  52. ͏·͘ॻ͚͹ 6 : 4 ͘Β͍ scheme Self

  53. ͓·͚

  54. IUUQHJUIVCDPNZBBLBJUPNPOBQU

  55. 5ZQF4DSJQUͰ࡞ͬͨ 4DBMBͷ0QUJPO5SZ'VUVSF

  56. NPOBQU class IssueRepository { issuesForRepository(repo: Repository): monapt.Future<Issue[]> { var p

    = new monapt.Promise<Issue[]>(); $.ajax({ // .... }); return p.future().map(response => // ....); } } ΑΖ͘͠Ͷʂ
  57. None