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

Transcript

1. 8FCΞϓϦέʔγϣϯઃܭͷୈҰา͸ 
 σΟ ϨΫ τ Ϧͷ੔ཧ͔Β .BS &ODSBGUϑϩϯ τΤϯ υʷઃܭ

   
 !PLVOPLFOUBSP

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

3. ઃܭͱࢲ

4. ઃܭͱ͸ w ࣙॻͰઃܭΛҾ͘ ͱ ʁ ʢখֶؗਫ਼બ൛೔ຊࠃޠେࣙయʣ • せっ-けい【設計】

   • ⼯事 ・ ⼯作などで、 ⼯費 ・ 材料 ・ 敷地 ・ 形式などの計画を⽴て、 図⾯その他に 
 よ って具体的に⽰すこと。 みつも り。 も く ろみ。 •（⽐喩的に） ⼈⽣ ・ ⽣活などの計画を⽴てること。 • 明治20年代後半からdesignの訳語と して登場、 中国洋学書の影響

5. ઃܭͱ͸ w ࣙॻͰઃܭΛҾ͘ ͱ ʁ ʢখֶؗਫ਼બ൛೔ຊࠃޠେࣙయʣ • せっ-けい【設計】

   • ⼯事 ・ ⼯作などで、 ⼯費 ・ 材料 ・ 敷地 ・ 形式などの計画を⽴て、 図⾯その他に 
 よ って具体的に⽰すこと。 みつも り。 も く ろみ。 •（⽐喩的に） ⼈⽣ ・ ⽣活などの計画を⽴てること。 • 明治20年代後半からdesignの訳語と して登場、 中国洋学書の影響

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

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

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

8. ΞϓϦέʔγϣϯ ʮҡ࣋ʯ Ͱ͋Δ w զʑ͕ΞϓϦέʔγϣϯઃܭͱड़΂Δจ຺ͷେ൒͸ 
 ࣮͸ΞϓϦέʔγϣϯ ʮҡ࣋ʯ Λ໨తͱ͍ͯ͠Δ͜ͱ͕ଟ͍ wʮˠʯ

   Α Γ ʮˠɺ ˠʯ ͕ػձͱͯ͠ѹ౗తʹଟ͍ w ˠ/ͷஈ֊ʹ͓͍ͯ ʮΞϓϦέʔγϣϯઃܭʯ ͱ͸ 
 ʮ͜ͷΞϓϦέʔγϣϯΛࠓޙͲ͏ ͍͖͍͔ͯͨ͠ʯ Λߟ͑Δ͜ͱ w σʔλϕʔε ɾ εΩʔϚͳͲͷݕ౼ͱɺ ΞϓϦέʔγϣϯίʔ υͷઃܭ͸ผ 
 ʮσʔλϕʔεઃܭʯ ʹ͍ͭͯ͸ࠓճ࿦͍ͯ͡ͳ͍

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

10. ཧղ͠΍͘͢ ͋Ε w ػೳ௥Ճ͠΍͍͢ɺ मਖ਼͠΍͍͢ɺ આ໌͠΍͍͢ɺ νʔϜʹՃೖ͠΍͍͢ w ͢΂ͯ ʮཧղ͠΍͍͢ʯ

    ͜ͱ͕લఏͰ੒Γཱͭ w ཧղ͕͍ͨ͠ঢ়ଶΛܧଓͤ͞Δͳ w ഇᆣʹ͢Δͳ https://docs.google.com/presentation/d/1hDY2pb-nYVSLr0HrtQ4EVyrDU4QGgwp4-VRG-Rf26DA

11. ͳΜͨΒΞʔΩςΫνϟʹͩ͜ΘΔͳ wʮͳΜͨΒΞʔΩςΫνϟʯ ͷ࠾༻ͱݫकʹͩ͜ΘΔਓΛ͠͹͠͹Έ͔͚Δ w ͢΂ͯ҉ه͠ͳ͘ ͍͍ͯ w Ϋ Ϧʔϯ ɾ

    ΞʔΩςΫνϟ w ϔΩαΰφϧ ɾ ΞʔΩςΫνϟ w ΦχΦϯ ɾ ΞʔΩςΫνϟ w ϨΠϠʔ υ ɾ ΞʔΩςΫνϟ w ྺ࢙తʹ ʮͲ͏͍͏ ͜ͱ͕ٻΊΒΕͯੜ·Εͨͷ͔ʯ ͷഎܠΛֶͿ w ԿΛ͢΂͖ͳͷ͔ߟ͑Δ

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


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

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

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

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

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

16. QBHFTʹͳΜͰ΋ஔ͔ͳ͍ • ./src/client • ./src/pages • ./src/pages/api • ./src/server pages͸Τϯ

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

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

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 ϝʔϧૹ৴αʔϏε

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ͷΤϥʔϋϯ υ Ϧ ϯά૚ͷڞ௨Խ

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

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>͔ΒTΛٻΊΔܕͩͬͨΓ w ͜͜ʹೖΕΔ͜ͱ͸͔ͳΓ৻ॏʹͳΔ΂͖ w Ұ൪ ʮͳΜͰ΋ശʯ ʹͳΔ

22. ෼ྨϧʔϧΛकΔ

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

    ѱҙʹݶΒͣɺ ৽ਓ΁ͷप஌࿙Εɺ ͏ ͔ͬΓ๨Ε͕͋Δ w ίʔ υ ϨϏϡʔ࣌ʹϨϏϡΞʔ΋ݟಀ͔͢΋͠Εͳ͍ 
 ʢ(JU)VC͸σΟ ϨΫ τ Ϧύε΍ϑΝΠϧ໊ࣗମͷϨϏϡʔ͕΍Γʹ͍͘ʣ w FTMJOUͰ͔ͬ͠ΓकΕΔ΋ͷʹ͢Δ w ਓʹ΋ػցʹ΋ཧղ͠΍͍͢ϧʔϧΛҡ࣋͢Δ

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ʹ 
 ґଘͯ͠͸ͳΒͳ͍ͱ͍͏ϧʔϧ΋ॻ͚Δ

25. ҡ࣋ͷͨΊͷҰ޻෉ w import/no-restricted-pathsͷܽ఺͸ېࢭϦ ε τͷ؅ཧͰ͋Δ͜ͱ w ېࢭϦ ε τͷ؅ཧͩͱɺ αϒσΟ

    ϨΫ τ Ϧͷ૿ݮʹԠͯ͡ϝϯς͕ඞཁ w ڐՄϦ ε τͷ؅ཧʹ͢Ε͹ɺ ݪଇ͸ېࢭͰɺ ௥ՃڐՄ͍ͨ͠ͱ͖͚ͩϝϯςφϯε͢Ε͹Α͍ w ڐՄϦ ε τΛఆ਺ͱͯ͠ఆٛ͠ɺ ೚ҙͷεΫ Ϧ ϓτΛ࣮ߦ͢Δ͜ͱͰ 
 .eslintrc.jsΛࣗಈੜ੒͢ΔΑ ͏ʹ࢓૊ΈΛ੔͑ͨ w ڐՄϦ ε τΛ΋ͱʹɺ ൓సͤ͞શېࢭϦ ε τΛࣗಈੜ੒ w npm iͷࡍʹৗʹ࣮ߦ͢ΔΑ ͏ʹख഑͢Δ

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

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

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͞ΕΔม਺໊ ɾ ؔ਺໊ΛோΊΔ͚ͩͰ 
 ʮ͜ͷϑΝΠϧ͸Կ͕͍͔ͨ͠ʯ ͕Ұ໨ྎવͱͳΔ

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 ʮൣғ͕޿͍ ʂ Ϋϥε໊΍൚༻ؔ਺໊ͷվ໊͔ ʁ ͋Δ͍͸Կ͔େֻ͔Γͳ͜ͱΛ΍Γ͍͗ͯ͢ͳ͍͔ ʁ ʯ

29. ςε τʹ༏͍͠ w σΟ ϨΫ τ Ϧ ͝ͱʹ ʮͲ͏͍͏ ςε

    τΛॻ͚͹Α͍͔ʯ ͕ٻ· Γ΍͍͢ w ίϯϙʔωϯ τͷݟͨ໨Λςε τ͍ͨ͠ͷ͔ w ෳ਺ͷ֎෦αʔϏεΛͭͳ͍Ͱ͍Δͱ͖ʹɺ Τϥʔϋϯ υ Ϧ ϯάΛϞοΫΛ࢖ͬͨ 
 ݁߹ςε τͱͯ͠ݕূ͍ͨ͠ͷ͔ w ࣮ࡍʹ֎෦αʔϏεʹରͯ͠ϦΫΤε τΛ౤͛ͯ 
 &OEUP&OEͳςε τΛ࣮ࢪ͍ͨ͠ͷ͔ w ͲͷσΟ ϨΫ τ Ϧ಺ʹ͋ΔϑΝΠϧΛϞοΫʹ͢Ε͹Α͍͔͕ٻ· Γ΍͍͢ w boundary΁ͷґଘΛϞοΫ͢Δɺ env΁ͷґଘΛϞοΫ͢Δɺ ͳͲ

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

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