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
A Modern Web Designer's Workflow
chriscoyier
692
190k
The Invisible Side of Design
smashingmag
297
50k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Code Reviewing Like a Champion
maltzj
519
39k
Facilitating Awesome Meetings
lara
49
6k
A better future with KSS
kneath
238
17k
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
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 、 おすすめ です ! あざ し た
! ☆ わ ずい せ 、 和