Salariesを支えるチーム開発の現場

by techtekt

Slide 1

Slide 1 text

4BMBSJFTΛࢧ͑ΔνʔϜ։ൃͷݱ৔ ٕҭ$".1ษڧձ c

Slide 2

Slide 2 text

*OEFY ❏ ಋೖ ❏ ॴଐ෦ॺ঺հ ❏ 4BMBSJFT঺հ ❏ νʔϜ։ൃ ❏ 4BMBSJFTνʔϜͷ։ൃମ੍ͳͲͷ঺հ ❏ νʔϜ։ൃΛࢧ͑ΔϑϩϯτΤϯυ ❏ νʔϜ։ൃΛࢧ͑ΔόοΫΤϯυ

Slide 3

Slide 3 text

ຊൃදͷ໨ඪ ❏ ࣮ࡍͷ։ൃݱ৔ͰͲͷΑ͏ʹνʔϜ։ൃΛߦ͍ͬͯΔͷ͔Πϝʔδ͕Ͱ͖Δ ❏ ࢖͍ͬͯΔϥΠϒϥϦʢJPUTͳͲʣͷଘࡏΛ஌ͬͯ΋Β͏ ❏ ࣋ͪؼͬͯݸਓ։ൃͳͲͰ࢖͏͖͔͚ͬʹͳΔ ❏ ࠓޙͷνʔϜ։ൃʹ׆͔ͤΔ νʔϜ։ൃͰ࣮ࡍʹ࢖ΘΕ͍ͯΔٕज़΍։ൃख๏ͳͲΛ஌ͬͯ΋Β͏

Slide 4

Slide 4 text

ࣗݾ঺հ ❏ ࠤ઒ ༤ඈ ❏ ೥݄ ύʔιϧΩϟϦΞೖࣾ ❏ ৬ྺ ❏ &$γεςϜͷύοέʔδ։ൃ ❏ ҿ৯ళͰͷ଺ࡏ࣌ؒ؅ཧγεςϜ։ൃ ❏ ͓ห౰୐഑αʔϏε։ൃ ❏ ٕज़ ❏ /FYUKT /VYUKT 8FC$PNQPOFOUT

Slide 5

Slide 5 text

αʔϏε։ൃ෦ ֓ཁ ॴଐ෦ॺ ςΫϊϩδʔຊ෦ ΤϯδχΞϦϯά౷ׅ෦ αʔϏε։ൃ෦ ैۀһ਺ ςΫϊϩδʔຊ෦ ໿໊ αʔϏε։ൃ෦ ໿໊ ೥݄຤࣌఺ ࣄۀ಺༰ ৽نαʔϏεͷاըɾ։ൃ طଘαʔϏεͷӡ༻ɾอकɾ௥Ճ։ൃ ϛογϣϯ ʮΤϯδχΞϦϯάͷྗͰɺ৽نαʔϏεΛૉૣ͘ఏڙ͢Δʯ

Slide 6

Slide 6 text

αʔϏεΛಉ࣌։ൃͰ͖Δ૊৫΁

Slide 7

Slide 7 text

ϦϦʔεࡁΈͷαʔϏε

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

ٕज़ελοΫ 'SPOUFOE "ENJO #BDLFOE *OGSBTUSVDUVSF

Slide 13

Slide 13 text

νʔϜ։ൃ 4BMBSJFTνʔϜͷ։ൃ঺հ

Slide 14

Slide 14 text

νʔϜߏ੒ ೥݄຤࣌఺ #VTTJOFTT ໊ ❏اը ❏Ӧۀ ❏ࣄۀࢧԉ ❏ϚʔέςΟϯά &OHJOFFS ໊ ❏ϑϩϯτΤϯυ ❏όοΫΤϯυ ❏Πϯϑϥ ❏σʔλαΠΤϯε %FTJHOFS ໊ ❏6* ❏69 ❏άϥϑΟοΫ

Slide 15

Slide 15 text

։ൃϑϩʔ #VTJOFTT &OHJOFFS ཁ݅ #VTJOFTT &OHJOFFS %FTJHOFS &OHJOFFS &OHJOFFS #VTJOFTT &OHJOFFS %FTJHOFS 6*σβΠϯ ٕज़બఆ ։ൃ ϦϦʔε

Slide 16

Slide 16 text

։ൃϑϩʔ #VTJOFTT &OHJOFFS ཁ݅ #VTJOFTT &OHJOFFS %FTJHOFS &OHJOFFS &OHJOFFS #VTJOFTT &OHJOFFS %FTJHOFS 6*σβΠϯ ٕज़બఆ ։ൃ ϦϦʔε

Slide 17

Slide 17 text

։ൃϑϩʔ ։ൃ ։ൃ ։ൃ ։ൃ 'SPOUFOE #BDLFOE *OGSBTUSVDUVSF 6*࣮૷ ੩త "1*࢓༷࡞੒ Πϯϑϥߏங ϞοΫ"1*ͱ઀ଓ ϞοΫ"1*࡞੒ "1*࣮૷

Slide 18

Slide 18 text

ϑϩϯτΤϯυͱόοΫΤϯυ෼͔Εͯͷ։ൃ ❏ ݉೚͢Δ͔෼͔ΕΔ͔͸νʔϜʹΑ༷ͬͯʑ ❏ ։ൃ౰ॳ͸ΤϯδχΞ໊͕ମ੍ ❏ ϑϩϯτΤϯυ୲౰ ❏ όοΫΤϯυ୲౰ ❏ Πϯϑϥ΍ॾʑͷઃܭ౳ 1K. ❏ ͦΕͧΕ͕ಘҙ෼໺Λ୲౰ͯ͠ૉૣ͍։ൃΛ໨ࢦ͢ ❏ ਓ਺͕૿͖͑ͯͨݱࡏ͸ɺδϣϒϩʔςʔγϣϯΛ࣮ࢪ ❏ ఆظతʹ։ൃϝϯόͷϝΠϯͷ࡞ۀྖҬΛม͑Δ ❏ ݸਓͷεΩϧΞοϓ ❏ ݎ࿚ͳνʔϜ࡞ΓɾଐਓԽͷ཈੍

Slide 19

Slide 19 text

ϦϦʔε ˠػೳ௥Ճʹ޲͚ͯ ཁ݅ 6*σβΠϯ ٕज़બఆ ։ൃ ϦϦʔε ཁ݅ 6*σβΠϯ ٕज़બఆ ։ൃ ϦϦʔε

Slide 20

Slide 20 text

ϑϩϯτΤϯυ νʔϜ։ൃͰͷϑϩϯτΤϯυ঺հ ❏ "UPNJD%FTJHO ❏ 4UPSZCPPL ❏ "1*ͱͷ઀ଓ ❏ σʔλͷྲྀΕͱςετ

Slide 21

Slide 21 text

"UPNJD%FTJHO Ҿ༻ IUUQTBUPNJDEFTJHOCSBEGSPTUDPNDIBQUFS ❏ ཁૉʹ෼͚ͯͦΕΒΛ૊Έ߹Θ࣮ͤͯ૷͢Δ6*σβΠϯͷख๏ ❏ খ͍͞ίϯϙʔωϯτͷ߹ମ ❏ "UPNT͔Βॱʹ࣮૷͢Δ ❏ มߋ͕ଟ͘ͳΓ͕ͪͳ6*࣮૷ΛͰ͖ΔݶΓมߋʹڧ͍ߏ଄Ͱ࣮૷͍ͨ͠

Slide 22

Slide 22 text

"UPNJD%FTJHOྫ

Slide 23

Slide 23 text

4BMBSJFTͰͷ"UPNT import { default as MuiButton, ButtonProps } from '@material- ui/core/Button'; import { makeStyles } from '@material-ui/core/styles'; interface IButtonProps extends ButtonProps { width?: string; height?: string; } const useStyles = makeStyles({ root: { width: ({ width }: IButtonProps) => width || '', height: ({ height }: IButtonProps) => height || '', } }); export const Button = (props: IButtonProps): JSX.Element => { const styles = useStyles(props); const classes = { root: styles.root }; return ( {props.children} ); }; ❏ "UPNT͸ͦΕҎ্෼ղ͞Εͯ ࢖༻͞ΕΔ͜ͱ͕ͳ͍ίϯϙʔ ωϯτ ❏ .6*Λϥοϓ ❏ NBLF4UZMFTΛ࢖֦ͬͯு ❏ QSPQTͰTUZMFมߋ ❏ 6*ϥΠϒϥϦΛϥοϓ͢Δཧ༝ ❏ ֦ுͰ͖Δ ❏ มߋରԠ࣌ͷӨڹൣғ

Slide 24

Slide 24 text

νʔϜ։ൃͰ͸ଞͷϝϯό͕͢Ͱʹ ࣮૷ࡁͷίϯϙʔωϯτ͕͋Δ͔΋͠Εͳ͍ ࣮૷ͨ͠ίϯϙʔωϯτҰཡ͕Έ͍ͨʂ

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

4UPSZCPPL "UPNT

Slide 27

Slide 27 text

4UPSZCPPL 0SHBOJTNT

Slide 28

Slide 28 text

4UPSZCPPL ❏ ࢖͍͍ͨίϯϙʔωϯτ͕͢Ͱʹଘࡏ͢Δ͔Λ୳͠΍͘͢ͳΔ ❏ σβΠφͱͷೝࣝ߹ΘͤͳͲʹ΋࢖͑Δ ❏ ΧϥʔύϨοτ ❏ ࠷ۙͰ͸4UPSZCPPLͱ'JHNBͰ੔߹ੑΛऔΔྫ΋͋Δ

Slide 29

Slide 29 text

ϝϯόͱͷڞ༗ ❏ ࠷৽ΛࣗಈσϓϩΠ ❏ EFWFMPQϒϥϯν΁Ϛʔδ͢Δ࣌ʹ DPNQPOFOUT഑ԼͷϑΝΠϧʹมߋ ͕͋ͬͨ৔߹ʹσϓϩΠΛ࣮ߦ ❏ ߋ৽͞ΕΔͱ4MBDLͰ௨஌ on: push: branches: - develop paths: - 'components/**' - name: Slack Notification on SUCCESS if: success() uses: tokorom/action-slack-incoming-webhook@main env: INCOMING_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} with: text: Storyookを更新しました！ attachments: | [ { "color": "good", "fields": [ { "title": "Storybook URL", "value": "(Storybookのデプロイ先のURL)" } ] } ]

Slide 30

Slide 30 text

"1*ͱͷ઀ଓ

Slide 31

Slide 31 text

"1*ͱͷ઀ଓ ❏ ϑϩϯτΤϯυͷ։ൃʹ͸ϞοΫ"1*ͱ઀ଓ͍ͯ͠Δ ❏ ϞοΫ"1*ͱ͸ ❏ ࢼ࡞Ͱ࡞Δ໛ܕͷΑ͏ͳΠϝʔδ ❏ ࣮ࡍͷ%#ͱ͸઀ଓͤͣʹܾ·ͬͨσʔλΛϨεϙϯε ❏ ZBNMϑΝΠϧΛௐ੔ͯ͠ཉ͍͠σʔλΛϨεϙϯεͰ͖Δ ❏ ϑϩϯτΤϯυ౎߹ͰϨεϙϯεͷσʔλߏ଄Λมߋͯ͠΋Β͍͍ͨΑ͏ͳ৔߹Ͱ΋ ࣮ࡍͷ"1*Λ࣮૷લʹมߋͰ͖Δ ❏ ؀ڥຖʹ"1*ͷ઀ଓઌΛม͍͑ͯΔ fetch(“https://example.com/api/endpoint”)

Slide 32

Slide 32 text

؀ڥʹ͍ͭͯ ❏ ϩʔΧϧ؀ڥ ❏ IUUQMPDBMIPTU ❏ ϩʔΧϧͰͷ։ൃ༻ͷ؀ڥ ❏ ϩʔΧϧͰαʔόΛݐͯͯ։ൃ͢Δ ❏ ։ൃ؀ڥ ❏ IUUQTEFWFYBNQMFDPN ❏ ຊ൪ʹࣅͤͨߏ੒Ͱߏங ❏ ϑϩϯτΤϯυͱόοΫΤϯυ݁߹ ͯ͠ͷಈ࡞֬ೝ ❏ ϏδωεαΠυ΍σβΠφͱͷ࿈ܞ ❏ εςʔδϯά؀ڥ ❏ IUUQTTUHFYBNQMFDPN ❏ ϦϦʔεલͷςετͰ࢖༻ ❏ ຊ൪؀ڥ ❏ IUUQTFYBNQMFDPN ❏ ࣮ࡍʹϦϦʔεɺՔಇ͍ͯ͠Δ؀ڥ

Slide 33

Slide 33 text

؀ڥຖʹ"1*ͷ઀ଓઌΛมߋ͢Δ ❏ FOWϑΝΠϧΛ࡞੒ͯ͠؀ڥม਺Λ༻ҙ͢Δ ❏ ϩʔΧϧ؀ڥͰ͸ϞοΫ"1*ɺ։ൃ؀ڥ͸։ൃ؀ڥͷ"1* ❏ ϩʔΧϧ؀ڥͰ͸ FOWMPDBMɺ։ൃ؀ڥͰ͸FOWEFWͳͲ؀ڥઃఆϑΝΠϧΛ෼͚Δ API_HOST=http://0.0.0.0:4010 PORT=3000 API_HOST=https://dev.example.com/api PORT=8080 .env.local .env.dev

Slide 34

Slide 34 text

σʔλͷྲྀΕ

Slide 35

Slide 35 text

σʔλͷྲྀΕ 4UFQ ϒϥ΢β͔Βೖྗ͞ ΕͨσʔλΛऔಘ ೖྗ ม׵ "1*ίʔϧ ม׵ ඳը 4UFQ ೖྗ͞ΕͨσʔλΛ "1*ͷϦΫΤετͷܗ ࣜʹม׵ 4UFQ "1*Λίʔϧ͢Δ 4UFQ "1*͔ΒϨεϙϯε͞ ΕͨσʔλΛ 6*ʹ߹Θͤܗࣜʹม ׵͢Δ 4UFQ ϒϥ΢β΁ඳը͢Δ

Slide 36

Slide 36 text

σʔλͷྲྀΕ ೖྗ ʙ ม׵ ඳը "1*ίʔϧ ม׵ ೖྗ ม׵ { userName: "John", age: "20" } { userName: "John", age: 20, invitationCode: null } 'PSNͷೖྗσʔλ ม׵ޙͷσʔλ

Slide 37

Slide 37 text

σʔλͷྲྀΕ ೖྗ ʙ ม׵ // 変換 function convertFormToEntity(data: SignupForm): SignupConvertedData { const convertedData: SignupConvertedData = { userName: data.userName, age: Number(data.age), invitationCode: data.invitationCode || null }; return convertedData; } // Formのデータの型定義 type SignupForm = { userName: string; age: string; // Formは文字列になる invitationCode?: string; // undefinedまたは文字列 } // リクエストの形式に変換したデータの型定義 type SignupConvertedData = { userName: string; age: number; // 数値に変更 invitationCode: string | null; // 文字列またはnull } ඳը "1*ίʔϧ ม׵ ೖྗ ม׵

Slide 38

Slide 38 text

σʔλͷྲྀΕ "1*ίʔϧ public async signup(data: SignupConvertedData) { const result = await fetch(“/signup”, { method: ‘post’, body: data }); return result; } ඳը "1*ίʔϧ ม׵ ೖྗ ม׵

Slide 39

Slide 39 text

σʔλͷྲྀΕ ม׵ { userName: "John", createdAt: Thu Oct 28 2021 18:00:00 GMT+0900 } Ϩεϙϯεͷσʔλ ඳը͢Δσʔλ { userName: "John", createdAt: “2021/10/28 18:00” } ඳը "1*ίʔϧ ม׵ ೖྗ ม׵

Slide 40

Slide 40 text

ͳͥ͜ΜͳʹͦΕͧΕͷॲཧΛ෼ׂ͍ͯ͠Δͷ͔ 4UFQ ϒϥ΢β͔Βೖྗ͞ ΕͨσʔλΛऔಘ ೖྗ ม׵ "1*ίʔϧ ม׵ ඳը 4UFQ ೖྗ͞ΕͨσʔλΛ "1*ͷϦΫΤετͷܗ ࣜʹม׵ 4UFQ "1*Λίʔϧ͢Δ 4UFQ "1*͔ΒϨεϙϯε͞ ΕͨσʔλΛ 6*ʹ߹Θͤܗࣜʹม ׵͢Δ 4UFQ ϒϥ΢β΁ඳը͢Δ

Slide 41

Slide 41 text

൚༻తʹ࢖͏͜ͱ͕Ͱ͖ ࢓༷มߋʹ΋ରԠ͠΍͘͢ͳΔ

Slide 42

Slide 42 text

ϩάΠϯͷ৔߹ʹ΋࢖͍ճͤΔ { userName: "John", createdAt: Thu Oct 28 2021 18:00:00 GMT+0900 } Ϩεϙϯεͷσʔλ ඳը͢Δσʔλ { userName: "John", createdAt: “2021/10/28 18:00” } ඳը "1*ίʔϧ ม׵ ೖྗ ม׵

Slide 43

Slide 43 text

ͦΕͧΕ۠੾ͬͯςετΛॻ͘͜ͱ͕Ͱ͖Δ 4UFQ ϒϥ΢β͔Βೖྗ͞ ΕͨσʔλΛऔಘ ೖྗ ม׵ "1*ίʔϧ ม׵ ඳը 4UFQ ೖྗ͞ΕͨσʔλΛ "1*ͷϦΫΤετͷܗ ࣜʹม׵ 4UFQ "1*Λίʔϧ͢Δ 4UFQ "1*͔ΒϨεϙϯε͞ ΕͨσʔλΛ 6*ʹ߹Θͤܗࣜʹม ׵͢Δ 4UFQ ϒϥ΢β΁ඳը͢Δ ݁߹ςετ σʔλม׵ͷςετ "1*ίʔϧͷςετ σʔλม׵ͷςετ

Slide 44

Slide 44 text

ςετͷॏཁੑ ❏ ෆ۩߹ͷૣظൃݟ ❏ Өڹൣғͷߟྀ࿙ΕͰ༧ظͤ͵ՕॴͰͷෆ۩߹ʹ΋ؾͮ͘͜ͱ͕Ͱ͖Δ ❏ ෳࡶͳॲཧͰ΋ςετ͕ॻ͔Εͯ͋Δͱཧղ͠΍͘͢ͳΔ ❏ ʮςετ͸ཪ੾Βͳ͍ʯ

Slide 45

Slide 45 text

ϑϩϯτΤϯυύʔτ ·ͱΊ ❏ "UPNJD%FTJOH ❏ খ͍͞ίϯϙʔωϯτͷ߹ମ ❏ มߋʹڧ͍ߏ଄ ❏ 4UPSZCPPL ❏ ίϯϙʔωϯτͷΧλϩά ❏ σʔλͷྲྀΕ ❏ ॲཧ͝ͱʹ۠੾Δ ❏ ςετ͸ॏཁ

Slide 46

Slide 46 text

όοΫΤϯυ νʔϜ։ൃͰͷόοΫΤϯυ঺հ ❏ "1*࢓༷ ❏ 0QFO"1* ❏ 5ZQF(VBSE ❏ JPUT

Slide 47

Slide 47 text

ࣗݾ঺հ ❏ ஑ా ༟ݾ ❏ ೥݄ ύʔιϧΩϟϦΞೖࣾ ❏ ৬ྺ ❏ ϕϯνϟʔاۀͰ4&.΍όϦϡʔνΣʔϯվળΛ ߦ͏ɻ ❏ ৽نࣄۀͷاըΛߦ͍ɺاըӡӦΛ͓͜ͳͬͨࣄ ۀΛࢠձࣾԽ͠ࣄۀ੹೚ऀʹɻ ❏ αʔϏεΛΤϯδχΞͱͯࣗ͠෼Ͱ࡞Γ͍ͨࢥ͍ ͔Βݱ৬΁ ❏ ٕज़ ❏ /VYUKT &YQSFTTKT 'BTU"1*

Slide 48

Slide 48 text

όοΫΤϯυͰࠓ೔͓࿩͢͠Δ͜ͱͷςʔϚ ϑϩϯτΤϯυͱͷڠྗ

Slide 49

Slide 49 text

ΤϯδχΞ͕ҙࣝ͠΍͍͢ ։ൃεϐʔυ ։ൃϑϩʔ ΞϓϦέʔγϣϯ ͷ඼࣭ όϦσʔγϣϯ

Slide 50

Slide 50 text

։ൃϑϩʔ

Slide 51

Slide 51 text

Ұൠతͳ։ൃϑϩʔ όοΫΤϯυ ϑϩϯτΤϯυ ࣮૷ ࣮૷ ϦϦʔε ࣮૷͕ਐ·ͳ͍

Slide 52

Slide 52 text

εΩʔϚۦಈ։ൃ ❏ ༻ޠ ❏ εΩʔϚ"1*ͷ࢓༷ ❏ "1*࢓༷ԿΛड͚ͱͬͯԿΛ݁Ռͱͯ͠ฦ͢ͷ͔ΛఆΊͨ΋ͷ ❏ ར఺ ❏ "1*ͷ࣮૷͕ͳ͍ঢ়ଶͰ΋ϑϩϯτΤϯυ͕։ൃ΍ݕূΛߦ͑Δ "1*࢓༷Λ͸͡Ίʹఆٛ͠ɼ "1*࢓༷ΛݩʹόοΫΤϯυɾϑϩϯτΤϯυ͕ಉ࣌ʹ։ൃΛਐΊ͍ͯ͘

Slide 53

Slide 53 text

εΩʔϚۦಈ։ൃ όοΫΤϯυ ϑϩϯτΤϯυ "1*࢓༷࡞੒ ࣮૷ ϦϦʔε ࣮૷ "1*࢓༷Λݩʹ ϞοΫαʔόΛͨͯΔ

Slide 54

Slide 54 text

εΩʔϚۦಈ։ൃ όοΫΤϯυ ϑϩϯτΤϯυ "1*࢓༷࡞੒ ࣮૷ ϦϦʔε ࣮૷ "1*࢓༷Λݩʹ ϞοΫαʔόΛͨͯΔ

Slide 55

Slide 55 text

εΩʔϚۦಈ։ൃͰόοΫΤϯυ։ൃऀ͕ߦ͍ͬͯΔ͜ͱ "1*࢓༷࡞੒ "1*࢓༷Λݩʹ ϞοΫαʔόΛͨͯΔ ❏ "1*࢓༷ͷ࡞੒ ❏ "1*࢓༷Λਓ͕ཧղ͠΍͍͢ܗʹϑΥʔϚοτ͢Δ ❏ "1*࢓༷ΛݩʹϞοΫαʔόΛߏங

Slide 56

Slide 56 text

0QFO"1* ❏ 0QFO"1*ͱ͸ ❏ 3&45GVM"1*ͷυΩϡϝϯτΛهड़͢ΔͨΊͷϑΥʔϚοτ࢓༷ "1*࢓༷Λ౷Ұͨ͠ܗࣜͰهࡌ͢Δ͜ͱ͕Ͱ͖Δ

Slide 57

Slide 57 text

0QFO"1*ͷϑΥʔϚοτʹैͬͯ࡞੒͞ΕͨZBNM schemes: - "https" - "http" paths: /pet: post: tags: - "pet" summary: "Add a new pet to the store" description: "" operationId: "addPet" consumes: - "application/json" - "application/xml" produces: - "application/xml" - "application/json" parameters: - in: "body" name: "body" description: "Pet object that needs to be added to the store" required: true schema: $ref: "#/definitions/Pet" responses: "405": description: "Invalid input" security: - petstore_auth: - "write:pets" - "read:pets"

Slide 58

Slide 58 text

͜ͷ··Ͱ͸ಡΈʹ͍͘ 0QFO"1*पลπʔϧͷ4XBHHFS6*Λ࢖͏ͱ

Slide 59

Slide 59 text

ಡΈ΍͘͢ͳΔʂ

Slide 60

Slide 60 text

0QFO"1* ❏ ར఺ ❏ "1*࢓༷Λڞ௨ͷϑΥʔϚοτͰ؆୯ʹهड़Ͱ͖Δ ❏ (*U౳Λ࢖ͬͯιʔείʔυͱಉ༷ʹ؅ཧ͢Δ͜ͱ͕Ͱ͖Δ ❏ पลπʔϧ͕๛෋ ❏ ࢓༷Λهࡌ͢Δ͚ͩͰ.PDLαʔό͕࡞ΕΔ ❏ ΠϯλϥΫςΟϒͳ8FCυΩϡϝϯτΛ؆୯ʹ࡞੒͢Δ͜ͱ͕Ͱ͖Δ ❏ εΩʔϚۦಈ։ൃʹγφδʔ͕͋Δ ❏ εΩʔϚ "1*࢓༷ ͷఆٛ ❏ .PDLαʔόͷߏங

Slide 61

Slide 61 text

4BMBSJFTͰͷ0QFO"1*ΞʔΩςΫνϟ ❏ )5.-ͱͯ͠ϨϯμϦϯά ❏ .PDLαʔόͷߏங

Slide 62

Slide 62 text

(FOFSBUF)5.- ❏ ਓ͕ݟ΍͍͢Α͏ʹ0QFO"1*ϑΥʔϚοτͷϑΝΠϧ͔Β)5.-Λੜ੒ ❏ 4XBHHFS6*΍3F%PDͱ͍ͬͨπʔϧΛ׆༻͢Δ͜ͱ͕ଟ͍ 4XBHHFS6* 3F%PD

Slide 63

Slide 63 text

(JU)VCUSFOET ϖΠϯͰͷݟ΍͢͞΍NBSLEPXOΛಡΈࠐΊΔ͜ͱͳͲ͔Β3F%PDΛ࠾༻

Slide 64

Slide 64 text

SFEPDDMJ ❏ υΩϡϝϯτ࡞੒ ❏ IUNMΛϨϯμϦϯάͯ͘͠ΕΔ $ npx redoc-cli bundle specification.yml -o .doc/index.html ❏ υΩϡϝϯταʔόىಈ ❏ "1*%PDVNFOU4FSWFSΛ্ཱͪ͛ͯ͘ΕΔ $ npx redoc-cli server specification.yml

Slide 65

Slide 65 text

.PDL4FSWFS ❏ 1SJTN ❏ 0QFO"1*ϑΝΠϧΛݩʹϑϩϯτΤϯυ͔Β0QFO"1*Ͱఆٛͨ͠ϞοΫαʔό ΛͨͯΔ͜ͱ͕Ͱ͖Δ ❏ 0QFO"1*ϑΝΠϧΛهड़ͯ͠EPDLFSDPNQPTFZBNMΛ࡞੒ ❏ EPDLFSDPNQPTFVQίϚϯυΛ࢖͏ͱ.PDLαʔό্ཱ͕͕ͪΔ version: '3' services: api-mock: image: stoplight/prism volumes: - .:/api command: > mock -h 0.0.0.0 /api/specification.yml ports: - 4010:4010

Slide 66

Slide 66 text

͜͜·Ͱ ❏ εΩʔϚۦಈ։ൃΛ׆༻͢ΔͱϑϩϯτΤϯυͱόοΫΤϯυͷ࣮૷Λฏߦͯ͢͢͠ ΊΔ͜ͱ͕Ͱ͖ɺ։ൃ޻਺ͷ࡟ݮͰ͖Δ ❏ εΩʔϚۦಈ։ൃ͸0QFO"1*΍ͦͷपลπʔϧΛ࢖͏͜ͱͰ0QFO"1*ϑΝΠϧΛ࡞੒ ͢Δ͚ͩͰऔΓೖΕΔ͜ͱ͕Ͱ͖·͢

Slide 67

Slide 67 text

4BMBSJFTͰͷ0QFO"1*ϑΝΠϧͷѻ͍͔ͨ ❏ ϑΝΠϧ෼ׂ ❏ 0QFO"1*ͷ࢓༷ࣗମʹ͸ϑΝΠϧ෼ׂͷ࢓༷͸ଘࡏ͠·ͤΜ ❏ ZBNMͷ࢓༷ʹଇΓϑΝΠϧ෼ׂΛ͍ͯ͠·͢ ❏ ෼཭ͨ͠ϑΝΠϧ͸ SFGͰࢀর 0QFO"1*ϑΝΠϧ͸ංେԽ͕ͪ͠

Slide 68

Slide 68 text

෼ׂલͷঢ়ଶ paths: /pet/{petId}: get: description: "Returns a single pet" parameters: - name: "petId" in: "path" description: "ID of pet to return" type: "integer" responses: "200": description: "successful operation" schema: type: "object" properties: name: type: "string" "1*ͷ1BUI ϝιου ύϥϝʔλ Ϩεϙϯε TQFDJGJDBUJPOZBNM

Slide 69

Slide 69 text

෼ׂํ਑ paths: /pet/{petId}: get: description: "Returns a single pet" parameters: - name: "petId" in: "path" description: "ID of pet to return" type: "integer" responses: "200": description: "successful operation" schema: type: "object" properties: name: type: "string" TQFDJGJDBUJPOZBNM /api ├── specification.yml ├── models │ └── pet.yml └── paths └── getPet.yml

Slide 70

Slide 70 text

VTFSNPEFMTQFUZBNM ❏ NPEFMT͸"1*ͷϨεϙϯε΍ϦΫΤετ ͷܕΛఆٛ͢ΔϑΝΠϧ͕ଘࡏ͢Δ title: Pet description: Petの情報 type: "object" properties: name: type: "string" QFUZBNM

Slide 71

Slide 71 text

VTFSQBUITHFU1FUZBNM ❏ QBUITͷதʹ͸"1*͝ͱʹ෼཭͍ͯ͠·͢ ❏ SFGΛ͔ͭͬͯఆٛͨ͠NPEFMΛݺͼग़͠ description: "Returns a single pet" parameters: - name: "petId" in: "path" description: "ID of pet to return" type: "integer" responses: "200": description: "successful operation" schema: $ref: "../models/pet.yaml" HFU1FUZBNM

Slide 72

Slide 72 text

TQFDJGJDBUJPOZBNM ❏ QBUITΛ"1*͝ͱʹݺͼग़͢ paths: /pet/{petId}: get: $ref: “./paths/getPet.yaml” TQFDJGJDBUJPOZBNM

Slide 73

Slide 73 text

description: "Returns a single pet" parameters: - name: "petId" in: "path" description: "ID of pet to return" type: "integer" responses: "200": description: "successful operation" schema: $ref: "../models/pet.yaml" HFU1FUZBNM paths: /pet/{petId}: get: $ref: “./paths/getPet.yaml” TQFDJGJDBUJPOZBNM title: Pet description: Petの情報 type: "object" properties: name: type: "string" QFUZBNM

Slide 74

Slide 74 text

όϦσʔγϣϯ ˞࢖༻ݴޠ͸5ZQF4DSJQUΛ૝ఆ͍ͯ͠·͢

Slide 75

Slide 75 text

ͪ͜Β͸ίϯύΠϥʔʹ௨ΔͰ͠ΐ͏͔ const addNum = (a: number, b: number) => { console.log(a + b); } addNum('a', 2);

Slide 76

Slide 76 text

֎෦͔Βड͚औͬͨ஋Λ࣮ߦ͢Δ৔߹ const body = JSON.parse(request.body); const addNum = (a: number, b: number) => { console.log(a + b); } addNum(body.a, body.b); { "a": "string", "b":2 }

Slide 77

Slide 77 text

5ZQF(VBSEΛೖΕΔ͜ͱͰ๷͛Δ const body = JSON.parse(request.body); const addNum = (a: number, b: number) => { if (typeof a !== 'number' || typeof b !== 'number') { throw new Error('型違いの値を受け取りました'); } console.log(a + b); } addNum(body.a, body.b);

Slide 78

Slide 78 text

Ҿ਺͕0CKFDUͷ৔߹ const body = JSON.parse(request.body); interface ISchoolNums { studentNum: number; teacherNum: number; } const addObj = (a: ISchoolNums) => { if (!('studentNum' in a) || typeof a.studentNum !== 'number' || !('teacherNum' in a) || typeof a.teacherNum !== 'number') { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); } addObj(body);

Slide 79

Slide 79 text

ཧ૝ܗͱͯ͠͸ interface ISchoolNums { studentNum: number; teacherNum: number; } const addObj = (a: ISchoolNums) => { if (typeof a !== 'ISchoolNums') { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); }

Slide 80

Slide 80 text

5ZQF(VBSEΛJPUTΛ࢖ͬͯॻ͘ import * as t from 'io-ts' import { isLeft } from 'fp-ts/Either'; const SchoolNums = t.type({ studentNum: t.number, teacherNum: t.number }) type ISchoolNums = t.TypeOf; const addObj = (a: ISchoolNums) => { const either = SchoolNums.decode(a) if (isLeft(either)) { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); } interface ISchoolNums { studentNum: number; teacherNum: number; } const addObj = (a: ISchoolNums) => { if (!('studentNum' in a) || typeof a.studentNum !== 'number' || !('teacherNum' in a) || typeof a.teacherNum !== 'number' ) { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); } 5ZQF4DSJQUPOMZ VTFJPUT

Slide 81

Slide 81 text

ཧ૝ܗͱൺ΂ͯΈΔ const addObj = (a: ISchoolNums) => { const either = SchoolNums.decode(a) if (isLeft(either)) { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); } ཧ૝ܥ const addObj = (a: ISchoolNums) => { if (typeof a !== 'ISchoolNums') { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); } ཧ૝ܥ VTFJPUT

Slide 82

Slide 82 text

JOUFSGBDF෦෼ import * as t from 'io-ts' import { isLeft } from 'fp-ts/Either'; const SchoolNums = t.type({ studentNum: t.number, teacherNum: t.number }) type ISchoolNums = t.TypeOf; interface ISchoolNums { studentNum: number; teacherNum: number; } 5ZQF4DSJQUPOMZ VTFJPUT

Slide 83

Slide 83 text

5ZQF(VBSEΛJPUTΛ࢖ͬͯॻ͘ ❏ EFDPEFͷฦΓ஋͸&JUIFSܕͱ͍͏-FGUܕ͔3JHIUܕΛ࣋ͪ·͢ ❏ 3JHIUܕͷ৔߹͸ൺֱ͍ͨ͠ܕͱಉ͡Ͱ͋Δ͜ͱΛࣔ͢ ❏ -FGUܕͷ৔߹͸ൺֱ͍ͨ͠ܕͱҧ͏͜ͱΛࣔ͠·͢ export declare type Either = Left | Right; export interface Left { readonly _tag: 'Left'; readonly left: E; } export interface Right { readonly _tag: 'Right'; readonly right: A; }

Slide 84

Slide 84 text

5ZQF(VBSEΛJPUTΛ࢖ͬͯॻ͘ const addObj = (a: ISchoolNums) => { const either = SchoolNums.decode(a) if (isLeft(either)) { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); } const addObj = (a: ISchoolNums) => { if (!('studentNum' in a) || typeof a.studentNum !== 'number' || !('teacherNum' in a) || typeof a.teacherNum !== 'number' ) { throw new Error('型違いの値を受け取りました'); } console.log(a.studentNum + a.teacherNum); } 5ZQF4DSJQUPOMZ VTFJPUT

Slide 85

Slide 85 text

Τϥʔϝοηʔδ ❏ JPUTSFQPSUFSTΛ࢖͏͜ͱͰΤϥʔϝοηʔδΛࣗಈతʹ࡞੒ const SchoolNums = t.type({ studentNum: t.number, teacherNum: t.number }) type ISchoolNums = t.TypeOf; const addObj = (a: ISchoolNums) => { const either = SchoolNums.decode(a) if (isLeft(either)) { console.log(reporter.report(either)); return; } console.log(a.studentNum + a.teacherNum); }

Slide 86

Slide 86 text

Τϥʔϩά ❏ SFQPSUΛ࢖͏͜ͱͰԿ͕ͲͷΑ͏ʹؒҧ͍ͬͯΔ͔؆୯ʹϝοηʔδΛ࡞੒Ͱ͖Δ ❏ ೔ຊޠ΁ͷม׵΍ϝοηʔδͷܗࣜΛΧελϚΠζ͢Δ͜ͱ΋Ͱ͖Δ Expecting number at studentNum but instead got: "30"

Slide 87

Slide 87 text

JPUTͷར༻Օॴ ❏ JPUTΛ࢖ͬͨόϦσʔγϣϯ͸֎෦͔ΒσʔλΛड͚औΔ৔߹ʹ࢖༻ ❏ "1*͕ड͚औͬͨϦΫΤετ ❏ %#͔Βऔಘͨ͠஋ αʔϏε͸ϑϩϯτΤϯυͱόοΫΤϯυͳͲ͕ϝοηʔδΛૹΓ͋͏͜ͱͰ੒Γཱͬͯ ͍·͢ɻ ͦΕͧΕͷΞϓϦέʔγϣϯίʔυͷதͰ֎෦ͱͷ઀఺෦෼ΛόϦσʔγϣϯ͢Δ͜ͱͰ αʔϏεͷ඼࣭Λอͭ͜ͱ͕Ͱ͖·͢ɻ

Slide 88

Slide 88 text

όοΫΤϯυύʔτ ·ͱΊ ❏ ։ൃϑϩʔ ❏ εΩʔϚۦಈ։ൃΛߦ͏͜ͱͰόοΫΤϯυɾϑϩϯτΤϯυ͕ฏߦͯ͠։ൃ͕ Ͱ͖Δ ❏ 0QFO"1*͸εΩʔϚۦಈ։ൃͱγφδʔ͕ߴ͍ͷͰ͓͢͢ΊͰ͢ ❏ ඼࣭ ❏ ֎෦ͱͷ઀఺ͰόϦσʔγϣϯΛ͔ͬ͠Γͱߦ͏͜ͱͰαʔϏεͷ඼࣭͕อͯ· ͢ ❏ 5ZQF4DSJQUͰ5ZQF(VBSEॻ͘ͷେมͰ͕͢ɺJPUTΛ࢖͑͹ղܾͰ͖Δ

Slide 89

Slide 89 text

お知らせ

Slide 90

Slide 90 text

ຊબߟ͕։͍࢝ͯ͠·͢ʂ ೥݄຤࣌఺Ͱͷ৘ใ ❏ ΤϯδχΞίʔεʢ˞ಛఆͷϙδγϣϯ֬໿Ͱ഑ଐʣ ■エンジニア・サービス企画開発本部：新規サービスの開発に上流の企画段階から参画するエンジニア・事業戦略本部：「EPEB」などの大規模プロダクトの開発を担当するエンジニア ■データサイエンティスト・テクノロジー本部：最新技術を活用しながら、データドリブンで新規事業開発を行うデータサイエンティスト・事業戦略本部：主に「EPEB」に蓄積された個人・法人データを分析し事業に還元するデータサイエンティスト ■*5企画事業目標達成に向けた*5化の促進を行うために*5戦略の立案から企画・構想、プロジェクトマネジメントを担当

Slide 91

Slide 91 text

5FDIϝσΟΞ ΈΜͳͷʮ͸ͨΒ͘ʯΛςοΫͰͭ͘Δ ࣾ಺ͷςΫϊϩδʔ׆༻ࣄྫ΍ࣾһΠϯλϏϡʔΛൃ৴ʂ *5ɾςΫϊϩδʔਓࡐͷͨΊͷࣾձਓίϛϡχςΟɻษڧ ձ৘ใ΍ɺΠϕϯτϨϙʔτΛൃ৴ʂ