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 is a good teacher
Search
hosomichi
August 22, 2017
2
1.4k
Elm is a good teacher
2017/08/22 Elm Tokyo Meetup
hosomichi
August 22, 2017
Tweet
Share
More Decks by hosomichi
See All by hosomichi
React_Nativeの_ルーティングばなし.pdf
hosomichi
0
2.3k
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.5k
改善React道
hosomichi
3
1.1k
ReactComponentのコンストラクタを追いかけて
hosomichi
8
3.7k
Featured
See All Featured
Embracing the Ebb and Flow
colly
88
4.8k
Practical Orchestrator
shlominoach
190
11k
GitHub's CSS Performance
jonrohan
1032
460k
Why Our Code Smells
bkeepers
PRO
339
57k
Navigating Team Friction
lara
189
15k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
A Modern Web Designer's Workflow
chriscoyier
697
190k
RailsConf 2023
tenderlove
30
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Designing for Performance
lara
610
69k
Transcript
Elm Tokyo Meetup vol.4 ΄ͦಓ Elm is a good teacher
t.ntrs.naoas.a.to i
twitter: @jshosomichi 自己 紹介 通り名 ほそ 道 と 申し ます
Fringe 81 所属 法律 を 学び . 音楽 畑 で 育ち 、 管理 職 を 経 て 、 フロント エンド 日 開発 を 軸 足 に やっ て おり ます 現在 _ 貫 .tt/ よい すれ も ・ っ なっ 1 、
背景 只今 、 囶 Uni pos という サービス の 開発
で E 1 m を 利用 し まくっ て ます
2016/11 β൛͔Βಋೖ 2017/06 αʔϏεਖ਼ࣜϩʔϯν Elmॻ͍ͯΔਓɿ͍ͨͩ·5ਓ Քಇதίʔυߦɿ͍ͨͩ·2ສ͘Β͍ ಛɿσβΠϯཁٻϨϕϧ͕ߴ͍ σʔλͷϦΞϧλΠϜߋ৽ 背景 齅
otooroatoasoott 囶 ビ 、 一 や 通信 ハンドリング が 重 が っ す
ちなみに こんな かんじ で つかっ て み て ます 画面
と 0 ジッ 7 た ん と うた で 層 ぽい 役目 1 炎 、 ポ ? ⇐ Elm か䐩 たに 日 → Y Screen 《 」 worker 'S t E し に が でき ない し 」 P いろんな 雑務
ࠓɺςΫχΧϧͳগͳΊͰ ElmΛϓϩμΫγϣϯͰͬͯΈͯ ݁ՌతʹҰ൪ྑ͔ͬͨʂ ͱ͍͏ΛશྗͰ͓ͯ͠͠Έ·͢ɻ ࡉ͔͍ͨ͠ɺ ٕज़త͓ΈϙΠϯτͱ͔ͷ ࠙ձͳͲͰੋඇʂ
で
' 懲 封 巘 -1/1 、
ઌʹ͓͍͑ͨ͠େલఏͱͯ͠ɺʮʯશવ͋Γ·ͤΜɻ 0.18ͬͯͯɺมͳόάͱ͔શવͳ͍Ͱ͢ɻ JSͰ໘Ͱ͋ͬͨɺϥΠϒϥϦͷґଘؔߋ৽ͷཧΛ ͋Ε͜Εߟ͑ͳͯ͘ྑ͘ɺ Elmେ֓ͷϥΠϒϥϦೖΕͣͱઓ͑ΔͷͰɺ JSͰΑ͋͘ΔϥΠϒϥϦ͕όάͬͨΓɺΈ߹ΘͤͰ͓͔͘͠ ͳͬͨΓ͢Δɺ͍ΘΏΔʮੵΜͩʯঢ়گʹΉ͠ΖͳΓʹ͍͘ Ͱ͢ɻ ͔ͳΓΠέͯ·͢⽃ to
悠 筎 〇 園
Elm is a good teacher ͦͯ͠ɺϫλΫγͷࢥ͍Λ·ͱΊΔͱɺ Ͱɺ͋Γ·͢ɻ t.ntos.nsoasu.n.i.to 悠 筎
〇 園
Elmࠓࣗʹͱͬͯ ͑Λ༩͑ͣߟ͑ͤͯ͘͞ΕΔڭࢣͷΑ͏ͳଘࡏͰ͋Γɺ ࢥߟʹྗ͢Δ͜ͱΛૉΒ͘͠αϙʔτͯ͘͠Ε·͢ɻ ͋ʔɺElmઌੜͷ͓͔͛Ͱ͜Μͳʹߟ͑Δ͜ͱʹूதͰ͖͍ͯ ͨΜͩͳ͊ɺͱ͍͏ӨڹΛࢥ͍ฦͯ͠Έ͍ͨͱࢥ͍·͢ɻ ElmઌੜͷαΠίʔͬΓ t.ntrs.naoas.a.to i
灝 や 、 、
νʔϜͷΈΜͳʹલఏɾڞ௨จ຺ΛͨΒͯ͘͠ΕΔ ɾશ෦ͷ͕ؔ७ਮؔ ɾશ෦ͷ͕ෆมͰ͋Δ ɾElm Architectureͱ͍͏ڞ௨จ຺ ɾviewupdateΛฦ͚ͩ͢Ͱ͔͢Βɺ ͱ͍͏લఏ(ઈରʹ༨ܭͳ͜ͱͰ͖·ͤΜ͔Βʂ) ɾJSॻ͍ͯΔ࣌ΑΓɺ Կ͕෭࡞༻ͳͷ͔/ࢀরಁաͳͷ͔Λ ͖ͬΓೝࣝͰ͖Δ
ίʔυϨϏϡʔࢥߟϨϏϡʔʹ ͲΜͳৼΔ͍Λ࣮ݱ͠Α͏ͱ͍ͯ͠Δͷ͔ UI༷ͱɺมߋ/Ճ͞ΕͨModel, Msg, PortͷఆٛΛݟΕΠϝʔδ͕Ͱ͖·ͯ͠ɻ ϨϏϡΞʔͷͰϑϩʔ͕͏·͘ܨ͕Βͳ͍߹͍͍ͩͨ༰໋໊͔͕ໃ६ͯͨ͠Γɻ ઌ΄Ͳͷલఏڞ༗͕͋ΔͷͰɺଟগมͳίʔυॻ͍ͯ͋ͬͨͱͯ͠ഁյతίʔυͦ͏ͦ ͏࢈·Εͳ͍ͱ͍͏৴པײ͋Γ·͢ɻ ίʔυશମΛΛࡼͷΑ͏ʹͯ͠ݟΔΑΓɺModel,Msg,PortͷఆٛΛݟΔ͜ͱͰ ͜ͷػೳΛ͜ΜͳநͱΠϕϯτͰ࣮ݱ͠Α͏ͱࢥ͏Μͩʔͱ͍͏
։ൃऀͷʮࢥߟʯͷ෦ʹϑΥʔΧεͰ͖·͢ɻ 䜩 譩 ! 䜩 毖 節 ね 。 ? 、 。 ・ * , 閟 の や
疇
࠷ݶͷࢥߟͯ͠·͔͢ͱ ઌ΄ͲͷϨϏϡʔͷͱ͍ۙͰ ͋Γ·͕͢ɺ JSͰ͋Γ͕ͪͳɺແܭըʹίʔυॻ͖ͳ ͙Δ࡞ઓElmઌੜͷίϯύΠϥʹ༨༟Ͱ ഁ͞Ε·͢ɻ গͳ͘ͱPort, Msg, Modelͷ࠷খߏ ࿅Βͳ͍ͱઌʹਐΊͳ͍ͱ͍͏
৴པײɾڭҭ؍ɻ (·͍͊ΖΜͳΓํ͕͋Δͱࢥ͍·͕͢) 齅 atttotsitoasuaoto し 䦻 鱜 1 1 1 。 。 5 「 ぶ
ߏఆٛͱϑϩʔʹ͍ͭͯࢥߟͯ͠·͔͢ͱ Elm Architectureࣗମ ࠷ݶͷΈΛఏڙͯ͘͠ΕΔ ʮَγϯϓϧʯͳͷͰɺΫη͕ແ ͍ͱ͜Ζ͕ඇৗʹ͖Ͱ͢ɻ ֮͑Δ͜ͱ ϥΠϒϥϦͷߏΑΓɺ ʮߟ͑Δʯ͜ͱʹҰ൪಄͏͜ͱ ͕Ͱ͖·ͨ͠ɻ
Ұ࣌ظ͜ͷΈͷதͰ Ͳ͏ؔΛߏ͍͔ͯ͘͠Ͱ ಄͍ͬͺ͍ʹͳͬͯ·ͨ͠ɻ (ࠓͰͪΐͪ͘ΐ͘ߟ͑·͕͢)
ྫ֎݅ʹ͍ͭͯࢥߟͯ͠·͔͢ͱ List.headͷΓܕ͕ Maybe aͩͬͨΓ(ཁૉ͕ͳ͚ΕNothing) Json.Decode.decodeStringͷΓܕ͕ Result String aͩͬͨΓͱ(σίʔυͰ͖ͳ͚ΕErr String) ॳΊͷࠒɺͪΐͪ͘ΐ͘
ʮΞφλɺ͜͏ͳͬͨ࣌ͷ͜ͱɺߟ͑ͯ·͔͢ʁʯ ͱίϯύΠϥӽ͠ʹಥ͖͚ͭΒΕͯϋοͱ͢Δ͜ͱ͠͠ɻ ͦͯ͠ɺঃʑʹ ʮ͋ɺ͜ͷέʔεͰϢʔβʹͲ͏ݟͤΔ͔ߟ͑ͱ͔ͳΞΧϯʯ ͱ͔ʮ͋ɺ͜ͷఆٛMaybeʹͤͳΞΧϯʯͱ ࣗओతʹྫ֎݅Λߟ͑ΔΑ͏ʹڧ੍͞Ε͍͖ͯ·ͨ͠ɻ 圊 . 䙓 iaoossoaorsotsit i
௨৴औಘਖ਼͍͠Ͱ͔͢ͱ JSॻ͍͍ͯͯɺαʔόϨεϙϯεΛJSON.parseͯͨ͠Β શ͘ͷఆ֎ͳߏΛѻ͍ͬͯͨɺͳΜͯ͜ͱ͋Γ·͠ ͕ͨɺElmͷ߹͜ͷϨεϙϯεσʔλ͔ͬ͠Γఆٛ ͓ͯ͘͠ඞཁ͕͋Γɺ ࣮ࡍͷJSONߏʹఆٛͱζϨ͕͋ΔͱϥϯλΠϜͰΤϥ ʔΛు͖ɺҟৗΛݕͯ͘͠Ε·͢ɻ ͜ΕʹΑͬͯɺΠϯλʔϑΣʔεͷఆٛʹᴥᴪ͕ͳ͍͔ ૣظʹ͋ͿΓग़͢͜ͱ͕ग़དྷ·ͨ͠ɻ 国
ittoaoaorsooasto 颻 劘 I 弧 䙢 闍
ElmΛೖΕͯΈͯ͘͢͝ྑ͔ͬͨͱࢥ͏ͱͯ͠ ϑϩϯτΤϯυWebΞϓϦέʔγϣϯΛ࡞Δ্Ͱ ϕʔγοΫͳࢥߟʹूதͰ͖·ͨ͠ɻ ϓϩμΫγϣϯ։ൃͱ͍͏ϓϩηεͷதͰɺ ؔΘΔϝϯόʔͷجૅྗΛߴΊͯ͘Εͨɺ ͱ͍͏ͷ͕Elmಋೖͯ͠Έͯײͨ͡Ұ൪ͷϝϦο τͰͨ͠ɻ
まとめる と こんな かんじです 最初 、 気 䑆隹 い 人
か と i.tt:88 .net 䪧 を 褧 焱 勲 0 ど→ 鱝 ' jgf.lk、 、 、 、 センセイ や - 影 ※
馴 、 齅 籭 蝓 . 〇 . 0 悠
筎 〇 園
巋 ontotstaoasuaoto Elm 、 おすすめ です ! あざ し た
! ☆ わ ずい せ 、 和