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

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

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

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

OKUNOKENTARO

March 24, 2023
Tweet

More Decks by OKUNOKENTARO

Other Decks in Technology

Transcript

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

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

    !PLVOPLFOUBSP

    View full-size slide


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

    View full-size slide

  3. ઃܭͱ͸
    w ࣙॻͰઃܭΛҾ͘
    ͱ
    ʁ

    ʢখֶؗਫ਼બ൛೔ຊࠃޠେࣙయʣ

    • せっ-けい【設計】
    • ⼯事

    ⼯作などで、
    ⼯費

    材料

    敷地

    形式などの計画を⽴て、
    図⾯その他に


    って具体的に⽰すこと。
    みつも
    り。


    ろみ。
    •(⽐喩的に)
    ⼈⽣

    ⽣活などの計画を⽴てること。
    • 明治20年代後半からdesignの訳語と
    して登場、
    中国洋学書の影響

    View full-size slide

  4. ઃܭͱ͸
    w ࣙॻͰઃܭΛҾ͘
    ͱ
    ʁ

    ʢখֶؗਫ਼બ൛೔ຊࠃޠେࣙయʣ

    • せっ-けい【設計】
    • ⼯事

    ⼯作などで、
    ⼯費

    材料

    敷地

    形式などの計画を⽴て、
    図⾯その他に


    って具体的に⽰すこと。
    みつも
    り。


    ろみ。
    •(⽐喩的に)
    ⼈⽣

    ⽣活などの計画を⽴てること。
    • 明治20年代後半からdesignの訳語と
    して登場、
    中国洋学書の影響

    View full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

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

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

  14. /FYUKTҊ݅Ͱͷྫ
    • ./src/client


    • ./src/pages


    • ./src/pages/api


    • ./src/server
    ˞./͸package.jsonஔ͖৔

    View full-size slide

  15. QBHFTʹͳΜͰ΋ஔ͔ͳ͍
    • ./src/client


    • ./src/pages


    • ./src/pages/api


    • ./src/server
    pages͸Τϯ
    τ
    ϦϙΠϯ
    τ͚ͩஔ͘
    server͸όοΫΤϯ
    υॲཧͷΈஔ͘
    client͸ϑϩϯ
    τΤϯ
    υॲཧͷΈஔ͘

    View full-size slide

  16. ίϯςΩε
    τ͝ͱͷσΟ
    ϨΫ
    τ
    Ϧ
    • ./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 full-size slide

  17. 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 full-size slide

  18. ڞ௨Խ͍ͨ͠ཉٻΛͲ͏ѻ͏͔
    • ./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 full-size slide

  19. 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 full-size slide

  20. ѻ͍ʹࠔΔϑ
    ΝΠϧ͸
    ʁ
    • ./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 full-size slide

  21. ෼ྨϧʔϧΛकΔ

    View full-size slide

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

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

    ʢ(JU)VC͸σΟ
    ϨΫ
    τ
    Ϧύε΍ϑΝΠϧ໊ࣗମͷϨϏϡʔ͕΍Γʹ͍͘ʣ

    w FTMJOUͰ͔ͬ͠ΓकΕΔ΋ͷʹ͢Δ
    w ਓʹ΋ػցʹ΋ཧղ͠΍͍͢ϧʔϧΛҡ࣋͢Δ

    View full-size slide

  23. 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 full-size slide

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

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

    View full-size slide

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

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

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

    View full-size slide

  26. ϧʔϧΛकΔͱͲ͏ͳΔ͔
    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 full-size slide

  27. ίʔ
    υ
    ϨϏϡΞʔʹ༏͍͠
    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 full-size slide

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

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

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

    View full-size slide

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

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

    View full-size slide