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.3k
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.2k
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.4k
改善React道
hosomichi
3
1k
ReactComponentのコンストラクタを追いかけて
hosomichi
8
3.6k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
25
5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Rails Girls Zürich Keynote
gr2m
94
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Producing Creativity
orderedlist
PRO
341
39k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
A Tale of Four Properties
chriscoyier
156
23k
A better future with KSS
kneath
238
17k
The World Runs on Bad Software
bkeepers
PRO
65
11k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
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 、 おすすめ です ! あざ し た
! ☆ わ ずい せ 、 和