Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

【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

wakamsha

March 09, 2018
Tweet

More Decks by wakamsha

Other Decks in Technology

Transcript

  1. $PEFHFO͸೉͘͠ͳ͍
    48"((&3͔Β+BWB4DSJQU 5ZQF4DSJQU
    ίʔυΛࣗಈੜ੒ͯ͠
    ίʔσΟϯάΛޮ཰Խ͠Α͏
    Automatically generate JavaScript ( TypeScript ) code to improve coding efficiency!

    !XBLBNTIB
    /BPLJ:"."%"
    6*5

    View Slide

  2. ϘΠϥʔϓϨʔτ
    ఆܕతͳίʔυͨͪ

    View Slide

  3. ϘΠϥʔϓϨʔτ
    w ϘΠϥʔϓϨʔτఆܕతͳίʔυ
    w ΞϓϦέʔγϣϯ։ൃΛ͍ͯ͠Δͱ͠͹͠͹ૺ۰͕ͪ͠
    w XFCΞϓϦέʔγϣϯ։ൃͩͱ 3&45
    "1*ΫϥΠΞϯτ ૄ௨෦෼

    w 5ZQF4DSJQUͳΒ"1*ϦΫΤετϨεϙϯεΦϒδΣΫτͷܕఆٛϑΝΠϧ
    w ͜ΕΒ͸ΞϓϦέʔγϣϯن໛ʹൺྫͯ͠૿͍͑ͯ͘

    View Slide

  4. TS
    Endpoint 1
    TS
    Endpoint 2
    TS
    Endpoint 3

    View Slide

  5. 48"((&3
    THE WORLD’S MOST POPULAR API TOOLING

    View Slide

  6. 48"((&3
    w 3&45GVM"1*Λߏங͢ΔͨΊͷ044ϑϨʔϜϫʔΫ
    w 4XBHHFS4QFD0QFO"1*ͱ͍͏࢓༷ʹ४ͯ͡ॻ͔ΕͨυΩϡϝϯτ
    w 4XBHHFS6*4XBHHFS4QFDͰॻ͔ΕͨEPD͔Β)5.-ϖʔδΛੜ੒
    w 4XBHHFS$PEFHFOEPD͔Β"1*ελϒ΍ΫϥΠΞϯταʔόͷίʔυΛੜ੒
    w FUDʜ

    View Slide

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

    View Slide

  8. w 4XBHHFS4QFDͰهड़͞ΕͨυΩϡϝϯτ͔ΒΫϥΠΞϯταʔόͷ
    ίʔυΛੜ੒͢ΔίϚϯυϥΠϯπʔϧ
    w "1*ελϒσʔλ΋ੜ੒Ͱ͖Δ
    w +BWB .BWFO
    Ͱಈ࡞͢Δ
    w (SPPWZ΋࢖͑Δ
    48"((&3$0%&(&/

    View Slide

  9. w ίʔυੜ੒ϩδοΫ͸ΧελϚΠζՄೳ͕ͩɺॻ͖΍͍͢ͱ͸ݴ͍೉͍
    w +BWB(SPPWZʹڧ͍ਓͳΒ·ͩ͠΋ɺ+4೴ͷਓʹ͸গʑෑډ͕ߴ͍ΑͶʜʁ
    48"((&3$0%&(&/

    View Slide

  10. ͜͜͸ࢥ͍੾ͬͯ$PEFHFOΛࣗ࡞ͯ͠ΈΑ͏͡Όͳ͍͔

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  14. $PEFHFO͸೉͘͠ͳ͍
    w 4XBHHFS4QFDͷॻࣜ͸ͦ͜·ͰෳࡶͰ͸ͳ͍
    w 0QFO"1*Yܥ͸ൺֱత෼͔Γ΍͍͢ߏ଄ͳͷ͕ಡΊ͹࣮ײͰ͖Δ ͸ͣʜ
    w :".-͸+40/ʹஔ׵ͯ͠͠·͑͹0,
    w ͜͜·Ͱ͘Ε͹୯ͳΔΦϒδΣΫτͳͷͰɺ+BWB4DSJQU /PEFKT
    Ͱࣗ༝ʹ
    ૢ࡞ग़དྷΔΑͶ

    View Slide

  15. $PEFHFOX/PEFKTͷେ·͔ͳྲྀΕ
    Workflow of Codegen with Node.js

    View Slide

  16. {
    name: "Pet",
    properties: [
    {
    name: "id",
    type: "number",
    description: "id of pet",
    optional: false
    }
    ],
    description: "Pet"
    }
    TS
    TS
    YAML JSON

    View Slide

  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,

    View Slide

  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ͷΑ͏ͳίϨΫγϣϯૢ࡞ܥϥΠϒϥϦΛ࢖͏ͷ͕
    ͓͢͢Ί

    View Slide

  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*Λ࢖ͬͯϑΝΠϧੜ੒

    View Slide

  20. #BTJD&YBNQMF
    ಈ͔ͯ͠ΈΑ͏

    View Slide

  21. w ݸʑͷςΫχοΫ͸ۃΊͯݪ࢝తͳ΋ͷͰɺͦΕΒΛ૊Έ߹Θ͚ͤͨͩ
    w .BWFO(SPPWZͱ͍͏റΓ͕ແ͍ͷͰԣల։͕༰қ
    w J04ΞϓϦ։ൃͷݱ৔ͳΒ3VCZ౳Ͱಉ༷ͷ͜ͱ͕࣮ݱग़དྷΔ
    w ˞ଟ෼/PEFKTΑΓָͪΜ

    $PEFHFO͸೉͘͠ͳ͍

    View Slide

  22. w ॴײͱͯ͠ɺ࣮ࡍʹ΍ͬͯΈΔͱ஍ຯͳ͚ͩͰܾͯ͠೉͘͠͸ͳ͔ͬͨ
    w Ή͠Ζ಄ͷମૢΛ͍ͯ͠Δؾ෼Ͱɺݸਓతʹ͸݁ߏָ͠Ίͨ
    w ؔ਺ܕϓϩάϥϛϯάΛֶश͢Δ͏͑Ͱͷ୊ࡐʹྑ͍͔΋
    w ˞ߴ֊ؔ਺΍࠶ؼ͕ύʔεॲཧͱ૬ੑ͕ྑ͍

    $PEFHFO͸೉͘͠ͳ͍

    View Slide

  23. *OUSPEVDFNZTFMG
    Զͷ໊ΛݴͬͯΈΖ
    ࣗݾ঺հ

    View Slide

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

    View Slide

  25. PSYENCE:MEDIA
    PRODUCED BY

    View Slide

  26. PSYENCE:MEDIA
    PRODUCED BY
    w ϦΫϧʔτϚʔέςΟϯάύʔτφʔζͷެࣜςοΫϒϩά
    w ٕज़ྗɾϊ΢ϋ΢ͷମܥԽ
    w 3.1ͷ಺੡։ൃ૊৫͓Αͼࣥචऀͷࣾ֎ϓϨθϯε޲্
    w ࠾༻ϒϥϯσΟϯάڧԽ
    w ۀք׆ੑԽ΁ͷߩݙ
    14:&/$&.&%*"

    View Slide

  27. View Slide

  28. https://tech.recruit-mp.co.jp
    3.1 ϒϩά

    View Slide

  29. 5IBOLZPV

    View Slide