本当にあったモーダルの怖い話 / Terrifying Nonfiction of Modal

Slide 1

Slide 1 text

@uenitty ຊ౰ʹ͋ͬͨϞʔμϧͷා͍࿩ ABEMA weber ษڧձ 2021/06/30, 07/07

Slide 2

Slide 2 text

എܠͱ໨త 2 • Ϟʔμϧʹڻ͘΄Ͳۤ͠ΊΒΕͨͷͰɺঢ়گΛઆ໌ͯ͠վળํ๏ΛఏҊ͢Δ • OOUIͷಛ௃ͷ͏ͪʮૢ࡞ੑ / ࢖͍΍͢͞ʯʹ͍ͭͯͷઆ໌͸Α͘ݟ͔͚Δ ͷͰɺࠓճ͸ʮ։ൃޮ཰ / ࡞Γ΍͢͞ʯͷํʹॏ఺Λஔ͍ͯઆ໌͢Δ • ʮϞʔμϧͷํ͕࣮૷ָ͕ͳͷ͔ͱࢥ͍ͬͯͨʯͱ͍͏σβΠφʔͷ੠͕ ͋ͬͨͷͰɺ৬छؔ܎ͳ͘ཧղͯ͠΋Β͑ΔΑ͏ͳઆ໌ΛࢼΈΔ

Slide 3

Slide 3 text

಺༰ 3 • લఏͷೝࣝ߹Θͤ • ຊ౰ʹ͋ͬͨ࿩ • վળʹ޲͚ͯ

Slide 4

Slide 4 text

طଘͷUIઃܭ 4 લఏͷೝࣝ߹Θͤ

Slide 5

Slide 5 text

ʮखଓ͖ʯΛ׬͍ྃͤͨ͞ 5 • Ϗδωεཁٻ • ॏཁͳʮखଓ͖ʯ͸։࢝ͨ͠Β໎͍ͳ͘׬ྃͯ͠΄͍͠ • खଓ͖ͷྫ • ΞΧ΢ϯτొ࿥ϑϩʔ • ίϯςϯπߪೖϑϩʔ

Slide 6

Slide 6 text

खଓ͖։࢝ͷจ຺Λҡ࣋ͤ͞Δ 6 • Ϣʔβʔ͕ߪೖͷҙࢥΛࣔͨ͠Β ࣮֬ʹߪೖͯ͠΄͍͠ • ʮߪೖʯจ຺Λҡ࣋ͤ͞ΔͨΊʹ ϞʔμϧμΠΞϩάΛར༻ ߪೖ͢Δ

Slide 7

Slide 7 text

खଓ͖։࢝ͷจ຺Λҡ࣋ͤ͞Δ 7 • Ϣʔβʔ͕ߪೖͷҙࢥΛࣔͨ͠Β ࣮֬ʹߪೖͯ͠΄͍͠ • ʮߪೖʯจ຺Λҡ࣋ͤ͞ΔͨΊʹ ϞʔμϧμΠΞϩάΛར༻ ߪೖ͢Δ Ωϟϯηϧ ೝূ͍ͯͩ͘͠͞ ύεϫʔυ

Slide 8

Slide 8 text

ख਺͕࠷খʹͳΔΑ͏ʹ׬ྃ·Ͱ༠ಋ͢Δ 8 ※ ࣮ࡍ͸΋ͬͱ΋ͬͱෳࡶ ߪೖ͢Δ ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ ߪೖ͢Δ Ωϟϯηϧ ෆ଍ίΠϯΛߪೖ͍ͯͩ͘͠͞ 300 ίΠϯ ΫϨδοτΧʔυ൪߸ ߪೖ͢Δ Ωϟϯηϧ ߪೖ͢Δ঎඼Λબ୒͍ͯͩ͘͠͞ ௨ৗ঎඼ ಛయ෇͖঎඼ ϓϨϛΞϜձһݶఆ঎඼ ௨ৗձһ͕ ϓϨϛΞϜձһݶఆ঎඼Λબ୒ͨ͠৔߹͸ ϓϨϛΞϜձһొ࿥ը໘΁ ίΠϯΛফඅͯ͠ߪೖ׬ྃ ίΠϯෆ଍ͷ৔߹ ΞΧ΢ϯτ ະొ࿥ͷ ৔߹ ίΠϯΛߪೖɾফඅͯ͠঎඼ߪೖ׬ྃ

Slide 9

Slide 9 text

ݱঢ়ͷΞʔΩςΫνϟ 9 લఏͷೝࣝ߹Θͤ

Slide 10

Slide 10 text

React + ϩʔΧϧStateʹΑΔঢ়ଶ؅ཧ 10 • Container / Presentationa l  ίϯϙʔωϯτ͸෼཭͢Δ • ঢ়ଶ؅ཧ͸֤Containe r  ίϯϙʔωϯτͷʮϩʔΧϧStateʯ • άϩʔόϧͳঢ়ଶ؅ཧ͸ͤͣɺৗʹ ਌ / ૆ઌContainerίϯϙʔωϯτͷ ϩʔΧϧStateͰ؅ཧɺPropsܦ༝Ͱ ΍ΓͱΓ͢Δ ※ ֤ϩʔΧϧState͸FluxͷཁૉΛ6ͭʹ૿΍ͨ͠Α͏ͳϑϩʔΛͦΕͧΕߏஙͯ͠ૢ࡞͢Δ https://techlog.voyagegroup.com/entry/2017/08/31/102915 C P C C C C C P P P P P Containerίϯϙʔωϯτ Presentationalίϯϙʔωϯτ

Slide 11

Slide 11 text

React + ϩʔΧϧStateʹΑΔঢ়ଶ؅ཧ 11 • Container / Presentationa l  ίϯϙʔωϯτ͸෼཭͢Δ • ঢ়ଶ؅ཧ͸֤Containe r  ίϯϙʔωϯτͷʮϩʔΧϧStateʯ • άϩʔόϧͳঢ়ଶ؅ཧ͸ͤͣɺৗʹ ਌ / ૆ઌContainerίϯϙʔωϯτͷ ϩʔΧϧStateͰ؅ཧɺPropsܦ༝Ͱ ΍ΓͱΓ͢Δ ※ ֤ϩʔΧϧState͸FluxͷཁૉΛ6ͭʹ૿΍ͨ͠Α͏ͳϑϩʔΛͦΕͧΕߏஙͯ͠ૢ࡞͢Δ https://techlog.voyagegroup.com/entry/2017/08/31/102915 C P S S S S S S C C C C C P P P P P ϩʔΧϧState

Slide 12

Slide 12 text

React + ϩʔΧϧStateʹΑΔঢ়ଶ؅ཧ 12 • Container / Presentationa l  ίϯϙʔωϯτ͸෼཭͢Δ • ঢ়ଶ؅ཧ͸֤Containe r  ίϯϙʔωϯτͷʮϩʔΧϧStateʯ • άϩʔόϧͳঢ়ଶ؅ཧ͸ͤͣɺৗʹ ਌ / ૆ઌContainerίϯϙʔωϯτͷ ϩʔΧϧStateͰ؅ཧɺPropsܦ༝Ͱ ΍ΓͱΓ͢Δ ※ ֤ϩʔΧϧState͸FluxͷཁૉΛ6ͭʹ૿΍ͨ͠Α͏ͳϑϩʔΛͦΕͧΕߏஙͯ͠ૢ࡞͢Δ https://techlog.voyagegroup.com/entry/2017/08/31/102915 C P S S S S S S C C C C C P P P P P ϞʔμϧμΠΞϩάΛ ดͯ͡ʂ isOpen = false close()

Slide 13

Slide 13 text

ͨͬͨ1ߦͷ࢓༷ॻ 13 ຊ౰ʹ͋ͬͨ࿩

Slide 14

Slide 14 text

࢓༷ॻʮొ࿥μΠΞϩά಺ʹϦϯΫΛ௥Ճʯ 14 • ৽نొ࿥ϑϩʔ͔ΒΞΧ΢ϯτ੾Γସ͑Ͱ͖ΔΑ͏ʹ͍ͨ͠ͱͷ͜ͱ • ॠࡴҊ݅ʹ΋ݟ͑Δ • ޻਺͸ͲΕ͘Β͍Ͱ͠ΐ͏ʁ ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ ͢Ͱʹొ࿥ࡁΈͷํ͸ͪ͜Β

Slide 15

Slide 15 text

ϦϯΫʹݟ͍͑ͯΔ΋ͷ͸࣮͸Ϙλϯ 15 • ϖʔδભҠͱ͸ҧ͍ɺμΠΞϩά͔ΒμΠΞϩά΁ͷભҠ͸ঢ়ଶૢ࡞͕ඞཁ • ClickΠϕϯτΛݕ஌͢ΔʮϘλϯʯͱʮঢ়ଶૢ࡞ʯΛ࣮૷͢Δ • ໭ΔϘλϯ΍ΩϟϯηϧϘλϯ΋ಉ༷ ੾Γସ͑Δ Ωϟϯηϧ ΞΧ΢ϯτ੾Γସ͑ ϝʔϧΞυϨε ύεϫʔυ ύεϫʔυ͕෼͔Βͳ͍ํ͸ͪ͜Β ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ ͢Ͱʹొ࿥ࡁΈͷํ͸ͪ͜Β isSigninDialogOpen = false isLoginDialogOpen = true openLoginFromSignin()

Slide 16

Slide 16 text

Ϙλϯͷ࣮૷ίετ͸ܰ͘ͳ͍ 16 • ʮঢ়ଶૢ࡞ʯ͸μΠΞϩάͱ཭Εͨ ਌ / ૆ઌίϯϙʔωϯτʹہॴతʹ ࣮૷͢Δϧʔϧ • Ϙλϯͷ਺͚ͩҰ࿈ͷ࣮૷͕ඞཁ • खଓ͖ͷى఺㲈ϖʔδ͕ҧ͑͹ ਌ / ૆ઌίϯϙʔωϯτ΋ҧ͏ͷͰɺ ͦΕͧΕͰҰ࿈ͷ࣮૷͕ඞཁ ※ ͨ͘͞ΜͷμΠΞϩάΛදࣔ͠ಘΔ਌ / ૆ઌίϯϙʔωϯτ΄ͲڊେͳϩʔΧϧStateͱͦΕͧΕͷॲཧํ๏Λอ༗͢Δ͜ͱʹͳΔ C P S S S S S S C C C C C P P P P P ϞʔμϧμΠΞϩάΛ ดͯ͡ʂ isOpen = false close()

Slide 17

Slide 17 text

ؔ࿈͢Δखଓ͖͕೺Ѳ͖͠Εͳ͍ 17 • ΞΧ΢ϯτొ࿥μΠΞϩά͕ొ৔͢Δखଓ͖ • ΞΧ΢ϯτొ࿥ϑϩʔʢى఺͸1Օॴʣ • ϓϨϛΞϜձһొ࿥ϑϩʔʢى఺͸2Օॴʣ • Ϋʔϙϯద༻ϑϩʔʢى఺͸2Օॴʣ • ίΠϯߪೖϑϩʔʢى఺͸5Օॴʣ • μΠΞϩά͸खଓ͖ΛਐΊͳ͍ͱొ৔͠ͳ͍ ͨΊɺ௚ײతʹӨڹൣғΛ೺ѲͰ͖ͳ͍ ※ ؤுͬͯॻ͖ग़ͯ͠Έ͕ͨߟྀ࿙Ε΍ؒҧ͍͕͋Δؾ͕ͯ͠ͳΒͳ͍ ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ ͢Ͱʹొ࿥ࡁΈͷํ͸ͪ͜Β ? ? ?

Slide 18

Slide 18 text

ಉ͡μΠΞϩάʹࢸΔผϧʔτ͕ੜ·ΕΔ 18 ※ ݩʑ྆ํͷखଓ͖ͷى఺͕͋ͬͨϖʔδͰ͸͜ͷΑ͏ͳݱ৅͕ى͜ΔɻΑ͘ݟΔͱ໭ΔϘλϯͷ༗ແ͕ҧ͏ ੾Γସ͑Δ ొ࿥͢Δ ΞΧ΢ϯτ؅ཧ ੾Γସ͑Δ Ωϟϯηϧ ΞΧ΢ϯτ੾Γସ͑ ϝʔϧΞυϨε ύεϫʔυ ύεϫʔυ͕෼͔Βͳ͍ํ͸ͪ͜Β 􀓣 χοΫωʔϜ ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ

Slide 19

Slide 19 text

ಉ͡μΠΞϩάʹࢸΔผϧʔτ͕ੜ·ΕΔ 19 ※ ݩʑ྆ํͷखଓ͖ͷى఺͕͋ͬͨϖʔδͰ͸͜ͷΑ͏ͳݱ৅͕ى͜ΔɻΑ͘ݟΔͱ໭ΔϘλϯͷ༗ແ͕ҧ͏ ੾Γସ͑Δ ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ ͢Ͱʹొ࿥ࡁΈͷํ͸ͪ͜Β ొ࿥͢Δ ੾Γସ͑Δ Ωϟϯηϧ ΞΧ΢ϯτ੾Γସ͑ ϝʔϧΞυϨε ύεϫʔυ ύεϫʔυ͕෼͔Βͳ͍ํ͸ͪ͜Β ΞΧ΢ϯτ؅ཧ ੾Γସ͑Δ Ωϟϯηϧ ΞΧ΢ϯτ੾Γସ͑ ϝʔϧΞυϨε ύεϫʔυ ύεϫʔυ͕෼͔Βͳ͍ํ͸ͪ͜Β 􀓣 χοΫωʔϜ

Slide 20

Slide 20 text

ݟͨ໨͸ಉ͡Ͱ΋ʮঢ়ଶૢ࡞ʯͷ࣮૷͸ผ 20 ※ खଓ͖Ͱ͸લஈͷૢ࡞ʹΑͬͯޙஈͷૢ࡞ͷʮҙຯʯ͕มΘΔͨΊɺͲͷʮঢ়ଶૢ࡞ʯ΋ڞ௨Խ͸Ͱ͖ͳ͍ɻઆ໌΍໼ҹΛল͍͍ͯΔଞͷϘλϯ΋ಉ༷ ੾Γସ͑Δ ొ࿥͢Δ Ωϟϯηϧ ΞΧ΢ϯτΛొ࿥͍ͯͩ͘͠͞ ϝʔϧΞυϨε ύεϫʔυ ͢Ͱʹొ࿥ࡁΈͷํ͸ͪ͜Β ొ࿥͢Δ ੾Γସ͑Δ Ωϟϯηϧ ΞΧ΢ϯτ੾Γସ͑ ϝʔϧΞυϨε ύεϫʔυ ύεϫʔυ͕෼͔Βͳ͍ํ͸ͪ͜Β ΞΧ΢ϯτ؅ཧ ੾Γସ͑Δ Ωϟϯηϧ ΞΧ΢ϯτ੾Γସ͑ ϝʔϧΞυϨε ύεϫʔυ ύεϫʔυ͕෼͔Βͳ͍ํ͸ͪ͜Β isSigninDialogOpen = true openSignin() isLoginDialogOpen = true openLogin() openLoginFromSignin() 􀓣 χοΫωʔϜ isSigninDialogOpen = false isLoginDialogOpen = true

Slide 21

Slide 21 text

ؾ෇͍ͨΒ޻਺͕๲େʹͳ͍ͬͯͨ 21 • ࠷ॳ͸޻਺͕খ͘͞ݟ͍͑ͯͨ • ࡞ۀதʹӨڹൣғͷ޿͕͞ݟ͑࢝Ίɺߟྀ࿙Ε͕ൃ֮͠ଓ͚ͨ • ͍ͭ·Ͱ΋޻਺ݟੵ΋Γͷमਖ਼͕ଓ͍ͨ

Slide 22

Slide 22 text

ςετέʔε΋๲େʹͳͬͨ 22 • ςετέʔε͸ʮखଓ͖ͷى఺ʯͱʮ৚݅෼ذʯͷ૊Έ߹Θͤʢֻ͚ࢉʣ • ͢΂ͯͷέʔεΛςετ͢Δ͜ͱͳͲ౸ఈͰ͖ͳ͍ • QAνʔϜͱ૬ஊ͠ɺলུͰ͖ͦ͏ͳՕॴΛඞࢮʹ୳ͨ͠

Slide 23

Slide 23 text

େ෯ʹ஗Ԇͯ͠ϦϦʔε 23 • ౰ॳͷ༧ఆ͔Βେ෯ʹ஗Ԇͭͭ͠΋ͳΜͱ͔࣮૷ͱςετΛ׬ྃ • ϦϦʔεޙ΋ΈΜͳͰຊ൪؀ڥΛ֬ೝ͕ͨ͠ɺਖ਼͘͠ಈ͍ͯͦ͏

Slide 24

Slide 24 text

3ϲ݄ޙɺக໋తͳόά͕ʮۮવʯൃ֮ 24 • ࠓճ௥Ճͨ͠μΠΞϩάΛܦ༝͢ΔͱίΠϯߪೖ͕ࣦഊ͢Δόά • ࠓճͷ࣮૷ऀ͕શ͘ผͷҊ݅ͰίʔυΛ֬ೝதʹ࣮૷ϛεΛۮવൃݟ • 3ϲ݄ؒɺଞͷϝϯόʔ͸୭΋ؾ෇͔ͣɺϢʔβʔ͔Βͷ໰͍߹Θͤ΋ͳ͠ • ୭΋ͦͷϧʔτΛ௨Βͳ͔ͬͨ…ʁ • ͱ͍͏͔ςετ͍ͯ͠ͳ͔ͬͨ…ʁ

Slide 25

Slide 25 text

खଓ͖શମ͸ςετ͍ͯ͠ͳ͔ͬͨ 25 • ʮΞΧ΢ϯτ͕੾ΓସΘΔ͔ʯΛςετ͍ͯͨ͠ͷͰɺ୭΋ίΠϯߪೖΛ ׬͍ྃͯ͠ͳ͔ͬͨ • ͦ΋ͦ΋ςετέʔεΛඞࢮʹলུ͍ͯͨ͠ • όάमਖ਼΋࠶ςετ΋਺೔͔͔Γɺ͔ͳΓେมͩͬͨ • ίΠϯߪೖϑϩʔͷى఺͸5Օॴ͋Δ • ݁ہ17ϑΝΠϧ΋มߋͨ͠

Slide 26

Slide 26 text

26 • ͨͬͨ1ߦͷ࢓༷ॻͩͬͨͷʹ…

Slide 27

Slide 27 text

໰୊ͷৼΓฦΓ 27 վળʹ޲͚ͯ

Slide 28

Slide 28 text

1. ӨڹൣғΛ௚ײతʹ೺ѲͰ͖ͳ͍ 28 • ࠷ॳ͸޻਺͕খ͘͞ݟ͍͑ͯͨɻ࢓༷ॻ΋1ߦͰࡁΉͱࢥ͍ͬͯͨ • ࡞ۀதʹӨڹൣғͷ޿͕͞ݟ͑࢝Ίɺ࠷ޙ·Ͱߟྀ࿙Ε͕ൃ֮͠ଓ͚ͨ • ࣮͸ඞཁͩͬͨςετέʔε΋ؾ෇͔ͣলུͯ͠͠·ͬͨ

Slide 29

Slide 29 text

2. ޻਺͕๲େʹͳΔ 29 • Ϙλϯͷ਺͚ͩʮঢ়ଶૢ࡞ʯͷ࣮૷͕ඞཁͩͬͨ • खଓ͖ͷى఺㲈ϖʔδ͕ҧ͑͹਌ / ૆ઌίϯϙʔωϯτ΋ҧ͏ͷͰɺ ͦΕͧΕͰʮঢ়ଶૢ࡞ʯͷ࣮૷͕ඞཁͩͬͨ • खଓ͖Ͱ͸લஈͷૢ࡞΍จ຺ʹΑͬͯޙஈͷૢ࡞ͷʮҙຯʯ͕มΘΔͨΊɺ Ͳͷʮঢ়ଶૢ࡞ʯͷ࣮૷΋ڞ௨ԽͰ͖ͳ͔ͬͨ

Slide 30

Slide 30 text

ࠜຊվળͷ伴ʮϞʔυʯ 30 վળʹ޲͚ͯ

Slide 31

Slide 31 text

Ϟʔυͱ͸ 31 • Oxford Learner's Dictionariesʮmodeʯ • Կ͔Λ͢ΔͨΊͷಛఆͷํ๏ɻԿ͔ͷಛఆͷܕɺ༷ࣜ • WikipediaʮMode (user interface)ʯ • ಉ͡ೖྗͰ΋ଞͷઃఆͷ৔߹ͱ͸ҟͳΔ݁ՌΛੜ͡Δઃఆͷ͜ͱ • Ϟʔυ͕͋Δ = Ϟʔμϧ • Ϟʔυ͕ͳ͍ = ϞʔυϨε

Slide 32

Slide 32 text

৯ࣄʹ͓͚ΔϞʔυ 32 • ίʔεྉཧʢϞʔμϧʣ • ৯΂Δॱ൪΋ɺ࢖͏ΧτϥϦʔ΋ܾΊΒΕ͍ͯΔ • γΣϑͷߏஙͨ͠Ϟʔυʹैͬͯ৯΂Ε͹ɺૉ੖Β͍͠ମݧ͕Ͱ͖Δ • ͓ห౰ʢϞʔυϨεʣ • ৯΂Δॱ൪͸ࣗ༝ • ͍ͭɺͲ͜Ͱ৯΂Δ͔͑ࣗ͞෼ͰܾΊΒΕΔ ࢀߟ : https://note.com/nikonote/n/nc28fd9ac675b

Slide 33

Slide 33 text

Ҡಈʹ͓͚ΔϞʔυ 33 • ిंʢϞʔμϧʣ • ࠷ॳʹબ୒ࢶͷத͔Β໨త஍Λબ΂͹࣮֬ʹ໨త஍ʹ౸ண͢Δ • ్தͰಓΛมߋ͢Δ͜ͱ͸Ͱ͖ͳ͍ • ࣗಈंʢϞʔυϨεʣ • ͲͷಓΛ௨ͬͯ΋ྑ͘ɺ్தͰدΓಓ΍໨త஍ͷมߋ͕Ͱ͖Δ • ࣗ෼Ͱӡస͢Δඞཁ͕͋Γɺ໨త஍ͷҐஔ΋೺Ѳ͢Δඞཁ͕͋Δ ࢀߟ : https://note.com/nikonote/n/nc28fd9ac675b

Slide 34

Slide 34 text

UIʹ͓͚ΔϞʔυ 34 • λʔϛφϧɺλεΫࢦ޲UIʢϞʔμϧʣ • ਖ਼֬ʹίϚϯυΛೖྗͰ͖Ε͹ɺख࡞ۀͰ͸੒͠ಘͳ͍੒Ռ͕ಘΒΕΔ • ࣄલ஌͕ࣝඞཁͰɺೖྗϛε͸࣮ߦ͢Δ·ͰΘ͔Βͳ͍ • GUIɺΦϒδΣΫτࢦ޲UIʢϞʔυϨεʣ • ࣄલ஌͕ࣝෆཁͰɺݟͨ··ࣗ༝ʹૢ࡞Ͱ͖Δ • ख਺͚ͩΛݟΔͱൺֱతଟ͘ͳΔ͜ͱ͸͋Δ͕ɺૢ࡞ର৅͕໌֬ͳͨΊ ೲಘײ͕͋Δ

Slide 35

Slide 35 text

Ϟʔμϧͳ΋ͷͷಛ௃ 35 • ୭͔ / Կ͔ͱʮڠྗʯ͢ΔΑ͏ͳߏਤ͕͋Δ • ࣄલ஌ࣝΛϕʔεʹݴ༿ͰίϛϡχέʔγϣϯΛऔΔඞཁ͕͋Δ • গ͠ະདྷͷ࣌ؒʹ͍ͭͯܭըΛཱͯΔඞཁ͕͋Δ • ϞʔυΤϥʔ͕͋Δ • ίʔεྉཧͰࡾ֯৯΂͸Ͱ͖ͳ͍͠ɺిं͸৐Γաͯ͝͠΋໭ͬͯ͘Εͳ͍ • ܭըΛཱ͍ͯͯΔҎ্ɺͦͷ௨ΓʹͳΒͳ͍৔߹͸͢΂ͯΤϥʔ

Slide 36

Slide 36 text

ϞʔυϨεʹ͢Δͱى͜Δ͜ͱ 36 • ୭͔ / Կ͔ͷ੍໿Λड͚ͳ͘ͳΔ • աڈͷܭը΍૝ఆʹࠨӈ͞Εͳ͍ • ࠓ͢΂͖͜ͱɺࠓ΍Γ͍ͨ͜ͱΛγϯϓϧʹ࣮ݱͰ͖Δ • ϞʔυΤϥʔͩͬͨ΋ͷ͸୯ͳΔࢼߦࡨޡͷҰ؀ʹͳΔ • ܭը͕ͳ͍ͨΊɺͲΜͳߦಈ΋ৗʹߠఆ͞ΕΔ • ະདྷΛ૝ఆ͠ͳ͍ͨΊɺෆ࣮֬ੑʹॊೈʹରԠͰ͖Δ ※ աڈݱࡏະདྷʹݴٴ͍ͯ͠Δ௨ΓɺϞʔυϨεʹ͢Δͱ࣌ؒͷ࣍ݩΛҙࣝ͢Δඞཁ͕ͳ͘ͳΔɻ࣍ݩ͕ݮΔͱ෺ࣄ͸ҰؾʹγϯϓϧʹͳΔ

Slide 37

Slide 37 text

໰୊ͷৼΓฦΓʢϞʔυ؍఺ʣ 37 վળʹ޲͚ͯ

Slide 38

Slide 38 text

1. ӨڹൣғΛ௚ײతʹ೺ѲͰ͖ͳ͍ 38 • खଓ͖ͷܭը / ૝ఆ͕ෳࡶͰڊେ • Ϟʔμϧͳ··ϞʔυΤϥʔΛݮΒͦ͏ͱͯ͠ɺ େྔͷϢʔεέʔεʹྗٕͰରԠ͖ͯͨ݁͠Ռ • ͙͢ʹ͸ՄࢹԽͰ͖ͳ͍ɺͯ͠΋ҰॠͰ௠෗Խ͢Δ • Ϣʔεέʔε͸૿͑΍͘͢มΘΓ΍͍͢ ※ Ϣʔεέʔεͷଟ༷ੑ͸ɺಈ෺͕࣋ͭΫϦΤΠςΟϏςΟ νʔϜͰ͍͔ͭ͘ͷखଓ͖ΛՄࢹԽͯ͠Έͨਤ ଎౓༏ઌͰҰ෦লུ͢Δ΋Ұिؒ΄Ͳ͔͔ͬͨ ͳ͓͢Ͱʹ௠෗ԽࡁΈ

Slide 39

Slide 39 text

2. ޻਺͕๲େʹͳΔ 39 • ΞʔΩςΫνϟ͕ϞʔμϧͳͨΊɺ ϞʔυΤϥʔ͕ى͖͍ͯΔ • ΋͠ 􀥳 Ͱ΋μΠΞϩάΛදࣔ͢Δ ༧ఆ͕͋Δͱࣄલʹฉ͍͍ͯͨΒ ࠷ॳ͔Β 􀆮 Ͱʮঢ়ଶૢ࡞ʯΛ ࣮૷͍ͯͨ͠ͷͰ͸ʁ • μΠΞϩάʹݶΒͣɺ͜ͷΑ͏ͳ ΞʔΩςΫνϟͰ͸มߋͷ౓ʹ աڈͷ૝ఆ֎ʹ޻਺ΛୣΘΕΔ C P S S S S S S C C C C C P P P P P ϞʔμϧμΠΞϩάΛ ดͯ͡ʂ isOpen = false close() 􀥳 􀆮

Slide 40

Slide 40 text

۩ମతͳվળํ๏ 40 վળʹ޲͚ͯ

Slide 41

Slide 41 text

ϢʔβʔͷҙࢥΛݪಈྗʹ͠Α͏ͱߟ͑Δ 41 • Ϗδωεཁٻʢ࠶ܝʣ • ॏཁͳʮखଓ͖ʯ͸։࢝ͨ͠Β໎͍ͳ͘׬ྃͯ͠΄͍͠ • ͦ΋ͦ΋↑ͱಉ࣌ʹɺϢʔβʔࣗ਎΋खଓ͖Λ׬͍ྃͨ͠ͱࢥ͍ͬͯΔ͸ͣ • จ຺Λҡ࣋ͤͨ͞Γͯ͠ߦಈΛڧ੍ʢϞʔυͰറΖ͏ͱʣ͠ͳͯ͘΋ɺ Ϣʔβʔ͸ࣗ෼ͷҙࢥΛݪಈྗʹ΍Γ͍ͨ͜ͱΛ׬਱Ͱ͖Δ • ޙऀʹدͤΔ͜ͱͰɺγεςϜͷϢʔεέʔεͷෳࡶੑͩͬͨ΋ͷΛ Ϣʔβʔͷߦಈύλʔϯͷଟ༷ੑʹม׵Ͱ͖Δ ※ Ϣʔβʔ͸ࣗ༝ʹͳΓɺγεςϜ͸εϦϜʹͳΔ

Slide 42

Slide 42 text

खଓ͖͸ΦϒδΣΫτԽ͢Δ 42 • खଓ͖͸ΦϒδΣΫτԽʢ㲈 ໊ࢺԽʣ͢Δ͜ͱͰϞʔυϨεʹͰ͖Δ • ΦϒδΣΫτɿߦಈΛଅ͢Α͏ͳʮ໨౰ͯʯɺૢ࡞ͷʮର৅ʯ • ߪೖखଓ͖ͷ৔߹ • 🙅ʮߪೖ͢Δʯͱ͍͏खଓ͖શମͰߟ͑Δ • 🙆ʮߪೖʯΦϒδΣΫτ㲈ʮΧʔτʯΦϒδΣΫτΛݟग़͢ • ʮΧʔτʹೖΕΔʯ͸1ճͷૢ࡞Ͱଈ׬ྃ͢ΔͨΊɺϢʔβʔ͸ଈ࠲ʹ Ϟʔυ͔Β։์͞ΕΔɻ࣮૷΋γϯϓϧ

Slide 43

Slide 43 text

ΦϒδΣΫτࢦ޲UIʹ͢Δ 43 • ΦϒδΣΫτࢦ޲UIʢOOUIʣ • ΦϒδΣΫτʢૢ࡞ର৅ɺ໨౰ͯʣΛ લ໘ʹग़ͨ͠UI • ʮΦϒδΣΫτબ୒→ΞΫγϣϯબ୒ʯ ʢ໊ࢺ→ಈࢺʣͷૢ࡞ॱং • ૢ࡞݁Ռ͸ΦϒδΣΫτͷมԽͱͯ͠ ৗʹʢϞʔυϨεʹʣ஌֮Ͱ͖ΔΑ͏ ʹ͢Δ ※ OOUIຊ : https://www.sociomedia.co.jp/10046 https://nr.apple.com/dm4W2d2R1c

Slide 44

Slide 44 text

ΦϒδΣΫτ͸άϥϑߏ଄Ͱଊ͑Δ 44 • ΦϒδΣΫτʹීวతͳ্Լؔ܎͸ͳ͍ • άϥϑߏ଄ͱͯ͠ϑϥοτʹଊ͑Δ • ίϯϙʔωϯτͷ໦ߏ଄ͱ͸੾Γ཭͢ • ͍ͭͰ΋Ͳ͔͜ΒͰ΋ʢϞʔυϨεʹʣ ΦϒδΣΫτʹΞΫηεͰ͖ΔΑ͏ʹ͢Δ • Redux΍RecoilͳͲɺάϩʔόϧ͔ͭ γϯάϧτϯͳσʔλετΞΛ࠾༻͢Δ ※ ΦϒδΣΫτʹ্Լؔ܎Λݟग़͢ߦҝ͸ɺΦϒδΣΫτࢦ޲ଘࡏ࿦ʹ͓͚ΔʮԼํղମʯ΍ʮ্ํղମʯʹ౰ͨΔ https://youtu.be/_ISAA_Jt9kI?t=450

Slide 45

Slide 45 text

એݴతʹ࣮૷͢Δ 45 • ʮએݴ͢Δʯͱ͍͏ΞΫγϣϯ͸ۃখ࣌ؒͰ׬ྃ͢ΔʢϞʔυϨεʣ • એݴΛ܁Γฦ͢Α͏ʹ࣮૷͢Δ͜ͱͰɺଟ༷ͳมԽΛγϯϓϧʹදݱͰ͖Δ • CPU͸ΫϩοΫͷपظͰϝϞϦʹର͢ΔએݴΛ܁Γฦ͢ • React͸FiberͷλΠϛϯάͰDOMʹର͢ΔએݴΛ܁Γฦ͢ • Redux͸Dispatchͷ౓ʹStoreʹର͢ΔએݴΛ܁Γฦ͢ ※ Ξφϩά→σδλϧͷٕज़ֵ৽͸ɺϞʔμϧ→ϞʔυϨεʹΑΔදݱྗͷֵ৽ͱ͍͑Δ

Slide 46

Slide 46 text

·ͱΊ 46 ຊ౰ʹ͋ͬͨϞʔμϧͷා͍࿩

Slide 47

Slide 47 text

Ϟʔμϧʹڻ͘΄Ͳۤ͠ΊΒΕͨ 47 • PM͸1ߦͷ࢓༷ॻΛॻ͍ͨ • σβΠφʔ͸طଘUIΛҰ෦ௐ੔ͨ͠ʢ໭ΔϘλϯͷ௥ՃͳͲʣ • ΤϯδχΞ͕࣮૷࣌ʹͱͯͭ΋ͳۤ͘͠ΈɺQAνʔϜ΋େมͳࢥ͍Λͨ͠

Slide 48

Slide 48 text

໰୊ͷ֎ʹग़ͯ໰୊Λ෼ੳͨ͠ 48 • ࣮૷࣌ͷ໰୊Λ࣮૷͚ͩͷ໰୊ͱͯ͠ॲཧͤͣɺϏδωεཁٻ΍UIઃܭΛ ؚΊͯ໰୊Λ෼ੳͨ͠ • ࣮૷ͷઃܭख๏΍ΞʔΩςΫνϟ͔͠ߟ͑ͳ͍ࢹ࠲Ͱ͸໰୊͸ղܾ͠ͳ͍ • ໰୊Λ໰୊ͨΒ͠Ί͍ͯΔʮલఏʯΛ໰͍௚͢͜ͱ ࢀߟ : https://twitter.com/manabuueno/status/1397572020137644034

Slide 49

Slide 49 text

۩ମతͳվળํ๏ΛఏҊͨ͠ 49 • ϢʔβʔͷҙࢥΛݪಈྗʹ͠Α͏ͱߟ͑Δ • खଓ͖͸ΦϒδΣΫτԽ͢Δ • ΦϒδΣΫτࢦ޲UIʹ͢Δ • ΦϒδΣΫτ͸άϥϑߏ଄Ͱଊ͑Δ • એݴతʹ࣮૷͢Δ

Slide 50

Slide 50 text

ม͍͖͑ͯ·͠ΐ͏ʂ 50 • OOUI΍ϞʔυϨεͷߟ͑ํΛجૅʹɺ࣭ͱεϐʔυΛཱ྆ͭͭ͠ະདྷʹ ࠷େݶͷՄೳੑΛ࢒͠ଓ͚Δʮਐาతͳ΋ͷͮ͘ΓʯΛ͍͖ͯ͠·͠ΐ͏