Reason
by
Yuki Kodama
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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 とかは 基本的に不要