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
350
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
210
Webフレームワークの功罪 / Advantages and considerable point of Web Frameworks
mather
0
260
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
350
LeacTion!について / About LeacTion!
mather
0
280
Rubyでワンライナー / One-liner on Ruby
mather
0
350
認知と思考パターン / Cognition and Pattern
mather
1
250
「モデル」を考える / Think about "model"
mather
0
350
Shall we make a speech?
mather
0
200
Elmでライフゲーム / LifeGame in Elm
mather
1
930
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
220
GitHub Copilotのススメ
marcy731
1
240
VS Code をプロダクトにどう取り込むか
onomax
1
780
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.1k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
150
見た目から始める生産性向上
ikumatadokoro
10
1.5k
2024 コーディング研修
ckazu
0
440
Sheets API使ってみた
toshi0383
2
170
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
Ruby Pattern Matching
bkuhlmann
0
940
Documentation for users with AsciiDoc and Antora
ahus1
0
370
Featured
See All Featured
Making Projects Easy
brettharned
109
5.5k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
What the flash - Photography Introduction
edds
64
11k
Unsuck your backbone
ammeep
664
57k
Gamification - CAS2011
davidbonilla
77
4.6k
A designer walks into a library…
pauljervisheath
201
23k
Designing with Data
zakiwarfel
96
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Code Review Best Practice
trishagee
56
15k
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ΦεεϝͰ͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠