Functional JavaScript/TypeScript

j5ik2oにふられたのでやった

Transcript

1. Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Functional
   JavaScript / TypeScript
   

   View Slide

2. About me
   KAZUMA Ukyo
   ൧͓͍ͬͯͩ͘͝͞
   

   View Slide

3. ஫ҙ
   

   View Slide

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

   View Slide

5. Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Function?
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   Е
   Е ЕЕЕЕ
   JavaScript?
   

   View Slide

10. JavaScript
    Scheme Self
    

    View Slide

11. ͍͚Δؾ͕͢Δʂ
    

    View Slide

12. +BWB4DSJQUͬΆ͍͜ͱ
    

    View Slide

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`ͱೖྗͯ͠༡Ϳ
    

    View Slide

14. ؔ਺ܕͬΆ͍
    ͔࣍Β͸·ͱ΋ͳྫΛ
    ݟ͍͖ͯ·͠ΐ͏
    

    View Slide

15. ྫจࣈྻΛ݁߹
    

    View Slide

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

    View Slide

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

    View Slide

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;
    });
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. ྫจࣈྻͷ௕͞Λ߹ܭ
    

    View Slide

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

    View Slide

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;
    });
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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!
    

    View Slide

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

    View Slide

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

    View Slide

31. ʮؔ਺͕গͳ͍ʯ
    

    View Slide

32. ʮ*&Ͱಈ͔ͳ͍ʯ
    

    View Slide

33. ʮ*&Ͱಈ͔ͳ͍ʯ
    

    View Slide

34. View Slide

35. View Slide

36. _.map(_.range(1,5), _.partial(op['*'], 2))
    // -> [2,4,6,8]
    ͢͝ʙ͍ɺ׬ᘳʹؔ਺ܕͩΑʙ
    _.reduce([1,2,3,4], op['+'])
    // -> 10
    ͔͜͜Β͸6OEFSTDPSFલఏͰਐΊ·͢
    6OEFSTDPSF
    

    View Slide

37. Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    TypeScript?
    

    View Slide

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

    View Slide

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

    View Slide

40. ͚Ͳ+BWB4DSJQUͰ͢
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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'));
    

    View Slide

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);
    

    View Slide

47. ϑΥʔϜͷόϦσʔγϣϯ
    class Form {
    $el = $('#hoge-form');
    $name = $('#name');
    $password = $('#password');
    $submit = $('#submit');
    // ...
    onNameAdressChange() {
    nameValidation($name);
    }
    onPasswordChange() {
    passwordValidation($password);
    }
    }
    

    View Slide

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

    View Slide

49. ͱ͍͏ײ͡Ͱ͢
    

    View Slide

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

    View Slide

51. 001࠷ߴοʂ
    

    View Slide

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

    View Slide

53. ͓·͚
    

    View Slide

54. IUUQHJUIVCDPNZBBLBJUPNPOBQU
    

    View Slide

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

    View Slide

56. NPOBQU
    class IssueRepository {
    issuesForRepository(repo: Repository):
    monapt.Future {
    var p = new monapt.Promise();
    $.ajax({
    // ....
    });
    return p.future().map(response => // ....);
    }
    }
    ΑΖ͘͠Ͷʂ
    

    View Slide

57. View Slide