改善React道 - Speaker Deck

Slide 1

Slide 1 text

վળ3FBDUಓ 044ϢʔβͷͨΊͷษڧձ IPTPNJDIJ

Slide 2

Slide 2 text

ࣗݾ঺հ ͱਃ͠·͢

Slide 3

Slide 3 text

ࣗݾ঺հ ॴଐݞॻɿɹɹɹɹɹɹɹɹ+4εϖγϟϦετ 5XJUUFSIPTPNJDIJ !KTIPTPNJDIJ 2JJUBIPTPNJDIJ +4͓͘ͷ΄ͦಓ ࠷ۙͷ͓࢓ࣄ ɹɾ+4ͷςΫχΧϧͳࣄฑʹؔ͢ΔΑΖͣ԰ ɹɾΠϯλʔωοτ޿ࠂ؅ཧը໘։ൃ ɹɾΠϯλʔωοτ޿ࠂ഑৴+4։ൃ ɹɹɾΞϓϦέʔγϣϯઃܭ։ൃίʔυϨϏϡʔ ɹɹɾπʔϧϥΠϒϥϦબఆಋೖ։ൃ

Slide 4

Slide 4 text

ຊ೔ͷςʔϚ ʮҰ೥௒ͷ ɹ3FBDU։ൃʹԙ͚Δ ɹࢲΊͷख๏ࢥ૝ͱ ɹվળͷྺ࢙Λࡽ͢ʯ

Slide 5

Slide 5 text

ຊ೔ͷΞδΣϯμ ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ

Slide 6

Slide 6 text

ͦ͏͍͑͹ 3FBDUͬͯྑ͍ͷʁ ͱ͍͏ํ΋͍Βͬ͠ΌΔͱ ࢥ͏ͷͰɺɺ

Slide 7

Slide 7 text

ʮઌʹݴ͓ͬͯ͘ͱʰྑ͍ʱͱࢥ͍·͢ɻ ɹ·ͱ΋ʹಈ͍ͯ͘ΕΔ͠ ɹύϑΥʔϚϯε໰୊͋Γ·ͤΜɻ ɹͨͩ3FBDUͦ͜ࢸߴʂͱ΋ࢥΘͳ͍ͷͰ ɹ޷͖΍ͭΛ࢖͏Ͱ͍͍ͱࢥ͍·͢ʂʯ

Slide 8

Slide 8 text

Slide 9

Slide 9 text

ͦͷΞϓϦέʔγϣϯʹٻΊΒΕΔ΋ͷ͕ ԿΛॏཁͱ͢Δͷ͔ʹΑͬͯ ࡞Γ΋ӨڹΛड͚Δ΋ͷͩͱࢥ͍·͢ɻ ͳͷͰɺ·ͣ͸ࢲΊͷܞΘ͍ͬͯΔ ϓϩδΣΫτͱνʔϜʹ͍͓ͭͯ࿩͢Δ͜ͱͰɺ ΠϝʔδΛڞ༗ͨ͠͏͑ͰઌʹਐΊΕ͹ͱࢥ͍ ·͢ɻ ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃

Slide 10

Slide 10 text

೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃ ʰ؅ཧը໘ʱ ɹɾҰʙೋϲ݄αΠΫϧͰͷܧଓతϦϦʔε ɹɾ͍ΘΏΔ$36%తͳػೳΛத৺ʹఏڙ

Slide 11

Slide 11 text

γεςϜߏ੒ HTML JS Web Server Web App Data base Other App Other App Other App ɾ)5.-ͱ+4͸੩తϑΝΠϧ αʔόੜ੒Ͱ͸ͳ͍ ɾը໘Ұ෦඼໺ͨΊʹ3FBDUͰ࡞ͬͨΓ͸͍ͯ͠ͳ͍ ɾ)5.-͸΄΅ۭͰը໘͸+4ϑΝΠϧͰ֓Ͷߏங ɾը໘ͱαʔόʔαΠυ͸ҟͳΔϦϙδτϦӡ༻ Repository A Repository B Web Server Ϣʔβ޲͚഑৴ Ajax௨৴ ͸సૹ ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃

Slide 12

Slide 12 text

ͬ͘͟Γͨ͠ಛ௃ ・管理すべきオブジェクトの種類が多い・１オブジェクトが持つ属性の数が多い・オブジェクト間の関連が複雑・ログインユーザのロールが多く、提供する機能の差異が多い ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃

Slide 13

Slide 13 text

೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃ ͬ͘͟Γͨ͠ಛ௃ ・管理すべきオブジェクトの種類が多い　　…画面数が多い・１オブジェクトが持つ属性の数が多い　　…フォームや一覧の制御が複雑・オブジェクト間の関連が複雑　　…オブジェクト間の整合性保証とか順序管理とかが大変・ログインユーザのロールが多く、提供する機能の差異が多い　　…ロールごとの特殊処理が増えてプログラムが荒れやすい

Slide 14

Slide 14 text

೔ࠒͷ։ൃͰ͸ ཁ͕݅ෳࡶԽ͍ͯ͘͠தɺ ੜ࢈ੑΛམͱͣ͞ʹ ܧଓ։ൃͰ͖Δ͜ͱ͕ٻΊΒΕ͍ͯ·͢ɻ ͦͷͨΊɺϝϯςφϯεੑɾ֦ுੑΛ ଛͳΘͳ͍Α͏៉ྷͳঢ়ଶΛอͭ͜ͱΛ ॏཁࢹ͍ͯ͠·͢ɻ ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃

Slide 15

Slide 15 text

Slide 16

Slide 16 text

ॳظνʔϜ ى্ͪ͛ظ ਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾجૅઃܭ։ൃ ɹɾ։ൃϧʔϧࡦఆ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ やるべきことの範囲が広いが、まだアプリもそこまで複雑ではないし、殆どのコードに目を通している状態なので、管理はし易い状態

Slide 17

Slide 17 text

ࣣϲ݄ޙͷνʔϜ ֦େظ ਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾΞʔΩςΫνϟվળ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾ৽ਓҭ੒ σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ νʔϜ௕ /&8 ɹɾػೳ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ एख /&8 ɹɾػೳ։ൃ やるべきことの範囲は狭まったがコード量や複雑化度合いは増し、人も増えたのでアンコントローラブルな部分も増えました。

Slide 18

Slide 18 text

ࠓ೥࢛݄Ҏ߱ͷνʔϜ .PSF֦େظ ʙਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾΞʔΩςΫνϟվળ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾ৽ਓҭ੒ σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ एख ɹɾػೳ։ൃ ߋʹ̎ʙ̏ਓ+0*/ͷ ༧ఆ νʔϜ௕ ɹɾػೳ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ コードの書き手がさらに増え、放ったらかしにしておくとカオス状態に成るのが目に見えています。

Slide 19

Slide 19 text

ΞϓϦέʔγϣϯෳࡶੑ͕૿͠ ਓ਺΋૿͍͓͑ͯͬͯΓ·͢ɻ ঢ়گʹԠͯ͡ɺ։ൃϙϦγʔͷߋ৽΍ ٕज़తͳςίೖΕΛ͠ͳ͍ͱ ʮΞοʯͱ͍͏ؒʹ͙ͪΌ͙ͪΌʹͳΔ ͷͰৗʹվળҙ͕ࣝඞཁͰ͢ɻ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔؀ڥߏஙΞʔΩςΫνϟʹ͍ͭͯ Ϗϧυ (VMQܦ༝Ͱ͆FCQBDLΛୟ͍͍ͯ·͕͢ɺ ࠷ۙ͸OQNTDSJQU͔ΒXFCQBDLΛୟ͘Α͏ʹҌସ͑ͭͭ͋͠Γ·͢ɻ ͦͷ΄͏͕XFCQBDLΦϓγϣϯͷᙱ͍ͱ͜Ζʹख͕ͱͲͨ͘ΊͰ͢ɻ ͍·͸HVMQXFCTFSWFS͕ศརͳͷͰ(VMQΛఫഇ͸͠ͳ͍ͱࢥ͍·͢ɻ XBUDIϏϧυ͸XFCQBDLίϚϯυΛୟ͍͍ͯ·͢ɻ ࠩ෼Ϗϧυͯ͘͠ΕΔͷͰϏϧυ׬͕ྃ଎͍Ͱ͢ɻ 止め

Slide 22

Slide 22 text

؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ 8FCαʔό HVMQpMFKT͸͜Ε͚ͩͰ ྑ͍ͱࢥͬͯ·͢ɻ HVMQXFCTFSWFSͷػೳͱͯ͠͸ ɾ8FCαʔό ɾ-JWF3FMPBE +4ߋ৽࣌ʹϒϥ΢βߋ৽ ɾϓϩΩγػೳ "KBYϦΫΤετΛผαʔόʹࡹ͚Δ Λ࢖ͬͯ·͢ɻศརʂ ϓϩΩγͷ63-पΓʹมͳڍಈ΋͋ΔΜͰ͕͢ɻ సૹޙͷ63-຤ඌʹ͕উखʹ෇͘

Slide 23

Slide 23 text

Browser HTML JS Web Server Web App Web Server Ajax௨৴సૹ (Gulp-WebServerͷϓϩΩγ) ͜ͷηοτͰϘνϘνੜ࢈ੑ͍͋͛ͯ·͢ ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ίʔυมߋ -> Webpackͷ watchϏϧυ(଎͍) LiveReloadͰࣗಈϒϥ΢βߋ৽

Slide 24

Slide 24 text

؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ΤσΟλ 8FC4UPSN "UPN $ISPNF ϓϩμΫτίʔυ͸ ओʹίϨͰॻ͍ͯ·͢ɻ ϝϯόʔશһ࢖ͬͯ·͢ɻ ແ͍ͱਏ͍Ͱ͢ɻ ϥΠϒϥϦΛ࢖ͬͨΓͨ͠ ͪΐͬͱͨ͠ίʔυεχϖοτ ࡞੒ʹ࢖ͬͯ·͢ɻ #0.ͱ͔ωΠςΟϒϝιου͸ $ISPNFίϯιʔϧ࢖ͬͯ·͢ɻ ਆิ׬ɻ

Slide 25

Slide 25 text

؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ϥΠϒϥϦ JNNVUBCMFKT MPEBTI NPNFOU DPOTUΛਅʹDPOTUͨΒ͠Ίɺ೴಺σʔ λϑϩʔͱݱ࣮Λ߹ΘͤΔͨΊͷཁʹ ͳͬͯ·͢ɻ͘Θ͘͠͸ 2JJUBʹDPOTUपΓͰهࣄॻ͍͓ͯΓ·͢ɻ ࠷ѱແͯ͘΋ੜ͖͍͚ͯΔΜͰ͕͢ ंྠͷ࠶ൃ໌Λ͠ͳͯ͘ྑ͍Α͏ ࢖͍ͬͯ·͢ɻ ࣌ؒॲཧܥ͸ ίϨͷ͓͔͛Ͱ͍ͩͿίʔυ͕ γϯϓϧʹͳ͓ͬͯΓ·͢ɻ

Slide 26

Slide 26 text

"QQϑϨʔϜϫʔΫ ຊ೔ͷ͓୊Ͱ͋ΔͷͰ౰વͰ͕͢ϑϨʔϜϫʔΫ͸3FBDUͰ͢ɻ ը໘ભҠʹ͍ͭͯ͸3FBDU3PVUFSΛ࢖͍ͬͯ·͢ɻ ͓ͦΒ͘ΈΜͳ͕࢖͍ͬͯΔమ൘ͩͱࢥ͍·͢ɻ 1$޲͚ͷը໘։ൃ͸3FBDU#PPUTUSBQ͕ෆ଍ͳ͘࢖͍΍͍͢Ͱ͢ɻ ͜ͷ6*ݏ͍ʂ͡Όͳ͚Ε͹͓͢͢ΊͰ͢ɻ ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ

Slide 27

Slide 27 text

Slide 28

Slide 28 text

͜ͷษڧձͷػձΛ௖͍ͨͷͰ ೔ࠒͷۀ຿։ൃͷܦݧΛ౿·͑ͯ ΞϓϦΛ࡞Γ·ͨ͠ɻ ͜ΕΛϕʔεʹ͜ͷઌͷ࿩Λ͍ͨ͠ͷͰɺ ܰ͘঺հ͓͖ͯ͠·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ

Slide 29

Slide 29 text

ࢲతөըؑ৆ཤྺ؅ཧ"QQ .PWJF-PHHFS ͱ΋͏͠·͢ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ

Slide 30

Slide 30 text

.PWJF-PHHFSͷϞσϧ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ .PWJF %JSFDUPS "DUPS

Slide 31

Slide 31 text

ಈػ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ ・本日の肴とするために　何かの管理画面を作りたかった・これまでの改善ノウハウを整理して　今のベストコードをまとめたかった・幾つかの新しい技術チャレンジをしたかった・去年から映画にハマりだしたので　役者や監督の顔や名前を覚えたかった・今年150本鑑賞が目標なので　今なん本なのか知りたかった

Slide 32

Slide 32 text

ۀ຿։ൃͱͷٕज़తͳ෦෼ͷҧ͍ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ ・基本はほぼ同じ思想の実践・TypeScript・Material-UIを導入　(普段はES6・Bootstrap)

Slide 33

Slide 33 text

ػೳ΋঺հ͠·͢ɻ ޙͰίʔυ΍ࢥ૝ΛޠΔͨΊʹ ߏ଄Λࣄલڞ༗͍ͨ͠ͱࢥ͍·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ

Slide 34

Slide 34 text

ػೳ঺հ ؅ཧର৅ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ ؅ཧର৅ΦϒδΣΫτ͸ ʮөըʯʮ؂ಜʯʮആ༏ʯͷ̏छͰ͢ өը͸؂ಜɺആ༏ͷଟॏ౓Ͱ ࢀরΛ࣋ͭ͜ͱ͕ग़དྷ·͢ɻ

Slide 35

Slide 35 text

ػೳ঺հ ొ࿥ฤू Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ λΠτϧΛೖΕΔͱ ͦͷจࣈྻ͔Βը૾ݕࡧ͕ग़དྷ·͢ɻ ؂ಜ΍ആ༏͸༧Ίొ࿥ͨ͠ਓ͕ ΦʔτίϯϓϦʔτͰઃఆग़དྷ·͢

Slide 36

Slide 36 text

ػೳ঺հ Ұཡ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ ΞΠςϜ݅਺Λදࣔͯ͠·͢ɻ ίϨͰࠓ೥Կຊ؍͔ͨ Θ͔Γ·͢ɻ ϑΟϧλ͸ϓϦηοτͰ༻ҙ͠·͠ ͕ͨɺࣗ༝౓ߴΊΔͱ ͦΕͳΓʹઃܭ͕ཁΓͦ͏Ͱ͢ɻ

Slide 37

Slide 37 text

ػೳ঺հ Ұཡ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ өըΞΠςϜΛΫϦοΫ͢Δͱ ඥ෇͍ͯΔ؂ಜɾആ༏͕ ύΧʔͱग़͖ͯ·͢ ԣͷϝχϡʔͰ ฤूμΠΞϩά্ཱ͕͕ͪΓ·͢

Slide 38

Slide 38 text

ػೳ঺հ Ұཡ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ ആ༏͞ΜҰཡ΋ಉ͡ϊϦͰ͢ ໊લॱʹฒ΂ͨΒ ʮͰΜͰΜʯͷଘࡏײ͕൒୺ͳ͍Ͱ͢ ग़ԋ࡞඼ͷதͰࣗ෼͕؍ͨຊ਺΍ ฏۉϨϏϡʔ఺਺͕ݟΕ·͢ɻ ύΧͬͱ΍Δͱग़ԋ࡞඼͕Ͱ·͢

Slide 39

Slide 39 text

Slide 40

Slide 40 text

ਓ਺ɺػೳ਺ڞʹ૿Ճ͍ͯ͘͠ͱ օ͕ͳΔ΂͘ಉ͡ϙϦγʔϨγϐͰ ࡞ΕΔ͜ͱ͕ݤͩͱࢥ͍·͢ɻ ΢ν͸3FBDUपΓͰͲΜͳϙϦγʔΛ ڞ༗͍ͯ͠Δͷ͔Λड़΂ͯ·͍Γ·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ

Slide 41

Slide 41 text

΢νͷ3FBDUϙϦγʔᶃ ɹ1SPQ1SPQ5ZQFT͸ͪΌΜͱఆٛ͢Δɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ

Slide 42

Slide 42 text

UZQFTDSJQUͷ .PWJF-PHHFSͷڞ௨ίϯϙʔωϯτ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ 3FBDUDSFBUF$MBTTͷ 3FBDU$PNQPOFOUͷ ʮ͓֎͔ΒؼͬͨΒखΛચ͍ͳ͍͞ʯతͳ࿩͔ͱࢥ͍·͕͢ ಉ͡໨తͷQSPQ͕ෳ਺ఆٛ͞Εͯ͠·ͬͨΓ͕΢νͰ͸ϗϯτʹ͋Γ·ͨ͠ɻ JT3FRVJSFE͚͓͚ͭͯ͹ܯࠂڍ͛ͯ͘Ε·͢͠ɺඞͣ΍ΔΑ͏ʹ͍ͯ͠·͢ɻ 1SPQ1SPQ5ZQFT͸ͪΌΜͱఆٛ͢Δɻ

Slide 43

Slide 43 text

΢νͷ3FBDUϙϦγʔᶄ ɹ4UBUF͸͔͠Δ΂͖৔ॴͰूத؅ཧɻ ɹࢠίϯϙʔωϯτ͸ ɹࣗ෼ͷͨΊͷ4UBUF͚ͩΛ࣋ͭΑ͏ʹ͢Δɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ

Slide 44

Slide 44 text

4UBUF͸͔͠Δ΂͖৔ॴͰूத؅ཧ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ ྫ͑͹ӈͷҰཡͰ͸̐ͭͷ .PWJFΠϯελϯεΛ؅ཧ ͍ͯ͠·͢ɻ

Slide 45

Slide 45 text

4UBUF͸͔͠Δ΂͖৔ॴͰूத؅ཧ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ Ұཡ͔Β։͔ΕΔฤूը໘͸΍͸Γ̍ͭͷ .PWJFΠϯελϯεΛ؅ཧ͠·͢ɻ ɹ˞ਖ਼֬ʹ͸QSPQ.PWJFͱTUBUF.PWJFͷ̎ͭͰ͕͢ɻ ίίͰɺελϩʔϯ؂ಜͷදࣔ෦͸ ࢠίϯϙʔωϯτͱͳ͍ͬͯ·͢ɻ ӈͷϚΠφεϘλϯΛΫϦοΫ͢Δͱɺ ͋ΘΕελϩʔϯ؂ಜ͸ϩοΩʔ͔Β σλον͞ΕΔͱ͍͏γφϦΦͰ͕͢ɺ ͜͜ͷίʔυΛݟͯΈ·͠ΐ͏ɻ

Slide 46

Slide 46 text

4UBUF͸͔͠Δ΂͖৔ॴͰूத؅ཧ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ ਌ଆ ࢠଆ ɾࢠଆ͸4UBUFΛ࣋ͨͣʹ਌ͷ4UBUFΛ໯͏ ɾࢠͷϘλϯ͕ΫϦοΫ͞ΕͨΒ ɹࢠ͕͍࣋ͬͯΔ஋Λ࢖ͬͯ ɹ਌͔ΒৡΓड͚ͨίʔϧόοΫΛୟ͘ɻ

Slide 47

Slide 47 text

4UBUF͸͔͠Δ΂͖৔ॴͰूத؅ཧ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ Ҏલɺ๲େɾෳࡶ͔ͭෳ਺ՕॴͰ࢖ΘΕΔ ίϯϙʔωϯτʹରͯ͠ɺ ίʔυྔগͳ͘͢Δ໨తͰʹ4UBUF΋ͨͤͨΒɺ վम͕൒୺͡Όͳ͘େมͳ্ɺ Ͳ͜ͰԿ΍ͬͯΜͷ͔Θ͚Θ͔Μͳ͘ͳͬͯ ໓஡ۤ஡େมͰͨ͠ɻɻ ࣦഊ͔Βੜ·ΕͨՈ܇Ͱ͋Γ·͢ɻ ਌ͷίʔυͷݮΒ͠ํ͸ޙड़͠·͢ɻ ࠓ͸਌ͷίʔυ͕ଟগ૿͑ͯ΋ ࢠʹঢ়ଶ࣋ͨͤΔ͜ͱʹؔͯ͠͸͍͢͝৻ॏʹ͠·͢ɻ ͱ͸ݴ͑ɺ਌ʹͱͬͯෆཁ͔ͭ ࢠ͕ඞཁͳঢ়ଶ͸ࢠ͕࣋ͭ΂͖Ͱ͠ΐ͏ɻ

Slide 48

Slide 48 text

΢νͷ3FBDUϙϦγʔᶅ ɹίϯϙʔωϯτڞ௨Խʹݻࣥ͗͢͠ͳ͍ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ

Slide 49

Slide 49 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ ίϯϙʔωϯτڞ௨Խʹݻࣥ͗͢͠ͳ͍ɻ ྫ͑͹ɺ͖ͬ͞ͷөըฤूը໘Ͱ͕͢ ӈͷΩϣϯΩϣϯͱࡾӜ༑࿨ͷίϯϙʔωϯτ͸ ͋͑ͯผ෺ʹͯ͠Έͯ·͢ɻ େ͖ͳҧ͍͸࡟আϘλϯΛ ͍࣋ͬͯΔ͔͍ͳ͍͔ͩͬͨΓ͠·͢ɻ ڞ௨Խग़དྷͦ͏ͳͷͰڞ௨Խͯ͠΋ྑ͍ͱࢥ͍·͢ɻ Ͱ΋ɺΩϣϯΩϣϯͷίϯϙʔωϯτ͸ީิ༻ͳͷͰ Ϛονϯά౓Ͱ৭ม͍͑ͨͱ͔ɺࡾӜ༑࿨ͷίϯϙʔ ωϯτ͸֬ఆ༻ͳͷͰΞΠίϯେ͖͍ͨ͘͠ͱ͔ҟͳ Δཁٻ͕߱ͬͯ͘ΔՄೳੑ͕ߟ͑ΒΕ·͢ɻ ͱͳΔͱɺͱͨΜʹίϯϙʔωϯτ಺෦ͷ෼ذ΍Φϓ γϣϯQSPQ͕૿͖͑ͯ·͢ɻ

Slide 50

Slide 50 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ ίϯϙʔωϯτڞ௨Խʹݻࣥ͗͢͠ͳ͍ɻ ؔ਺ಉ༷ɺڞ௨Խ͢Δͱ͍͏ߦҝࣗମ͸ϓϩάϥϚʹͱͬͯ ࣮ࢪ͢΂͖େ੾ͳߦҝͩͱࢥ͍·͢ɻ ͜Ε͸+4ίʔυ΋ಉ༷ͩͱࢥ͍·͕͢ɺڞ௨Խ͢ΔͱQSPQT΍෼ ذ͕૿͑ͯอकੑ͕Լ͕Γɺมߋʹର͢Δॊೈੑ͕ࣦΘΕͯ͠· ͏Մೳੑ͕͋Γ·͢ɻ ڞ௨ԽͷϝϦοτͱಉ͘͡Β͍ϦεΫΛݟਾ͑ͯɺ ݟͨ໨͸ࣅ͍ͯͯ΋ɺຊ౰ʹಉ͡໨తʹରͯ͠ಈ࡞͢Δͷ΋ͷʁ ͱ͍͏ٙ໰Λ౤͔͚͛ΔΑ͏ʹ͍ͯ͠·͢ɻ

Slide 51

Slide 51 text

΢νͷ3FBDUϙϦγʔᶆ ɹ3FBDUʹ࢓ࣄΛͤ͗͢͞ͳ͍ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ

Slide 52

Slide 52 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ 3FBDUʹ࢓ࣄΛͤ͗͢͞ͳ͍ 3FBDU͸7JFXʹؔ͢Δ͜ͱ͸Ұ௨Γग़དྷΔΑ͏ʹ ػೳఏڙ͞Ε͍ͯΔͱࢥ͍·͢ɻ ιϨ͕ނʹ৭Μͳ࢓ࣄΛͤ͞ա͗ͯ7JFXͷॲཧ͕େ มͩͬͨ࣌ظ͕͋Γ·ͨ͠ɻ ۩ମతʹ͸όϦσʔγϣϯͱ෼ذॲཧͰ͢ɻ ࣍ͷ'MVY࣮૷ͷதͷ.PEFMΫϥεʹ͍ͭͯͷ࿩Ͱ͓ ࿩Λ͠·͢ɻ

Slide 53

Slide 53 text

Slide 54

Slide 54 text

ͦΕͳΓͷن໛ͷ 3FBDUΞϓϦέʔγϣϯ։ൃʹ͍ͭͯ ޠΔʹ͸3FBDUΑΓ'MVY͕ຊؙ͔ͱࢥ͍·͢ɻ 'MVYʹ͓͚ΔϙϦγʔ͸ ੹຿ͱ4DPQFͷνʔϜ಺ڞ༗Λ ͔ͬ͠Γ΍Δ͜ͱΛେࣄʹͯ͠·͢ɻ ࠶ͼ΢νͷݱࡏͷϙϦγʔʹ͍͓ͭͯ࿩͠·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ

Slide 55

Slide 55 text

ͪͳΈʹ3FEVYͱ͔ͷ͍ΘΏΔ ʮ'MVYϑϨʔϜϫʔΫʯ ͸ͪΌΜͱ࢖͍ࠐΜͩ͜ͱ͸ແ͍ͷͰ ͋·Γৄ͘͠ͳ͍Ͱ͢ɻɻ GBDFCPPLͷ%JTQBUDIFSΛ࢖ͬͯ·͢ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ

Slide 56

Slide 56 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ·ͣɺ͓ೃછΈͷ͜ͷਤͰ͕͢

Slide 57

Slide 57 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͏ͪͰ͸.PEFMΛೖΕ͍ͯ·͢ Domain Model

Slide 58

Slide 58 text

.PEFMͷ໾ׂʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ

Slide 59

Slide 59 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ˒υϝΠϯΦϒδΣΫτ̍ݸʹؔ͢Δ"1*ఏڙ ɾίϯετϥΫλϑΝΫτϦϝιουͷఏڙ ɾΦϒδΣΫτσʔλΛਖ਼͍͠ܕͰอ࣋ ɾηολʔϝιουͷఏڙ ɾόϦσʔγϣϯϝιουͷఏڙ ɾΞΫγϣϯ޲͚ૹ৴༻ΦϒδΣΫτͷੜ੒ .PEFMͷ໾ׂʹ͍ͭͯ

Slide 60

Slide 60 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ɾ7JFXͷόϦσʔγϣϯपΓͷॲཧ͕൥ࡶͰ ɹϑΥʔϜίϯϙʔωϯτͷίʔυ͕ ɹߥΕؾຯʹͳ͍ͬͯͨͷΛղফ͔ͨͬͨ͠ɻ ɹෳ਺ͷ஋ͷ༗ޮ͔Ͳ͏͔ͳͲΛ൑அͯ͠ ɹଞͷཁૉͷEJTBCMF൑ఆ౳͢Δͷʹ ɹTIPVME$PNQPOFOU6QEBUF࢖ͬͨΓͯ͠ ɹ໘౗͍͘͞ײ͡ʹͳ͍ͬͯͨɻ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̍

Slide 61

Slide 61 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̍ ɾөըλΠτϧͷೖྗඞਢ ɾࢹௌࡁΈνΣοΫΛೖΕ͍ͯͨΒ ɹɾࢹௌ೥݄೔͕ܻͷ ɹɹ਺஋ೖྗ͕ඞਢ ɹɾϨϏϡʔͷ఺਺બ୒͕ඞਢ ɾ্ه͕ຬͨ͞Ε͍ͯΕ͹ ɹEJTBCMFEGBMTF ɾࠨه͕ຬͨ͞Ε͍ͯͳ͚Ε͹ ɹEJTBCMFEUSVF өըొ࿥ͷొ࿥Ϙλϯ͕༗ޮʹͳΔ৚݅

Slide 62

Slide 62 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̍ Ϟσϧଆͷ൑ఆϝιου܈ Viewଆ͸γϯϓϧʹͳΓ·ͨ͠

Slide 63

Slide 63 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ɾ*OQVUཁૉ͔Βड͚औΔܕ͕จࣈྻʹͳΔͷͰ ɹจࣈྻ਺஋ͷม׵Λ୭͕΍Δͷ͔ ɹ͸͖ͬΓ͔ͤͨͬͨ͞ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̎

Slide 64

Slide 64 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̎ e.target.value͸਺஋Ͱ͸ͳ͘਺ࣈͰ౉ͯ͘͠Δɻ Ͳ͔͜ΒͲ͜·Ͱ਺஋ͱͯ͠ѻ͍ Ͳ͔͜ΒͲ͜·Ͱ਺ࣈͱͯ͠ѻ͏΂͖͔ɾɾɾʁ ྫ

Slide 65

Slide 65 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̎ ModelΠϯελϯε͸ਖ਼͍͠ܕͰ஋Λ࣋ͭͱ͍͏ڞ௨ೝ͕ࣝ͋Ε͹ ஋ͷม׵͸Viewଆͷ੹຿ͱͳΔ (ۀ຿։ൃͷϞσϧଆͰ͸ܕ൑ఆ΋ೖΕͨΓ͍ͯ͠·͢)

Slide 66

Slide 66 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ɾ4UPSFͷ"1*͕ू߹ʹؔ͢Δ΋ͷͱ ɹݸʹؔ͢Δ΋ͷ͕ࠞࡏ͍ͯͨ͠ͷͰ ɹ੹຿෼୲Λ៉ྷʹ͔ͨͬͨ͠ɻ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̏

Slide 67

Slide 67 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̏ ModelಋೖޙɺStore͸ू߹Λѻ͏APIͷΈΛఏڙ(γϯϓϧʹͳΓ·ͨ͠)

Slide 68

Slide 68 text

.PEFMΠϯελϯεͷ ϥΠϑαΠΫϧʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ

Slide 69

Slide 69 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ Ұཡը໘ʹ͍ͭͯ Dispatcher͔Βड͚ͱͬͨϖΠϩʔυ͔Β Store͕ੜ੒ͯ͠Componentʹఏڙ͢Δɻ

Slide 70

Slide 70 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ฤूը໘ʹ͍ͭͯ Ұཡͷ֤ΞΠςϜ͕ϞσϧΛ̍ͭ อ͍࣋ͯ͠ΔͷͰɺɺ props.movieΛड͚औͬͯ state.movieʹೖΕ͍ͯ·͢

Slide 71

Slide 71 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͪͳΈʹϞσϧ͸JNNVUBCMFKTͷ3FDPSEΛܧঝ͍ͯͯ͠ ஋Λมߋ͢Δͱ৽͍͠ΠϯελϯεΛฦ͠·͢ɻ ͳͷͰTUBUFNPWJFΛมߋͯ͠΋ QSPQTNPWJF͕༧ظͤͣมߋ͞ΕΔ͜ͱ͸͋Γ·ͤΜɻ ฤूը໘ʹ͍ͭͯ

Slide 72

Slide 72 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ϑΥʔϜίϯϙʔωϯτͷ ίϯετϥΫλͰState޲͚ʹੜ੒ ࣍ͷೖྗͷͨΊʹొ࿥ॲཧޙʹॳظԽ ৽ن௥Ճը໘ʹ͍ͭͯ

Slide 73

Slide 73 text

࠷ޙʹ΢νͷνʔϜʹ͓͚Δ ֤ྖҬͷείʔϓΞΫηεݖ ʹ͍ͭͯ νʔϜ಺ͷܾΊࣄ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ

Slide 74

Slide 74 text

ɾ4UPSFͷσʔλ͕ߋ৽͞ΕΔͷ͸ ɹ%JTQBUDIFS͔ΒϖΠϩʔυΛड͚औ͚ͬͨ࣌ͩ ɾ֎෦޲͚ʹߋ৽"1*͸ఏڙͤͣɺ(FUUFS͚ͩΛఏڙ͢Δ ɾࣗ਎Ͱղܾग़དྷͳ͍৔߹ͷΈଞͷετΞʹ໰͍߹ΘͤͷΈՄೳ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ Domain Model

Slide 75

Slide 75 text

ɾ"DUJPOͷϝιουΛୟ͍͍͍ͯͷ͸7JFX͚ͩ ɾ"DUJPO͸֎෦Ϧιʔε΁ͷΞΫηεΛ੹຿ͱͯ͠ ɹ7JFX4UPSF.PEFM΁ͷΞΫηε͸ߦΘͳ͍ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ Domain Model

Slide 76

Slide 76 text

ɾ.PEFM͸ଞͷ.PEFMʹΞΫηεͯ͠͸͍͚ͣɺ ɹྫ֎ͱͯ͠ɺࣗ਎ͷଐੑͱͯ͠ଞͷ.PEFMΠϯελϯεͱ ɹIBTBؔ܎ʹ͋Δ͚࣌ͩΞΫηεՄೳ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ Domain Model

Slide 77

Slide 77 text

Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ Domain Model ɾ7JFX͸4UBUFͱͯ͠อ͍࣋ͯ͠Δ.PEFMͷΈΞΫηεՄೳ ɾ͢΂ͯͷྖҬʹΞΫηεΑ͍͕มߋॲཧΛ࣮ߦग़དྷΔͷ͸্هͷΈ

Slide 78

Slide 78 text

ຊ೔ͷίϯςϯπ͸Ҏ্Ͱ͍͟͝·͢ɻ ࠓͷͱ͜Ζ͸͜Μͳ಺༰Ͱ ͏·͘νʔϜ։ൃ͸ճ͓ͬͯΓ·͢ɻ ઈରͷਖ਼ղ͸ແ͍ͱࢥ͍͢͠ɺ ΢νͷνʔϜͷϧʔϧϙϦγʔ͕ ଞͷνʔϜͰػೳ͠ͳ͍෦෼΋ ଟʑ͋Δͱࢥ͍·͕͢ օ༷ͷνʔϜͷ͓೰Έղܾͷ ࢀߟɾҰॿʹͳΕΕ͹޾͍Ͱޚ࠲͍·͢ɻ