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
Elm for React.js Users
Search
Yosuke Torii
February 23, 2016
Programming
5
2.6k
Elm for React.js Users
React.js Meetup #3 での発表資料。Elmの簡単な紹介です。
Yosuke Torii
February 23, 2016
Tweet
Share
More Decks by Yosuke Torii
See All by Yosuke Torii
TEA++
jinjor
2
420
Elm でユーザーストーリーマッピングのツールを作ってみた
jinjor
0
1k
Elm 開発サンプル
jinjor
1
1.1k
Friendly Elm (怖くないElm)
jinjor
3
1.7k
Elmのさわれる副作用
jinjor
2
1.1k
Let's learn Elm
jinjor
3
660
Other Decks in Programming
See All in Programming
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
180
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
6
700
Azure AI Foundryのご紹介
qt_luigi
1
210
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
9
2.4k
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
870
DMMオンラインサロンアプリのSwift化
hayatan
0
190
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
370
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
テストコード書いてみませんか?
onopon
2
340
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
140
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
230
52k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
Measuring & Analyzing Core Web Vitals
bluesmoon
5
210
Gamification - CAS2011
davidbonilla
80
5.1k
Become a Pro
speakerdeck
PRO
26
5.1k
Designing Experiences People Love
moore
139
23k
Why Our Code Smells
bkeepers
PRO
335
57k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Six Lessons from altMBA
skipperchong
27
3.6k
Transcript
React.js ユーザのための Elm 2016/02/23 Yosuke Torii
・鳥居 陽介 ・株式会社ワークスアプリケーションズ勤務 ・ CodeZine に 5 記事 (React.js, HTTP/2, Elm)
・ジンジャー研究室 誰? @jinjor
Elm の紹介
main = span [class "message"] [text "Hello, World!"] ・関数型言語 ・静的型付き言語
・ JavaScript にコンパイルされる ・ 2012 年誕生 Elm is 何?
React.js Elm なぜ React.js Meetup で Elm ? ?
React.js Flux Elm と一緒に使われる アーキテクチャの なぜ React.js Meetup で Elm
? ?
React.js Flux Elm Redux と一緒に使われる アーキテクチャの で有名な ライブラリの なぜ React.js
Meetup で Elm ? ?
React.js Flux Elm Redux と一緒に使われる アーキテクチャの で有名な ライブラリの が参考にしたと 言われる
なぜ React.js Meetup で Elm ? ?
React.js/Flux を追っている人なら Elm を楽しめるはず!
フロントエンド界隈で人気急上昇 2015 年内に 3 倍の伸び http://elm-lang.org/blog/new-adventures-for-elm
最近の Elm Virtual DOM の導入 The Elm Architecture
Virtual DOM の導入
VDOM の生成コストを抑えたい Old VDOM New VDOM diff
VDOM の生成コストを抑えたい Old Model Old VDOM New Model New VDOM
diff diff ・ Model 同士を比較したい ・ shouldComponentUpdate() ・ Immutable.js
VDOM の生成コストを抑えたい Old Model Old VDOM New Model New VDOM
diff diff ・ Model 同士を比較したい ・ shouldComponentUpdate() ・ Immutable.js Elm では全てのデータが Immutable
Elm の描画は速い ※2014 年当時
The Elm Architecture
Elm は FRP 言語 ・ FRP = Functional Reactive Programming
(関数型リアクティブプログラミング) ・ JS ライブラリでは RxJS, Bacon.js, Kefier など
Elm は FRP 言語 Time a 2 1 Signal: 時間とともに変化する値
Elm は FRP 言語 Time a 2 1 Time b
4 2 map (*2) Signal: 時間とともに変化する値
例:クリック回数を出力する Time Time mouse clicks count 2 1 Time HTML
<div> 1 </div> <div> 2 </div> map foldp
Elm アプリケーションの構造 mouse position HTML mouse clicks keydown Enter ?
アクションの Signal を 最終的に HTML の Signal に変換するのが目的
設計方針がないとカオスに mouse position mouse clicks keydown Enter HTML ? ?
? ? ? ? ? ? ?
The Elm Architecture ・ Elm 公式で推しているアーキテクチャ ・ Redux にインスピレーションを与えた ・
GitHub のチュートリアルが人気(★ 1774 )
The Elm Architecture ・ Elm 公式で推しているアーキテクチャ ・ Redux にインスピレーションを与えた ・
GitHub のチュートリアルが人気(★ 1774 ) 去年の 11 月
Elm Architecture に従うと Action View Model
Elm Architecture に従うと Action View Model しかも、 開発者は Signal をほとんど意識しなくていい
コードが見たい
カウンターを作る
カウンターを作る import StartApp.Simple exposing (start) main = start { model
= model, update = update, view = view } 初期状態 状態を更新 する関数 HTML 描画 する関数
model = 0 type Action = Increment | Decrement update
action model = case action of Increment -> model + 1 Decrement -> model - 1 view address model = div [ ] [ button [ onClick address Decrement ] [ text "-" ] , span [ ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ]
model = 0 type Action = Increment | Decrement update
action model = case action of Increment -> model + 1 Decrement -> model - 1 view address model = div [ ] [ button [ onClick address Decrement ] [ text "-" ] , span [ ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] 初期状態
model = 0 type Action = Increment | Decrement update
action model = case action of Increment -> model + 1 Decrement -> model - 1 view address model = div [ ] [ button [ onClick address Decrement ] [ text "-" ] , span [ ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] 初期状態 アクションの種類
model = 0 type Action = Increment | Decrement update
action model = case action of Increment -> model + 1 Decrement -> model - 1 view address model = div [ ] [ button [ onClick address Decrement ] [ text "-" ] , span [ ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] 初期状態 アクションの種類 アクションの種類に 応じて状態を更新
model = 0 type Action = Increment | Decrement update
action model = case action of Increment -> model + 1 Decrement -> model - 1 view address model = div [ ] [ button [ onClick address Decrement ] [ text "-" ] , span [ ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] 初期状態 アクションの種類 アクションの種類に 応じて状態を更新 状態に対応する HTML を生成
model = 0 type Action = Increment | Decrement update
action model = case action of Increment -> model + 1 Decrement -> model - 1 view address model = div [ ] [ button [ onClick address Decrement ] [ text "-" ] , span [ ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ] 初期状態 アクションの種類 アクションの種類に 応じて状態を更新 状態に対応する HTML を生成
Model Model 複雑なケースは Tutorial で ・コンポーネントの階層化 ・非同期通信するコンポーネント Action View Model
Action View Model Effect Action Action View View
改めて Elm の良さ
膨大なスタックを必要としない React TypeScript Fluxible FluxUtils virtual-dom Immutable.js Redux Flow Browserify
Gulp react-tools Babel ES6 JSX webpack (start-app) elm-html (Gulp) JS Elm
静的型付け最高 ・基本的にランタイムエラーが起きない ・超絶リファクタリングしてもバグらない ・アーキテクチャをきちんと守れる
本番で使えるの? ・覚悟の問題 ・まずは社内で 社内ビデオ通話アプリ
Elm をはじめるには ・ Elm 公式 http://elm-lang.org/ ・ The Elm Architecture
https://github.com/evancz/elm-architecture-tutorial ・関数型リアクティブプログラミング言語 Elm に学ぶ フロントエンド開発の 新しい形 ( CodeZine ) 【前編】 http://codezine.jp/article/detail/8873 【後編】 http://codezine.jp/article/detail/8986 ・ Elm Advent Calendar 2014 http://qiita.com/advent-calendar/2014/elm ・ Elm Advent Calendar 2015 http://qiita.com/advent-calendar/2015/elm
ありがとうございました