デブサミを支える技術 - Nuxt.jsとFastAPIでデモを作った/Road to Developers Summit 2020

Transcript

1. #devsumi 2020ొஃʢ༧ʣΛࢧ͑Δٕज़ ແବʹؤுͬͯNuxt.js + FastAPIͰσϞ࡞ͬͨ Shinichi Nakagawa a.k.a. @shinyorke

2. TL;DR • ʮΞΠπͱࣅ͍ͯΔ໺ٿબखʢଧऀʹݶ ΔʣʯΛβΫοͱݟͤΔΞϓϦΛ࡞ͬͨ • Nuxt.js + FastAPIͰ͍͍ײ͡ʹ࡞੒ • ྨࣅੑείΞܭࢉ͸Pandas.

   ԋࢉ͸GCPʹؙ౤͛

3. Who am I?ʢ͓લ୭Αʣ • Shinichi Nakagawa(@shinyorke) • JX௨৴ࣾSenior Engineer •

   Python/Data Science/SABRmetrics ⚾ • ͔ͭͯ໺ٿΛ࢓ࣄʹͯͨ͠ਓ

4. ຊ೔ͷ͓୊. σϒαϛͷൃදͰࣗ෼ͷΩϟϦΞͱ໺ٿσʔλΛֻ͚ͯ ͳΜͱͳ͘େتར෩ʹ࿩͢ҝʹσϞΛ࡞Γ·ͨ͠

5. શମ૾͸ͪ͜Β جຊతʹDocker্Ͱಈ͔ͯ͠·͢. ͳ͓, ʮVottoʯ͸ʮϘοτʯʮϘτʔʯͱಡΜͰ͍ͩ͘͞

6. ૣ଎σϞΓ·͢.

7. ͩ͜Θͬͨ͜ͱ • Nuxt.jsʢϑϩϯτΤϯυʣ • FastAPIʢόοΫΤϯυʣ • ࣅ͍ͯΔ໺ٿબखͷࢉग़ΞϧΰϦζϜͱ࣮૷

8. Nuxt Core UI - ؅ཧը໘ • BootstrapϕʔεͷAdminʢ؅ཧʣը໘ͷ༗໊ͳ ύοέʔδͱͯ͠ʮCore UIʯ͍ͬͯ͏ͷ͕͋Δ •

   Core UIࣗମ͸৭ΜͳFWʢAnguler,VueͳͲʣʹ ରԠ͍ͯ͠Δ,ͦͷதʹNuxt.js൛͕͋Δ. • ࠓճ͸Nuxt Core UIΛfork֦ͯ͠ு࣮૷ͨ͠. https://github.com/muhibbudins/nuxt-coreui • ͪͳΈʹݩωλ͸PyCon JP 2018ͷࣗ෼ͷൃදͰ͢ʢখ੠ʣ

9. FastAPI - όοΫΤϯυ • ࠷ॳ͸ResponderͰ࡞ΔػӡͰ͕ͨ͠ʂʁ ࣾ಺ͰFastAPI͕࢖ΘΕ͍ͯΔͱ஌ͬͯ ํ਑Λม͑ͨʢ࢖͍͔ͨͬͨʣ • ࿩Λฉ͍ͯ࡞Γ࢝Ίͨͷ͕12/30ͷ18:00͝Ζ ͦͷ೔ͷ΢νʹ80%΄Ͳ׬੒

   • αΫαΫಈ͘͠ΤΤ΍Μ͜Εʢ͜ͳΈʣ

10. ৄ͍͠࿩͸…ϒϩάͰͲ͏ͧ. ೥຤ʹϒϩάԽ͠·ͨ͠, ͩ͜ΘΓϙΠϯτ͸΋ͦͪΒͰ. https://shinyorke.hatenablog.com/entry/fastapi

11. ͩ͜ΘΓϙΠϯτʢཁ໿ʣ • খ͍͞ΞϓϦέʔγϣϯ͚ͩͲ࠷ॳ͔Β ΫϦʔϯΞʔΩςΫνϟΛ໨ࢦ͠෼ׂͨ͠ • ϏδωεϩδοΫܥ͸Schemaʹू໿. DAOͬΆ͍τί͸SQLͷΈʹूத • ͋ͱͰೝূͱ͔ೖΕΒΕΔΑ͏ʹ༨ന࢒ͨ͠

12. ࣅ͍ͯΔ໺ٿબखͷࢉग़Ϟσϧ • ʮྨࣅੑείΞʯͱ͍͏ϞσϧΛ࢖ͬͨ • ଧܸ੒੷ͱकඋϙδγϣϯͰॏΈΛ͚ͭͯ ฒ΂ͯධՁ • ࣮૷ͦͷ΋ͷ͸Pandas • ϝδϟʔϦʔΨʔ19,000ਓ෼Λܭࢉ͢Δͷʹ

    GoogleͷྗΛआΓ·ͬͨ͘

13. ࢉग़ΞϧΰϦζϜͷৄࡉ ࣮͸ͦͬͱΞυϕϯτΧϨϯμʔʹॻ͖·ͨ͠. https://shinyorke.hatenablog.com/entry/similarity-score-python

14. ࠷ޙʹ • ೥຤೥࢝ٳΈ + ि຤ + ࢓ࣄऴΘͬͨ͋ͱฏ೔ Ͱ͍͍ײ͡ʹ࢓্͛·ָ͕͔ͨͬͨ͠͠ • ྨࣅੑείΞͱࣗ෼ͷΩϟϦΞ͕Ͳ͏ؔ܎͢

    Δ͔͸͜Ε͔Βॻ͖·͢ʢߏ૝͸͋Δʣ • API͸GolangͰॻ͖௚͍ͨ͠ :okimochi:

15. ଓ͖͸2/14ͷ #devsumi 2020Ͱʂ :done: ੜ֔ΠνɾΤϯδχΞͱͯ͠޷͖ͳٕज़ͰδϟϯϓΞοϓ͠ଓ͚Α͏ https://event.shoeisha.jp/devsumi/20200213/session/2420/