$30 off During Our Annual Pro Sale. View Details »

OCaml -> Melange -> fun

daigo3
February 02, 2024

OCaml -> Melange -> fun

daigo3

February 02, 2024
Tweet

More Decks by daigo3

Other Decks in Programming

Transcript

  1. Reason lets you write simple, fast and quality type safe

    code while leveraging both the JavaScript & OCaml ecosystems. https://reasonml.github.io/
  2. 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; };
  3. 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; };
  4. // 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 * /
  5. 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", ) );
  6. / / 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 * /
  7. // (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); };
  8. API - Stdlibʢඪ४ϥΠϒϥϥϦʣ: OCaml ͱ΄΅ಉ͡΋ͷ - Belt : σʔλߏ଄ͱίϨΫγϣϯܕ -

    Js : ϒϥ΢βͱ Node JavaScript API ΁ͷόΠϯσΟϯά DOM / JSͷAPI + Ramda/LodashͷΑ͏ͳϥΠϒϥϦ͕ ಉࠝ͞Ε͍ͯΔͱࢥ͍ͬͯͩ͘͞
  9. 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] */
  10. 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] */
  11. if-else (expression) let condition = true; // if/else ͸「ࣜ」 //

    then, else Ͱಉ͡ܕΛฦ͢ඞཁ͕͋Δʢthen͚۟ͩ͸Ͱ͖ͳ͍ʣ let result = if (condition)ɹ{ “true"; } else { “false” }; result /* true */
  12. Pattern matching factorial(3) /* 6 */ let rec factorial =

    n => switch (n) { | 1 = > 1 | _ = > n * factorial(n - 1); };
  13. 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) };
  14. option let rec lookup = (x, lst) => switch (lst)

    { | [] => None | [(k, v), ... t] => if (x == k) { Some(v); } else { lookup(x, t); } };
  15. Result let safe_divide = (x, y) => y == 0

    ? Error("Division by zero") : Ok(x / y);
  16. // 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!" }); } . . . 👈
  17. Melange = New OCaml to JS ίϯύΠϥ Melange BuckleScript ΛϑΥʔΫͯ͠

    2022 ೥ʹ ొ৔͠ ͔͜͜Β OCaml ͷΤίγεςϜʹ໭Γ࢝ΊΔ
  18. ͜Ε͔Β࢝ΊΔͨΊͷϦιʔε 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