BuckleScript 使ってみた

Kyoto.なんか #4 https://kyoto-nanka.connpass.com/event/95120/

Transcript

1. B u c k l e S c r i p t ࢖ ͬͯΈ ͨ
   2 0 1 8 - 0 8 - 1 8 K y o t o . ͳ Μ ͔ # 4
   i d : s u s i s u
   

   View Slide

2. i d : s u s i s u
   ‣ ͸ͯͳ ΞϓϦέʔγϣϯ
   ΤϯδχΞ
   - Mackerel
   ‣ JavaScript, Scala, Haskell
   ‣ झຯ OCaml ྺ໿ 1 ೥
   

   View Slide

3. B u c k l e S c r i p t
   https://bucklescript.github.io
   

   View Slide

4. B u c k l e S c r i p t
   

   View Slide

5. O C a m l
   ‣ ʮؔ਺ܕݴޠʯ
   - ܕ҆શ
   - ܕਪ࿦ (ຊདྷͷҙຯͰ)
   - record, variant, object, polymorphic variant, first class
   module, functor
   ‣ JavaScript ͱײ֮͸͍ۙ (ݸਓͷײ૝Ͱ͢)
   

   View Slide

6. B u c k l e S c r i p t Λ ࢖ ͏ Ϟ ν ϕ ʔ γ ϣ ϯ
   ‣ JavaScript ϥΠϒϥϦͷ࠶ઃܭͷػӡ
   - ͍ͭͰʹܕΛ༻͍ͨઃܭΛ͍ͨ͠
   ‣ લ͔Βؾʹͳ͍ͬͯͨͷͰࢼ͍ͨ͠
   - ର৅ͷϥΠϒϥϦͷґଘؔ܎͕গͳ͍ͷͰࢼ͠΍͍͢
   - TypeScript ͳͲ͸ʮ΍Ε͹Ͱ͖Δʯ
   ‣ OCaml ͷڧྗͳݴޠػೳʹ৐͔ͬΓ͍ͨ
   

   View Slide

7. ߏ ੒
   *.js
   *.ml *.bs.js
   *.ml *.bs.js
   *_test.ml *_test.bs.js
   bsb (bsc)
   jest
   rollup ͱ͔
   

   View Slide

8. ‣ BuckleScript (OCaml) Λॻ͍͍ͯͯؾ͍ͮͨྑ͍఺
   ‣ ྑ͘ͳ͍఺
   ‣ ҎԼͷ͜ͱ͸࿩͠·ͤΜ
   - ϑϩϯτΤϯυͰͲ͏࢖͏͔
   - OCaml ք۾ͷ࠷ۙͷಈ޲
   - OCaml ͷࡉʑͱͨ͠ػೳ
   - Reason
   

   View Slide

9. P ro s
   1 . ܕ ҆ શ
   

   View Slide

10. P ro s 1 . ܕ ҆ શ
    ‣ null / undefined ʹک͑Δඞཁ͸ͳ͍
    let x = Some 2
    let y = None
    let f = function
    | Some n -> n
    | None -> 0 (* default value *)
    var x = 2;
    var y = undefined;
    function f(param) {
    if (param !== undefined) {
    return param;
    } else {
    return 0;
    }
    }
    

    View Slide

11. P ro s
    2 . ܕ ਪ ࿦
    

    View Slide

12. P ro s 2 . ܕ ਪ ࿦
    ‣ ܕ஫ऍ͸ଟ͘ͷ৔߹͸ॻ͔ͳͯ͘ྑ͍
    ‣ ࠷΋Ұൠతͳܕ (ओཁܕ) ͕ਪ࿦͞ΕΔ
    (* s: ('a -> 'b -> 'c) -> ('a -> 'b) -> 'a -> 'c *)
    let s x y z = x z (y z)
    

    View Slide

13. P ro s
    3 . J S ͱ ͷ ࿈ ܞ ͕ ؆ ୯
    

    View Slide

14. P ro s 3 . J S ͱ ͷ ࿈ ܞ ͕ ؆ ୯
    ‣ JavaScript ͷόΠϯσΟϯά͸؆୯ʹͰ͖Δ
    external length: string -> int =
    "length" [@@bs.get]
    external substr: string -> int -> int
    -> string = "substr" [@@bs.send]
    let str = "ABCDE"
    let n = length str
    let sub = substr str 1 3
    var str = "ABCDE";
    var n = str.length;
    var sub = str.substr(1, 3);
    

    View Slide

15. P ro s
    4 . ៉ ྷ ͳ ग़ ྗ
    

    View Slide

16. P ro s 4 . ៉ ྷ ͳ ग़ ྗ
    ‣ ൺֱత៉ྷͳ JavaScript (ES5) ͕ग़ྗ͞ΕΔ
    let x = Some 2
    let y = None
    let f = function
    | Some n -> n
    | None -> 0
    var x = 2;
    var y = undefined;
    function f(param) {
    if (param !== undefined) {
    return param;
    } else {
    return 0;
    }
    }
    

    View Slide

17. P ro s 4 . ៉ ྷ ͳ ग़ ྗ
    ‣ ൺֱత៉ྷͳ JavaScript (ES5) ͕ग़ྗ͞ΕΔ
    let rec loop n =
    if n > 0 then begin
    Js.log n;
    loop (n - 1)
    end
    else ()
    function loop(_n) {
    while(true) {
    var n = _n;
    if (n > 0) {
    console.log(n);
    _n = n - 1 | 0;
    continue ;
    } else {
    return /* () */0;
    }
    };
    }
    

    View Slide

18. P ro s
    5 . ί ϯύΠϧ ͕ ߴ ଎
    

    View Slide

19. P ro s 5 . ί ϯύΠϧ ͕ ߴ ଎
    ‣ ΄΅ϑΝΠϧΛอଘͨ͠ॠؒʹίϯύΠϧ͕ऴΘΔ
    ‣ ެࣜυΩϡϝϯτʹΑΕ͹ 10,000 ϑΝΠϧͷڊେͳ
    ϓϩδΣΫτͰ 3 ෼ະຬ
    https://bucklescript.github.io/docs/en/build-
    performance
    

    View Slide

20. P ro s
    6 . ศ ར ͳ Ϗ ϧ υ γε ςϜ
    

    View Slide

21. P ro s 6 . ศ ར ͳ Ϗ ϧ υ γε ςϜ
    ‣ bsb ͱ͍͏ϏϧυγεςϜ͕෇ଐ
    ‣ watch ΋؆୯ʹͰ͖Δ
    ‣ ิ׬ͷͨΊͷϑΝΠϧͳͲ΋ࣗಈੜ੒ͯ͘͠ΕΔ
    

    View Slide

22. C o n s
    1 . ໋ ໊ ن ଇ ͕ ࠞ ࡏ
    

    View Slide

23. C o n s 1 . ໋ ໊ ن ଇ ͕ ࠞ ࡏ
    ‣ JavaScript ͸ camelCase ͕ओྲྀ
    ‣ OCaml ͸ snake_case ͕ओྲྀ
    ‣ BuckleScript ͷϥΠϒϥϦ͸ camelCase ͕ଟͦ͏?
    

    View Slide

24. C o n s
    2 . จ ࣈ ྻ
    

    View Slide

25. C o n s 2 . จ ࣈ ྻ
    ‣ ಺෦දݱͷҧ͍
    - JavaScript ͷจࣈྻ͸ UTF-16
    - OCaml ͷจࣈྻ͸όΠτྻ
    

    View Slide

26. C o n s 2 . จ ࣈ ྻ
    ‣ ೔ຊޠͱ͔Λॻ͘ͱΊΜͲ͍͘͞
    let wrong = "日本語"
    let ok = {js|日本語|js}
    (* j では変数の展開もできる *)
    let ok2 = {j|日本語|j}
    var wrong =
    "\xe6\x97\xa5\xe6\x9c\xac\xe8\xaa\x9e";
    var ok = "日本語";
    var ok2 = "日本語";
    

    View Slide

27. C o n s 2 . จ ࣈ ྻ
    ‣ JS ༝དྷͷจࣈྻΛ OCaml ͷؔ਺ʹ౉͢ͱ...
    ‣ ଞʹ΋഑ྻ͕Մม௕ (JS) ͔ݻఆ௕ (OCaml) ͔ͳͲ΋
    ͋Δ
    let str = {js|日本語|js}
    let char = String.get str 0
    let () = Js.log char (* 26085 ... char として不正な値 *)
    

    View Slide

28. · ͱ Ί
    

    View Slide

29. · ͱ Ί
    ‣ ࡉ͔͍఺Λআ͚͹ྑ͍
    - ܕϕʔεͷઃܭ͕Ͱ͖Δͷ͸େ͖͍
    - TypeScript ͱൺ΂Δͱ variant ͕ؾܰʹ࢖͑Δ
    - ίϯύΠϧ଎౓ʹײಈ͢Δ
    - JS ͱͷ࿈ܞ΋OK
    ‣ ϥΠϒϥϦॻ͖׵͑͸Ӷҙਐߦத...
    

    View Slide