改善React道

Ae3065818f7f655ddbedaf65227cbd1c?s=47 hosomichi
February 17, 2016
680

 改善React道

20160217 OSSユーザのための勉強会

Ae3065818f7f655ddbedaf65227cbd1c?s=128

hosomichi

February 17, 2016
Tweet

Transcript

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

  2. ࣗݾ঺հ ͱਃ͠·͢

  3. ࣗݾ঺հ ॴଐݞॻɿɹɹɹɹɹɹɹɹ+4εϖγϟϦετ 5XJUUFSIPTPNJDIJ !KTIPTPNJDIJ  2JJUBIPTPNJDIJ +4͓͘ͷ΄ͦಓ  ࠷ۙͷ͓࢓ࣄ ɹɾ+4ͷςΫχΧϧͳࣄฑʹؔ͢ΔΑΖͣ԰

    ɹɾΠϯλʔωοτ޿ࠂ؅ཧը໘։ൃ ɹɾΠϯλʔωοτ޿ࠂ഑৴+4։ൃ ɹɹɾΞϓϦέʔγϣϯઃܭ։ൃίʔυϨϏϡʔ ɹɹɾπʔϧϥΠϒϥϦબఆಋೖ։ൃ 
  4. ຊ೔ͷςʔϚ ʮҰ೥௒ͷ ɹ3FBDU։ൃʹԙ͚Δ ɹࢲΊͷख๏ࢥ૝ͱ ɹվળͷྺ࢙Λࡽ͢ʯ

  5. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  

    Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ
  6. ͦ͏͍͑͹ 3FBDUͬͯྑ͍ͷʁ ͱ͍͏ํ΋͍Βͬ͠ΌΔͱ ࢥ͏ͷͰɺɺ

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

  8. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔

    ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ
  9. ͦͷΞϓϦέʔγϣϯʹٻΊΒΕΔ΋ͷ͕ ԿΛॏཁͱ͢Δͷ͔ʹΑͬͯ ࡞Γ΋ӨڹΛड͚Δ΋ͷͩͱࢥ͍·͢ɻ ͳͷͰɺ·ͣ͸ࢲΊͷܞΘ͍ͬͯΔ ϓϩδΣΫτͱνʔϜʹ͍͓ͭͯ࿩͢Δ͜ͱͰɺ ΠϝʔδΛڞ༗ͨ͠͏͑ͰઌʹਐΊΕ͹ͱࢥ͍ ·͢ɻ ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃

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

  11. γεςϜߏ੒ 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௨৴ ͸సૹ ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃
  12. ͬ͘͟Γͨ͠ಛ௃ ・管理すべきオブジェクトの種類が多い ・1オブジェクトが持つ属性の数が多い ・オブジェクト間の関連が複雑 ・ログインユーザのロールが多く、提供する機能の差異が多い ೔ࠒͷۀ຿։ൃΞϓϦέʔγϣϯͷಛ௃

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

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

  15. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔

    ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ
  16. ॳظνʔϜ ى্ͪ͛ظ ਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾجૅઃܭ։ൃ ɹɾ։ൃϧʔϧࡦఆ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ

    ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ やるべきことの範囲が広いが、 まだアプリもそこまで複雑ではないし、 殆どのコードに目を通している状態 なので、管理はし易い状態
  17. ࣣϲ݄ޙͷνʔϜ ֦େظ ਓ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ Θͨ͘͠ ɹɾΞʔΩςΫνϟվળ ɹɾػೳ։ൃ ɹɾ65ઃܭ։ൃ ɹɾίʔυϨϏϡʔ ɹɾ৽ਓҭ੒

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

    σβΠφʔ ɹɾཁ݅ఆٛ ɹɾ6*ΠϝʔδϞοΫ࡞੒ ɹɾػೳ։ൃ एख ɹɾػೳ։ൃ ߋʹ̎ʙ̏ਓ+0*/ͷ ༧ఆ νʔϜ௕ ɹɾػೳ։ൃ ɹɾίʔυϨϏϡʔ ɹɾεέδϡʔϧϚω ɹɾΠϯϑϥௐ੔ ɹɾγεςϜؒ*'ઃܭ コードの書き手がさらに増え、放った らかしにしておくとカオス状態に成る のが目に見えています。
  19. ΞϓϦέʔγϣϯෳࡶੑ͕૿͠ ਓ਺΋૿͍͓͑ͯͬͯΓ·͢ɻ ঢ়گʹԠͯ͡ɺ։ൃϙϦγʔͷߋ৽΍ ٕज़తͳςίೖΕΛ͠ͳ͍ͱ ʮΞοʯͱ͍͏ؒʹ͙ͪΌ͙ͪΌʹͳΔ ͷͰৗʹվળҙ͕ࣝඞཁͰ͢ɻ ೔ࠒͷۀ຿։ൃνʔϜͷঢ়گ

  20. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔

    ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ
  21. Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔؀ڥߏஙΞʔΩςΫνϟʹ͍ͭͯ Ϗϧυ (VMQܦ༝Ͱ͆FCQBDLΛୟ͍͍ͯ·͕͢ɺ ࠷ۙ͸OQNTDSJQU͔ΒXFCQBDLΛୟ͘Α͏ʹҌସ͑ͭͭ͋͠Γ·͢ɻ ͦͷ΄͏͕XFCQBDLΦϓγϣϯͷᙱ͍ͱ͜Ζʹख͕ͱͲͨ͘ΊͰ͢ɻ ͍·͸HVMQXFCTFSWFS͕ศརͳͷͰ(VMQΛఫഇ͸͠ͳ͍ͱࢥ͍·͢ɻ XBUDIϏϧυ͸XFCQBDLίϚϯυΛୟ͍͍ͯ·͢ɻ ࠩ෼Ϗϧυͯ͘͠ΕΔͷͰϏϧυ׬͕ྃ଎͍Ͱ͢ɻ 止め

  22. ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ 8FCαʔό HVMQpMFKT͸͜Ε͚ͩͰ ྑ͍ͱࢥͬͯ·͢ɻ HVMQXFCTFSWFSͷػೳͱͯ͠͸ ɾ8FCαʔό ɾ-JWF3FMPBE +4ߋ৽࣌ʹϒϥ΢βߋ৽  ɾϓϩΩγػೳ

    "KBYϦΫΤετΛผαʔόʹࡹ͚Δ  Λ࢖ͬͯ·͢ɻศརʂ  ϓϩΩγͷ63-पΓʹมͳڍಈ΋͋ΔΜͰ͕͢ɻ సૹޙͷ63-຤ඌʹ͕উखʹ෇͘ 
  23. Browser HTML JS Web Server Web App Web Server Ajax௨৴సૹ

    (Gulp-WebServerͷϓϩΩγ) ͜ͷηοτͰϘνϘνੜ࢈ੑ͍͋͛ͯ·͢ ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ίʔυมߋ -> Webpackͷ watchϏϧυ(଎͍) LiveReloadͰࣗಈϒϥ΢βߋ৽
  24. ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ΤσΟλ 8FC4UPSN "UPN $ISPNF ϓϩμΫτίʔυ͸ ओʹίϨͰॻ͍ͯ·͢ɻ ϝϯόʔશһ࢖ͬͯ·͢ɻ ແ͍ͱਏ͍Ͱ͢ɻ ϥΠϒϥϦΛ࢖ͬͨΓͨ͠

    ͪΐͬͱͨ͠ίʔυεχϖοτ ࡞੒ʹ࢖ͬͯ·͢ɻ #0.ͱ͔ωΠςΟϒϝιου͸ $ISPNFίϯιʔϧ࢖ͬͯ·͢ɻ ਆิ׬ɻ
  25. ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ ϥΠϒϥϦ JNNVUBCMFKT MPEBTI NPNFOU DPOTUΛਅʹDPOTUͨΒ͠Ίɺ೴಺σʔ λϑϩʔͱݱ࣮Λ߹ΘͤΔͨΊͷཁʹ ͳͬͯ·͢ɻ͘Θ͘͠͸ 2JJUBʹDPOTUपΓͰهࣄॻ͍͓ͯΓ·͢ɻ ࠷ѱແͯ͘΋ੜ͖͍͚ͯΔΜͰ͕͢

    ंྠͷ࠶ൃ໌Λ͠ͳͯ͘ྑ͍Α͏ ࢖͍ͬͯ·͢ɻ ࣌ؒॲཧܥ͸ ίϨͷ͓͔͛Ͱ͍ͩͿίʔυ͕ γϯϓϧʹͳ͓ͬͯΓ·͢ɻ
  26. "QQϑϨʔϜϫʔΫ ຊ೔ͷ͓୊Ͱ͋ΔͷͰ౰વͰ͕͢ϑϨʔϜϫʔΫ͸3FBDUͰ͢ɻ  ը໘ભҠʹ͍ͭͯ͸3FBDU3PVUFSΛ࢖͍ͬͯ·͢ɻ ͓ͦΒ͘ΈΜͳ͕࢖͍ͬͯΔమ൘ͩͱࢥ͍·͢ɻ  1$޲͚ͷը໘։ൃ͸3FBDU#PPUTUSBQ͕ෆ଍ͳ͘࢖͍΍͍͢Ͱ͢ɻ ͜ͷ6*ݏ͍ʂ͡Όͳ͚Ε͹͓͢͢ΊͰ͢ɻ ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ

  27. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔

    ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ
  28. ͜ͷษڧձͷػձΛ௖͍ͨͷͰ ೔ࠒͷۀ຿։ൃͷܦݧΛ౿·͑ͯ ΞϓϦΛ࡞Γ·ͨ͠ɻ ͜ΕΛϕʔεʹ͜ͷઌͷ࿩Λ͍ͨ͠ͷͰɺ ܰ͘঺հ͓͖ͯ͠·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔ຊ೔޲͚։ൃ෺ͷ঺հ

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

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

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

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

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

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

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

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

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

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

  39. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔

    ɹຊ೔޲͚։ൃ෺ͷ঺հ ɹ3FBDUपΓͷ࣮૷ʹ͍ͭͯ ɹ'MVYपΓͷ࣮૷ʹ͍ͭͯ
  40. ਓ਺ɺػೳ਺ڞʹ૿Ճ͍ͯ͘͠ͱ օ͕ͳΔ΂͘ಉ͡ϙϦγʔϨγϐͰ ࡞ΕΔ͜ͱ͕ݤͩͱࢥ͍·͢ɻ ΢ν͸3FBDUपΓͰͲΜͳϙϦγʔΛ ڞ༗͍ͯ͠Δͷ͔Λड़΂ͯ·͍Γ·͢ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ

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

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

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

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

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

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

  47. 4UBUF͸͔͠Δ΂͖৔ॴͰूத؅ཧ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ Ҏલɺ๲େɾෳࡶ͔ͭෳ਺ՕॴͰ࢖ΘΕΔ ίϯϙʔωϯτʹରͯ͠ɺ ίʔυྔগͳ͘͢Δ໨తͰʹ4UBUF΋ͨͤͨΒɺ վम͕൒୺͡Όͳ͘େมͳ্ɺ Ͳ͜ͰԿ΍ͬͯΜͷ͔Θ͚Θ͔Μͳ͘ͳͬͯ ໓஡ۤ஡େมͰͨ͠ɻɻ ࣦഊ͔Βੜ·ΕͨՈ܇Ͱ͋Γ·͢ɻ ਌ͷίʔυͷݮΒ͠ํ͸ޙड़͠·͢ɻ

     ࠓ͸਌ͷίʔυ͕ଟগ૿͑ͯ΋ ࢠʹঢ়ଶ࣋ͨͤΔ͜ͱʹؔͯ͠͸͍͢͝৻ॏʹ͠·͢ɻ ͱ͸ݴ͑ɺ਌ʹͱͬͯෆཁ͔ͭ ࢠ͕ඞཁͳঢ়ଶ͸ࢠ͕࣋ͭ΂͖Ͱ͠ΐ͏ɻ
  48. ΢νͷ3FBDUϙϦγʔᶅ ɹίϯϙʔωϯτڞ௨Խʹݻࣥ͗͢͠ͳ͍ɻ Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ

  49. Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔3FBDUपΓͷ࣮૷ʹ͍ͭͯ ίϯϙʔωϯτڞ௨Խʹݻࣥ͗͢͠ͳ͍ɻ ྫ͑͹ɺ͖ͬ͞ͷөըฤूը໘Ͱ͕͢ ӈͷΩϣϯΩϣϯͱࡾӜ༑࿨ͷίϯϙʔωϯτ͸ ͋͑ͯผ෺ʹͯ͠Έͯ·͢ɻ େ͖ͳҧ͍͸࡟আϘλϯΛ ͍࣋ͬͯΔ͔͍ͳ͍͔ͩͬͨΓ͠·͢ɻ ڞ௨Խग़དྷͦ͏ͳͷͰڞ௨Խͯ͠΋ྑ͍ͱࢥ͍·͢ɻ Ͱ΋ɺΩϣϯΩϣϯͷίϯϙʔωϯτ͸ީิ༻ͳͷͰ Ϛονϯά౓Ͱ৭ม͍͑ͨͱ͔ɺࡾӜ༑࿨ͷίϯϙʔ

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

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

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

  53. ຊ೔ͷΞδΣϯμ   ೔ࠒͷۀ຿։ൃ ɹΞϓϦέʔγϣϯͷಛ௃ ɹνʔϜͷঢ়گ  ؀ڥߏஙϥΠϒϥϦʹ͍ͭͯ  Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔

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

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

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

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

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

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

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

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

    ɹEJTBCMFEUSVF өըొ࿥ͷొ࿥Ϙλϯ͕༗ޮʹͳΔ৚݅
  62. Ͳ͏ߟ͑ͯ࡞͍ͬͯΔ͔'MVYपΓͷ࣮૷ʹ͍ͭͯ ͦ΋ͦ΋ͷ.PEFMಋೖͷཧ༝̍ Ϟσϧଆͷ൑ఆϝιου܈ Viewଆ͸γϯϓϧʹͳΓ·ͨ͠

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  79. None
  80. None
  81. ੵۃ࠾༻Λߦ͓ͬͯΓ·͢ ɹ͍ͬ͠ΐʹ+BWB4DSJQUΛॻ͖·ͤΜ͔ʁ ͍͞͝ʹ

  82. None