Build and Scale Multiple Voice Application By using TypeScript / jsconfjp2019

Transcript

1. B u i l d a n d S c

   a l e M u l t i p l e Vo i c e A p p l i c a t i o n B y u s i n g Ty p e S c r i p t J S C o n f J P 2 0 1 9 #jsconfjp

2. H i d e t a k a O k

   a m o t o • Digitalcube Co. Ltd. • JS developer (React / Serverless) • Talk about Alexa since 2016
3. None
4. None
5. None

6. A g e n d a • ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ • Amazon

   AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝୊ • ෳ਺ͷΞϓϦ։ൃɾӡ༻Λޮ཰Խ͢Δ #jsconf

7. D o N O T t a l k •

   ର࿩Ϟσϧͷ࡞੒΍νϡʔχϯά • εϚʔτεϐʔΧʔʢA / G / LʣҎ֎ͷVUIΞϓϦέʔγϣϯ • AWS Lambda౳Ϋϥ΢υΠϯϑϥͷΞʔΩςΫτ #jsconf

8. A g e n d a • ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ • Amazon

   AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝୊ • ෳ਺ͷΞϓϦ։ൃɾӡ༻Λޮ཰Խ͢Δ #jsconf

9. Ի ੠ ɾ ݴ ޠ ॲ ཧ ܥ ͷ ஌

   ࣝ ͕ ͳ ͘ ͯ ΋ ։ ൃ Մ ೳ • STT (Speech To Text) / NLU (ࣗવݴޠॲཧ)͸αʔϏεଆͷ੹຿ • ձ࿩ͷαϯϓϧ΍༻ޠूΛొ࿥͢Δ͚ͩͰ͍͍ͩͨOK • όοΫΤϯυʹ͸STT / NLUॲཧޙͷJSON͕ૹΒΕΔ • TTS(Text to Speech)΋ಉ༷ɺJSONΛreturn͢Ε͹Ի੠Խ͞ΕΔ #jsconf

10. V U I Ξ ϓ Ϧ ։ ൃ ˺ We

    b h o o k ࣮ ૷ • Slack΍LINEͳͲͷbotʹ͍ۙΠϝʔδ • POSTͰ͘ΔJSONΛಡΜͰॲཧ͠ɺฦ౴ΛJSONͰฦ͢ • 1ձ࿩ 1Webhook࣮ߦͳͷͰɺσϑΥϧτͰ͸Stateless • ࣮ࡍʹ͸จ຺΍աڈͷ΍ΓͱΓΛهԱ͢Δඞཁ͕͋ΓɺDBΛ࢖͏ #jsconf

11. A g e n d a • ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ • Amazon

    AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝୊ • ෳ਺ͷΞϓϦ։ൃɾӡ༻Λޮ཰Խ͢Δ #jsconf

12. A l e x a Ͱ ࢖ ͑Δ Ξ ϓ

    Ϧ = εΩϧ

13. Ұ ൠ త ͳ Ξ ϓ Ϧ έ ʔ γ

    ϣ ϯ : Χ ε λϜ εΩϧ

14. A l e x a εΩϧ ͷ छ ྨ •

    εϚʔτϗʔϜεΩϧɹɹɿεϚʔτϗʔϜ • ϑϥογϡχϡʔεεΩϧɿFeedهࣄಡΈ্͛ • ϏσΦεΩϧɹɹɹɹɹɹɿಈը࠶ੜ • ΧελϜεΩϧɹɹɹɹɹɿͦΕҎ֎ʢήʔϜ / Util / ങ͍෺ / etcʣ • Music Skillɹɹɹɹ(೔ຊޠະରԠ)ɹɹ ɹɹ ɿԻָͷ࠶ੜ • Baby Activity Skill (೔ຊޠະରԠ) ɹɹɹɹ ɿ͓Ήͭͷަ׵ / ৯ࣄ / ਭ຾ / ମॏͷه࿥ͳͲ • Meetingsɹɹɹɹ(೔ຊޠະରԠ)ɹɹɹɹ ɿAlexa For BussinessΛར༻ͨ͠ձٞࣨ༧໿

15. A l e x a ͷ Ξ ϓ Ϧ (

    εΩϧ ) ։ ൃ • AWS͕༻͍ΒΕΔ͜ͱ͕Ұൠత • AWS Lambda·ͨ͸HTTPS API͕ૹ৴ઌʹࢦఆͰ͖Δ • ASK CLI (Node.js)Ͱ͸AWS Lambda͕σϓϩΠ͞ΕΔ • ϦΫΤετͷॲཧ΍Ϩεϙϯεͷ࡞੒ʹ͸ask-sdkΛར༻͢Δ #jsconf

16. n p m i - S a s k -

    s d k • AlexaεΩϧ։ൃͷͨΊͷSDK (TypeScript) • lernaΛ࢖ͬͯϞϊϨϙԽ͞Ε͍ͯΔ • TypeScriptͷ৔߹͸ask-sdk-modelͰϦΫΤετͷܕ৘ใΛར༻͢Δ #jsconf

17. a s k - s d k ϥ Π ϒ

    ϥ Ϧ ( 2 0 1 9 / 1 1 ࣌ ఺ ) • ask-sdk-coreɹɹɹɹɹɹɹɹɹɹɹɹ :ຊମ • ask-sdk-runtimeɹɹɹɹɹɹɹɹɹɹɹ: ࣮ߦॲཧ෦෼ • ask-sdk-dynamodb-persistence-adapter: DynamoDB༻Ξμϓλ • ask-sdk-s3-persistence-adapterɹɹɹɹ: S3ΛDBʹ࢖͏ͨΊͷΞμϓλ • ask-sdk-express-adapterɹɹɹɹɹɹ : ExpressͰಈ͔ͨ͢ΊͷΞμϓλ • ask-sdk-v1adapterɹɹɹɹɹɹɹɹɹ : Alexa SDK(v1)༻Ξμϓλ #jsconf

18. •S k i l l B u i l d

    e r s ʹ 
 R e q u e s t H a n d l e r ొ ࿥ •্ ͔ Β ॱ ʹ 
 c a n H a n d l e ͕ ࣮ ߦ •t r u e Λ ฦ ͠ ͨ O b j e c t ͷ 
 h a n d l e ͕ ࣮ ߦ ͞ Ε Δ
19. None
20. None
21. None

22. A S K S D K ͕ ΍ ͬͯ ͍

    Δ ͜ ͱ

23. Ұ ൠ త ͳ ॻ ͖ ํ export handler =

    Ask.SkillBuilders.custom() .addRequestHandlers(...) .lambda()

24. AW S L a m b d a ϥ ΠΫ

    ʹ ॻ ͖ ௚ ͢ͱ ͜ ͏ ͳ Δ export handler = Ask.SkillBuilders.custom() .addRequestHandlers(...) .lambda() export const handler= async (event) => { return Ask.SkillBuilders.custom() .addRequestHandlers(...) .create().invoke(event) }

25. l a m b d a ( ) ͕ ಺

    ෦ Ͱ . c re a t e ( ) . i n v o k e ( e v e n t ) Λ ࣮ ߦ export handler = Ask.SkillBuilders.custom() .addRequestHandlers(...) .lambda() export const handler= async (event) => { return Ask.SkillBuilders.custom() .addRequestHandlers(...) .create().invoke(event) }

26. i n v o k e ( ) ಺ Ͱ

    e v e n t Λ h a n d l e r I n p u t ʹ ม ׵ const input : HandlerInput = { requestEnvelope, //͜Ε͕event context, attributesManager : AttributesManagerFactory.init({ requestEnvelope, persistenceAdapter : this.persistenceAdapter, }), responseBuilder : ResponseFactory.init(), serviceClientFactory : this.apiClient ? new ServiceClientFactory({ apiClient : this.apiClient, apiEndpoint : requestEnvelope.context.System.apiEndpoint, authorizationValue : requestEnvelope.context.System.apiAccessToken, }) : undefined, }; https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/blob/2.0.x/ask-sdk-core/lib/skill/CustomSkill.ts#L65

27. h a n d l e r I n p

    u t ͷ த ਎ ֓ આ handerInput: { requestEnvelope: Alexa͔ΒͷϦΫΤετ಺༰(=event), context: LambdaͷίϯςΩετ(=context), attributesManager: attributeૢ࡞ܥʹ͔ͭ͏, responseBuilder: Ϩεϙϯεੜ੒ʹ͔ͭ͏, serviceClientFactory: ֤छAPIαʔϏεʹ઀ଓ͢ΔͨΊʹ͔ͭ͏ }

28. Ϧ Ϋ Τ ε τ ಺ ༰ ( I n

    t e n t / S l o t / e t c . . ) Λ औ ಘ ͢ Δ handerInput: { requestEnvelope: Alexa͔ΒͷϦΫΤετ಺༰(=event), context: LambdaͷίϯςΩετ(=context), attributesManager: attributeૢ࡞ܥʹ͔ͭ͏, responseBuilder: Ϩεϙϯεੜ੒ʹ͔ͭ͏, serviceClientFactory: ֤छAPIαʔϏεʹ઀ଓ͢ΔͨΊʹ͔ͭ͏ }

29. L a m b d a ͷ ֤ छ ৘

    ใ ͕ ೖ ͬͯ ͍ Δ handerInput: { requestEnvelope: Alexa͔ΒͷϦΫΤετ಺༰(=event), context: LambdaͷίϯςΩετ(=context), attributesManager: attributeૢ࡞ܥʹ͔ͭ͏, responseBuilder: Ϩεϙϯεੜ੒ʹ͔ͭ͏, serviceClientFactory: ֤छAPIαʔϏεʹ઀ଓ͢ΔͨΊʹ͔ͭ͏ }

30. η ο γ ϣ ϯ ΍ D B σ ʔ

    λ ͳ Ͳ ͷ ॲ ཧ ʹ ࢖ ͏ handerInput: { requestEnvelope: Alexa͔ΒͷϦΫΤετ಺༰(=event), context: LambdaͷίϯςΩετ(=context), attributesManager: attributeૢ࡞ܥʹ͔ͭ͏, responseBuilder: Ϩεϙϯεੜ੒ʹ͔ͭ͏, serviceClientFactory: ֤छAPIαʔϏεʹ઀ଓ͢ΔͨΊʹ͔ͭ͏ }

31. ฦ ౴ ಺ ༰ ͷ ࡞ ੒ ʹ ࢖ ͏

    handerInput: { requestEnvelope: Alexa͔ΒͷϦΫΤετ಺༰(=event), context: LambdaͷίϯςΩετ(=context), attributesManager: attributeૢ࡞ܥʹ͔ͭ͏, responseBuilder: Ϩεϙϯεੜ੒ʹ͔ͭ͏, serviceClientFactory: ֤छAPIαʔϏεʹ઀ଓ͢ΔͨΊʹ͔ͭ͏ }

32. C u s t o m e r P ro

    f i l e A P I ͳ Ͳ ͷ ઀ ଓ ʹ ࢖ ͏ handerInput: { requestEnvelope: Alexa͔ΒͷϦΫΤετ಺༰(=event), context: LambdaͷίϯςΩετ(=context), attributesManager: attributeૢ࡞ܥʹ͔ͭ͏, responseBuilder: Ϩεϙϯεੜ੒ʹ͔ͭ͏, serviceClientFactory: ֤छAPIαʔϏεʹ઀ଓ͢ΔͨΊʹ͔ͭ͏ }

33. ॏ ཁ ౓ : ੺ ৭ > ࠇ ৭ >

    փ ৭ handerInput: { requestEnvelope: Alexa͔ΒͷϦΫΤετ಺༰(=event), context: LambdaͷίϯςΩετ(=context), attributesManager: attributeૢ࡞ܥʹ͔ͭ͏, responseBuilder: Ϩεϙϯεੜ੒ʹ͔ͭ͏, serviceClientFactory: ֤छAPIαʔϏεʹ઀ଓ͢ΔͨΊʹ͔ͭ͏ }

34. a s k - s d k Λ ࢖ ͬ

    ͨ A l e x a εΩϧ ։ ൃ ೖ ໳ • SkillBuildersʹRequestHandlerΛ͍ͬͺ͍ొ࿥͢Δ͚ͩ • ϦΫΤετຊମ͸TypeScript + IDEͷิ׬Λ࢖͏ͱಡΈ΍͍͢ • ࠷ۙ͸getUserIdͷΑ͏ͳutilؔ਺͕ίΞʹ֦ॆ͞Εͭͭ͋Δ • GitHub (github.com/alexa)ʹαϯϓϧ͕ଟ਺͋Γɺ
 git cloneޙʹൃ࿩಺༰ͳͲΛௐ੔͢Ε͹ͦͷ··࢖͑Δ #jsconf

35. ͦ ͷ Ұ ํ Ͱ

36. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Lambdaؔ਺ͷ਺͕εΩϧ਺ʹൺྫͯ͠૿Ճ
 -> runtimeߋ৽ͳͲͷ؅ཧίετ͕ண࣮ʹ૿͑ͯߦ͘ • ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
 -> ̍εΩϧͰߋ৽ͨ͠΋ͷΛෳ਺εΩϧʹखಈ൓ө͢Δඞཁ͕ൃੜ • ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ #jsconf

37. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Lambdaؔ਺ͷ਺͕εΩϧ਺ʹൺྫͯ͠૿Ճ
 -> runtimeߋ৽ͳͲͷ؅ཧίετ͕ண࣮ʹ૿͑ͯߦ͘ • ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
 -> ̍εΩϧͰߋ৽ͨ͠΋ͷΛෳ਺εΩϧʹखಈ൓ө͢Δඞཁ͕ൃੜ • ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ #jsconf

38. ଟ ػ ೳ ͳ ̍ εΩϧ ͔ ɺ ୯ ػ

    ೳ ͳ ෳ ਺ εΩϧ ͔ • ݁࿦ͷͳ͍ٞ࿦ʢ͓ͦΒ͘ʣ • ଟػೳͳεΩϧ͸ɺʮͲͷػೳΛ࢖͏͔ʯͱ͍͏ձ࿩͕ൃੜ͢Δ • ࣮ࡍͷϢʔβʔ͸ʮͰ͖Δ͚ͩ୹͍ձ࿩Ͱ໨తΛୡ੒͍ͨ͠ʯ • ݺͼग़໊͠ʢεΩϧ໊ʣΛػೳ໊ʹͨ͠୯ػೳεΩϧͷԣల։ • ʮ໨తͷεΩϧΛݟ͚ͭΒΕΔ͔ʯͱ͍͏SEO / Ϛʔέత՝୊ #jsconf

39. A g e n d a • ҰൠతͳεϚʔτεϐʔΧʔͷόοΫΤϯυڍಈʹ͍ͭͯ • Amazon

    AlexaͰͷ։ൃɾӡ༻ͱͦͷ՝୊ • ෳ਺ͷΞϓϦ։ൃɾӡ༻Λޮ཰Խ͢Δ #jsconf

40. 5 0 εΩϧ ఔ ౓ Λ Ϧ Ϧ ʔε &

    ։ ൃ

41. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Lambdaؔ਺ͷ਺͕εΩϧ਺ʹൺྫͯ͠૿Ճ
 -> runtimeߋ৽ͳͲͷ؅ཧίετ͕ண࣮ʹ૿͑ͯߦ͘ • ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
 -> ̍εΩϧͰߋ৽ͨ͠΋ͷΛෳ਺εΩϧʹखಈ൓ө͢Δඞཁ͕ൃੜ • ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ #jsconf

42. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Πϯϑϥ૚ͷ؅ཧΛ͍͔ʹޮ཰Խ͢Δ͔ • ࣅͨΑ͏ͳॲཧͷίϐʔΞϯυϖʔετ
 -> ̍εΩϧͰߋ৽ͨ͠΋ͷΛෳ਺εΩϧʹखಈ൓ө͢Δඞཁ͕ൃੜ • ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ #jsconf

43. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Πϯϑϥ૚ͷ؅ཧΛ͍͔ʹޮ཰Խ͢Δ͔ • ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔ • ୯ػೳεΩϧͷόϦΤʔγϣϯల։͕ίϐϖࡇΓʹͳΔ #jsconf

44. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Πϯϑϥ૚ͷ؅ཧΛ͍͔ʹޮ཰Խ͢Δ͔ • ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔ • ΞϓϦέʔγϣϯͦͷ΋ͷΛ࠶ར༻Մೳʹ͢Δ #jsconf

45. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Πϯϑϥ૚ͷ؅ཧΛ͍͔ʹޮ཰Խ͢Δ͔
 -> Infrastructure as a Code (IaaC) • ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔ • ΞϓϦέʔγϣϯͦͷ΋ͷΛ࠶ར༻Մೳʹ͢Δ #jsconf

46. S e r v e r l e s s

    F W ͷ ྫ

47. •r u n t i m e ΍ AW S

    I A M Λ 
 ू ໿ ؅ ཧ •p ro v i d e Λ ߋ ৽ ͢ Ε ͹ 
 ؅ ཧ Լ ͷ εΩϧ Λ 
 · ͱ Ίͯ ߋ ৽ Ͱ ͖ Δ •ઃ ఆ Λ · ͱ Ί Δ ͜ ͱ Ͱ 
 ௥ Ճ ࣌ ͷ ઃ ఆ ࿙ Ε ๷ ࢭ

48. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Πϯϑϥ૚ͷ؅ཧΛ͍͔ʹޮ཰Խ͢Δ͔ • ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔ • ΞϓϦέʔγϣϯͦͷ΋ͷΛ࠶ར༻Մೳʹ͢Δ #jsconf

49. ί ʔ υ ྔ ͕ ݮ Δ ͜ ͱ ͸

    ͍ ͍ ͜ ͱ ͩ • ask-sdk͸”൚༻తʹ࢖͑Δఔ౓”ʹ࡞ΒΕ͍ͯΔ • ͦͷͨΊɺ৑௕తͳίʔυ͕ൃੜ͢Δ͜ͱ͕গͳ͔Βͣ͋Δ • ίϐϖͰ΋ྑ͍͕ɺ൚༻ؔ਺Λ࡞Ε͹ίʔυྔΛ͔ͳΓݮΒͤΔ #jsconf https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/issues/490#issuecomment-442203625

50. ྫ ͑ ͹ ͜ ͏ ͍ ͏ ؔ ਺ ʢ

    ֘ ౰ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ൑ ఆ ͢ Δ ʣ

51. ྫ ͑ ͹ ͜ ͏ ͍ ͏ ؔ ਺ ʢ

    ֘ ౰ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ൑ ఆ ͢ Δ ʣ

52. ྫ ͑ ͹ ͜ ͏ ͍ ͏ ؔ ਺ ʢ

    ֘ ౰ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ൑ ఆ ͢ Δ ʣ

53. ྫ ͑ ͹ ͜ ͏ ͍ ͏ ؔ ਺ ʢ

    ֘ ౰ ͢ Δ I n t e n t N a m e ͷ Ϧ Ϋ Τ ε τ ͔ Λ ൑ ఆ ͢ Δ ʣ

54. B e f o re

55. A f t e r

56. c a n H a n d l e ͕

    γ ϯ ϓϧ ʹ

57. ͨ · ʹ ͢ ͝ ͍ U n i o

    n ܕ ͕ ग़ ͯ͘Δ

58. a s ΍ Ty p e G u a rd

    ࢖ Θ ͳ ͍ ͱ ٧ Ή ͱ ͖ ͕ ͋ Δ ͷ Ͱ ஫ ҙ import { IntentRequest } from ‘ask-sdk-model’ … const request = handlerInput.requestEnvelope.request as IntentRequest const testSlot = request.intent.slots.hoge.value

59. ί Ξ ʹ P R ͩ ͢ͱ ɺ ׂ ͱ

    Ϛʔ δ ͯ͘͠Ε Δ https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/pull/582

60. ΍ Γ ํ · ͱ Ίͯ ͋ Γ · ͢

    https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/pull/582 h t t p s : / / w p - k y o t o . n e t / g e t - i n v o l v e d - a s k - s d k

61. ڞ ༗ Ͱ ͖ Δ ί ʔ υ Λ ૿

    ΍ ͯ͠ ৑ ௕ ͳ ί ʔ υ Λ ݮ Β͢ • ask-sdk͚ͩͰ͸ίʔυ͕৑௕ʹͳΓ͕ͪ • npmͰެ։͞Ε͍ͯΔϥΠϒϥϦ΋׆༻͢Δ • ࣗ෼Ͱ࡞ͬͨ΋ͷΛެ։͢ΔͱΑΓศརʹ • ൚༻తʹ࢖͑ͦ͏ͳΒask-sdkʹPull Requestͩͦ͏ʂ #jsconf

62. ͍ ͍ ײ ͡ ʹ ࡞ Ε Δ ϑ Ϩ

    ʔϜϫ ʔ Ϋ ͱ ͔ ͳ ͍ ͷ ʁ #jsconf

63. ͍ ͍ ײ ͡ ʹ ࡞ Ε Δ ϑ Ϩ

    ʔϜϫ ʔ Ϋ ͱ ͔ ͳ ͍ ͷ ʁ #jsconf ͳ ͍

64. ͍ ͍ ײ ͡ ʹ ࡞ Ε Δ ϑ Ϩ

    ʔϜϫ ʔ Ϋ ͱ ͔ ͳ ͍ ͷ ʁ • Alexaʹ͸ϝδϟʔͳϑϨʔϜϫʔΫ͕ଘࡏ͠ͳ͍ • εςʔτ؅ཧ / ϩΪϯά / GUI( APL ) / etc…
 ࣗલͰServiceΛ࡞Βͳ͍ͱ͍͚ͳ͍ྖҬ͕޿͍ • ݸਓతʹ͸ʮVanilla JS -> jQuery (ΠϚίί) -> ???ʯͱ͍͏ೝࣝ • Angular / React / Vue / Riot / etc..ͷΑ͏ʹ܈༤ׂڌʹͳΕ͹͍͍ͳ͊ #jsconf

65. εΩϧ ਺ ͕ ૿ ͑Δ ͱ ى ͖ Δ ՝

    ୊ ɾ ໰ ୊ ఺ • Πϯϑϥ૚ͷ؅ཧΛ͍͔ʹޮ཰Խ͢Δ͔ • ൚༻తॲཧΛ͍͔ʹ࠶ར༻Ͱ͖ΔΑ͏ʹ͢Δ͔ • ΞϓϦέʔγϣϯͦͷ΋ͷΛ࠶ར༻Մೳʹ͢Δ #jsconf

66. ί ϯ ςϯ π Ҏ ֎ ΄ ΅ ಉ ͡

    ࣮ ૷ ͩ ͔ Β ͜ Ε ΋ ࠶ ར ༻ ͠ ͨ ͍

67. ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ

    ΞΠ σΟ Ξ • RequestHandlerΛڞ༗͢Δ • SkillBuildersΛڞ༗͢Δ • LambdaΛڞ༗͢Δ #jsconf

68. ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ

    ΞΠ σΟ Ξ • RequestHandlerΛڞ༗͢Δ • SkillBuildersΛڞ༗͢Δ • LambdaΛڞ༗͢Δ #jsconf

69. R e q u e s t H a n

    d l e r ͷ ڞ ༗ • ؔ਺͚ͩͰͳ͘ɺΦϒδΣΫτ΋ڞ༗ͯ͠͠·͏ • ಉҰϦϙδτϦͰ؅ཧ͍ͯ͠Ε͹export / import͢Δ͚ͩ • ԣஅ͢Δ৔߹͸npm / GitHubͳͲΛܦ༝͢Δඞཁ͕͋Δ • εΩϧʹΑͬͯมΘΔॲཧܥ͸ͦͷ··ॻ͔ͳ͍ #jsconf

70. R e q u e s t I n t

    e rc e p t o r Λ ࢖ ͬ ͨ I n j e c t i o n • ϦΫΤετલʹ࣮ߦͰ͖Δϋϯυϥʔ͕͋Δ -> RequestInterceptor • RequestHandlerͷ֎͔Βσʔλ΍ΫϥεͳͲΛ౉ͤΔ • ΫΠζͷ໰୊΍ϨϕϧઃఆͳͲͷ৘ใ͸͜ΕΛ࢖ͬͯ౉ͯ͠΍Δ #jsconf
71. None
72. None

73. R e q u e s t H a n

    d l e r ʹ ί ϯ ς ϯ π ͕ ॻ ͔ Ε ͳ ͍ ↓ ॲ ཧ ܥ ౷ ͕ ࣅ ͯ ͍ Δ ͳ Β ࠶ ར ༻ Մ ೳ ʹ ͳ Δ

74. R e q u e s t A t t

    r i b u t e s Ͱ H a n d l e r ͷ ֎ ͔ Β σ ʔ λ Λ ೖ Ε Δ • attributesManager.getRequestAttributes() & setRequestAttributes(any) • ॲཧ಺(return͢Δ·Ͱ)Ͱ͋Ε͹setͨ͠΋ͷΛgetͰ͖Δ • i18n΍ίϯςϯπੜ੒ΫϥεͳͲΛRequest࣌ʹηοτ͢Δ • handlerଆ͸getͨ͠΋ͷΛ࢖͑͹ɺhandlerΛStatelessʹͰ͖Δ • anyܕͰget͢ΔͷͰɺ͕ͬͭΓ࢖͏ͳΒTypeGuardͳͲΛ #jsconf

75. ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ

    ΞΠ σΟ Ξ • RequestHandlerΛڞ༗͢Δ • SkillBuildersΛڞ༗͢Δ • LambdaΛڞ༗͢Δ #jsconf

76. ঢ় ଶ / ί ϯ ς ϯ π Λ ࣋

    ͨ ͳ ͍ ϋ ϯ υ ϥ ʔ ܈

77. R e q u e s t I n t

    e rc e p t o r Ͱ શ ͯ Λ ઃ ఆ ͢ Δ • RequestHandler͸ʮͲͷॲཧΛɺͲͷϦΫΤετͰߦ͏͔ʯʹઐ೦ • ʮԿΛ࿩͔͢ʯ͸RequestInterceptor͔ΒrequestAttributesʹInject • SkillBuilderͷϝιουνΣʔϯͰinject͢Δ΋ͷ͚ͩޙ͔Β௥ՃՄೳ • Α͘࢖͏Handlerܥ͸SkillBuilderϨϕϧͰ·ͱΊͯ͠·͏ #jsconf
78. None
79. None
80. None
81. None

82. S k i l l B u i l d

    e r Ϩ ϕ ϧ Ͱ ந ৅ Խ ͱ ڞ ༗ ʢ ࠶ ར ༻ ʣ • ࣅͨଐੑͷεΩϧʢΫΠζܥɾܭࢉܥɾΞϥʔϜܥͳͲʣͰ༗ޮ • ίϯςϯπ͚ͩࠩ͠ସ͑Ε͹Α͍৔߹ɺInterceptorͰ֎͔ΒೖΕΔ • ഁյతมߋ࣌ͷӨڹൣғ͕େ͖͘ͳΔσϝϦοτ • ܕ΍Ϣχοτ / E2E ςετͳͲͰӨڹ౓߹͍Λ֬ೝ͢Δඞཁ͕͋Δ #jsconf

83. ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ

    ΞΠ σΟ Ξ • RequestHandlerΛڞ༗͢Δ • SkillBuildersΛڞ༗͢Δ • LambdaΛڞ༗͢Δ #jsconf
84. None
85. None

86. A l e x a εΩϧό ο Ϋ Τ ϯ

    υ ͷ ޮ ཰ త ͳ εέ ʔ ϧ • ॲཧ / ΦϒδΣΫτ / Lambda FunctionͦΕͧΕͰந৅Խ͢Δ • InterceptorͰ֎͔ΒεΩϧຖͷ৘ใΛsetͯ͠΍ΔܗΛ૊Ή • TypeScriptΛ࢖͏͜ͱͰɺந৅ԽϛεΛؾ෇͖΍͘͢͢Δ • ͍͍ײ͡ͷϑϨʔϜϫʔΫͩΕ͔࡞ͬͯͱ͍͏ؾ࣋ͪΛ๊͖ͳ͕Β ϓϩτతͳΦϨΦϨFWΛ࡞ͬͯ͸ࣺͯΔ #jsconf

87. · ͱ Ί • VUI͸WebhookϥΠΫʹ։ൃ͢Δ͜ͱ͕Ͱ͖Δ • Input / OutputϑΥʔϚοτ͕ҰఆͷͨΊɺTypeScriptͱ૬ੑ͕ྑ͍ •

    ൚༻తFW͕ͳ͍ͨΊɺటष͍࣮૷ʹͳΓ΍͍͢ݱ࣮͕͋Δ • ઃܭɾΞΠσΟΞΛڞ༗͠߹͍ɺΑΓྑ͍ํ๏Λ୳͠ଓ͚Α͏ #jsconf