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

Functional JavaScript/TypeScript

Functional JavaScript/TypeScript

j5ik2oにふられたのでやった

KAZUMA Ukyo

August 28, 2013
Tweet

More Decks by KAZUMA Ukyo

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Function?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    JavaScript?

    View full-size slide

  9. JavaScript
    Scheme Self

    View full-size slide

  10. ͍͚Δؾ͕͢Δʂ

    View full-size slide

  11. +BWB4DSJQUͬΆ͍͜ͱ

    View full-size slide

  12. 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 full-size slide

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

    View full-size slide

  14. ྫจࣈྻΛ݁߹

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. ྫจࣈྻΛ݁߹
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. ྫจࣈྻͷ௕͞Λ߹ܭ
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. ྫจࣈྻͷ௕͞Λ߹ܭ
    ['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 full-size slide

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

    View full-size slide

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

    View full-size slide

  30. ʮؔ਺͕গͳ͍ʯ

    View full-size slide

  31. ʮ*&Ͱಈ͔ͳ͍ʯ

    View full-size slide

  32. ʮ*&Ͱಈ͔ͳ͍ʯ

    View full-size slide

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

    View full-size slide

  34. Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    Е
    Е ЕЕЕЕ
    TypeScript?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. ͚Ͳ+BWB4DSJQUͰ͢

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. ϑΥʔϜͷόϦσʔγϣϯ
    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 full-size slide

  41. ϑΥʔϜͷόϦσʔγϣϯ
    ͋Δ͋Δʙʙʙ
    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 full-size slide

  42. ϑΥʔϜͷόϦσʔγϣϯ
    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 full-size slide

  43. ϑΥʔϜͷόϦσʔγϣϯ
    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 full-size slide

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

    View full-size slide

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

    View full-size slide

  46. ͱ͍͏ײ͡Ͱ͢

    View full-size slide

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

    View full-size slide

  48. 001࠷ߴοʂ

    View full-size slide

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

    View full-size slide

  50. IUUQHJUIVCDPNZBBLBJUPNPOBQU

    View full-size slide

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

    View full-size slide

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

    View full-size slide