Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Elmで関数型を意識する / Think functionally with Elm
mather
June 26, 2018
Programming
0
250
Elmで関数型を意識する / Think functionally with Elm
ElmとVue.jsを比較しながら関数型言語によるエクササイズをおすすめする。
mather
June 26, 2018
Tweet
Share
More Decks by mather
See All by mather
Webフレームワークの功罪 / Advantages and considerable point of Web Frameworks
mather
0
81
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
190
LeacTion!について / About LeacTion!
mather
0
220
Rubyでワンライナー / One-liner on Ruby
mather
0
180
認知と思考パターン / Cognition and Pattern
mather
1
220
「モデル」を考える / Think about "model"
mather
0
320
Shall we make a speech?
mather
0
150
Elmでライフゲーム / LifeGame in Elm
mather
1
760
趣味と投資と学びと
mather
0
80
Other Decks in Programming
See All in Programming
夕食断食にTRY!/for-lt-12th
pachikuriii
0
240
OSS貢献を気軽にしたい Let's Go Talk #1
yuyaabo
2
240
プロダクトの成長とSREと
takuyatezuka
0
120
Regular expressions basics/正規表現の基本
kishikawakatsumi
6
260
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
ExplainableAIの概要とAmazon SageMaker Clarifyでの実装例
hacarus
0
100
Isar勉強会
hoddy3190
0
510
Pluggable Storage in PostgreSQL
sira
1
190
FargateとAthenaで作る、機械学習システム
nayuts
0
190
サーバーレスパターンから学ぶデータ分析基盤構築 / devio2022
kasacchiful
0
490
MLOps勉強会_リアルタイムトラフィックのサーバレスMLOps基盤_20220810
strsaito
1
410
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
1
400
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
Become a Pro
speakerdeck
PRO
3
910
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.9k
The Pragmatic Product Professional
lauravandoore
19
3.1k
Robots, Beer and Maslow
schacon
152
7.1k
Why Our Code Smells
bkeepers
PRO
324
55k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
940
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
39
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Bash Introduction
62gerente
598
210k
Transcript
ElmͰ ؔܕΛҙࣝ͢Δ 2018-06-26 ܂ാӳࢿ
ࣗݾհ • ܂ാӳࢿ(͘Θ͍͚ͨ͑͢) • גࣜձࣾΞϥλφ • Node.jsNuxt.jsͰπʔϧ࡞ͬͨΓ • ͖ͳݴޠScala, Haskell
• झຯɿμΠϏϯάɺυϩʔϯɺֶ
None
Elmͬͯͳʹʁ
http://elm-lang.org/
Elm • ؔܕϑϩϯτΤϯυݴޠ • ੩తܕ͚ • Elm Architecture • ֎෦JSͱͷΓऔΓՄೳ
example
ೖྗͱΧϯτΞοϓ • Elm൛ • https://ellie-app.com/BMTPN4b5kfa1 • Vue.js൛ʢόά͋Γʣ • https://codepen.io/anon/pen/PaBOWm
શମߏࣅ͍ͯΔ WJFX NPEFM VQEBUF )5.-5FNQMBUF EBUB NFUIPET Elm Vue.js ΞϓϦέʔγϣϯͷߏ্͍͍ͩͨಉ͡ʹͳΔ
ܕΛҙࣝ͢Δ type alias Model = { count : Int ,
incr : Int } initialModel : Model initialModel = { count = 0 , incr = 0 } data: { count: 0, incr: 0 } ҟͳΔܕͷΛೖྗͰ͖ͳ͍ɺଐੑΛՃͰ͖ͳ͍
ܕΛҙࣝ͢Δ — アクションを受けて — モデルを次の値に更新する関数 update : Msg -> Model
-> Model — 起こりうるアクションの型 type Msg = Increment | UpdateIncr String methods: { increment() { this.value += this.incr } } ΞΫγϣϯͷͱݱࡏͷϞσϧͷ͔Β ࣍ͷϞσϧͷঢ়ଶ͕Ұҙʹܾ·Δ
ܕΛҙࣝ͢Δ view : Model -> Html Msg view model =
div [] [ input [ onInput UpdateIncr ] [] , button [ onClick Increment ] [ text "増加" ] , div [] [text <| toString model.count] ] ModelҎ֎ͷঢ়ଶมແ͍
ࢀরಁաੑΛҙࣝ͢Δ • ೖྗͱग़ྗͷܕͰࢀরಁաੑΛҡ࣋ • ݱࡏ࣌ࠁऔಘͳͲ෭࡞༻ͷ͋Δؔ͋Δ • ಛผѻ͍͕ඞཁ • ίϯύΠϧ͕௨Εܕͷҧ͍ʹΑΔόά͕ແ ͍͜ͱ͕อূͰ͖Δ
Elmͷ͍ॴ • ܕΛ͖ͬͪΓҙࣝͯ͠όάͷͳ͍ΞϓϦέʔγϣ ϯΛ࡞Δͱ͖ • ୈҰڃؔͷѻ͍Λͬͱચ࿅͍ͤͨ͞ͱ͖ • JavaScriptͰͬͱ៉ྷͳίʔυΛॻͨ͘Ί • ϥϑͳͷ͍͍͚Ͳɺͨ·ʹυMʹͳΓ͍ͨͱ͖
ElmΦεεϝͰ͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠