プロトタイプ編 Hatena Engineer Seminar #19

Transcript

1. Hatena Engineer Seminar #19
   id:
   ϓϩτλΠϓฤ
   ΧΫϤϜͷ೥Λݟਾٕ͑ͨज़
   2022.03.30
   k-murakami0609
   

   View Slide

2. ࣗݾ঺հ
   ID: k-murakami060
   9
   
   ͸ͯͳʹೖࣾޙɺϊϕϧνʔϜ
   Ͱຐ๏ͷiΒΜͲͷ։ൃΛ୲
   ౰ɻڈ೥͔ΒΧΫϤϜͷ։ൃʹ
   ܞΘ͍ͬͯΔɻ
   

   View Slide

3. ηογϣϯͷ঺հ
   ΧΫϤϜͰ͸ Xslate + jQuery ͔Β React ʹҠߦ͢ΔϓϩδΣΫτΛਐΊ͍ͯ
   ·͢ɻ͜ΕΛਐΊΔʹ͋ͨͬͯɺݕ౼ॳظʹϓϩτλΠϓΛ࡞Δͱ͍͏બ୒
   Λ͠·ͨ͠ɻ(Ұ೥΄Ͳલͷ࿩
   )
   
   ͜ͷηογϣϯͰ͸ɺϓϩτλΠϓΛߦ͏ʹࢸͬͨܦҢ΍ૂ͍ɺ·ͨޙ൒Ͱ
   ͸શମͷਐΊํͳͲΛ঺հͰ͖ͨΒͱࢥ͍·͢ɻ
   
   
   ิ଍) Xslate͸ Perl ͷςϯϓϨʔτΤϯδϯ
   

   View Slide

4. ΧΫϤϜ͸ࠓޙ5೥10೥ͱܧଓͯ͠ӡ༻͍ͯ͘͜͠ͱΛߟ͑Δඞཁ͕͋Δ
   
   
   ౰໘͸ϑϧϚΠάϨʔγϣϯ͸ܭը͞Ε͓ͯΒͣɺݱঢ়ͷαʔϏεΛܧଓͯ͠։
   ൃɾӡ༻͍ͯ͘͠ܗΛͱ͍ͬͯ͘
   
   
   ͜Εʹର͢ΔΞϓϩʔνͱͯ͠ɺΠϯϑϥɺΞϓϦέʔγϣϯ྆໘Ͱͦͷ࣌ʑ
   ʹଈͨ͠ߏ੒ʹগͣͭ͠੾Γସ͍͑ͯ͘
   ͳͥ React ҠߦΛਐΊ͍͔ͨ
   React ҠߦͷΠϯηϓγϣϯσοΩʹ͋ΔʮզΘΕ͸ͳͥ͜͜ʹ͍Δͷ͔(Why1)ʯ͕୺తͰΘ͔
   Γ΍͍͢
   

   View Slide

5. ● Perl ୤ग़ΛਐΊͯߦ͖͍ͨ
   
   
   ○ ͦͷ଍͕͔Γͱͯ͠ɺ·ͣϑϩϯτΤϯυͱόοΫΤϯυ
   ͷ෼཭Λߦ͍͍ͨͱ͍͏࿩ʹͳͬͨ
   
   
   ● ຐ๏ͷiΒΜͲͱΞʔΩςΫνϟΛἧ͍͑ͨ
   
   
   ● React ͷ΄͏͕ੜ࢈ੑ͕ѹ౗తʹߴ͍
   
   
   ○ ຐ๏ͷiΒΜͲͷܦݧ͔ΒɺΤϯδχΞɾσβΠφʔڞʹͦ
   ͏͍ͬͨ࿩ʹͳͬͨ
   ͳͥ React Ҡߦ͕બ͹Εͨͷ͔
   

   View Slide

6. ● ϓϩτλΠϐϯάΛͯ͠ΧΫϤϜͷͱ͋ΔϖʔδΛ৽͍͠Ξʔ
   ΩςΫνϟͰ࣮૷ͯ͠ΈΔ
   
   
   ● ظؒ͸1ϲ݄ఔ౓
   
   
   ○ ظؒΛ̎ͭʹ෼͚ͯɺผͷΞʔΩςΫνϟΛݕূͨ͠
   Ͳ͏΍ͬͯ React Ҡߦͷݕ౼ΛਐΊ͔ͨ
   

   View Slide

7. ● ͕࣌ؒແݶͩͱແݶʹࢼ͍ͨ͜͠ͱ͕ग़ͯ͘ΔͷͰͦͷରࡦ
   
   
   ○ ҠߦͷաఔͰ΋΍Γͨ͘ͳͬͯɺείʔϓ͕ແବʹ޿͘ͳΔ
   ͜ͱ΋๷͛ͨ
   
   
   ● ݱ࣮໰୊ͱͯ͠͸ɺαϙʔλʔζύεϙʔτͱ͍͏େ͖ͳػೳ
   ͷϦϦʔε͕͋ΔͨΊɺ͜ͷظؒΛ௒ա͗͢͠ΔͱReact΁ͷҠ
   ߦࣗମΛҰ୴ఘΊΔඞཁ͕͋ͬͨ
   ϓϩτλΠϓͷظؒΛ1ϲ݄ͱઃఆͨ͠ཧ༝
   

   View Slide

8. ϓϩτλΠϓͷૂ͍
   

   View Slide

9. ϦΞʔΩςΫνϟʹ͓͚Δࣦഊͱ͸
   ● ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γશ෦
   ΍Γ௚͠ʹͳΔ
   
   
   ● ։ൃ଎౓Λ্͛ΒΕͯͳ͍
   
   
   ○ ٕज़બఆͷے͕ྑ͘ͳ͍/ա৒ʹ৽ٕज़Λ٧ΊࠐΈ͗͢Δ
   
   
   ○ Ҡߦ్͕தͰࢭ·ͬͯ͠·͍ɺ৽چ͕ࠞͬͨ͟ঢ়ଶͰ։ൃ/
   ӡ༻Λଓ͚ͳͯ͘͸͍͚ͳ͍
   

   View Slide

10. ϓϩτλΠϓΛ࡞ΔϝϦοτ
    ● ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ
    
    
    ● ص্͚ͩߟ͍͑ͯΔ͚ͩΑΓɺݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕
    Ͱ͖Δ
    
    
    ● ج൫࣮૷࣌ʹྲྀ༻Ͱ͖Δ΋ͷΛগͳ͍޻਺Ͱ༻ҙͰ͖Δ
    

    View Slide

11. ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ
    ● طଘϓϩμΫτʹಋೖ͢Δ৔߹ʹ͸ɺڭՊॻͲ͓Γʹߦ͔ͳ͍
    ෦෼͕͋Δ
    
    
    ● ϓϩτλΠϐϯάΛ௨ͯ͡໢ཏతͳݕ౼ࣄ߲ҰཡΛҭͯΒΕΔ
    

    View Slide

12. ݕ౼಺༰ͷਫ਼౓Λ͋͛Δ͜ͱ͕Ͱ͖Δ
    ● ࣮ࡍʹಈ͔ͯ͠ΈͯΘ͔Δ͜ͱ͕͋Δ
    
    
    ● ࣮૷ΛνʔϜϝϯόʔʹΈͯ΋Β͏͜ͱͰҙݟΛ΋Β͍΍͘͢
    ͳΔ
    

    View Slide

13. ج൫࣮૷࣌ʹྲྀ༻Ͱ͖Δ΋ͷΛগͳ͍޻਺Ͱ༻ҙͰ͖Δ
    ● ج൫࣮૷࣌͸ଟਓ਺Ͱ΍ͬͯ΋ίϯϑϦΫτͯ͠࡞ۀ͕εέʔ
    ϧ͠ͳ͍͜ͱ͕Α͋͘Δ
    

    View Slide

14. ● ϓϩτλΠϓ͕ޮՌతͰ͸ͳ͍͔ͱࢥ͍ͬͯΔɻ
    
    
    ○ ҠߦΛਐΊ͍ͯ͘தͰɺํ਑͕ؒҧ͍ͬͯͨ͜ͱ͕Θ͔Γ
    શ෦΍Γ௚͠ʹͳΔ
    
    
    ■ -> ૣΊʹ஍ཕΛ౿ΜͰ͓͚Δ
    
    
    ○ ։ൃ଎౓Λ্͛ΒΕͯͳ͍
    
    
    ■ -> ϓϩτλΠϓΛ͖ͨͨ୆ͱ͢Δ͜ͱͰɺνʔϜϝϯ
    όʔͷҙݟΛฉ͍ͯόϥϯεײ֮Λ͔֬ΊΔ͜ͱ͕Ͱ͖
    Δ
    ϦΞʔΩςΫνϟʹ͓͚Δࣦഊ΁ͷରԠํ๏
    

    View Slide

15. ϓϩτλΠϓͷਐΊํ
    

    View Slide

16. ݕ౼͢΂͖ҰཡΛ༻ҙͯ͠ɺ༏ઌॱҐ͕ܾ·Ε͹ྑ͍ɻ
    
    
    ͕ɺൣғ͕޿͍ͨΊ໢ཏతͳݕ౼ࣄ߲ҰཡΛ༻ҙ͢Δͷ͕೉͘͠ɺ
    ࢼ͍ͨ͜͠ͱ΋ଟ͍ͨΊ༏ઌॱҐΛܾΊΔ΋ͷ೉͍͠ɻ
    ԿΛݕূ͢΂͖͔ߟ͑Δ
    

    View Slide

17. ● ͍͖ͳΓ໢ཏతʹλεΫΛग़͢ͷ͸೉͔ͬͨ͠ͷͰɺॳख͸Ϙ
    τϜΞοϓͰߟ͑Δ͜ͱʹͨ͠
    
    
    ○ ݒ೦఺ΛͱΓ্͋͑ͣ͛·ͬͨ͘
    
    
    ■ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ
    ■ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ
    ■ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ
    ■ …
    ݕ౼ࣄ߲Ұཡͷ࡞Γํ
    

    View Slide

18. ● ͦΕΛݩʹδϟϯϧͰάϧʔϐϯάͯ͠ɺ͞Βʹ࿙Ε͍ͯΔ΋
    ͷ͕ͳ͍͔Λߟ͑ͯ௥Ճ͍ͯͬͨ͠ɻ
    
    
    ● ·ͨϓϩτλΠϓΛ࡞͍ͬͯΔ͏ͪʹݕ౼͍ͨ͠΋ͷ͕ग़͖ͯ
    ͨ৔߹ʹ͸ɺͲΜͲΜ͜ͷҰཡʹ௥Ճͯ͠ߦͬͨ
    ݕ౼ࣄ߲Ұཡͷ࡞Γํ2
    

    View Slide

19. ༏ઌॱҐͷߟ͑ํ
    ● ํ਑͕มΘͬͨ࣌ͷӨڹൣғ͕େ͖͍΋ͷɺ࡞ͬͯΈͳ͍ͱΑ
    ͘Θ͔Βͳ͍΋ͷΛϐοΫΞοϓͨ͠
    
    
    ○ ࣦഊ͠ͳ͍͜ͱΛ༏ઌ͢Δํ਑
    
    
    ● ·ͨɺݕূ͍ͯ͘͠͏ͪʹɺΘ͔Δঢ়ଶʹͳͬͨΒਂ௥͍͸͠
    ͳ͔ͬͨ
    
    
    ○ ϓϩτλΠϓͰ࡞Γ੾Δඞཁ͸ͳ͍ͷͰ
    

    View Slide

20. ● ظؒΛ2ͭʹ෼͚ͯɺϓϩτλΠϓΛ2छྨ࡞ͬͨ
    
    
    ○ Next.js + GraphQL Λ࢖͏ύλʔϯ
    
    
    ○ XslateͱReact͕ڞଘ͢Δύλʔϯ
    ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ
    

    View Slide

21. ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ
    

    View Slide

22. ● ྆ऀͷλεΫ؅ཧతͳҧ͍͸࡞ۀͷείʔϓ
    
    
    ○ τϨʔυΦϑεϥΠμʔͰɺσϦόϦʔ͕Ұ൪༏ઌ౓͕ߴ
    ͘ɺ඼࣭΋མͱͨ͘͠ͳ͍͕ɺείʔϓ͸খͯ͘͞͠ྑ͍ͱ
    ͍͏࿩͕͋ͬͨ
    
    
    ○ σϦόϦʔ͕༏ઌ͞Εͨཧ༝͸ɺ൒೥ޙ͘Β͍ʹαϙʔλʔ
    ζύεϙʔτͱ͍͏େ͖ΊͷػೳϦϦʔε͕ܭը͞Ε͍ͯͨ
    ͨΊ
    ࣮ࡍʹϓϩτλΠϓͰ࡞ͬͨ΋ͷ
    

    View Slide

23. શମͷਐΊํ
    

    View Slide

24. React ҠߦϓϩδΣΫτͷશମײ
    1. νʔϜ಺ͰReactҠߦ͢Δ͜ͱͷ߹ҙ͕ߦΘΕΔ
    2. ޻਺֬อ͢Δ
    3. ٕज़બఆɺϓϩτλΠϓ࡞੒ɺϩʔυϚοϓͷ࡞੒͢Δ
    
    
    4. ϑϩϯτΤϯυͷج൫Λ࣮૷͢Δ
    5. Ұ෦ͷϖʔδʹల։͢Δ
    6. શ෦ͷϖʔδʹల։͠ऴΘΔ
    

    View Slide

25. ϓϩτλΠϐϯά෦෼Λ͞Βʹ෼ׂ
    1. ΍Γ͍ͨ͜ͱ΍ݱঢ়ͷ՝୊ΛϦετԽ͢Δ
    2. ΠϯηϓγϣϯσοΩͷ࡞੒
    3. ϓϩτλΠϐϯά
    4. ํ਑ΛܾΊͯνʔϜʹ߹ҙΛͱΔ
    5. ϑϩϯτΤϯυͷج൫ͷ࣮૷ʹ޲͚ͯλεΫ෼ׂ
    

    View Slide

26. ΍Γ͍ͨ͜ͱ΍ݱঢ়ͷ՝୊ΛϦετԽ͢Δ
    ● ظؒ
    ○ 3࣌ؒ
    ● ΍ͬͨ͜ͱ
    ○ ԿͰ΋͍͍ͷͰࢥͬͨ͜ͱΛՕ৚ॻ͖Ͱॻ͖ग़ͨ͠
    ■ ຐ๏ͷiΒΜͲ͔Βվળ͍ͨ͜͠ͱ
    ■ React Ҡߦ͢Δ্ͰωοΫʹͳΓͦ͏ͳ͜ͱ
    ■ ؾʹͳ͍ͬͯΔٕज़తͳ୯ޠ
    ● ྑ͔ͬͨ͜ͱ
    ○ ͜Ε͔Βͷٞ࿦ͷ͖ͨͨ୆ʹͳͬͨ
    

    View Slide

27. ΠϯηϓγϣϯσοΩͷ࡞੒
    ● ظؒ
    ○ 2࣌ؒ
    ● ΍ͬͨ͜ͱ
    ○ ΠϯηϓγϣϯσοΩΛ࡞੒ͨ͠
    ● ྑ͔ͬͨ͜ͱ
    ○ ࿩͠߹͍ͷ͖͔͚ͬʹͳͬͨ
    ○ τϨʔυΦϑεϥΠμʔͷ͓͔͛ͰPOͱͷೝ͕ࣝἧͬͨ
    ○ ༻ޠͷ੔ཧ͕ਐΜͩ
    

    View Slide

28. ● ظؒ
    ○ 2िؒ * 2
    
    
    ● ΍ͬͨ͜ͱ
    ○ 2ύλʔϯͷϓϩτλΠϓΛ࡞ͬͨ
    ■ Next.js + GraphQL Λ࢖͏ύλʔϯ
    
    
    ■ XslateͱReact͕ڞଘ͢Δύλʔϯ
    
    
    ○ ݕ౼ࣄ߲ҰཡΛ͕࣌ؒڐ͢ݶΓ্͔Βࢼ͍ͯͬͨ͠
    ϓϩτλΠϐϯά
    

    View Slide

29. ϓϩτλΠϐϯά
    ● ྑ͔ͬͨ͜ͱ
    ○ ظؒΛ2ͭʹ෼͚ͨ͜ͱͰࣗಈతʹ޲͖௚Γ͕Ͱ͖ͨ
    
    
    ○ ݕ౼ࣄ߲ҰཡΛ࡞ͬͯ༏ઌ౓ॱҐ͚ͮͨ͜͠ͱ
    
    
    ■ ≒ ௨ৗͷ։ൃͱಉ͡Α͏ʹλεΫ؅ཧͨ͜͠ͱ
    
    
    ○ σβΠφʔʹཁ๬Λฉ͖ʹߦͬͨ͜ͱ
    
    
    ○ (ޙͰΘ͔ͬͨ͜ͱ͚ͩͲ) બ͹Εͳ͔ͬͨύλʔϯͷݕূ
    ͕ޙʑੜ͖Δ͜ͱ͕͋ͬͨ
    

    View Slide

30. ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ
    ● ظؒ
    ○ 1िؒ
    
    
    ● ΍ͬͨ͜ͱ
    ○ ͻͨ͢ΒADRΛॻ͍ͨ͜ͱ
    
    
    ○ શ෦ͷϖʔδʹల։׬ྃ·Ͱͷେࡶ೺ͳϩʔυϚοϓΛॻ
    ͍ͨ͜ͱ
    
    
    ○ εςʔΫϗϧμʔΛશһूΊͯձΛ։͍ͨ
    

    View Slide

31. ςΩετϕʔεͷܰྔͳςϯϓϨʔτΛ࢖༻ͯ͠ɺΞʔΩςΫνϟ্ͷઃܭ൑
    அΛه࿥͢Δɻ
    
    
    ܰྔͳΞʔΩςΫνϟσγδϣϯϨίʔυʢArchitecture Decision Recordsɿ
    ADRʣ͸ɺ࣮੷ͷ͋ΔΞʔΩςΫνϟख๏ʹର͢Δ։ൃऀدΓͷΞϓϩʔν
    ͩɻઃܭ൑அΛه࿥͍ͯ͘͜͠ͱͰɺͦΕΒΛڞ༗͠෼ੳ͢Δ͜ͱ͕༰қʹͳ
    Δɻ
    
    
    ҙࢥܾఆͷཤྺΛ࢒͢͜ͱͰɺݱࡏͷΞʔΩςΫνϟʹ͍ͭͯͷίϯςΩετ
    Λɺͦͷաఔͱ݁ͼ͚ͭͯఏڙͰ͖Δɻ
    ADRͱ͸
    ※ Michael Keeling. Design it . גࣜձࣾΦϥΠϦʔɾδϟύϯ. 2019೥. 404p
    

    View Slide

32. View Slide

33. ● Next.js + GraphQL ʹ͢΂͖͔ɺXslateͱReact͕ڞଘ͢ΔΑ͏ʹ͢΂
    ͖͔
    
    
    ● CSRΛ༗ޮʹ͢Δ͔
    
    
    ● ΩϟογϡͲ͏͢Δ͔
    
    
    ● CSS͸ͲΜͳٕज़Λ࢖͏͔
    
    
    ● ਪ঑ϒϥ΢βϙϦγʔΛͲ͏͢Δ͔
    
    
    ● ReactԽલޙϖʔδͷϧʔςΟϯάͷํ๏΍੾Γସ͑ΛͲ͏࣮ݱ͢Δ͔
    
    
    ● WebViewͰදࣔ͞Ε͍ͯΔ΋ͷ͸Ͳ͏͢Δ͔ʁ
    
    
    ● etc…
    ADRʹॻ͍ͨ͜ͱ
    

    View Slide

34. ํ਑ͷݻΊͱνʔϜʹ߹ҙΛͱΔ
    ● ྑ͔ͬͨ͜ͱ
    ○ ADRΛॻ͍ͨ͜ͱ
    
    
    ■ ϑΥʔϚοτ͕ॻ͖΍͔ͬͨ͢
    
    
    ■ ్தܦա͕ slack ʹྲྀΕ͍ͯͨͷͰɺձʹ޲͚ͯࢥߟΛঃʑ
    ʹ։ࣔͰ͖ͨ
    
    
    ■ ్தͰϝϯόʔ͔Β൓Ԡ͕΋Β͑ΔͷͰɺυΩϡϝϯτͷ෼
    ྔΛௐ੔Ͱ͖ͨ
    
    
    ○ େࡶ೺ͳϩʔυϚοϓΛΈΜͳͰΈΔ͜ͱͰɺن໛ײΛڞ༗Ͱ͖
    ͨΓɺ௚ۙͷ࿩ͳͷ͔ະདྷͷ࿩ͳͷ͔Λ੔ཧͰ͖ͨ
    

    View Slide

35. ● ظؒ
    ○ 1೔
    
    
    ● ΍ͬͨ͜ͱ
    
    
    ○ λεΫʹ෼ղͯ͠ϓϩδΣΫτ؅ཧπʔϧʹ഑ஔͨ͠
    
    
    ● ྑ͔ͬͨ͜ͱ
    ○ ϓϩτλΠϓͰݕ౼ࣄ߲ҰཡΛ࡞͍ͬͯͨͨΊɺλεΫ෼
    ղ͕༰қͩͬͨ
    ϑϩϯτج൫࣮૷ʹඞཁͳλεΫΛ෼ղͯ͠ɺεέδϡʔϧʹམͱ͢
    

    View Slide

36. ● ࿙Ε͕গͳ͍λεΫҰཡ͕͋ͬͨͷͰɺ؅ཧ্εϜʔζͩͬͨ
    ● ผͷϝϯόʔʹλεΫΛҕৡ͠΍͔ͬͨ͢
    ○ αϯϓϧίʔυ͸͜ΕͳͷͰɺ͍͍ײ͡ʹ͔ͬ͜Αͯ͘͘͠
    ͍ͩͬͯ͞ݴ͑͹ऴΘͬͨ
    ● ج൫࣮૷࣌ʹ͏·͘ಈ࡞͠ͳ͔ͬͨ৔߹ʹɺϓϩτλΠϓͱ͍
    ͏طʹಈ͍͍ͯΔ΋ͷΛࢀরͰ͖ͨ
    ج൫։ൃޙʹৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ
    

    View Slide

37. Ұ೥ޙ͔ΒৼΓฦͬͯΈͨϓϩτλΠϓͷධՁ
    ● ʮϦΞʔΩςΫνϟʹ͓͚Δࣦഊʯʹ͋ΔΑ͏ͳɺํ਑͕ؒ
    ҧ͍ͬͯͨΊ΍Γ௚͠͸ൃੜ͠ͳ͔ͬͨͷͰɺϓϩτλΠϓΛ
    ௨ͯ͡ਫ਼౓ͷߴ͍ݕূ͕Ͱ͖ͨͱߟ͍͑ͯΔ
    

    View Slide

38. ·ͱΊʙϓϩτλΠϓʙ
    ● ϦΞʔΩςΫνϟʹ͓͚ΔࣦഊΛ๷͙ͨΊʹɺϓϩτλΠϓ͕
    ༗ޮͩͱߟ͍͑ͯ·͢
    ● ૣΊʹ஍ཕΛ౿ΊͨΓɺखΛಈ͔͢͜ͱͰݕূͷਫ਼౓͕͕͋
    Γɺ࡞ͬͨίʔυΛޙͷϑΣΠζͰ࢖͑ͨΓ͠·͢
    

    View Slide

39. ·ͱΊʙϓϩτλΠϓͷਐΊํʙ
    ● ໢ཏతͳλεΫҰཡΛ࡞Δ͜ͱɺ༏ઌॱҐͷ࣠ΛͲ͏͢Δ͔͸
    ೉͍͠Ͱ͕͢ɺେ੾ͳ͜ͱͩͱࢥ͍ͬͯ·͢
    ● ϓϩτλΠϓͰ͸ɺແݶʹ΍Γ͍ͨ͜ͱ͕͋ΔͷͰ࣌ؒΛ۠੾
    Δͷ͕͓͢͢ΊͰ͢
    ● ϓϩτλΠϓͷ࣌ʹ͸ɺADRͷ࢖༻΍ීஈͷϓϩδΣΫτ؅ཧ
    Ͱ࢖͍ͬͯΔख๏Λ࢖͏ͷΛ͓קΊ͠·͢
    

    View Slide