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
420
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
320
Webフレームワークの功罪 / Advantages and considerable point of Web Frameworks
mather
0
460
LeacTion!のアップデートとプチ勉強会へのいざない / Updates of LeacTion and Petit Meetup
mather
0
470
LeacTion!について / About LeacTion!
mather
0
330
Rubyでワンライナー / One-liner on Ruby
mather
0
460
認知と思考パターン / Cognition and Pattern
mather
1
280
「モデル」を考える / Think about "model"
mather
0
380
Shall we make a speech?
mather
0
240
Elmでライフゲーム / LifeGame in Elm
mather
1
1k
Other Decks in Programming
See All in Programming
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
790
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
Porting a visionOS App to Android XR
akkeylab
0
910
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
130
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
690
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.4k
iOS開発スターターキットの作り方
akidon0000
0
180
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
640
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
990
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
6k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
230
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Balancing Empowerment & Direction
lara
1
490
Statistics for Hackers
jakevdp
799
220k
Typedesign – Prime Four
hannesfritz
42
2.7k
Site-Speed That Sticks
csswizardry
10
720
Designing Experiences People Love
moore
142
24k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
For a Future-Friendly Web
brad_frost
179
9.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Music & Morning Musume
bryan
46
6.7k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
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ΦεεϝͰ͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠