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

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

View Slide

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

View Slide

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

View Slide

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

View Slide

αʔϏε։ൃ෦ ֓ཁ
ॴଐ෦ॺ ςΫϊϩδʔຊ෦ ΤϯδχΞϦϯά౷ׅ෦ αʔϏε։ൃ෦
ैۀһ਺ ςΫϊϩδʔຊ෦ ໿໊ αʔϏε։ൃ෦ ໿໊ ೥݄຤࣌఺

ࣄۀ಺༰ ৽نαʔϏεͷاըɾ։ൃ طଘαʔϏεͷӡ༻ɾอकɾ௥Ճ։ൃ
ϛογϣϯ
ʮΤϯδχΞϦϯάͷྗͰɺ৽نαʔϏεΛૉૣ͘ఏڙ͢Δʯ

View Slide

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

View Slide

ϦϦʔεࡁΈͷαʔϏε

View Slide

View Slide

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

View Slide

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

View Slide

νʔϜߏ੒ ೥݄຤࣌఺

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

View Slide

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

View Slide

։ൃϑϩʔ ։ൃ
։ൃ ։ൃ
։ൃ
'SPOUFOE
#BDLFOE
*OGSBTUSVDUVSF
6*࣮૷ ੩త

"1*࢓༷࡞੒
Πϯϑϥߏங
ϞοΫ"1*ͱ઀ଓ
ϞοΫ"1*࡞੒ "1*࣮૷

View Slide

ϑϩϯτΤϯυͱόοΫΤϯυ෼͔Εͯͷ։ൃ
❏ ݉೚͢Δ͔෼͔ΕΔ͔͸νʔϜʹΑ༷ͬͯʑ
❏ ։ൃ౰ॳ͸ΤϯδχΞ໊͕ମ੍
❏ ϑϩϯτΤϯυ୲౰
❏ όοΫΤϯυ୲౰
❏ Πϯϑϥ΍ॾʑͷઃܭ౳ 1K.

❏ ͦΕͧΕ͕ಘҙ෼໺Λ୲౰ͯ͠ૉૣ͍։ൃΛ໨ࢦ͢
❏ ਓ਺͕૿͖͑ͯͨݱࡏ͸ɺδϣϒϩʔςʔγϣϯΛ࣮ࢪ
❏ ఆظతʹ։ൃϝϯόͷϝΠϯͷ࡞ۀྖҬΛม͑Δ
❏ ݸਓͷεΩϧΞοϓ
❏ ݎ࿚ͳνʔϜ࡞ΓɾଐਓԽͷ཈੍

View Slide

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

View Slide

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

View Slide

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

View Slide

"UPNJD%FTJHOྫ

View Slide

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*ϥΠϒϥϦΛϥοϓ͢Δཧ༝
❏ ֦ுͰ͖Δ
❏ มߋରԠ࣌ͷӨڹൣғ

View Slide

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

View Slide

View Slide

4UPSZCPPL "UPNT

View Slide

4UPSZCPPL 0SHBOJTNT

View Slide

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

View Slide

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

View Slide

"1*ͱͷ઀ଓ

View Slide

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

View Slide

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

View Slide

؀ڥຖʹ"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

View Slide

σʔλͷྲྀΕ

View Slide

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

View Slide

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

View Slide

σʔλͷྲྀΕ ೖྗ ʙ ม׵
// 変換
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*ίʔϧ ม׵
ೖྗ ม׵

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

։ൃϑϩʔ

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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"

View Slide

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

View Slide

ಡΈ΍͘͢ͳΔʂ

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

.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

View Slide

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

View Slide

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

View Slide

෼ׂલͷঢ়ଶ 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

View Slide

෼ׂํ਑ paths:
/pet/{petId}:
get:
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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Ҿ਺͕0CKFDUͷ৔߹
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')
{
}
console.log(a.studentNum + a.teacherNum);
}
addObj(body);

View Slide

ཧ૝ܗͱͯ͠͸
studentNum: number;
teacherNum: number;
}
if (typeof a !== 'ISchoolNums') {
}
}

View Slide

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.TypeOfSchoolNums>;
const either = SchoolNums.decode(a)
if (isLeft(either)) {
throw new Error('型違いの値を受け取りま
した');
}
}
studentNum: number;
teacherNum: number;
}
if (!('studentNum' in a)
|| typeof a.studentNum !== 'number'
|| !('teacherNum' in a)
|| typeof a.teacherNum !== 'number'
) {
した');
}
}
5ZQF4DSJQUPOMZ VTFJPUT

View Slide

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

View Slide

JOUFSGBDF෦෼
import * as t from 'io-ts'
import { isLeft } from 'fp-ts/Either';
})
type ISchoolNums = t.TypeOfSchoolNums>;
studentNum: number;
teacherNum: number;
}

View Slide

❏ 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;
}

View Slide

した');
}
a.teacherNum);
}
if (!('studentNum' in a)
|| typeof a.studentNum !== 'number'
|| !('teacherNum' in a)
|| typeof a.teacherNum !== 'number'
) {
した');
}
a.teacherNum);
}

View Slide

Τϥʔϝοηʔδ
❏ JPUTSFQPSUFSTΛ࢖͏͜ͱͰΤϥʔϝοηʔδΛࣗಈతʹ࡞੒
})
type ISchoolNums = t.TypeOf;
console.log(reporter.report(either));
return;
}
}

View Slide

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

View Slide

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

View Slide

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

View Slide

お知らせ

View Slide

ຊબߟ͕։͍࢝ͯ͠·͢ʂ ೥݄຤࣌఺Ͱͷ৘ใ

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

View Slide

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

View Slide

ΫϨδοτ
*MMVTUSBUJPOCZ4UPSZTFU IUUQTTUPSZTFUDPN

View Slide

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

View Slide

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

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

techtekt

More Decks by techtekt

Other Decks in Programming

Featured

Transcript