Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reason
Search
Yuki Kodama
July 30, 2017
Technology
2.4k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Reason
Reasonのやっていき資料です。とりあえずアップした。
Yuki Kodama
July 30, 2017
More Decks by Yuki Kodama
See All by Yuki Kodama
エージェント開発におけるObservability
kuy
0
58
マイクロフロントエンドの現状確認
kuy
0
530
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.7k
redux-sagaで副作用をコントロールする
kuy
4
1.7k
Rails+webpackの落ち穂拾い
kuy
0
1.9k
なぜReduxを使うのか
kuy
25
12k
意地でもReduxを使う
kuy
1
600
Other Decks in Technology
See All in Technology
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
53k
取引先から届く 「セキュリティチェックシート」の読み解き方
kamadamakoto
0
140
DatadogのBits Chatが開発組織にもたらしたもの / What Bits Chat Has Brought Us
sms_tech
0
100
20260807_第6回_関東kaggler会LT_claw系bot xangiと始める、"寂しくない" kaggle
sugupoko
0
200
関東Kaggler会発表資料
takoi
1
190
メルカリのグローバルアプリで挑んだ AlloyDB 運用と課題解決の実践記
hatappi
0
240
制約理論(ToC)入門 2026版
recruitengineers
PRO
6
2k
【CEDEC2026】次世代デジタルカードゲームのサーバー設計と運用 〜『Shadowverse: Worlds Beyond』の舞台裏~
cygames
PRO
1
970
ガバメント AI 源内を地方自治体は活用できるのか可能性と課題、期待について
takeda_h
1
360
サイバー捜査員研修(前半)
nomizone
1
1.9k
オートロックマンションなのに、各部屋は施錠なし!? 攻撃者が組織内ネットワークで大暴れする理由 / The Front Door Is Locked, but the Rooms Are Wide Open: Why Attackers Move Freely Inside Enterprise Networks
nttcom
1
1.6k
Bill One 開発エンジニア 紹介資料
sansan33
PRO
7
19k
Featured
See All Featured
AI: The stuff that nobody shows you
jnunemaker
PRO
9
890
Amusing Abliteration
ianozsvald
1
240
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.3k
Making Projects Easy
brettharned
120
6.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Between Models and Reality
mayunak
4
390
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.2k
Paper Plane (Part 1)
katiecoart
PRO
1
10k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.5k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
Transcript
Reason @kuy / Yuki Kodama 2017.07.30 @ Kyoto.js 13
自己紹介 @kuy (カイ) / Yuki Kodama 株式会社ジャパンベンチャーリサーチ(株式会社ユーザベースの完全子会社) entrepedia(アントレペディア)の開発・運用 AWS, Ruby
on Rails, JavaScript (React+Redux+Saga) がメイン • redux-sagaでルーティングを制する • redux-sagaで非同期処理と戦う • ・・・など Qiita の記事
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
Reasonの基本はとても素朴 • 普通のOCamlのコンパイラを使う • refmtの開発がメイン • お手軽さがない → ツールチェインの整備 参考:
https://github.com/chenglou/intro-to-reason-compilation ocamlc -pp "refmt --print binary" -o ./out -impl src/test.re プリプロセッサの使用 プリプロセッサのオプション 出力ファイル 入力ファイル 例: Reasonを実行ファイルにコンパイルする方法
Reasonの文法 基本:リテラル、演算子 型ごとに別々の演算子が定義されてい るのがポイント。JSはTSでもFlowtype でもこれが推論を妨げている。
Reasonの文法 Variants データを保持できるEnumっぽいもの。めちゃくちゃ便利! switchではEnum名だけでなく中身のデータでもパターンマッチして掘ることができる。
Reasonの文法 スコープ: ちょっとOCamlが見え隠れする瞬間 Reasonではこれがエラーにならない OCaml的にはこう展開される。let-in スコープ内 でさらに別の名前をバインドするだけ、と扱われる ので問題ない。
Reasonの文法 変数、オブジェクト、関数 OCaml のぎこちない感じが消えている 出典: https://reasonml.github.io/guide/ocaml
Reasonの文法 リスト Linked Listっぽさが消えてる 出典: https://reasonml.github.io/guide/ocaml
作ってみたもの #1(Demo) • ライフゲーム • reason-react + webpack + bs-loader
◦ ライブリロードとかwebpackまわりの設定は参考になるかも ◦ ただし、reason-jsを直接使うやり方は古いかも • StatefulのReactコンポーネントを作成 ソース: https://github.com/kuy/reason-of-life
作ってみたもの #2(Demo) • 砂山モデルの可視化 • obelisk.js の自作バインディング + webpack +
bs-loader ソース: https://github.com/kuy/nada.re
Reasonのうれしいところ • 長年培われたOCamlの強力な型推論の恩恵をそのまま受けられる ◦ JSにいろいろ足すより、OCamlに足す方が長い目で見るといいかも • 明示的に型を書くことはほとんどない • データ中心、関数型 ◦
Object Caml なのでほどよい感じ • 文法が自然(ES的な意味で) ◦ Object spread operator ◦ Destructuring assignment • 気がきいてる(次のスライド)
(最近知った)Reasonのうれしいところ ↑ これが、こう書ける ↓
Reasonのつらいところ • バインディングがまだまだ少ない ◦ BuckleTypesからreasonml-communityに組織名変更 ◦ https://github.com/reasonml-community • TypeScriptとかFlowtypeみたいに型を定義すればよい、というわけではな いことが多い
◦ Reason(OCaml)っぽいAPIを意識して書くのは楽しい • CoreもAsyncも使えない(RWO育ちの人のみ) ◦ Core: OCaml標準のもの、JS由来のもの ◦ Async: 通常の関数コールバックかJs.Promise
今後(+ Todo) • Reason: もっとES2015っぽい文法の導入 ◦ https://github.com/facebook/reason/pull/1299 • reason-react 0.2.x
での大幅変更 ◦ サンプル修正しつつキャッチアップする • Reductive はとても素直な実装で理想的な感じなので使ってみる ◦ ActionとしてVariantを使う • bs-obelisk を作りたい
おまけ: Reductive • 実装が非常に小さい ◦ redux + react-redux 相当で100行以下 •
Reduxよりもさらにシンプルに ◦ actionをVariantとして書くのでaction creatorは必須ではない ◦ OCamlの |> 演算子で関数合成できるので applyMiddlewares とかは 基本的に不要