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
310
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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
280
NPOでのDevinの活用
codeforeveryone
0
900
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.3k
Hack Claude Code with Claude Code
choplin
7
2.5k
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
800
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Why Our Code Smells
bkeepers
PRO
337
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
RailsConf 2023
tenderlove
30
1.1k
A designer walks into a library…
pauljervisheath
207
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Practical Orchestrator
shlominoach
189
11k
The Language of Interfaces
destraynor
158
25k
Documentation Writing (for coders)
carmenintech
72
4.9k
For a Future-Friendly Web
brad_frost
179
9.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ΦεεϝͰ͢ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠