JSに不変の愛を - Speaker Deck

Slide 1

Slide 1 text

JSʹෆมͷѪΛ ϥϒɾΤόϯδΣϦετࢁຊ͔ΒElmͷ͓༠͍

Slide 2

Slide 2 text

@boiyaa ෆมͷѪʹṆΕͨஉ

Slide 3

Slide 3 text

–Adriana Fergerson “JSͷ։ൃऀ͸σϕϩούʔͱ͍͏ΑΓ  σϕϩούʔπʔϧεϖγϟϦετͩ” ஫ɿ࣮ࡏ͠ͳ͍ਓ෺Ͱ͢

Slide 4

Slide 4 text

ͱ͍͏͜ͱʹͳΔͷͰ͕͢ɺ͜ͷ࢓༷͕σϕϩούʔπʔ ϧεϖγϟϦετΛੜΈग़͢ཁҼͷҰͭʹͳ͍ͬͯ·͢ɻ const arr = ['foo', 'bar']; arr.push('baz'); console.log(arr); // ['foo', 'bar', 'baz'] const obj = { a: 'foo', b: 'bar' }; obj.c = 'baz'; console.log(obj); // { a: 'foo', b: 'bar', c: 'baz' } JSͷObjectܕͷ஋͸Մมʹͳ͍ͬͯ·͢ɻ  ഑ྻ΍ΦϒδΣΫτ͸ObjectܕͳͷͰɺ

Slide 5

Slide 5 text

–Anthony Howard “Մม஋͕σόοάΛେมʹ͢Δ” ஫ɿ࣮ࡏ͠ͳ͍ਓ෺Ͱ͢

Slide 6

Slide 6 text

͘͝γϯϓϧͳΞϓϦέʔγϣϯΛྫʹΈ͍͖ͯ·͠ΐ͏  ·ͣɺҎԼͷΑ͏ͳFlux෩ͷը໘ඳըؔ਺Λ࡞Γ·ͨ͠ɻ // ͜ͷؔ਺͸ɺΞϓϦέʔγϣϯͷঢ়ଶͷॳظ஋ modelɺReactίϯϙʔωϯτ Viewɺঢ়ଶߋ৽ؔ਺ update  // Λड͚औͬͯɺͦΕΛ࢖ͬͯը໘ඳըͱঢ়ଶ؅ཧΛ͠·͢  function program(id, { model, View, update }) {  // ΞϓϦέʔγϣϯͷঢ়ଶ  let _model = model   render() // ߋ৽ϝοηʔδ msgΛड͚औΓɺঢ়ଶΛߋ৽ͯ͠ඳը͢Δؔ਺  function dispatch(msg) {  _model = update(msg, _model)  render()  } // ίϯϙʔωϯτʹঢ়ଶͱdispatchؔ਺Λ౉ͯ͠ඳը function render() { ReactDOM.render(, document.getElementById(id)) } }

Slide 7

Slide 7 text

͜ΕΛ࢖ͬͯɺ  ςΩετΛૹ৴͢Δ ͱҰཡʹ௥Ճ͞ΕΔ ؆୯ͳϑΥʔϜΛ࡞ͬ ͯΈ·͢ɻ ©seanmcgrath

Slide 8

Slide 8 text

ΞϓϦέʔγϣϯͷঢ়ଶͷॳظ஋ // ೖྗ஋valueɺ౤ߘϦετposts const model = { value: "", posts: [] }

Slide 9

Slide 9 text

Reactίϯϙʔωϯτ function View({ model, dispatch }) { return (

dispatch(changeValue(e.target.value))} /> dispatch(send())}>Send

{post}

) }

Slide 10

Slide 10 text

ߋ৽ϝοηʔδੜ੒ؔ਺ function changeValue(value) { return { type: "ChangeValue", value } } function send() { return { type: "Send" } }

Slide 11

Slide 11 text

ঢ়ଶߋ৽ؔ਺ function update(msg, model) { switch (msg.type) { case "ChangeValue": { model.value = msg.value return model } case "Send": { model.posts.push(model.value) model.value = "" return model } } }

Slide 12

Slide 12 text

ςετ͸௨͍ͬͯΔͱ͠·͢ assert.deepEqual( update({ type: "ChangeValue", "foo" }, { value: "", posts: [] }), { value: "foo", posts: [] } ); // pass assert.deepEqual( update({ type: "Send" }, { value: "bar", posts: [] }), { value: "", posts: ["bar"] } ); // pass

Slide 13

Slide 13 text

Ͱ͸programΛ࣮ߦͯ͠Έ·͠ΐ͏ɻ program("form1", { model, View, update })

Slide 14

Slide 14 text

࣮ߦ݁Ռ: https://jsbin.com/kepahij/edit?js,output ͜Ε͸ҙਤͨ͠ಈ࡞Λ͍ͯ͠Δͱ͠·͢ɻ  Ͱ͸ɺ΋͏Ұͭಉ͡ϑΥʔϜΛ௥Ճͯ͠Έ·͢ɻ program("form2", { model, View, update }) ©Corey Ann

Slide 15

Slide 15 text

࣮ߦ݁Ռ: https://jsbin.com/wiseguz/edit?js,output ͢Δͱࠓ౓͸͓͔͠ͳڍಈΛ͢ΔΑ͏ʹͳΓ·ͨ͠ɻ  ยํͷϑΥʔϜΛૹ৴͢Δͱɺͳ͔ͥ΋͏ยํͷϑΥʔϜ ʹ΋Өڹͯ͠͠·͍·͢Ͷɻ modelʹՄมͰ͋ΔΦϒδΣΫτΛ࢖༻͍ͯͯ͠ɺ͔ͭ program͔Βmodelͷࢀর͕ͦͷ··updateʹ౉͞Ε͍ͯͯɺ  ͦΕΛมߋͯ͠͠·͏࣮૷ʹͳ͍ͬͯΔ͔ΒͰ͢Ͷɻ ©caleb.wrestle

Slide 16

Slide 16 text

͜ͷ৔߹͸Objectͷ஋Λίϐʔ͢Δඞཁ͕͋Γ·ͨ͠ɻ case "ChangeValue": { model.value = msg.value return model } ↓ case "ChangeValue": { return { ...model, value: msg.value } }

Slide 17

Slide 17 text

͜ͷΑ͏ʹɺՄม஋Λ࢖͏ͱɺؔ਺ͷೖग़ྗͷς ετͰ͸௨͍ͬͯͳ͕Βɺ૝ఆ֎ͷڍಈΛ͢ΔՄ ೳੑ͕͋ΔͷͰɺݪҼΛಥ͖ࢭΊΔʹ͸σόοά Λ͢Δ͜ͱʹͳΓ·͢ɻ ࣮ࡍͷΞϓϦέʔγϣϯ͸ ΋ͬͱෳࡶͳͷͰσόοά ͕େมͳΜͰ͢Ͷɻ ©Vincent Tsui Photography

Slide 18

Slide 18 text

–Katherine Neuman “զʑ͸ෆมͷѪʹٌ͍͑ͯΔ” ஫ɿ࣮ࡏ͠ͳ͍ਓ෺Ͱ͢

Slide 19

Slide 19 text

ͱ͍͏Θ͚Ͱɺෆม஋Λ ࡞Δʹ͸৭ʑͳํ๏͕͋ Γ·͢ɻ • Immutable.jsΛ࢖͏ • Object.freeze()Λ࠶ؼ తʹ͔͚Δ • Flowͷڞม΍ɺ TypeScriptͷreadonlyΛ ར༻͢Δ

Slide 20

Slide 20 text

–Freddie Boyle “JS͸஋Λଋറ͢Δ͜ͱ͸Ͱ͖ͯ΋ɺ  զʑΛଋറ͢Δ͜ͱ͸Ͱ͖ͳ͍” ஫ɿ࣮ࡏ͠ͳ͍ਓ෺Ͱ͢

Slide 21

Slide 21 text

͔͠͠ɺ ͦΜͳίʔσΟϯάϧʔϧΛ࡞ͬͯ΋  ࣌ʹաͪΛ൜ͯ͠͠·͏ͷ͕ਓؒͰ͢ɻ ෆม஋͸࡞Ζ͏ͱ͠ͳ͚Ε͹࡞Εͳ͍ͷͰɺ  ؒҧ͑ͯ๨ΕΔ͜ͱ͕͋Γ·͢ɻ ͦ͜Ͱɺͥͻ͓͢͢Ί͍ͨ͠AltJS͕͋Γ·͢ɻ ©Corey Ann

Slide 22

Slide 22 text

–Jennifer Comer “ਓྨΑɺ͜Ε͕Elmͩ” ஫ɿ࣮ࡏ͠ͳ͍ਓ෺Ͱ͢

Slide 23

Slide 23 text

Elmͱ͸ɺશͯͷܕ͕ෆมͷɺ  ΠϛϡʔλϒϧɾϥϒʹຬͪᷓΕͨݴޠͰ͢ɻ ͲΜͳγϯλοΫεͳͷ͔ɺ ͖͞΄ͲͷΞϓϦέʔγϣ ϯΛElmʹҠ২͠ͳ͕ΒΈ ͍͖ͯ·͠ΐ͏

Slide 24

Slide 24 text

const model = { value: "", posts: [] } model = { value = "", posts = [] } ͜ͷΦϒδΣΫτͬΆ͍ͷ͸Recordͱݴ͍·ͯ͠ɺ ΄΅ΦϒδΣΫτͷΑ͏ʹ࢖͑·͢ Πϛϡʔλϒϧɾϥϒɺ஫ೖ

Slide 25

Slide 25 text

function View({ model, dispatch }) { return (

dispatch(changeValue(e.target.value))} /> dispatch(send())}>Send

{post}

view model = div [] [ div [] [ input [ value model.value, onInput ChangeValue ] [] , button [ onClick Send ] [ text "Send" ] ] , ul [] (map (\post -> li [] [ text post ]) model.posts) ] ม਺ͬΆ͍Ͱ͕ؔ͢਺Ͱ͢ɻElmʹ͸ม਺͕͋Γ·ͤΜɻ `foo = bar`͸`var foo = bar`Ͱ͸ͳͯ͘`function foo() { return bar }`Ͱɺ `foo bar = bar ++ baz`͸`function foo(bar) { return bar + baz }`Ͱ͢

Slide 26

Slide 26 text

function changeValue(value) { return { type: "ChangeValue", value } } function send() { return { type: "Send" } } type Msg = ChangeValue String | Send ͜Ε͸ϢχΦϯܕͱݴ͍·ͯ͠ɺ ܕ = ίϯετϥΫλ | ίϯετϥΫλ | ...ͱఆٛ͠·͢ɻ ίϯετϥΫλ͸ؔ਺ͱͯ͠࢖༻Ͱ͖·͢ɻ ͜͜Ͱ͸ߋ৽ϝοηʔδͱͯ͠࢖༻͠ɺ view͔Βupdateʹ౉͍ͯ͠·͢ɻ

Slide 27

Slide 27 text

function update(msg, model) { switch (msg.type) { case "ChangeValue": { model.value = msg.value return model } case "Send": { model.posts.push(model.value) model.value = "" return model } update msg model = case msg of ChangeValue value -> { model | value = value } Send -> { value = "", posts = (model.posts ++ [ model.value ]) } Ϩίʔυͷߋ৽ํ๏͸͜Μͳײ͡Ͱɺ ৽͍͠ϨίʔυΛฦ͠·͢ɻ

Slide 28

Slide 28 text

࣮ߦ݁Ռ:  https://ellie-app.com/38FyY8FKKX7a1/0 ©c non ͜ͷΑ͏ʹ஋ͷॲཧʹؾΛ࢖ Θͣʹ෭࡞༻ͷͳ͍ΞϓϦέʔ γϣϯ͕࡞Ε·ͨ͠ɻ ݴޠϨϕϧͰෆมͩͱɺͲ͜ ͔ͷॲཧ͕Ͳ͔͜ͷ஋Λมߋ ͯ͠͠·͏͜ͱ͕ઈରʹͳ͍ ͱ͍͏҆৺ײ͕͋Γ·͢Ͷɻ

Slide 29

Slide 29 text

ڧ͍੩తܕ෇͚Ͱɺ NullͱUndeﬁned͕ ແ͍ɺͱ͍͏ಛ௃΋ ͋ΓɺϥϯλΠϜΤ ϥʔ͕ى͖ͳ͍ͱ͍ ͏ϝϦοτ΋͋Γ· ͢ɻ ςετͱίϯύΠϧ ͕௨ΔͳΒɺΞϓϦ έʔγϣϯ͸ظ଴௨ ΓͷৼΔ෣͍Λ͢Δ ͱ͍͏ͷ͕Elmͷັ ྗͰ͢Ͷɻ ©sapex

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Thank you for loving me