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

OCamlでJavaScriptが幸せ

 OCamlでJavaScriptが幸せ

BuckleScript + Reason

さっちゃん

December 08, 2016
Tweet

More Decks by さっちゃん

Other Decks in Programming

Transcript

  1. OCamlでJavaScriptが幸せ

    View full-size slide

  2. .。oO(さっちゃんですよヾ(〃l _ l)ノ゙☆)

    View full-size slide

  3. Lisp知ってますか?
    (defun fact (n)
    (if (= n 0)
    1
    (* n (fact (- n 1))) ) )
    (format t "~A" (fact 42))

    View full-size slide

  4. Lisp
    = (型無し)λ + macro

    View full-size slide

  5. Lisp
    = JavaScript + macro

    View full-size slide

  6. λ ≒ 値としての函數 (を表はす記法)
    let callback = (err, data) => {
    if (err) { throw err; }
    console.log(data);
    };
    fs.readSync(ʻmomongaʼ, ʻutf8ʼ, callback);

    View full-size slide

  7. 型無しλには型が無い

    View full-size slide

  8. 型?
    型 = 値の分類

    View full-size slide

  9. 型?
    命題P(x) : xは美味しい
    「美味しいもの」は型Pを持つ。

    View full-size slide

  10. 型?
    型が在り、型の演算が出來れば、
    計算を検証出來る。

    View full-size slide

  11. 命題f : 美味しいものは今⽇の⼣⾷になる
    命題g : トマトは美味しい
    ⇒ 命題h : トマトは今⽇の⼣⾷になる

    View full-size slide

  12. 型P : 美味しいもの
    型Q : 今⽇の⼣⾷
    型R : トマト
    函數f : P→Q
    函數g : R→P
    ⇒ f・g = 函數h : R→Qが作れる

    View full-size slide

  13. Lisp + 型 → ML

    View full-size slide

  14. Lisp + 型 + OOP → OCaml

    View full-size slide

  15. OCaml
    正格な型の割りと純粋な函數型⾔語
    ⾦融系や原發その他で實績が在る

    View full-size slide

  16. JavaScript
    型は餘んまり無い
    第⼀級函數
    モジュールでプログラムを區
    切る
    ちょっとしたOOP
    正格 & 先⾏評價
    mutable (時々immutable)
    OCaml
    (実⾏時には)型は餘んまり無い
    第⼀級函數
    モジュールでプログラムを區切

    ちょっとしたOOP
    正格 & 先⾏評價
    immutable (時々mutable)

    View full-size slide

  17. JavaScript
    型は餘んまり無い
    第⼀級函數
    モジュールでプログラムを區
    切る
    ちょっとしたOOP
    正格 & 先⾏評價
    mutable (時々immutable)
    OCaml
    (実⾏時には)型は餘んまり無い
    第⼀級函數
    モジュールでプログラムを區切

    ちょっとしたOOP
    正格 & 先⾏評價
    immutable (時々mutable)

    View full-size slide

  18. JavaScript
    型は餘んまり無い
    第⼀級函數
    モジュールでプログラムを區
    切る
    ちょっとしたOOP
    正格 & 先⾏評價
    mutable (時々immutable)
    OCaml
    (実⾏時には)型は餘んまり無い
    第⼀級函數
    モジュールでプログラムを區切

    ちょっとしたOOP
    正格 & 先⾏評價
    immutable (時々mutable)
    /|
    ヘ /|/ | N /i/´ ゙ ̄ ̄``ヾ)_ ∧ /
    V .| , Nヾ ゙ ゙ヽ |\/ ∨l/
    レ‘ 7N゙、 ゙i _|`
    JS /N゙ゞ .! ヽ O
    だ 7ゞミミ、 ノ,彡イハヾ、 i Z C
    っ Zー-r-==、’リノ_ノ_,.ヾミ,.ィ,ニi ヽ a
    た / {i `゙‘;l={゙´石ゞ}=’´゙‘r_/ 〈 m
    ん |: `iー’/ ヾ、__,.ノ /i´ / l
    だ i、 ! ゙ニ-=、 u / ,ト, ∠_ は
    よ |` ヽ、I‘、_丿 /// ヽ /_
    !! | _,.ィヘヽ二 ィ'_/ / ゙i\|/Wlヘ
    |' ̄/ i ヽ_./´ ./ .| `\ ∨\
    wヘ /\|/ /ィ´ ゙̄i / ir=、 l'i"ヽ、
    ∨ ∠__,,..-イ i /\_,イ,=-、 i 、,.ゞ、 | ゙'"ヽ \
    ! .i-'´ ,i | ./`゙'i' /i_.!._,..ヽ<! ゙i、゙i. =゙! \
    ! | .,i゙::|/ .| ,/::/-i ゙i ゙i 三゙i ゙i | /⌒
    i/ .| ,i゙:::i' | ,/ ::/= .|三. ゙i/.| .| .| .ij:.
    .l〉 | ,i゙ :::| .!' ::::i゙'i ト. ゙i | _,.. V =,!
    ! | ,i゙ ::::| / ::::::| l= ヾ!.._ ヽ」 "´;i :.:i ./
    . | .| .,i ::::::| ,/::::::::::| ヾ:.:. ヾ::" ゙ //
    │ | ,i::::::::| ,/ .::::::::: | ゙i.:.:.:.:.:、:.:.:.:.:.:.:.:.:.:/,ィ'"´
    .| | i::::::::,イ::::::::::::::::| /ト、;:;:;:;:;:;:;:;:;:;::,ノi|Y

    View full-size slide

  19. bloomberg/BuckleScript

    View full-size slide

  20. *.ml
    → [BuckleScript] → *.js

    View full-size slide

  21. let f x y = x + y
    function f(x, y) {
    return x + y | 0;
    }

    View full-size slide

  22. class c =
    object (self)
    val p = 19
    method f v = v * p
    end
    let i = new c;;
    Js.log (i#f 3)
    function c_init($$class) {
    var ids =
    CamlinternalOO.new_methods_variables($$class,
    shared, ["p"]);
    var f = ids[0];
    var p = ids[1];
    CamlinternalOO.set_method($$class, f, function
    (self$neg1, v) {
    return Caml_int32.imul(v, self$neg1[p]);
    });
    return function (_, self) {
    var self$1 =
    CamlinternalOO.create_object_opt(self, $$class);
    self$1[p] = 19;
    return self$1;
    };
    }
    var c = CamlinternalOO.make_class(shared, c_init);
    var i = Curry._1(c[0], 0);
    console.log(Curry.js2(102, 1, i, 3));

    View full-size slide

  23. facebook/Reason

    View full-size slide

  24. Reason
    type component = {displayName: string};
    let module Sibling = {
    let createElement (children: list component) => {displayName: "t Sibling"};
    };
    let module Momonga = {
    let createElement a::a=? b::b=? children => {displayName: "t Momonga "};
    };
    let div argument1::argument1=? children => {
    displayName: "test”;
    };
    Js.log


    ;
    ;

    View full-size slide

  25. Reason
    ≒ OCaml + JSX

    View full-size slide

  26. *.re
    → [Reason] → AST
    → [BuckleScript] → *.js

    View full-size slide

  27. OCaml v.s. TypeScript
    TypeScript < OCaml
    ∴ OCaml

    View full-size slide

  28. OCaml v.s. Flow
    Flow < OCaml
    ∴ OCaml

    View full-size slide

  29. OCaml v.s. Haxe
    Haxe ≠ OCaml = JavaScript
    ∴ OCaml

    View full-size slide

  30. OCaml v.s. Haste
    Haste = Haskell ≠ JavaScript
    ∴ OCaml

    View full-size slide

  31. OCaml v.s. Elm
    Elm ≒ OCaml + FRP
    Elm ≠ JavaScript
    ∴ OCaml

    View full-size slide

  32. OCamlで幸せ

    View full-size slide