【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
   

   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