Build and Scale Multiple Voice Application By using TypeScript / jsconfjp2019

https://jsconf.jp/2019/talk/hidetaka-okamoto

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
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 ͕ ࣮ ߦ ͞ Ε Δ
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
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
82. S k i l l B u i l d e r Ϩ ϕ ϧ Ͱ ந ৅ Խ ͱ ڞ ༗ ʢ ࠶ ར ༻ ʣ • ࣅͨଐੑͷεΩϧʢΫΠζܥɾܭࢉܥɾΞϥʔϜܥͳͲʣͰ༗ޮ • ίϯςϯπ͚ͩࠩ͠ସ͑Ε͹Α͍৔߹ɺInterceptorͰ֎͔ΒೖΕΔ • ഁյతมߋ࣌ͷӨڹൣғ͕େ͖͘ͳΔσϝϦοτ • ܕ΍Ϣχοτ / E2E ςετͳͲͰӨڹ౓߹͍Λ֬ೝ͢Δඞཁ͕͋Δ #jsconf
83. ॲ ཧ ܥ ౷ Λ ࠶ ར ༻ ͢ Δ ΞΠ σΟ Ξ • RequestHandlerΛڞ༗͢Δ • SkillBuildersΛڞ༗͢Δ • LambdaΛڞ༗͢Δ #jsconf
86. A l e x a εΩϧό ο Ϋ Τ ϯ υ ͷ ޮ ཰ త ͳ εέ ʔ ϧ • ॲཧ / ΦϒδΣΫτ / Lambda FunctionͦΕͧΕͰந৅Խ͢Δ • InterceptorͰ֎͔ΒεΩϧຖͷ৘ใΛsetͯ͠΍ΔܗΛ૊Ή • TypeScriptΛ࢖͏͜ͱͰɺந৅ԽϛεΛؾ෇͖΍͘͢͢Δ • ͍͍ײ͡ͷϑϨʔϜϫʔΫͩΕ͔࡞ͬͯͱ͍͏ؾ࣋ͪΛ๊͖ͳ͕Β ϓϩτతͳΦϨΦϨFWΛ࡞ͬͯ͸ࣺͯΔ #jsconf
87. · ͱ Ί • VUI͸WebhookϥΠΫʹ։ൃ͢Δ͜ͱ͕Ͱ͖Δ • Input / OutputϑΥʔϚοτ͕ҰఆͷͨΊɺTypeScriptͱ૬ੑ͕ྑ͍ • ൚༻తFW͕ͳ͍ͨΊɺటष͍࣮૷ʹͳΓ΍͍͢ݱ࣮͕͋Δ • ઃܭɾΞΠσΟΞΛڞ༗͠߹͍ɺΑΓྑ͍ํ๏Λ୳͠ଓ͚Α͏ #jsconf