Slide 1

Slide 1 text

ElmͰWebαʔϏεΛ࡞Δ
 ;Θͬͱ͓ͨ͠࿩

Slide 2

Slide 2 text

Θͨ͠Ͱ͢ • ฏຌͳϓϩάϥϚʔͰ͢ • TwitterIDɿyouku_s • झຯ • ͓ֆ͔͖ • TRPG

Slide 3

Slide 3 text

Ϟνϕʔγϣϯ • ཁ໿͢Δͱɺࣗ෼͕༡ͿϚΠφʔͳTRPGγεςϜͷϓϨΠิॿ αʔϏε࡞Δͱࣗ෼͕޾ͤʹͳΔɻ • TRPGͬͯͳʹΑʁ • ௕͍ͷͰɺ͋ͱͰฉ͍ͯ

Slide 4

Slide 4 text

ElmͬͯԿ • ߴ඼࣭ͳϑϩϯτΤϯυ։ൃΛߦ͏͜ͱʹಛԽͨ͠ݴޠ • AltJS • ൚༻ݴޠͰ͸ͳ͍ • HaskellͷαϒηοτΈ͍ͨͳݴޠ࢓༷Λ࣋ͭ • ElmΞʔΩςΫνϟͰ࢖͏͜ͱΛ૝ఆ͞Ε͍ͯΔ • ElmΛ࢖͏ͳΒɺ͜ΕҎ֎ͳ͍ • ಠࣗͷvdom࣮૷ͱɺঢ়ଶભҠϑϨʔϜϫʔΫΛ͍࣋ͬͯΔ • ͞Βʹৄ͘͠ • Elm͸ͲΜͳਓʹΦεεϝͰ͖ͳ͍͔ • https://qiita.com/arowM/items/dfb38d1c5f3dfde8b8bf

Slide 5

Slide 5 text

ͳͥElm͔ • ओʹڵຯ • ੲͪΐͬͱ͚ͩ࢖͚ͬͯͨͲɺΞʔΩςΫνϟʹഁյతมߋ͕ೖͬͨޙ ͸௥ͬͯͳ͔ͬͨ • ͜Μͳ͜ͱݴͬͯͨΒɺElmͷڧ͍ਓʹ͖ͨͨى͜͞Εͨ

Slide 6

Slide 6 text

ͳͥElm͔ɿͪΐͬͱ͚ͩਅ໘໨ʹ • vdomܥͷϑϨʔϜϫʔΫʹڵຯ͕͋ͬͨ • JSωΠςΟϒͩͱReact.jsɺVue.js͋ͨΓ͕ϝδϟʔʁ • Vue.js͸Α͘஌Βͳ͍ • ஌Βͳ͍΋ͷʹؔͯ͠͸௜໧͠ͳ͚Ε͹ͳΒͳ͍ • React.js͸Scalajs-reactܦ༝Ͱগ͠৮ͬͨ͜ͱ͕͋Δ • ঢ়ଶભҠϑϨʔϜϫʔΫͱ๊͖߹ΘͤΔඞཁ͕͋Δ • Reduxͱ͔ • ͪΐͬͱΊΜͲ͏͍͘͞

Slide 7

Slide 7 text

ͳͥElm͔ɿͪΐͬͱ͚ͩਅ໘໨ʹ • ͦ΋ͦ΋ɺJSΛͳΔ΂͘ੜͰॻ͖ͨ͘ͳ͍ • AltJS࢖͏ػӡ • TypeScriptɿ୅਺తσʔλܕ͕ͳ͍ͷͰ͍΍ͩ • Haxeɿۀ຿Ͱे෼৮͔ͬͨΒ͍͍΍ • Scala.jsɿे෼৮͔ͬͨΒ͍͍΍ • Elmɿਪ঑ΞʔΩςΫνϟʹ৐Ε͹vdom΋ঢ়ଶભҠϑϨʔϜϫʔΫ΋αϙʔτ ͞Ε͍ͯΔɺܕڧ͍ • ͳʹΑΓɺࢲͷܦݧ஋͕·ͩগͳ͍

Slide 8

Slide 8 text

γεςϜߏ੒ • AWSΛ࢖ͬͨαʔόʔϨεΞʔΩςΫνϟ • ؒҧ͍ͬͯͨΒ͝ΊΜͳ͍͞ Amazon CloudFront Amazon
 Route 53 Amazon API Gateway Amazon S3 ʢHTML+JS+ը૾ͳͲʣ AWS Lambda Amazon
 DynamoDB

Slide 9

Slide 9 text

γεςϜߏ੒ • Lambda࢖͍͔͚ͨͬͨͩ • ΠϯελϯεΛཱͯͯαʔϏε࡞ͬͨΒ௧͍໨Λݟ͍ͯΔ • ࡒ෍͕ • ಛʹRDSߴ͍ • কདྷతʹ͸ͦΕ΋Lambda+DynamoDBʹҠߦΛݕ౼͍ͯ͠Δ

Slide 10

Slide 10 text

ElmͲ͏ͩͬͨʁɿྑ͍఺ • ܕ͕ڧ͍ͷ͸خ͍͠ • ϨϯμϦϯά͕ૣ͍ʁ • http://elm-lang.org/blog/blazing-fast-html-round-two (ͪΐͬͱݹ͍) • ঢ়ଶͱΠϕϯτͷ૊Έ߹ΘͤΛ൱Ԡͳ͘ߟ͑ͤ͞ΒΕΔ • ߟྀ࿙Ε͕ݮΔ • ҎલͷElmͱൺ΂ͯ • ੜJSͱͷ࿈ܞָ͕ʹͳ͍ͬͯΔ • ඇಉظॲཧɺ෭࡞༻ΛؚΉॲཧͷ੾Γग़ָ͕͠ʹͳ͍ͬͯΔ • 2byteจࣈͷѻ্͍͕ख͘ͳ͍ͬͯΔ

Slide 11

Slide 11 text

ElmͲ͏ͩͬͨʁɿѱ͍఺ • JSONΛऔΓѻ͏ͷ͕ͭΒ͍ • Elm to JSONɺJSON to Elmͱ΋ʹඇৗʹ୔ࢁίʔυΛॻ͔͞ΕΔ • json4sΈ͍ͨͳͷ͕΄͍͠ • ϦϑϨΫγϣϯͳ͍͠ɺPure ElmͰ͸ͨͿΜແཧͦ͏ʁ • ग़ྗ͞ΕΔJSͷαΠζ͕େ͖͍ • ࠓճͷΞϓϦέʔγϣϯͩͱɺminifyͯ͠΋400kb↑ • CloudFront࢖͍ͬͯΔͷ͸ओʹ͍͕ͭ͜ݪҼ • View͕ϓϩάϥϚҎ֎ʹಡΊͳ͍/ॻ͚ͳ͍ • σβΠφͱڠۀ͢Δʹ͸ɺhtmlϥΠΫͳςϯϓϨʔτΛElmͷViewʹม׵͢Δ΋ͷ͕ඞཁͦ ͏

Slide 12

Slide 12 text

ElmͲ͏ͩͬͨʁɿͦͷଞ • ݴޠͷඪ४ػೳ͕খ͍͞ • ඞཁͳΒɺެࣜɾ3rd PartyͷύοέʔδΛೖΕ֦ͯு͍ͯ͘͠ • ࢖Θͳ͍ػೳΛল͍ͯɺJSͷαΠζΛখ͘͢͞ΔͨΊͷઓུʁ • ͜ͷ͋ͨΓ͸ɺAltJSͩͱHaxe͕ڧ͍ҹ৅͕͋Δ • Ͱ΋ɺList΍MaybeʹflatMap͕ͳ͍ͷ͸΍Γա͗Ͱ͸

Slide 13

Slide 13 text

ײ૝ • ָ͔ͬͨ͠ • ֶशίετ͸ߴ͍ • μΠΞϩάɺλϒͳͲগ͠ڽͬͨίϯϙʔωϯτΛ࢖͏ͳΒɺεΫϥονͰॻ͚ Δఔ౓ͷ࣮ྗ͕ͳ͍ͱͭΒ͍ • ElmΞʔΩςΫνϟΛ֮͑Δͷ͸ɺҰ͔ΒReact.js࢝ΊΔͷͱ͍ͨͯ͠มΘΒͳ ͍ؾ΋͢Δ • Haskellͷॻ͖ํ๨Ε͚ͨΕͲɺಛʹ໰୊ͳ͘ॻ͚·ͨ͠ • ݱঢ়Ͱ΋ͦΕͳΓʹ࢖͑ͦ͏ʁʁʁ • աڈʹ௒ഁյతมߋ΍Β͔͍ͯ͠ΔͷͰɺv1.0ʹͳΔ·Ͱ͸੩؍͕ඞཁͦ͏