Slide 1

Slide 1 text

Reason @kuy / Yuki Kodama 2017.07.30 @ Kyoto.js 13

Slide 2

Slide 2 text

自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ(株式会社ユーザベースの完全子会社) entrepedia(アントレペディア)の開発・運用 AWS, Ruby on Rails, JavaScript (React+Redux+Saga) がメイン ● redux-sagaでルーティングを制する ● redux-sagaで非同期処理と戦う ● ・・・など Qiita の記事

Slide 3

Slide 3 text

Reasonってのは・・・ ● 文法 + ツールチェイン ○ Reason → OCaml のプリプロセッサ ■ OCaml のとっつきにくい文法を JavaScript で中和した文法 ■ Camlp4の仕組みを使ってOCaml ASTをいじくる ■ JSXもパースしてくれる → React 使える ○ OCaml → JavaScript or Native のためのツール群 ■ JSターゲットは BuckleScript のコンパイラを利用 ● Ocsigen の Js_of_ocaml とのつながりはない ■ Nativeターゲットは普通に ocamlbuild + OPAM ● BuckleScriptでNativeビルドするやつは進行中みたい ● https://github.com/bsansouci/bsb-native

Slide 4

Slide 4 text

Reasonの基本はとても素朴 ● 普通のOCamlのコンパイラを使う ● refmtの開発がメイン ● お手軽さがない → ツールチェインの整備 参考: https://github.com/chenglou/intro-to-reason-compilation ocamlc -pp "refmt --print binary" -o ./out -impl src/test.re プリプロセッサの使用 プリプロセッサのオプション 出力ファイル 入力ファイル 例: Reasonを実行ファイルにコンパイルする方法

Slide 5

Slide 5 text

Reasonの文法 基本:リテラル、演算子 型ごとに別々の演算子が定義されてい るのがポイント。JSはTSでもFlowtype でもこれが推論を妨げている。

Slide 6

Slide 6 text

Reasonの文法 Variants データを保持できるEnumっぽいもの。めちゃくちゃ便利! switchではEnum名だけでなく中身のデータでもパターンマッチして掘ることができる。

Slide 7

Slide 7 text

Reasonの文法 スコープ: ちょっとOCamlが見え隠れする瞬間 Reasonではこれがエラーにならない OCaml的にはこう展開される。let-in スコープ内 でさらに別の名前をバインドするだけ、と扱われる ので問題ない。

Slide 8

Slide 8 text

Reasonの文法 変数、オブジェクト、関数 OCaml のぎこちない感じが消えている 出典: https://reasonml.github.io/guide/ocaml

Slide 9

Slide 9 text

Reasonの文法 リスト Linked Listっぽさが消えてる 出典: https://reasonml.github.io/guide/ocaml

Slide 10

Slide 10 text

作ってみたもの #1(Demo) ● ライフゲーム ● reason-react + webpack + bs-loader ○ ライブリロードとかwebpackまわりの設定は参考になるかも ○ ただし、reason-jsを直接使うやり方は古いかも ● StatefulのReactコンポーネントを作成 ソース: https://github.com/kuy/reason-of-life

Slide 11

Slide 11 text

作ってみたもの #2(Demo) ● 砂山モデルの可視化 ● obelisk.js の自作バインディング + webpack + bs-loader ソース: https://github.com/kuy/nada.re

Slide 12

Slide 12 text

Reasonのうれしいところ ● 長年培われたOCamlの強力な型推論の恩恵をそのまま受けられる ○ JSにいろいろ足すより、OCamlに足す方が長い目で見るといいかも ● 明示的に型を書くことはほとんどない ● データ中心、関数型 ○ Object Caml なのでほどよい感じ ● 文法が自然(ES的な意味で) ○ Object spread operator ○ Destructuring assignment ● 気がきいてる(次のスライド)

Slide 13

Slide 13 text

(最近知った)Reasonのうれしいところ ↑ これが、こう書ける ↓

Slide 14

Slide 14 text

Reasonのつらいところ ● バインディングがまだまだ少ない ○ BuckleTypesからreasonml-communityに組織名変更 ○ https://github.com/reasonml-community ● TypeScriptとかFlowtypeみたいに型を定義すればよい、というわけではな いことが多い ○ Reason(OCaml)っぽいAPIを意識して書くのは楽しい ● CoreもAsyncも使えない(RWO育ちの人のみ) ○ Core: OCaml標準のもの、JS由来のもの ○ Async: 通常の関数コールバックかJs.Promise

Slide 15

Slide 15 text

今後(+ Todo) ● Reason: もっとES2015っぽい文法の導入 ○ https://github.com/facebook/reason/pull/1299 ● reason-react 0.2.x での大幅変更 ○ サンプル修正しつつキャッチアップする ● Reductive はとても素直な実装で理想的な感じなので使ってみる ○ ActionとしてVariantを使う ● bs-obelisk を作りたい

Slide 16

Slide 16 text

おまけ: Reductive ● 実装が非常に小さい ○ redux + react-redux 相当で100行以下 ● Reduxよりもさらにシンプルに ○ actionをVariantとして書くのでaction creatorは必須ではない ○ OCamlの |> 演算子で関数合成できるので applyMiddlewares とかは 基本的に不要