OCaml -> Melange -> fun

Transcript

1. | @sdaigo Reason - > Melange - > fun Netadashi Meetup #12 2024.2.2
2. ઃᒜ େޛ Frontend dev @sdaigo
4. Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems. https://reasonml.github.io/
5. An industrial-strength functional programming language with an emphasis on expressiveness and safety https://ocaml.org/
6. JS-like ʹॻ͚Δ OCaml ͷߏจ
7. let rec f i zzbuzz n = match (n mod 3, n mod 5) with | 0, 0 -> "FizzBuzz" | 0, _ -> "Fizz" | _, 0 -> "Buzz" | _, _ -> string_of_int n let _ = for i = 1 to 100 do f i zzbuzz i |. print_endline done let rec f i zzbuzz = n => switch (n mod 3, n mod 5) { | (0, 0) => "FizzBuzz" | (0, _) => "Fizz" | (_, 0) => "Buzz" | _ => string_of_int(n) }; let _ = for (i in 1 to 100) { f i zzbuzz(i) -> print_endline; };
8. JavaScript ʹίϯύΠϧͰ͖Δ
9. let rec f i zzbuzz = n => switch (n mod 3, n mod 5) { | (0, 0) => "FizzBuzz" | (0, _) => "Fizz" | (_, 0) => "Buzz" | _ => string_of_int(n) }; let _ = for (i in 1 to 100) { f i zzbuzz(i) -> print_endline; };
10. // Generated by Melange function f i zzbuzz(n) { var match = n % 3; var match$1 = n % 5; if (match != = 0) { if (match$1 != = 0) { return String(n); } else { return "Buzz"; } } else if (match$1 != = 0) { return "Fizz"; } else { return "FizzBuzz"; } } for(var i = 1; i < = 100; ++ i){ console.log(f i zzbuzz(i)); } export { f i zzbuzz , } /* Not a pure module * /
11. ݴޠϨϕϧͰ JSX Λαϙʔτ
12. module Greeting = { [@react.component] let make = () => { <button> {React.string("Hello!")} </ button>; }; }; ReactDOM.querySelector("#preview") -> ( fun | Some(root) => ReactDOM.render(<Greeting /> , root) | None => Js.Console.error( "Failed to start React: couldn't f i nd the #preview element", ) );
13. / / Generated by Melange import * as ReactDom from "react - dom"; import * as JsxRuntime from "react/jsx - runtime"; function _none_$Greeting(Props) { return JsxRuntime.jsx("button", { children: "Hello!" }); } var Greeting = { make: _none_$Greeting }; var param = document.querySelector("#preview"); if (param == null) { console.error("Failed to start React: couldn't f i nd the #preview element"); } else { ReactDom.render(JsxRuntime.jsx(_none_$Greeting, {}), param); } export { Greeting , } / * param Not a pure module * /
14. ׬શͳܕਪ࿦Λ൐͏੩తܕ෇͚
15. // (array(option('a)), int) = > bool let isNotEmptyAt = (board, i) => board[i] - > Belt.Option.isSome; // (array('a), int, 'a) => array('a) let update = (board, pos, turn) => board -> Belt.Array.mapWithIndex((i, x) => i == pos ? turn : x); // (array('a), 'a) => bool let isWon = (board, turn) = > { won -> Belt.Array.map(row = > { let (c1, c2, c3) = row; [ | c1, c2, c3 |]-> Belt.Array.every(c = > board[c] == turn); }) -> Belt.Array.some(Fun.id); };
16. React to the Future ReasonConf US 2019 https://youtu.be/5fG_lyNuEAw
17. https://en.wikipedia.org/wiki/Reason_(programming_language)
18. https://en.wikipedia.org/wiki/Reason_(programming_language) https://en.wikipedia.org/wiki/React_(software)
19. Overview
20. API - Stdlibʢඪ४ϥΠϒϥϥϦʣ: OCaml ͱ΄΅ಉ͡΋ͷ - Belt : σʔλߏ଄ͱίϨΫγϣϯܕ - Js : ϒϥ΢βͱ Node JavaScript API ΁ͷόΠϯσΟϯά DOM / JSͷAPI + Ramda/LodashͷΑ͏ͳϥΠϒϥϦ͕ ಉࠝ͞Ε͍ͯΔͱࢥ͍ͬͯͩ͘͞
21. pipe pipe-first ( -> ) pipe-last ( |> ) let square = x => x * x; let sum = List.fold_left((+), 0); // succ(square(3)) 3 |> square |> succ; /* 10 */ [1, 2, 3] |> List.map(square) |> sum; /* [3, 4, 5] */ let square = x => x * x; let sum = List.fold_left((+), 0); // succ(square(3)) 3->square->succ; /* 10 */ [1, 2, 3] -> Belt.List.map(square) -> sum; /* [3, 4, 5] */
22. Functions are curried *default* // int -> int -> int let add = (x, y) => x + y; let plus1 = add(1); let plus2 = add(2); plus1(10); /* 11 */ plus2(10); /* 12 */ [1, 2, 3] ->Belt.List.map(plus2) ->Js.log; /* [3, 4, 5] */
23. if-else (expression) let condition = true; // if/else ͸「ࣜ」 // then, else Ͱಉ͡ܕΛฦ͢ඞཁ͕͋Δʢthen͚۟ͩ͸Ͱ͖ͳ͍ʣ let result = if (condition)ɹ{ “true"; } else { “false” }; result /* true */
24. Pattern matching factorial(3) /* 6 */ let rec factorial = n => switch (n) { | 1 = > 1 | _ = > n * factorial(n - 1); };
25. variants type color = | Red | Green | Blue | RGB(int, int, int); let components = c => switch (c) { | Red => (255, 0, 0) | Green => (0, 255, 0) | Blue => (0, 0, 255) | RGB(r, g, b) => (r, g, b) };
26. option let rec lookup = (x, lst) => switch (lst) { | [] => None | [(k, v), ... t] => if (x == k) { Some(v); } else { lookup(x, t); } };
27. Result let safe_divide = (x, y) => y == 0 ? Error("Division by zero") : Ok(x / y);
28. 🚫
29. શମతʹݹ͍ʁ
30. Reason > JS ͸ BuckleScript Ͱ τϥϯεύΠϧ͞Ε͍ͯͨ
31. 2020೥ɺBuckleScript ͕ ReScript ΁Ϧϒϥϯυ https://rescript-lang.org/blog/bucklescript-is-rebranding
32. Reason ͱͷޙํޓ׵ੑΛҡ࣋ͭͭ͠΋ɺΑΓJavaScript ͷ ΤίγεςϜͱͷ౷߹ΛਐΊɺಠࣗͷߏจΛ࣋ͭ ϓϥοτϑΥʔϜʹͳͬͨ 2020೥ɺBuckleScript ͕ ReScript ΁Ϧϒϥϯυ
33. Reasonࣗମ͸ OCaml ͷߏจͰɺͦͷ։ൃࣗମ͕ετοϓ͢ΔΘ͚Ͱ͸ͳ͘ JavaScript ΁ͷτϥϯεύΠϥ͕ແ͘ͳͬͯ͠·ͬͨܗ͕ͩ ࠞཚ͕ى͜ΓɺঃʑʹԼՐʹͳ͍ͬͯ͘… https://github.com/reasonml/reason/issues/2634#issuecomment-745218374 2020೥ɺBuckleScript ͕ ReScript ΁Ϧϒϥϯυ
34. 🤔 🤔 🤔
35. // Generated by Melange import * as ReactDom from "react - dom"; import * as JsxRuntime from "react/jsx - runtime"; function _none_$Greeting(Props) { return JsxRuntime.jsx("button", { children: "Hello!" }); } . . . 👈
36. / / Generated by Melange ™
37. Melange = New OCaml to JS ίϯύΠϥ Melange BuckleScript ΛϑΥʔΫͯ͠ 2022 ೥ʹ ొ৔͠ ͔͜͜Β OCaml ͷΤίγεςϜʹ໭Γ࢝ΊΔ
38. Ahrefs ͱ͍͏اۀ͕ओಋͰ։ൃΛਐΊ͍ͯͯ ͢ͰʹϑϧελοΫͰ OCaml Λ࠾༻͍ͯ͠Δ https://tech.ahrefs.com/ahrefs-is-now-built-with-melange-b14f5ec56df4
39. React 18Ҏ߱΁ͷ௥ै΍ɺRSC΁ͷରԠ͸͜Ε͔Β https://github.com/ml-in-barcelona/server-reason-react https://github.com/ml-in-barcelona/fullstack-reason-react-demo https://github.com/andreypopp/mlx Experimentalͳ࣮૷ Server Reason React Full stack ReasonReact mlx - OCaml syntax dialect which adds to JSX expression Node.js x 10 / Bun x 6
40. ͜Ε͔Β࢝ΊΔͨΊͷϦιʔε https://melange.re/ https://chat.openai.com/g/g-CMdXZ3UYm-melange-mentor https://reasonml.github.io/ Melange Melange Mentor Reason https://ocaml.org/ OCaml https://reasonml.github.io/reason-react/ ReasonReact https://react-book.melange.re/intro/ Melange for React developers https://github.com/dmmulroy/create-melange-app create - melange - app https://dune.build/ Dune
41. https://melange-doc-ja.vercel.app/ ೔ຊޠυΩϡϝϯταΠτΛ࡞Γ·ͨ͠ʂ