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で関数型を意識する / Think functionally with Elm
Search
mather
June 26, 2018
Programming
0
380
Elmで関数型を意識する / Think functionally with Elm
ElmとVue.jsを比較しながら関数型言語によるエクササイズをおすすめする。
mather
June 26, 2018
Tweet
Share
More Decks by mather
See All by mather
SolidjsでLeacTion!を作り直しました / Rebuilt LeacTion! in Solid.js
mather
0
270
Webフレームワークの功罪 / Advantages and considerable point of Web Frameworks
mather
0
350
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
420
LeacTion!について / About LeacTion!
mather
0
310
Rubyでワンライナー / One-liner on Ruby
mather
0
410
認知と思考パターン / Cognition and Pattern
mather
1
260
「モデル」を考える / Think about "model"
mather
0
360
Shall we make a speech?
mather
0
210
Elmでライフゲーム / LifeGame in Elm
mather
1
970
Other Decks in Programming
See All in Programming
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Jakarta EE meets AI
ivargrimstad
0
130
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
290
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
190
CSC509 Lecture 11
javiergs
PRO
0
180
レガシーシステムにどう立ち向かうか 複雑さと理想と現実/vs-legacy
suzukihoge
14
2.2k
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
310
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
890
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
250
ローコードSaaSのUXを向上させるためのTypeScript
taro28
1
610
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Navigating Team Friction
lara
183
14k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Writing Fast Ruby
sferik
627
61k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Rails Girls Zürich Keynote
gr2m
94
13k
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ΦεεϝͰ͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠