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

82ed567f8497acfed7f7b464225dd536?s=47 wakamsha
March 09, 2018

【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

82ed567f8497acfed7f7b464225dd536?s=128

wakamsha

March 09, 2018
Tweet

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 4XBHHFS4QFD0QFO"1*ͱ͍͏࢓༷ʹ४ͯ͡ॻ͔ΕͨυΩϡϝϯτ w 4XBHHFS6*4XBHHFS4QFDͰॻ͔ΕͨEPD͔Β)5.-ϖʔδΛੜ੒ w 4XBHHFS$PEFHFOEPD͔Β"1*ελϒ΍ΫϥΠΞϯταʔόͷίʔυΛੜ੒ w

    FUDʜ
  7. 48"((&3$0%&(&/ Generating server stubs and client SDKs from your OpenAPI

    specification
  8. w 4XBHHFS4QFDͰهड़͞ΕͨυΩϡϝϯτ͔ΒΫϥΠΞϯταʔόͷ ίʔυΛੜ੒͢ΔίϚϯυϥΠϯπʔϧ 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 4XBHHFS4QFDͷॻࣜ͸ͦ͜·ͰෳࡶͰ͸ͳ͍ w 0QFO"1*Yܥ͸ൺֱత෼͔Γ΍͍͢ߏ଄ͳͷ͕ಡΊ͹࣮ײͰ͖Δ ͸ͣʜ w :".-͸+40/ʹஔ׵ͯ͠͠·͑͹0, w ͜͜·Ͱ͘Ε͹୯ͳΔΦϒδΣΫτͳͷͰɺ+BWB4DSJQU

    /PEFKT Ͱࣗ༝ʹ ૢ࡞ग़དྷΔΑͶ
  15. $PEFHFOX/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 4XBHHFS6*͔Β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. *OUSPEVDFNZTFMG Զͷ໊ΛݴͬͯΈΖ ࣗݾ঺հ

  24. XFCϑϩϯτΤϯυΤϯδχΞ ॴଐגࣜձࣾϦΫϧʔτϚʔέςΟϯάύʔτφʔζ ෭ۀۀ຿ҕୗͱͯ͠๭ελʔτΞοϓاۀΛ͓ख఻͍த !XBLBNTIB *OUSPEVDFNZTFMG /BPLJ:"."%"ࢁా௚थ

  25. PSYENCE:MEDIA PRODUCED BY

  26. PSYENCE:MEDIA PRODUCED BY w ϦΫϧʔτϚʔέςΟϯάύʔτφʔζͷެࣜςοΫϒϩά w ٕज़ྗɾϊ΢ϋ΢ͷମܥԽ w 3.1ͷ಺੡։ൃ૊৫͓Αͼࣥචऀͷࣾ֎ϓϨθϯε޲্ w

    ࠾༻ϒϥϯσΟϯάڧԽ w ۀք׆ੑԽ΁ͷߩݙ 14:&/$&.&%*"
  27. None
  28. https://tech.recruit-mp.co.jp 3.1 ϒϩά

  29. 5IBOLZPV