Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

P ro s 1 . ܕ ҆ શ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

P ro s 2 . ܕ ਪ ࿦

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

P ro s 4 . ៉ ྷ ͳ ग़ ྗ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

C o n s 2 . จ ࣈ ྻ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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 = "日本語";

Slide 27

Slide 27 text

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 として不正な値 *)

Slide 28

Slide 28 text

· ͱ Ί

Slide 29

Slide 29 text

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