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

Reason

 Reason

Reasonのやっていき資料です。とりあえずアップした。

Yuki Kodama

July 30, 2017
Tweet

More Decks by Yuki Kodama

Other Decks in Technology

Transcript

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

    View Slide

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

    View Slide

  3. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide