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ͱ͍͏ڞ௨จ຺ ɾview΍update͸஋Λฦ͚ͩ͢Ͱ͔͢Βɺ ͱ͍͏લఏ(ઈରʹ༨ܭͳ͜ͱͰ͖·ͤΜ͔Βʂ) ɾ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 、 おすすめ です ! あざ し た ! ☆ わ ずい せ 、 和