【codegen は難しくない】Swagger から JavaScript ( TypeScript ) コードを自動生成してコーディングを効率化しよう

2018年3月8日『UIT#2 怠けるために努力を惜しまない プロのフロントエンドエンジニアたち』と
2018年3月9日『Gotanda.js #10』にて発表した資料です。

- https://uit.connpass.com/event/79891/
- https://gotandajs.connpass.com/event/79724/

#uit_2
#gotandajs

Transcript

1. $PEFHFO
   ͸೉͘͠ͳ͍
   48"((&3
   ͔Β
   +BWB4DSJQU
   
   5ZQF4DSJQU
   
   ίʔυΛࣗಈੜ੒ͯ͠
   ίʔσΟϯάΛޮ཰Խ͠Α͏ Automatically generate JavaScript ( TypeScript ) code to improve coding efficiency!  !XBLBNTIB
   /BPLJ
   :"."%"
   6*5
   
2. ϘΠϥʔϓϨʔτ ఆܕతͳίʔυͨͪ
3. ϘΠϥʔϓϨʔτ w ϘΠϥʔϓϨʔτ
   
   ఆܕతͳίʔυ
   w ΞϓϦέʔγϣϯ։ൃΛ͍ͯ͠Δͱ͠͹͠͹ૺ۰͕ͪ͠
   w XFC
   ΞϓϦέʔγϣϯ։ൃͩͱ
   
   3&45
   
   "1*
   ΫϥΠΞϯτ
   
   ૄ௨෦෼
   
   w 5ZQF4DSJQU
   ͳΒ"1*
   ϦΫΤετ
   
   Ϩεϙϯε
   ΦϒδΣΫτͷܕఆٛϑΝΠϧ
   w ͜ΕΒ͸ΞϓϦέʔγϣϯن໛ʹൺྫͯ͠૿͍͑ͯ͘
4. TS Endpoint 1 TS Endpoint 2 TS Endpoint 3
5. 48"((&3 THE WORLD’S MOST POPULAR API TOOLING
6. 48"((&3 w 3&45GVM
   "1*
   Λߏங͢ΔͨΊͷ
   044
   ϑϨʔϜϫʔΫ
   w 4XBHHFS
   4QFD
   
   0QFO
   "1*
   ͱ͍͏࢓༷ʹ४ͯ͡ॻ͔ΕͨυΩϡϝϯτ
   w 4XBHHFS
   6*
   
   4XBHHFS
   4QFD
   Ͱॻ͔Εͨ
   EPD
   ͔Β
   )5.-
   ϖʔδΛੜ੒
   w 4XBHHFS
   $PEFHFO
   
   EPD
   ͔Β
   "1*
   ελϒ΍
   ΫϥΠΞϯτ
   
   αʔόͷίʔυΛੜ੒
   w FUD
   ʜ
7. 48"((&3
   $0%&(&/ Generating server stubs and client SDKs from your OpenAPI specification
8. w 4XBHHFS
   4QFD
   Ͱهड़͞ΕͨυΩϡϝϯτ͔ΒΫϥΠΞϯτ
   
   αʔό
   ͷ ίʔυΛੜ੒͢ΔίϚϯυϥΠϯπʔϧ
   w "1*
   ελϒσʔλ΋ੜ੒Ͱ͖Δ
   w +BWB
   
   .BWFO
   
   Ͱಈ࡞͢Δ
   w (SPPWZ
   ΋࢖͑Δ 48"((&3
   $0%&(&/
9. w ίʔυੜ੒ϩδοΫ͸ΧελϚΠζՄೳ͕ͩɺॻ͖΍͍͢ͱ͸ݴ͍೉͍
   w +BWB
   
   (SPPWZ
   ʹڧ͍ਓͳΒ·ͩ͠΋ɺ+4
   ೴ͷਓʹ͸গʑෑډ͕ߴ͍ΑͶʜʁ 48"((&3
   $0%&(&/
10. ͜͜͸ࢥ͍੾ͬͯ
    $PEFHFO
    Λࣗ࡞ͯ͠ΈΑ͏͡Όͳ͍͔
11. openapi: 3.0.1 paths: /pets: get: summary: Get pet list operationId: pets/index tags: - pets responses: $ref: '#/components/responses/PetsIndex' post: summary: Create new pet operationId: Pets/create tags: - pets requestBody: $ref: '#/components/requestBodies/PetsCreate' responses: $ref: '#/components/responses/PetsCreate' components: schemas: Pet: type: object required: - id - name properties: id: type: integer format: int32 Swagger Spec
12. responses: $ref: '#/components/responses/PetsIndex' post: summary: Create new pet operationId: Pets/create tags: - pets requestBody: $ref: '#/components/requestBodies/PetsCreate' responses: $ref: '#/components/responses/PetsCreate' components: schemas: Pet: type: object required: - id - name properties: id: type: integer format: int32 name: type: string responses: PetsIndex: '200': content: application/json: schema: $ref: '#/components/schemas/PetsResponse' PetsCreate: Swagger Spec
13. - name properties: id: type: integer format: int32 name: type: string responses: PetsIndex: '200': content: application/json: schema: $ref: '#/components/schemas/PetsResponse' PetsCreate: '201': content: application/json: schema: $ref: '#/components/schemas/AnyContent' requestBodies: PetsCreate: required: true content: application/json: schema: $ref: '#/components/schemas/PetsCreate' Swagger Spec
14. $PEFHFO
    ͸೉͘͠ͳ͍ w 4XBHHFS
    4QFD
    ͷॻࣜ͸ͦ͜·ͰෳࡶͰ͸ͳ͍
    w 0QFO
    "1*
    Y
    ܥ
    ͸ൺֱత෼͔Γ΍͍͢ߏ଄ͳͷ͕ಡΊ͹࣮ײͰ͖Δ
    
    ͸ͣʜ
    w :".-
    ͸
    +40/
    ʹஔ׵ͯ͠͠·͑͹
    0,
    w ͜͜·Ͱ͘Ε͹୯ͳΔΦϒδΣΫτͳͷͰɺ+BWB4DSJQU
    
    /PEFKT
    
    Ͱࣗ༝ʹ ૢ࡞ग़དྷΔΑͶ
    
15. $PEFHFO
    X
    /PEFKT
    ͷେ·͔ͳྲྀΕ Workflow of Codegen with Node.js
16. { name: "Pet", properties: [ { name: "id", type: "number", description: "id of pet", optional: false } ], description: "Pet" } TS TS YAML JSON
17. { name: "Pet", properties: [ { name: "id", type: "number", description: "id of pet", optional: false } ], description: "Pet" } TS TS YAML JSON 4XBHHFS
    6*
    ͔Β
    4QFD
    ϑΝΠϧΛμ΢ϯϩʔυ
    +40/
    ϑΝΠϧͳΒͦͷ··
    :".-
    ͳΒ
    +40/
    ΁ஔ׵͢Ε͹
    0,
18. { name: "Pet", properties: [ { name: "id", type: "number", description: "id of pet", optional: false } ], description: "Pet" } TS TS YAML JSON 4QFD
    ͔Βཉ͍͠஋Λநग़ͯ͠੔ܗ
    جຊతʹ
    Object.keys
    ؔ਺Λ࢖͍·͘Δ
    -PEBTIKT
    ΍
    3BNEBKT
    ͷΑ͏ͳίϨΫγϣϯૢ࡞ܥϥΠϒϥϦΛ࢖͏ͷ͕ ͓͢͢Ί
19. { name: "Pet", properties: [ { name: "id", type: "number", description: "id of pet", optional: false } ], description: "Pet" } TS TS YAML JSON ੔ܗͨ͠஋͔Β
    ※.js (※.ts) ϑΝΠϧΛੜ੒
    ஋Λ
    NVTUBDIF
    ςϯϓϨʔτʹྲྀ͠ࠐΉ͚ͩ
    /PEFKT
    ͷ
    'JMF4USFBN
    "1*
    Λ࢖ͬͯϑΝΠϧੜ੒
20. #BTJD
    &YBNQMF ಈ͔ͯ͠ΈΑ͏
21. w ݸʑͷςΫχοΫ͸ۃΊͯݪ࢝తͳ΋ͷͰɺͦΕΒΛ૊Έ߹Θ͚ͤͨͩ
    w .BWFO
    
    (SPPWZ
    ͱ͍͏റΓ͕ແ͍ͷͰԣల։͕༰қ
    w J04
    ΞϓϦ։ൃͷݱ৔ͳΒ
    3VCZ
    ౳Ͱಉ༷ͷ͜ͱ͕࣮ݱग़དྷΔ
    w
    ˞
    ଟ෼
    /PEFKT
    ΑΓָͪΜ
    $PEFHFO
    ͸೉͘͠ͳ͍
22. w ॴײͱͯ͠ɺ࣮ࡍʹ΍ͬͯΈΔͱ஍ຯͳ͚ͩͰܾͯ͠೉͘͠͸ͳ͔ͬͨ
    w Ή͠Ζ಄ͷମૢΛ͍ͯ͠Δؾ෼Ͱɺݸਓతʹ͸݁ߏָ͠Ίͨ
    w ؔ਺ܕϓϩάϥϛϯάΛֶश͢Δ͏͑Ͱͷ୊ࡐʹྑ͍͔΋
    w
    ˞
    ߴ֊ؔ਺΍࠶ؼ͕ύʔεॲཧͱ૬ੑ͕ྑ͍
    $PEFHFO
    ͸೉͘͠ͳ͍
23. *OUSPEVDF
    NZTFMG Զͷ໊ΛݴͬͯΈΖ
     ࣗݾ঺հ
24. XFC
    ϑϩϯτΤϯυΤϯδχΞ
    ॴଐ
    
    גࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ
    ෭ۀ
    
    ۀ຿ҕୗͱͯ͠๭ελʔτΞοϓاۀΛ͓ख఻͍த !XBLBNTIB *OUSPEVDF
    NZTFMG /BPLJ
    :"."%"
    
    ࢁా
    ௚थ
25. PSYENCE:MEDIA PRODUCED BY
26. PSYENCE:MEDIA PRODUCED BY w ϦΫϧʔτϚʔέςΟϯάύʔτφʔζͷެࣜςοΫϒϩά
    w ٕज़ྗɾϊ΢ϋ΢ͷମܥԽ
    w 3.1
    ͷ಺੡։ൃ૊৫͓Αͼࣥචऀͷࣾ֎ϓϨθϯε޲্
    w ࠾༻ϒϥϯσΟϯάڧԽ
    w ۀք׆ੑԽ΁ͷߩݙ 14:&/$&.&%*"
28. https://tech.recruit-mp.co.jp 3.1 ϒϩά
29. 5IBOL
    ZPV