改善React道

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

Transcript

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

   View Slide

2. ࣗݾ঺հ
   ͱਃ͠·͢
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. View Slide

80. View Slide

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

    View Slide

82. View Slide