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

by OKUNOKENTARO

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ઃܭͱࢲ

Slide 4

Slide 4 text

ઃܭͱ͸ w ࣙॻͰઃܭΛҾ͘ ͱ ʁ ʢখֶؗਫ਼બ൛೔ຊࠃޠେࣙయʣ • せっ-けい【設計】 • ⼯事・⼯作などで、⼯費・材料・敷地・形式などの計画を⽴て、図⾯その他に   よって具体的に⽰すこと。みつもり。もくろみ。 •（⽐喩的に）⼈⽣・⽣活などの計画を⽴てること。 • 明治20年代後半からdesignの訳語として登場、中国洋学書の影響

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ΞϓϦέʔγϣϯ ʮҡ࣋ʯ Ͱ͋Δ w զʑ͕ΞϓϦέʔγϣϯઃܭͱड़΂Δจ຺ͷେ൒͸   ࣮͸ΞϓϦέʔγϣϯ ʮҡ࣋ʯ Λ໨తͱ͍ͯ͠Δ͜ͱ͕ଟ͍ wʮˠʯ Α Γ ʮˠɺ ˠʯ ͕ػձͱͯ͠ѹ౗తʹଟ͍ w ˠ/ͷஈ֊ʹ͓͍ͯ ʮΞϓϦέʔγϣϯઃܭʯ ͱ͸   ʮ͜ͷΞϓϦέʔγϣϯΛࠓޙͲ͏ ͍͖͍͔ͯͨ͠ʯ Λߟ͑Δ͜ͱ w σʔλϕʔε ɾ εΩʔϚͳͲͷݕ౼ͱɺ ΞϓϦέʔγϣϯίʔ υͷઃܭ͸ผ   ʮσʔλϕʔεઃܭʯ ʹ͍ͭͯ͸ࠓճ࿦͍ͯ͡ͳ͍

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

੔ཧ͞Εཧղ͠΍͚͢Ε͹Α͍ w ΞʔΩςΫνϟͷେ൒͸ ʮґଘ؅ཧʯ ͱ ʮཧղʯ Λॿ͚ΔͨΊͷ੔ཧͷϧʔϧ w ੔ཧ͞Ε͍ͯΔঢ়ଶ   ˠཧղ͠΍͕͢͞ҡ࣋͞Ε͍ͯΔঢ়ଶ   ˠΞϓϦέʔγϣϯઃܭʹ੒ޭ͍ͯ͠Δঢ়ଶ wʮΞϓϦέʔγϣϯઃܭʹࣦഊͯ͠͠·ͬͨʯ ͱΑ ͘ฉ͘ w ϦΞʔΩςΫνϟͲ͏ ͜͏ Λߟ͑ΔΑ Γɺ ·ͣ੔ཧͷ࠶։Λ w ੔ཧͯ͠ɺ ၆ᛌͯ͠ཧղ͔ͯ͠Β ʮ࣍ʹվળ͢΂͖͜ͱʯ ͕ු͔ͼ্͕ͬͯ͘ Δ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ڞ௨Խ͍ͨ͠ཉٻΛͲ͏ѻ͏͔ • ./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ͷΤϥʔϋϯ υ Ϧ ϯά૚ͷڞ௨Խ

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

ѻ͍ʹࠔΔϑ ΝΠϧ͸ ʁ • ./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 Ұ൪ ʮͳΜͰ΋ശʯ ʹͳΔ

Slide 22

Slide 22 text

෼ྨϧʔϧΛकΔ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

ҡ࣋ͷͨΊͷҰ޻෉ w import/no-restricted-pathsͷܽ఺͸ېࢭϦ ε τͷ؅ཧͰ͋Δ͜ͱ w ېࢭϦ ε τͷ؅ཧͩͱɺ αϒσΟ ϨΫ τ Ϧͷ૿ݮʹԠͯ͡ϝϯς͕ඞཁ w ڐՄϦ ε τͷ؅ཧʹ͢Ε͹ɺ ݪଇ͸ېࢭͰɺ ௥ՃڐՄ͍ͨ͠ͱ͖͚ͩϝϯςφϯε͢Ε͹Α͍ w ڐՄϦ ε τΛఆ਺ͱͯ͠ఆٛ͠ɺ ೚ҙͷεΫ Ϧ ϓτΛ࣮ߦ͢Δ͜ͱͰ   .eslintrc.jsΛࣗಈੜ੒͢ΔΑ ͏ʹ࢓૊ΈΛ੔͑ͨ w ڐՄϦ ε τΛ΋ͱʹɺ ൓సͤ͞શېࢭϦ ε τΛࣗಈੜ੒ w npm iͷࡍʹৗʹ࣮ߦ͢ΔΑ ͏ʹख഑͢Δ

Slide 26

Slide 26 text

σΟ ϨΫ τ ϦΛύοέʔδͱଊ͑Δ w ΋͏ͻͱͭFTMJOUϧʔϧΛಋೖ͢Δ w eslint-plugin-import-access   https://zenn.dev/uhyo/articles/eslint-plugin-import-access w @packageσΟ ϨΫςΟ ϒΛ෇༩͢Δ͜ͱͰɺ   ଞͷσΟ ϨΫ τ Ϧ͔Βࢀরͨ͠ࡍʹ-JOUΤϥʔʹͰ͖Δ wʮexportͨ͘͠ͳ͍͔ΒϑΝΠϧʹେྔʹॻ͘ʯ ͱ͍͏ඞཁ͕ͳ͘ͳΔ

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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