改善React道

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

ࣗݾ঺հ ͱਃ͠·͢

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

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

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

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

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

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

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

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

γεςϜߏ੒ 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௨৴ ͸సૹ ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ੵۃ࠾༻Λߦ͓ͬͯΓ·͢ ɹ͍ͬ͠ΐʹ+BWB4DSJQUΛॻ͖·ͤΜ͔ʁ ͍͞͝ʹ

改善React道

改善React道

More Decks by hosomichi

Featured

Transcript