Upgrade to Pro — share decks privately, control downloads, hide ads and more …

改善React道

hosomichi
February 17, 2016
870

 改善React道

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

hosomichi

February 17, 2016
Tweet

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

    View Slide

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

    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