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
370
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
260
Webフレームワークの功罪 / Advantages and considerable point of Web Frameworks
mather
0
310
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
400
LeacTion!について / About LeacTion!
mather
0
300
Rubyでワンライナー / One-liner on Ruby
mather
0
390
認知と思考パターン / 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
960
Other Decks in Programming
See All in Programming
Why Prism?
kddnewton
4
1.7k
私のEbitengineの第一歩
qt_luigi
0
450
Securify_エンジニア採用資料
3shake
0
100
2024 컴포즈 정원사
jisungbin
0
150
意外とフォントが大事だった話 / Font Issues on Internationalization
fumi23
0
110
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
o1モデルのプロンプトエンジニアリングって?
ktc_wada
0
260
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
180
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
200
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Featured
See All Featured
Clear Off the Table
cherdarchuk
91
320k
Side Projects
sachag
451
42k
We Have a Design System, Now What?
morganepeng
48
7.1k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Documentation Writing (for coders)
carmenintech
65
4.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Producing Creativity
orderedlist
PRO
340
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
48
2.8k
Writing Fast Ruby
sferik
623
60k
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ΦεεϝͰ͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠