Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Reason
Search
Yuki Kodama
July 30, 2017
Technology
2.5k
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
73
マイクロフロントエンドの現状確認
kuy
0
550
redux-towerでルーティングを制する
kuy
4
2.8k
Should I use redux-saga or not?
kuy
2
4.8k
redux-sagaで副作用をコントロールする
kuy
4
1.7k
Rails+webpackの落ち穂拾い
kuy
0
1.9k
なぜReduxを使うのか
kuy
25
12k
意地でもReduxを使う
kuy
1
620
Other Decks in Technology
See All in Technology
AWS Continuum for Penetration Testing に Deep Dive してみる
asanoharuki
2
1.4k
シンプルな設定ファイルで実現する AWS IAM Identity Center の ユーザー管理Terraformフレームワークを公開しました / Simplifying AWS IAM Identity Center User Management: An Open-Source Terraform Framework
yamaguchitk333
1
330
アカウント統制の健康診断
kenichinakamura
1
210
AIをリアル世界に解き放つ 〜M5Stack×AIであなたのアイディアを手の平に〜
hamadakoji
1
580
顧客価値を追いかけたら、プライシングにたどり着いた
sansantech
PRO
2
1.1k
200人の配信コメント、 全部Jevが仕分けます 〜 マサカリガードを作ってみた 〜
katayamatg
1
350
AI駆動開発におけるハーネスエンジニアリングの勘所
tsukuboshi
1
820
"計画的無茶振り"を通してAIネイティブ世代の新人を育てる
subroh0508
1
120
あなたのDartコードは丸見えかもしれない ~reFlutterで暴くFlutterアプリの中身と多層防御~
zozotech
PRO
0
460
これだけは抑えておきたい!後悔しない re:Invent の過ごし方 / AWS re:Invent 2026 prestudy
kinunori
2
490
Microsoft のサポート ライフサイクルを理解する
murachiakira
PRO
0
220
正解のない研修に放り出されて / Being thrown into a training program with no right answers
ohnoeight
1
160
Featured
See All Featured
For a Future-Friendly Web
brad_frost
184
10k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.9k
Claude Code のすすめ
schroneko
67
230k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
203
77k
Reality Check: Gamification 10 Years Later
codingconduct
0
2.4k
HDC tutorial
michielstock
2
980
The untapped power of vector embeddings
frankvandijk
2
2k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
1k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
1
640
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
minecr
1
450
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 とかは 基本的に不要