Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
改善React道
Search
hosomichi
February 17, 2016
3
1k
改善React道
20160217 OSSユーザのための勉強会
hosomichi
February 17, 2016
Tweet
Share
More Decks by hosomichi
See All by hosomichi
React_Nativeの_ルーティングばなし.pdf
hosomichi
0
2.2k
Firebaseをフル活用したサーバーエンジニアレス新規事業プロトタイピング
hosomichi
1
2.4k
Elm is a good teacher
hosomichi
2
1.3k
ReactComponentのコンストラクタを追いかけて
hosomichi
8
3.6k
Featured
See All Featured
Designing for Performance
lara
604
68k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
The Invisible Side of Design
smashingmag
297
50k
Embracing the Ebb and Flow
colly
84
4.4k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
A Philosophy of Restraint
colly
203
16k
Scaling GitHub
holman
458
140k
Automating Front-end Workflow
addyosmani
1365
200k
A better future with KSS
kneath
238
17k
Designing for humans not robots
tammielis
249
25k
Transcript
վળ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௨৴ సૹ ࠒͷۀ։ൃΞϓϦέʔγϣϯͷಛ
ͬ͘͟Γͨ͠ಛ ・管理すべきオブジェクトの種類が多い ・1オブジェクトが持つ属性の数が多い ・オブジェクト間の関連が複雑 ・ログインユーザのロールが多く、提供する機能の差異が多い ࠒͷۀ։ൃΞϓϦέʔγϣϯͷಛ
ࠒͷۀ։ൃΞϓϦέʔγϣϯͷಛ ͬ͘͟Γͨ͠ಛ ・管理すべきオブジェクトの種類が多い …画面数が多い ・1オブジェクトが持つ属性の数が多い …フォームや一覧の制御が複雑 ・オブジェクト間の関連が複雑 …オブジェクト間の整合性保証とか順序管理とかが大変 ・ログインユーザのロールが多く、提供する機能の差異が多い …ロールごとの特殊処理が増えてプログラムが荒れやすい
ࠒͷ։ൃͰ ཁ͕݅ෳࡶԽ͍ͯ͘͠தɺ ੜ࢈ੑΛམͱͣ͞ʹ ܧଓ։ൃͰ͖Δ͜ͱ͕ٻΊΒΕ͍ͯ·͢ɻ ͦͷͨΊɺϝϯςφϯεੑɾ֦ுੑΛ ଛͳΘͳ͍Α͏៉ྷͳঢ়ଶΛอͭ͜ͱΛ ॏཁࢹ͍ͯ͠·͢ɻ ࠒͷۀ։ൃΞϓϦέʔγϣϯͷಛ
ຊͷΞδΣϯμ ࠒͷۀ։ൃ ɹΞϓϦέʔγϣϯͷಛ ɹνʔϜͷঢ়گ ڥߏஙϥΠϒϥϦʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔
ɹຊ͚։ൃͷհ ɹ3FBDUपΓͷ࣮ʹ͍ͭͯ ɹ'MVYपΓͷ࣮ʹ͍ͭͯ
ॳظνʔϜ ى্ͪ͛ظ ਓ ࠒͷۀ։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾجૅઃܭ։ൃ ɹɾ։ൃϧʔϧࡦఆ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ
ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ ɹɾγεςϜؒ*'ઃܭ σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞ ɹɾػೳ։ൃ やるべきことの範囲が広いが、 まだアプリもそこまで複雑ではないし、 殆どのコードに目を通している状態 なので、管理はし易い状態
ࣣϲ݄ޙͷνʔϜ ֦େظ ਓ ࠒͷۀ։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾΞʔΩςΫνϟվળ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾ৽ਓҭ
σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞ ɹɾػೳ։ൃ νʔϜ /&8 ɹɾػೳ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ ɹɾγεςϜؒ*'ઃܭ एख /&8 ɹɾػೳ։ൃ やるべきことの範囲は狭まったが コード量や複雑化度合いは増し、 人も増えたのでアンコントローラブル な部分も増えました。
ࠓ࢛݄Ҏ߱ͷνʔϜ .PSF֦େظ ʙਓ ࠒͷۀ։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾΞʔΩςΫνϟվળ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾ৽ਓҭ
σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞ ɹɾػೳ։ൃ एख ɹɾػೳ։ൃ ߋʹ̎ʙ̏ਓ+0*/ͷ ༧ఆ νʔϜ ɹɾػೳ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ ɹɾγεςϜؒ*'ઃܭ コードの書き手がさらに増え、放った らかしにしておくとカオス状態に成る のが目に見えています。
ΞϓϦέʔγϣϯෳࡶੑ͕૿͠ ਓ૿͍͓͑ͯͬͯΓ·͢ɻ ঢ়گʹԠͯ͡ɺ։ൃϙϦγʔͷߋ৽ ٕज़తͳςίೖΕΛ͠ͳ͍ͱ ʮΞοʯͱ͍͏ؒʹ͙ͪΌ͙ͪΌʹͳΔ ͷͰৗʹվળҙ͕ࣝඞཁͰ͢ɻ ࠒͷۀ։ൃνʔϜͷঢ়گ
ຊͷΞδΣϯμ ࠒͷۀ։ൃ ɹΞϓϦέʔγϣϯͷಛ ɹνʔϜͷঢ়گ ڥߏஙϥΠϒϥϦʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔
ɹຊ͚։ൃͷհ ɹ3FBDUपΓͷ࣮ʹ͍ͭͯ ɹ'MVYपΓͷ࣮ʹ͍ͭͯ
Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ڥߏஙΞʔΩςΫνϟʹ͍ͭͯ Ϗϧυ (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*ݏ͍ʂ͡Όͳ͚Ε͓͢͢ΊͰ͢ɻ ڥߏஙϥΠϒϥϦʹ͍ͭͯ
ຊͷΞδΣϯμ ࠒͷۀ։ൃ ɹΞϓϦέʔγϣϯͷಛ ɹνʔϜͷঢ়گ ڥߏஙϥΠϒϥϦʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔
ɹຊ͚։ൃͷհ ɹ3FBDUपΓͷ࣮ʹ͍ͭͯ ɹ'MVYपΓͷ࣮ʹ͍ͭͯ
͜ͷษڧձͷػձΛ͍ͨͷͰ ࠒͷۀ։ൃͷܦݧΛ౿·͑ͯ ΞϓϦΛ࡞Γ·ͨ͠ɻ ͜ΕΛϕʔεʹ͜ͷઌͷΛ͍ͨ͠ͷͰɺ ܰ͘հ͓͖ͯ͠·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ
ࢲతөըؑཤྺཧ"QQ .PWJF-PHHFS ͱ͏͠·͢ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ
.PWJF-PHHFSͷϞσϧ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ .PWJF %JSFDUPS "DUPS
ಈػ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ ・本日の肴とするために 何かの管理画面を作りたかった ・これまでの改善ノウハウを整理して 今のベストコードをまとめたかった ・幾つかの新しい技術チャレンジをしたかった ・去年から映画にハマりだしたので 役者や監督の顔や名前を覚えたかった ・今年150本鑑賞が目標なので
今なん本なのか知りたかった
ۀ։ൃͱͷٕज़తͳ෦ͷҧ͍ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ ・基本はほぼ同じ思想の実践 ・TypeScript・Material-UIを導入 (普段はES6・Bootstrap)
ػೳհ͠·͢ɻ ޙͰίʔυࢥΛޠΔͨΊʹ ߏΛࣄલڞ༗͍ͨ͠ͱࢥ͍·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ
ػೳհ ཧର Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ ཧରΦϒδΣΫτ ʮөըʯʮಜʯʮആ༏ʯͷ̏छͰ͢ өըಜɺആ༏ͷଟॏͰ ࢀরΛ࣋ͭ͜ͱ͕ग़དྷ·͢ɻ
ػೳհ ొฤू Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ λΠτϧΛೖΕΔͱ ͦͷจࣈྻ͔Βը૾ݕࡧ͕ग़དྷ·͢ɻ ಜആ༏༧Ίొͨ͠ਓ͕ ΦʔτίϯϓϦʔτͰઃఆग़དྷ·͢
ػೳհ Ұཡ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ ΞΠςϜ݅Λදࣔͯ͠·͢ɻ ίϨͰࠓԿຊ؍͔ͨ Θ͔Γ·͢ɻ ϑΟϧλϓϦηοτͰ༻ҙ͠·͠ ͕ͨɺࣗ༝ߴΊΔͱ ͦΕͳΓʹઃܭ͕ཁΓͦ͏Ͱ͢ɻ
ػೳհ Ұཡ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ өըΞΠςϜΛΫϦοΫ͢Δͱ ඥ͍ͯΔಜɾആ༏͕ ύΧʔͱग़͖ͯ·͢ ԣͷϝχϡʔͰ ฤूμΠΞϩά্ཱ͕͕ͪΓ·͢
ػೳհ Ұཡ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ͚։ൃͷհ ആ༏͞ΜҰཡಉ͡ϊϦͰ͢ ໊લॱʹฒͨΒ ʮͰΜͰΜʯͷଘࡏײ͕ͳ͍Ͱ͢ ग़ԋ࡞ͷதͰ͕ࣗ؍ͨຊ ฏۉϨϏϡʔ͕ݟΕ·͢ɻ ύΧͬͱΔͱग़ԋ࡞͕Ͱ·͢
ຊͷΞδΣϯμ ࠒͷۀ։ൃ ɹΞϓϦέʔγϣϯͷಛ ɹνʔϜͷঢ়گ ڥߏஙϥΠϒϥϦʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔
ɹຊ͚։ൃͷհ ɹ3FBDUपΓͷ࣮ʹ͍ͭͯ ɹ'MVYपΓͷ࣮ʹ͍ͭͯ
ਓɺػೳڞʹ૿Ճ͍ͯ͘͠ͱ օ͕ͳΔ͘ಉ͡ϙϦγʔϨγϐͰ ࡞ΕΔ͜ͱ͕ݤͩͱࢥ͍·͢ɻ ν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ʹࣄΛͤ͗͢͞ͳ͍ 3FBDU7JFXʹؔ͢Δ͜ͱҰ௨Γग़དྷΔΑ͏ʹ ػೳఏڙ͞Ε͍ͯΔͱࢥ͍·͢ɻ ιϨ͕ނʹ৭ΜͳࣄΛͤ͞ա͗ͯ7JFXͷॲཧ͕େ มͩͬͨ࣌ظ͕͋Γ·ͨ͠ɻ ۩ମతʹόϦσʔγϣϯͱذॲཧͰ͢ɻ ࣍ͷ'MVY࣮ͷதͷ.PEFMΫϥεʹ͍ͭͯͷͰ͓ Λ͠·͢ɻ
ຊͷΞδΣϯμ ࠒͷۀ։ൃ ɹΞϓϦέʔγϣϯͷಛ ɹνʔϜͷঢ়گ ڥߏஙϥΠϒϥϦʹ͍ͭͯ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔
ɹຊ͚։ൃͷհ ɹ3FBDUपΓͷ࣮ʹ͍ͭͯ ɹ'MVYपΓͷ࣮ʹ͍ͭͯ
ͦΕͳΓͷنͷ 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 ɾ7JFX4UBUFͱͯ͠อ͍࣋ͯ͠Δ.PEFMͷΈΞΫηεՄೳ ɾͯ͢ͷྖҬʹΞΫηεΑ͍͕มߋॲཧΛ࣮ߦग़དྷΔͷ্هͷΈ
ຊͷίϯςϯπҎ্Ͱ͍͟͝·͢ɻ ࠓͷͱ͜Ζ͜Μͳ༰Ͱ ͏·͘νʔϜ։ൃճ͓ͬͯΓ·͢ɻ ઈରͷਖ਼ղແ͍ͱࢥ͍͢͠ɺ νͷνʔϜͷϧʔϧϙϦγʔ͕ ଞͷνʔϜͰػೳ͠ͳ͍෦ ଟʑ͋Δͱࢥ͍·͕͢ օ༷ͷνʔϜͷ͓Έղܾͷ ࢀߟɾҰॿʹͳΕΕ͍Ͱޚ࠲͍·͢ɻ
None
None
ੵۃ࠾༻Λߦ͓ͬͯΓ·͢ ɹ͍ͬ͠ΐʹ+BWB4DSJQUΛॻ͖·ͤΜ͔ʁ ͍͞͝ʹ
None