Node.jsでWebサイトからAPIを作るプログラムを書いた話

#frontkansai 6月のWeb API勉強会の内容です。
背景文字の上にテキスト文字が入っているカオススライドを綺麗にみたい方はオススメ

Transcript

1. /PEFKTͰ8FCαΠτ͔Β
   "1*Λ࡞ΔϓϩάϥϜΛ
   ॻ͍ͨ࿩
   GSPOULBOTBJ!QPUBUPE
   

   View Slide

2. ࣗݾ঺հ
   w Ֆ୩୓ຏ
   w GSPOULBOTBJελοϑ
   w ౦ژͷελʔτΞοϓͰϑϩϯτΤϯυΤϯ
   δχΞ݉σβΠφʔ΍ͬͯ·͢
   w -5༻ʹίʔυॻ͍ͯͨΒϥΠϒϥϦͷ૬ੑ͔
   ͳΜ͔ͰΨϯϋϚΓͯ͠ே·ͰϧʔτͰͭΒ
   ͔ͬͨਓ
   w űřŎŕűűŖɿ!QPUBUPE
   

   View Slide

3. ࠓ೔࿩͢͜ͱ ༧ఆ
   
   w ࣄͷൃ୺ܰ͘
   w /PEFKTͰ8FCαΠτΛಡΈʹߦͬͯ"1*Խ͢Δίʔυॻ
   ͍ͨΑʂ
   w ͔͠΋ͦΕΛOQNNPEVMFͰఏڙʂ
   w ͞Βʹ͞ΒʹͦΕΛ࢖ͬͯͳΜͱαʔϏεԽ·Ͱ͠
   ͪΌͬͨʂ
   

   View Slide

4. ࠓ೔࿩͢͜ͱ ࣮৘
   
   w ࣄͷൃ୺ܰ͘ɹˡ։࢝ΪϦΪϦͰڐՄΛಘͨ
   w /PEFKTͰ8FCαΠτΛಡΈʹߦͬͯ"1*Խ͢Δίʔυॻ
   ͍ͨΑʂɹˡεΫϨΠϐϯά͕Ͱ͖ͨ ඇެ։
   
   w ͔͠΋ͦΕΛOQNNPEVMFͰఏڙʂˡແཧͩͬͨ
   w ͞Βʹ͞ΒʹͦΕΛ࢖ͬͯͳΜͱαʔϏεԽ·Ͱ͠
   ͪΌͬͨʂɹˡແཧͩͬͨ
   

   View Slide

5. ͍͚ͨ཰ ॏΈ෇͚ͳ͠
   
   

   View Slide

6. ࣄͷൃ୺
   ౤ߘ͸ڐՄΛಘͯܝࡌ͓ͯ͠Γ·͢
   
   

   View Slide

7. ࠷௿௞ۚ"1*
   'BDFCPPLͰແ͍͔ͳʔͬͯݴ͏ਓ͕ग़ݱ
   ɹ
   ɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹɹ
   ɹɹ
   ɹɹ
   ɹɹ
   

   View Slide

8. ࠷௿௞ۚ"1*
   'BDFCPPLͰແ͍͔ͳʔͬͯݴ͏ਓ͕ग़ݱ
   ˣ
   ೋ࣌ؒ΄ͲͰ͋Δਓ͕ް࿑লͷαΠτ͔ΒҾͬு͖ͬͯͨσʔ
   λΛ"1*Խ
   ɹ
   ɹ
   ɹ
   

   View Slide

9. ࠷௿௞ۚ"1*
   'BDFCPPLͰແ͍͔ͳʔͬͯݴ͏ਓ͕ग़ݱ
   ˣ
   ೋ࣌ؒ΄ͲͰ͋Δਓ͕ް࿑লͷαΠτ͔ΒҾͬு͖ͬͯͨσʔ
   λΛ"1*Խ
   ˣ
   ͦΕΛݟͯ
   ʮ͋Εɺ͜͏͍͏ͷ݁ߏधཁ͋ΔΜ͡ΌͶʁʯ
   

   View Slide

10. ͜ΕΩλͳʁΩλͳʁ
    

    View Slide

11. طʹ͋ͬͨΘ
    IUUQTXXXLJNPOPMBCTDPN
    

    View Slide

12. ͱࢥͬͨΒࢮΜͰͨ
    

    View Slide

13. ͜ΕΩλͳʁΩλͳʁ
    

    View Slide

14. ͱࢥ͍ͳ͕Βख़੒ ϲ݄൒
    ʜ
    

    View Slide

15. ౿Έ੾ͬͨ
    

    View Slide

16. ͱΓ͋͑ͣ࢓༷
    w ·ͣ͸Ϟδϡʔϧ୯ҐͰ։ൃ
    w K2VFSZ-JLF RVFSZ4FMFDUPS
    ͕࢖͑Δ͜ͱ͸ඞਢ
    w ޙʑ+40/Ͱు͔ͤΔ͔Β+40CKFDUͱͯ͠ͷܗ΁ͷม׵
    ΋ΠΠײ͡ʹ͍ͨ͠ͳ
    w औΓ׶͑ͣ/PEFԼͰ࢖͏͚͔ͩͩΒ&4όϦόϦͰॻ
    ͜͏ ඇಉظʹͭΑ͋͘Γ͍ͨ
    
    

    View Slide

17. ·Ͱʹ΍Δ͜ͱ
    w طʹ࢓༷Λܾఆͨ࣌͠఺Ͱͳ͔ͳ͔ݫ͔ͬͨ͠ͷͰɺ࠷௿
    ௞ۚ"1*ΛόονϦऔͬͯ͘Δ͜ͱΛ໨ඪʹ
    w ϕλॻ͖͡Όͳͯ͘औಘ෦෼͸͖ͪΜͱϞδϡʔϧͱͯ͠
    ্͔͖͛ͰಡΈࠐΜͰಈ͔͢
    w ଞͷऔͬͯ͘Δର৅ͱͯ͠΋͏Ұ͙݅Β͍༻ҙ͢Δ Α͞ؾ
    ͳͷ͕ͪΐ͏Ͳ։͍ͯͨιγϟήσʔλͩͬͨͷͰͦΕʹ
    ͨ͠
    
    

    View Slide

18. ʹ
    

    View Slide

19. औΓ׶͑ͣ༡΂Δ
    ίʔυ͕׬੒
    

    View Slide

20. ΍ͬͯΔ͜ͱ
    w TVQFSBHFOUΛ࢖ͬͯNFUIPEಈతʹࢦఆͰ͖ΔΑ͏
    ʹͯ͠೚ҙͷαΠτʹ೚ҙͷϞϊͿΜ౤͛Δ
    w DIFFSJPΛར༻ͯ͠ྑ͍ײ͡ʹѻ͑ΔΑ͏ʹͯ͠΍Δ
    w ͦΕΛ1SPNJTFͰฦͯ͠΍ͬͯʢಉ࣌ʹ࡞Ζ͏ͱ͠
    ͯͨʣαΠϯΠϯͱ͔ΛΨϯΨϯνΣʔϯͰॻ͍ͯ
    ͍͚Δ࢓༷ʹ
    

    View Slide

21. ΍ͬͯΈͨ
    IUUQOFLPUPPMTDMVCSBOLI
    ιγϟήͷσʔλ͕ஔ͔ΕͯΔαΠτ
    
    

    View Slide

22. ͍͚ͨ
    

    View Slide

23. ࠷௿௞ۚ΋ʜʜ
    IUUQXXXNIMXHPKQTUGTFJTBLVOJUTVJUFCVOZBLPZPV@SPVEPVSPVEPVLJKVONJOJNVNJDIJSBO
    

    View Slide

24. ʂʁ
    

    View Slide

25. ʊਓਓਓਓʊ
    ʼɹ4+*4ɹʻ
    

    View Slide

26. αΫͬͱม׵
    

    View Slide

27. Ͱ͖ͳ͔ͬͨ
    

    View Slide

28. Կނਓྨ͸αΫͬͱ
    ม׵ग़དྷͳ͔ͬͨͷ͔ʁ
    w IUUQϦΫΤετϞδϡʔϧͷTVQFSBHFOU͕Τϯίʔ
    σΟϯά͍͡Δͷݫͦ͠͏ͩͬͨ
    w ͦͷͨΊ͍͘ΒޙͰม׵͠Α͏ͱͯ͠΋ɺऔ͖ͬͯͨ
    ॠؒ/PEFੈքͷVUGʹͳͬͯ4+*4͕όΩόΩʹͳͬͨ
    w ࠷ऴతʹSFRVFTUϞδϡʔϧʹม͑ͯ65'Ҏ֎͸ਖ਼ن
    දݱͰऔ͖ͬͯͨDIBSTFUΛҾ਺ʹͨ͠JDPOWͰରԠ
    

    View Slide

29. ࣮ࡍಈ͔ͯ͠ΈΔ
    

    View Slide

30. ͦΜͳ͜ΜͳͰ
    

    View Slide

31. /PEFͷεΫϨΠϐϯάϞδϡʔϧ
    8FCαʔϏε։ൃ͸͡Ί·ͨ͠
    

    View Slide

32. ׬੒ͨ͠Βੋඇ͓ࢼ͠Λʜ
    

    View Slide

33. ͋ͱ
    

    View Slide

34. /PEFŧŔŕŪŜşſ͜Θ͍ਓ
    

    View Slide

35. ๏཯ৄ͍͠ਓ
    

    View Slide

36. औΓ׶͑ͣެ։ͯ͠։ൃ͍ͯ͘͠ͷͰ
    ίϯτϦϏϡʔτٻϜʂ
    

    View Slide

37. ͝ਗ਼ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide