Webアプリケーション設計の第一歩は ディレクトリの整理から / Encraft 1

2023/3/24、Encraft #1 フロントエンド×設計にて発表した資料です。

Transcript

1. 8FCΞϓϦέʔγϣϯઃܭͷୈҰา͸
   

   σΟ
   ϨΫ
   τ
   Ϧͷ੔ཧ͔Β
   .BS &ODSBGUϑϩϯ
   τΤϯ
   υʷઃܭ
   

   !PLVOPLFOUBSP
   

   View Slide

2. ୭
   w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP
   w ΫϨε΢ΣΞגࣜձࣾ
   w 5ZQF4DSJQUྺ೥
   

   View Slide

3. ઃܭͱࢲ
   

   View Slide

4. ઃܭͱ͸
   w ࣙॻͰઃܭΛҾ͘
   ͱ
   ʁ
   
   ʢখֶؗਫ਼બ൛೔ຊࠃޠେࣙయʣ
   
   • せっ-けい【設計】
   • ⼯事
   ・
   ⼯作などで、
   ⼯費
   ・
   材料
   ・
   敷地
   ・
   形式などの計画を⽴て、
   図⾯その他に
   

   よ
   って具体的に⽰すこと。
   みつも
   り。
   も
   く
   ろみ。
   •（⽐喩的に）
   ⼈⽣
   ・
   ⽣活などの計画を⽴てること。
   • 明治20年代後半からdesignの訳語と
   して登場、
   中国洋学書の影響
   

   View Slide

5. ઃܭͱ͸
   w ࣙॻͰઃܭΛҾ͘
   ͱ
   ʁ
   
   ʢখֶؗਫ਼બ൛೔ຊࠃޠେࣙయʣ
   
   • せっ-けい【設計】
   • ⼯事
   ・
   ⼯作などで、
   ⼯費
   ・
   材料
   ・
   敷地
   ・
   形式などの計画を⽴て、
   図⾯その他に
   

   よ
   って具体的に⽰すこと。
   みつも
   り。
   も
   く
   ろみ。
   •（⽐喩的に）
   ⼈⽣
   ・
   ⽣活などの計画を⽴てること。
   • 明治20年代後半からdesignの訳語と
   して登場、
   中国洋学書の影響
   

   View Slide

6. ݐ଄෺Λ࿈૝͢Δਓ͕ଟ͍
   wʮΞϓϦέʔγϣϯઃܭʯ
   ͸ൺᄻతͳ༻๏
   w Ϗϧ΍ϚϯγϣϯͳͲͷݐ଄෺ઃܭͱಉ͡Ͱ͸ͳ͍
   w ݐ଄෺ઃܭͷͭ΋ΓͰΞϓϦέʔγϣϯઃܭʹྟΜͩΓ
   

   ଞऀʹઆ໌ͨ͠Γ͢Δͷ͸ద੾ͱ͸ݴ͍೉͍
   

   View Slide

7. ݐ଄෺ͱΞϓϦέʔγϣϯͷ૬ҧ఺
   w ݐ଄෺ઃܭͱΞϓϦέʔγϣϯઃܭΛࠞಉͯ͠͸͍͚ͳ͍఺
   w ઃܭण໋
   w ݐ଄෺͸਺े೥
   

   ʢͱ
   ͘ʹ8FCʣ
   ΞϓϦέʔγϣϯͰɺ
   ਺े೥Λ૝ఆ͢Δ͜ͱ͸ࣄ্࣮ෆՄೳ
   w ݐங
   ɾ
   ։ൃͷϓϩηε
   w ݐங͸׬શͳ΢Υʔλʔϑ
   Υʔϧɺ
   ։ൃ͸ࡢࠓ͸ΞδϟΠϧ͕Ұൠత
   w ॡ޻ޙ
   ɾ
   Ϧ
   Ϧʔεޙͷѻ͍
   w Ϗϧϝϯςφϯεͷจ຺͸ผจ຺ɺ
   ΞϓϦέʔγϣϯ͸
   ʮػೳ௥Ճʯ
   ΍
   ʮෛՙରࡦʯ
   ͷ֓೦͕͋Δ
   

   View Slide

8. ΞϓϦέʔγϣϯ
   ʮҡ࣋ʯ
   Ͱ͋Δ
   w զʑ͕ΞϓϦέʔγϣϯઃܭͱड़΂Δจ຺ͷେ൒͸
   

   ࣮͸ΞϓϦέʔγϣϯ
   ʮҡ࣋ʯ
   Λ໨తͱ͍ͯ͠Δ͜ͱ͕ଟ͍
   wʮˠʯ
   Α
   Γ
   ʮˠɺ
   ˠʯ
   ͕ػձͱͯ͠ѹ౗తʹଟ͍
   w ˠ/ͷஈ֊ʹ͓͍ͯ
   ʮΞϓϦέʔγϣϯઃܭʯ
   ͱ͸
   

   ʮ͜ͷΞϓϦέʔγϣϯΛࠓޙͲ͏
   ͍͖͍͔ͯͨ͠ʯ
   Λߟ͑Δ͜ͱ
   w σʔλϕʔε
   ɾ
   εΩʔϚͳͲͷݕ౼ͱɺ
   ΞϓϦέʔγϣϯίʔ
   υͷઃܭ͸ผ
   

   ʮσʔλϕʔεઃܭʯ
   ʹ͍ͭͯ͸ࠓճ࿦͍ͯ͡ͳ͍
   

   View Slide

9. ԿΛҡ࣋͢΂͖͔
   w ཧղͷ͠΍͢͞
   

   View Slide

10. ཧղ͠΍͘͢
    ͋Ε
    w ػೳ௥Ճ͠΍͍͢ɺ
    मਖ਼͠΍͍͢ɺ
    આ໌͠΍͍͢ɺ
    νʔϜʹՃೖ͠΍͍͢
    w ͢΂ͯ
    ʮཧղ͠΍͍͢ʯ
    ͜ͱ͕લఏͰ੒Γཱͭ
    w ཧղ͕͍ͨ͠ঢ়ଶΛܧଓͤ͞Δͳ
    w ഇᆣʹ͢Δͳ
    https://docs.google.com/presentation/d/1hDY2pb-nYVSLr0HrtQ4EVyrDU4QGgwp4-VRG-Rf26DA
    

    View Slide

11. ͳΜͨΒΞʔΩςΫνϟʹͩ͜ΘΔͳ
    wʮͳΜͨΒΞʔΩςΫνϟʯ
    ͷ࠾༻ͱݫकʹͩ͜ΘΔਓΛ͠͹͠͹Έ͔͚Δ
    w ͢΂ͯ҉ه͠ͳ͘
    ͍͍ͯ
    w Ϋ
    Ϧʔϯ
    ɾ
    ΞʔΩςΫνϟ
    w ϔΩαΰφϧ
    ɾ
    ΞʔΩςΫνϟ
    w ΦχΦϯ
    ɾ
    ΞʔΩςΫνϟ
    w ϨΠϠʔ
    υ
    ɾ
    ΞʔΩςΫνϟ
    w ྺ࢙తʹ
    ʮͲ͏͍͏
    ͜ͱ͕ٻΊΒΕͯੜ·Εͨͷ͔ʯ
    ͷഎܠΛֶͿ
    w ԿΛ͢΂͖ͳͷ͔ߟ͑Δ
    

    View Slide

12. ੔ཧ͞Εཧղ͠΍͚͢Ε͹Α͍
    w ΞʔΩςΫνϟͷେ൒͸
    ʮґଘ؅ཧʯ
    ͱ
    ʮཧղʯ
    Λॿ͚ΔͨΊͷ੔ཧͷϧʔϧ
    w ੔ཧ͞Ε͍ͯΔঢ়ଶ
    

    ˠཧղ͠΍͕͢͞ҡ࣋͞Ε͍ͯΔঢ়ଶ
    

    ˠΞϓϦέʔγϣϯઃܭʹ੒ޭ͍ͯ͠Δঢ়ଶ
    wʮΞϓϦέʔγϣϯઃܭʹࣦഊͯ͠͠·ͬͨʯ
    ͱΑ
    ͘ฉ͘
    w ϦΞʔΩςΫνϟͲ͏
    ͜͏
    Λߟ͑ΔΑ
    Γɺ
    ·ͣ੔ཧͷ࠶։Λ
    w ੔ཧͯ͠ɺ
    ၆ᛌͯ͠ཧղ͔ͯ͠Β
    ʮ࣍ʹվળ͢΂͖͜ͱʯ
    ͕ු͔ͼ্͕ͬͯ͘
    Δ
    

    View Slide

13. ੔ͬͨσΟ
    ϨΫ
    τ
    Ϧߏ଄Λҡ࣋͢Δ
    

    View Slide

14. ཧղ͠΍͍͢σΟ
    ϨΫ
    τ
    Ϧߏ଄
    w σΟ
    ϨΫ
    τ
    Ϧߏ଄ͱΞʔΩςΫνϟ͸ີ઀
    w σΟ
    ϨΫ
    τ
    Ϧߏ଄͕੔͍ͬͯΔͱ
    

    ͦͷલఏͰ
    ʮ৽ػೳͷઃܭʯ
    ΍
    ʮमਖ਼ํ਑ͷܾఆʯ
    ͕ߦ͍΍͍͢
    wʮΞϓϦέʔγϣϯͷݱࡏʯ
    Λද͢஍ਤͱͳΔ
    w ͳΜͨΒΞʔΩςΫνϟͷ׬શ໛฿Λ໨ࢦ͢Α
    Γ
    ΋·ͣσΟ
    ϨΫ
    τ
    ϦΛ੔ཧ͢Δ
    

    View Slide

15. /FYUKTҊ݅Ͱͷྫ
    • ./src/client
    
    
    • ./src/pages
    
    
    • ./src/pages/api
    
    
    • ./src/server
    ˞./͸package.jsonஔ͖৔
    

    View Slide

16. QBHFTʹͳΜͰ΋ஔ͔ͳ͍
    • ./src/client
    
    
    • ./src/pages
    
    
    • ./src/pages/api
    
    
    • ./src/server
    pages͸Τϯ
    τ
    ϦϙΠϯ
    τ͚ͩஔ͘
    server͸όοΫΤϯ
    υॲཧͷΈஔ͘
    client͸ϑϩϯ
    τΤϯ
    υॲཧͷΈஔ͘
    

    View Slide

17. ίϯςΩε
    τ͝ͱͷσΟ
    ϨΫ
    τ
    Ϧ
    • ./src/client
    
    
    • ./src/client/user-page
    
    
    • ./src/client/todo-page
    
    
    • ./src/server
    
    
    • ./src/server/handlers/users/get
    
    
    • ./src/server/handlers/todos/get
    
    
    • ./src/server/handlers/todos/post
    

    View Slide

18. CPVOEBSZΛઃ͚Δ
    • ./src/client
    
    
    • ./src/client/boundary
    
    
    • ./src/client/user-page
    
    
    • ./src/client/todo-page
    
    
    • ./src/server
    
    
    • ./src/server/boundary
    
    
    • ./src/server/handlers/users/get
    
    
    • ./src/server/handlers/todos/get
    
    
    • ./src/server/handlers/todos/post
    client͔Β֎෦؀ڥ΁ͷґଘ
    

    ྫ͑͹ɺ
    'JSFCBTF 4USJQF 4FOUSZ
    server͔Β֎෦؀ڥ΁ͷґଘ
    

    ྫ͑͹ɺ
    ࣾ಺ͷόοΫΤϯ
    υͷ֎෦γεςϜ
    

    "VUI 3FEJT $.4 ϝʔϧૹ৴αʔϏε
    

    View Slide

19. ڞ௨Խ͍ͨ͠ཉٻΛͲ͏ѻ͏͔
    • ./src/client
    
    
    • ./src/client/boundary
    
    
    • ./src/client/user-page
    
    
    • ./src/client/shared
    
    
    • ./src/models
    
    
    • ./src/server
    
    
    • ./src/server/boundary
    
    
    • ./src/server/handlers/users/get
    
    
    • ./src/server/shared
    w sharedͱmodelsͱ͍͏֓೦Λઃ͚Δ
    w modelsɻ
    
    w ͋ΒΏΔ֎෦ϥΠ
    ϒϥ
    Ϧ
    ʢ3FBDU "QPMMP౳ʣ
    ʹ
    

    Ұ੾ґଘͯ͠͸ͳΒͳ͍
    w OQNΠϯε
    τʔϧͳ͘
    ͱ΋ղऍՄೳͳ७ਮͳ5ZQF4DSJQU
    ίʔ
    υͷΈ͜͜΁
    w sharedɻ
    
    w ֎෦ϥΠ
    ϒϥ
    Ϧʹগ͠Ͱ΋ґଘ͢Δίʔ
    υ͸͜͜΁
    w 3FBDUͷ)PPL΍ίϯϙʔωϯ
    τͷڞ௨Խ
    w "QPMMPͷΤϥʔϋϯ
    υ
    Ϧ
    ϯά૚ͷڞ௨Խ
    

    View Slide

20. DMJFOUͱTFSWFSΛ·͙ͨఆٛ͸Ͳ͜΁
    ʁ
    • ./src/client
    
    
    • ./src/client/boundary
    
    
    • ./src/client/user-page
    
    
    • ./src/client/shared
    
    
    • ./src/models
    
    
    • ./src/schema
    
    
    • ./src/schema/handlers/users-get
    
    
    • ./src/server
    
    
    • ./src/server/boundary
    
    
    • ./src/server/handlers/users/get
    
    
    • ./src/server/shared
    w modelsͱ͸ผʹschemaͱ͍͏֓೦Λઃ͚Δ
    w ajv, json-schema-to-ts΁ͷґଘΛڐՄ͢Δ
    w +40/εΩʔϚఆٛͱ5ZQF4DSJQUܕఆٛ͸શ෦͜͜΁
    w /handlers/users-get/request-body-schema.ts
    
    
    w /handlers/users-get/request-body.ts
    
    
    w /handlers/users-get/response-body-schema.ts
    
    
    w /handlers/users-get/response-body.ts
    
    
    w /handlers/users-get/make-path.ts
    

    View Slide

21. ѻ͍ʹࠔΔϑ
    ΝΠϧ͸
    ʁ
    • ./src/client
    
    
    • ./src/env
    
    
    • ./src/models
    
    
    • ./src/pages
    
    
    • ./src/schema
    
    
    • ./src/server
    
    
    • ./src/utils
    w envͱutilsͱ͍͏֓೦Λઃ͚Δ
    w envɻ
    
    w ͋ΒΏΔ؀ڥม਺͸process.env.SOMETHINGΛ
    

    ͋ͪͪ͜ʹॻ͘
    Α
    Γɺ
    ఆ਺ͱͯ͠·ͱΊ͓͍ͯͨ΄͏͕
    

    ؅ཧ
    ɾ
    ݕࡧ͠΍͍͢
    w ͢΂ͯstringͷ··ʹ͢ΔΑ
    Γ
    

    ਺஋Ͱ͋Ε͹ࣄલʹparseInt()͓ͯ͘͠ͳͲ
    w boundary΍modelsʹόϥ͚ͤ͞Δͱɺ
    ٯʹ೺Ѳ͕ࠔ೉
    w utilsɻ
    
    w ࣗࣾυϝΠϯʹӨڹ͠ͳ͍ॲཧ
    

    ྫ͑͹ɺ
    ʮΦϒδΣΫ
    τͷ%FFQ&RVBMʯ
    ͩͬͨΓ
    

    Array͔ΒTΛٻΊΔܕͩͬͨΓ
    w ͜͜ʹೖΕΔ͜ͱ͸͔ͳΓ৻ॏʹͳΔ΂͖
    w Ұ൪
    ʮͳΜͰ΋ശʯ
    ʹͳΔ
    

    View Slide

22. ෼ྨϧʔϧΛकΔ
    

    View Slide

23. कΕͳ͍ϧʔϧͳΒ͍Βͳ͍
    wʮͲͷσΟ
    ϨΫ
    τ
    Ϧʹ͸ԿΛೖΕ͍ͯͩ͘͞ʯ
    ͱ͍͏ޱ಄ͷઆ໌͚ͩͰ͸
    

    ͍ͣΕकΕͳ͍ਓ͕Ͱͯ͘
    Δ
    w ѱҙʹݶΒͣɺ
    ৽ਓ΁ͷप஌࿙Εɺ
    ͏
    ͔ͬΓ๨Ε͕͋Δ
    w ίʔ
    υ
    ϨϏϡʔ࣌ʹϨϏϡΞʔ΋ݟಀ͔͢΋͠Εͳ͍
    

    ʢ(JU)VC͸σΟ
    ϨΫ
    τ
    Ϧύε΍ϑΝΠϧ໊ࣗମͷϨϏϡʔ͕΍Γʹ͍͘ʣ
    
    w FTMJOUͰ͔ͬ͠ΓकΕΔ΋ͷʹ͢Δ
    w ਓʹ΋ػցʹ΋ཧղ͠΍͍͢ϧʔϧΛҡ࣋͢Δ
    

    View Slide

24. JNQPSUOPSFTUSJDUFEQBUIT
    w eslint-plugin-importʹखࠒͳϧʔϧ͕͋Δ
    

    https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/
    no-restricted-paths.md
    w ͜ͷϧʔϧΛ࠾༻͢Δͱ
    ʮ೚ҙͷσΟ
    ϨΫ
    τ
    Ϧ͔ΒผͷσΟ
    ϨΫ
    τ
    Ϧ΁ͷґଘΛ
    

    ېࢭ͢Δʯ
    ͜ͱ͕Ͱ͖Δ
    w αϒσΟ
    ϨΫ
    τ
    Ϧಉ࢜ͷېࢭ΋ࢦఆͰ͖Δ
    w ྫ͑͹handlers/users/get಺ͷॲཧ͕handlers/users/postʹ
    

    ґଘͯ͠͸ͳΒͳ͍ͱ͍͏ϧʔϧ΋ॻ͚Δ
    

    View Slide

25. ҡ࣋ͷͨΊͷҰ޻෉
    w import/no-restricted-pathsͷܽ఺͸ېࢭϦ
    ε
    τͷ؅ཧͰ͋Δ͜ͱ
    w ېࢭϦ
    ε
    τͷ؅ཧͩͱɺ
    αϒσΟ
    ϨΫ
    τ
    Ϧͷ૿ݮʹԠͯ͡ϝϯς͕ඞཁ
    w ڐՄϦ
    ε
    τͷ؅ཧʹ͢Ε͹ɺ
    ݪଇ͸ېࢭͰɺ
    ௥ՃڐՄ͍ͨ͠ͱ͖͚ͩϝϯςφϯε͢Ε͹Α͍
    w ڐՄϦ
    ε
    τΛఆ਺ͱͯ͠ఆٛ͠ɺ
    ೚ҙͷεΫ
    Ϧ
    ϓτΛ࣮ߦ͢Δ͜ͱͰ
    

    .eslintrc.jsΛࣗಈੜ੒͢ΔΑ
    ͏ʹ࢓૊ΈΛ੔͑ͨ
    w ڐՄϦ
    ε
    τΛ΋ͱʹɺ
    ൓సͤ͞શېࢭϦ
    ε
    τΛࣗಈੜ੒
    w npm iͷࡍʹৗʹ࣮ߦ͢ΔΑ
    ͏ʹख഑͢Δ
    

    View Slide

26. σΟ
    ϨΫ
    τ
    ϦΛύοέʔδͱଊ͑Δ
    w ΋͏ͻͱͭFTMJOUϧʔϧΛಋೖ͢Δ
    w eslint-plugin-import-access
    

    https://zenn.dev/uhyo/articles/eslint-plugin-import-access
    w @packageσΟ
    ϨΫςΟ
    ϒΛ෇༩͢Δ͜ͱͰɺ
    

    ଞͷσΟ
    ϨΫ
    τ
    Ϧ͔Βࢀরͨ͠ࡍʹ-JOUΤϥʔʹͰ͖Δ
    wʮexportͨ͘͠ͳ͍͔ΒϑΝΠϧʹେྔʹॻ͘ʯ
    ͱ͍͏ඞཁ͕ͳ͘ͳΔ
    

    View Slide

27. ϧʔϧΛकΔͱͲ͏ͳΔ͔
    w ґଘํ޲΍ӨڹൣғΛཧղ͠΍͍͢
    w schemaσΟ
    ϨΫ
    τ
    Ϧʹґଘ͍ͯ͠Δclientͱserver഑Լ͔ΒӨڹൣғಛఆ
    w Ͳͷ3FBDU)PPL͕͜ͷΤϯ
    υϙΠϯ
    τΛݺΜͰΔ
    ʁ
    ͜ͷΤϯ
    υϙΠϯ
    τ͸ͲͷΤϥʔΛฦ͠͏
    Δ
    ʁ
    
    w όοΫΤϯ
    υॲཧͷͳ͔ͰೝূܥΛ୲౰͍ͯ͠Δͷ͸Ͳ͔͜
    ʁ
    
    w server/boundary/auth಺ͷϑΝΠϧ͔ɺ
    ͦ͜ʹґଘ͍ͯ͠ΔϑΝΠϧΛݕࡧ͢Ε͹ػցతʹચ͍ग़ͤΔ
    w औΓҧ͑ͷ๷ࢭ
    w server/handlers/users/getͰserver/handlers/todos/getͷॲཧʹґଘ͍ͯͨ͠ΒऔΓҧ͑
    w ϑΝΠϧઌ಄ͷimportจͱɺexport͞ΕΔม਺໊
    ɾ
    ؔ਺໊ΛோΊΔ͚ͩͰ
    

    ʮ͜ͷϑΝΠϧ͸Կ͕͍͔ͨ͠ʯ
    ͕Ұ໨ྎવͱͳΔ
    

    View Slide

28. ίʔ
    υ
    ϨϏϡΞʔʹ༏͍͠
    w มߋϑΝΠϧҰཡ͕ཁ໿Λຬͨͨ͢Ίɺ
    ϨϏϡΞʔ͸·ͣมߋ͞ΕͨϑΝΠϧҰཡΛோΊΔͱཧղ͠΍͍͢
    w client/**, client/shared, modelsͷมߋ
    w ʮը໘ଆʹ৽ͨͳ֓೦Λදࣔͤ͞ΔͨΊɺ
    ৽͍͠ίϯϙʔωϯ
    τ࣮૷Λͨ͠Μͩͳʯ
    
    w server/handlers/**, server/shared, server/boundaryͷมߋ
    w ʮೝՄܥͷमਖ਼ͷͨΊʹɺ
    όοΫΤϯ
    υΛԣஅతʹมߋͨ͠Μͩͳʯ
    
    w client/**, client/shared, models, server/**, server/sharedͷมߋ
    w ʮൣғ͕޿͍
    ʂ
    Ϋϥε໊΍൚༻ؔ਺໊ͷվ໊͔
    ʁ
    ͋Δ͍͸Կ͔େֻ͔Γͳ͜ͱΛ΍Γ͍͗ͯ͢ͳ͍͔
    ʁ
    ʯ
    

    View Slide

29. ςε
    τʹ༏͍͠
    w σΟ
    ϨΫ
    τ
    Ϧ
    ͝ͱʹ
    ʮͲ͏͍͏
    ςε
    τΛॻ͚͹Α͍͔ʯ
    ͕ٻ·
    Γ΍͍͢
    w ίϯϙʔωϯ
    τͷݟͨ໨Λςε
    τ͍ͨ͠ͷ͔
    w ෳ਺ͷ֎෦αʔϏεΛͭͳ͍Ͱ͍Δͱ͖ʹɺ
    Τϥʔϋϯ
    υ
    Ϧ
    ϯάΛϞοΫΛ࢖ͬͨ
    

    ݁߹ςε
    τͱͯ͠ݕূ͍ͨ͠ͷ͔
    w ࣮ࡍʹ֎෦αʔϏεʹରͯ͠ϦΫΤε
    τΛ౤͛ͯ
    

    &OEUP&OEͳςε
    τΛ࣮ࢪ͍ͨ͠ͷ͔
    w ͲͷσΟ
    ϨΫ
    τ
    Ϧ಺ʹ͋ΔϑΝΠϧΛϞοΫʹ͢Ε͹Α͍͔͕ٻ·
    Γ΍͍͢
    w boundary΁ͷґଘΛϞοΫ͢Δɺ
    env΁ͷґଘΛϞοΫ͢Δɺ
    ͳͲ
    

    View Slide

30. $PODMVTJPO
    w ΞϓϦέʔγϣϯ͸ཧղ͠΍͍͢ঢ়ଶΛҡ࣋͢΂͖Ͱ͋Δ
    w σΟ
    ϨΫ
    τ
    Ϧߏ੒͕੔ཧ͞Ε͍ͯΔͱɺ
    

    ػೳͷଟ͞΍ෳࡶ͕͞ࢹ֮తʹཧղ͠΍͍͢
    w ґଘํ޲ʹ-JOUʹΑΔଋറΛՃ͑Δͱɺ
    ա౓ͳີ݁߹Λ๷͗΍͍͢
    w ςε
    τͷ࡞੒΍Ϧ
    ϑΝΫλ
    Ϧ
    ϯάͷ࣮ࢪ͕༰қ
    w ݁Ռతʹ
    ʮͳΜͨΒΞʔΩςΫνϟʯ
    ͷཁ఺Λຬͨ͢͜ͱ͕Ͱ͖Δ
    w ·ͣ͸σΟ
    ϨΫ
    τ
    ϦΛ੔ཧ͠Α
    ͏
    

    View Slide