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

2023/3/24、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 ࣮ࡍʹ֎෦αʔϏεʹରͯ͠ϦΫΤε τΛ౤͛ͯ 
 &OE
    UP
    &OEͳςε τΛ࣮ࢪ͍ͨ͠ͷ͔
    w ͲͷσΟ ϨΫ τ Ϧ಺ʹ͋ΔϑΝΠϧΛϞοΫʹ͢Ε͹Α͍͔͕ٻ· Γ΍͍͢
    w boundary΁ͷґଘΛϞοΫ͢Δɺ env΁ͷґଘΛϞοΫ͢Δɺ ͳͲ
30. $PODMVTJPO w ΞϓϦέʔγϣϯ͸ཧղ͠΍͍͢ঢ়ଶΛҡ࣋͢΂͖Ͱ͋Δ
    w σΟ ϨΫ τ Ϧߏ੒͕੔ཧ͞Ε͍ͯΔͱɺ 
 ػೳͷଟ͞΍ෳࡶ͕͞ࢹ֮తʹཧղ͠΍͍͢
    w ґଘํ޲ʹ-JOUʹΑΔଋറΛՃ͑Δͱɺ ա౓ͳີ݁߹Λ๷͗΍͍͢
    w ςε τͷ࡞੒΍Ϧ ϑΝΫλ Ϧ ϯάͷ࣮ࢪ͕༰қ
    w ݁Ռతʹ ʮͳΜͨΒΞʔΩςΫνϟʯ ͷཁ఺Λຬͨ͢͜ͱ͕Ͱ͖Δ
    w ·ͣ͸σΟ ϨΫ τ ϦΛ੔ཧ͠Α ͏