CA 1Day Youth Bootcamp for Frontend LT

Transcript

1. "*
   ࣄۀຊ෦ͱϑϩϯτΤϯυΤϯδχΞ
2. Nam e !CSO
   5BLFUPTIJ
   "POP੨໺݈ར
   Occupatio n 'SPOUFOE
   %FWFMPQFS
   
   1SPEVDU
   0XOFS
   Compan y $ZCFSBHFOU"*
   4UVEJPO"*
   4IJGU
   OS S $POUSJCVUPS
   PG
   7
   +BWBTDSJQU
   &OHJOF
   Abou t IUUQJOGPCODI
3. Carrie r - 201 0 - ྵࡉWebडୗձࣾʹೖࣾJS΍Flash(AS2/3)Λ΍Δ - 201 1 - CyberAgentೖࣾ - ޿ࠂܭଌπʔϧͷ؅ཧը໘ɾλά࣮૷ - TagManagerͷ࣮૷ - …৭ʑ - 201 8 - AIࣄۀຊ෦Chatbot։ൃͰ։ൃ੹೚ऀ
5. ͭͷࣄۀΛల։
6. ຊ೔ͷ಺༰
   "*ࣄۀຊ෦Ͱಇ͘
   ۀ຿γεςϜͱϑϩϯτΤϯυ
   ΍Γ͕͍
7. "*ࣄۀຊ෦Ͱಇ͘
8. "*ࣄۀຊ෦Ͱಇ͘ AIࣄۀຊ෦ͰϑϩϯτΤϯυ։ൃऀ͕ͲΜͳ͜ͱΛ͍ͯ͠Δ͔தʑ૝૾͠ ͮΒ͍Ͱ͢ΑͶʁ
9. "*ࣄۀຊ෦Ͱಇ͘ ϝσΟΞܥͷࣄۀ෦ͱϏδωεۀଶ͕ҧ͍·͢ ϝσΟΞܥͷଟ͘ͷࣄۀ෦͸B2C(Ϗδωε to ίϯγϡʔϚʔ)Ͱɺ௚઀ফඅऀ ʹ࡞ͬͨ΋ͷΛఏڙ͢ΔۀଶͰ͢ ҰํAIࣄۀຊ෦͸͍ΘΏΔB2B(Ϗδωε to Ϗδωε)ͷۀଶ͕ଟ͘ɺπʔϧ ΍ը໘ͷఏڙઌ͸ओʹاۀʹͳΓ·͢ ͨͩɺͦͷఏڙઌاۀ͕͞Βʹ͓٬͞Μʹͦͷ··ఏڙ͢Δέʔε΋͋ΔͷͰɺ B2B2C(Ϗδωε => Ϗδωε => ίϯγϡʔϚʔ)ͱ͍͏ۀଶ΋ଟʑ͋Γ·͢ ͦͯ͠B2BͰ͸ओʹۀ຿γεςϜͷ։ൃΛߦ͍·͢
10. "*ࣄۀຊ෦Ͱಇ͘ Ͱ͸B2CͱB2BͰ࣮ࡍʹͲΜͳҧ͍͕͋ͬͯɺͲΜͳ࣮຿͕͋Δͷ͔ ͪΐͬͱ͚ͩݟͯΈ·͠ΐ͏
11. ۀ຿γεςϜͱϑϩϯτΤϯυ
12. ۀ຿γεςϜͱϑϩϯτΤϯυ • JS SDKΛ࡞ͬͨΓ • ސ٬͕࢖͏؅ཧը໘Λ࡞ͬͨΓ • ͓٬͞ΜͷϑϩϯτΤϯυपΓͷ೰ΈղܾΛ͠·͢ʂ
13. 8IBU
    JT
    +4
    4%,
    ͓٬͞ΜͷϖʔδʹKBWBTDSJQUͱIUNMͷεχϖοτΛຒΊࠐ·ͤͯ΋Βͬ ͯɺ༷ʑͳࢪࡦΛ࣮ࢪ͢ΔͨΊͷ΋ͷ ۀ຿γεςϜͱϑϩϯτΤϯυ
14. <!-- Global Site Tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); </script>
15. • ΞΫηεղੳΛͨ͠Γ • WidgetΛදࣔͨ͠Γ • ޿ࠂΛදࣔͨ͠Γ͢Δ ۀ຿γεςϜͱϑϩϯτΤϯυ +4
    4%,ͱ͸
16. +4
    4%,։ൃ UI͕ͳ͍৔߹͸γϯϓϧʹjavascript/typescriptίʔυʹͳΔͷͰɺϩδοΫ த৺ͷ७ਮͳϓϩάϥϛϯάʹͳΔ͜ͱ͕ଟ͍ ҙ֎ͱOQNʹ΋࢖͑Δύοέʔδ͕ͳ͍͜ͱ͕ଟͯࣗ͘࡞ίʔυϝΠϯʹ ͳΔέʔε΋ ΍Γ͍ͨ͜ͱ͕ಛघͳέʔε ۀ຿γεςϜͱϑϩϯτΤϯυ
17. • άϩʔόϧԚછʹؾΛ͚ͭΔ • ࢖͑ΔAPIΛͪΌΜͱఆٛ͢Δ(ෆඞཁͳ΋ͷΛ֎ʹग़͞ͳ͍ ) • ͓٬͞ΜͷαΠτ্ͳͷͰηΩϡϦςΟʹؾΛ͚ͭΔ(XSSͱ͔ ) • ύϑΥʔϚϯεʹؾΛ͚ͭΔ • ͓٬͞ΜͷαΠτ্ͳͷͰόά͕͋Δͱதʑ·͍ͣ … • ϒϥ΢βޓ׵ੑ ۀ຿γεςϜͱϑϩϯτΤϯυ +4
    4%,։ൃ
18. +4
    4%,։ൃ UI͕͋Δ৔߹͸͓٬͞ΜͷαΠτʹUIΛ֎෦͔Βߏங͢ΔͷͰɺCSSͷԚ છʹؾΛ͚ͭͨΓɺUIͷ଎౓ͱ͔B2Cͷ஌ݟ΋ඞཁʹͳΔ͜ͱ͕͋Δ ۀ຿γεςϜͱϑϩϯτΤϯυ
19. ϒϥ΢βޓ׵ੑ ΫϥΠΞϯτʹͲͷϒϥ΢β·ͰରԠ͍ͯ͠Δ͔໌ࣔΛٻΊΒΕΔέʔε΋ ଟ͍ͷͰɺͪΌΜͱରԠ04ϒϥ΢βɾαϙʔτํ਑Λ໌͓֬ͯ͘͠ ۀ຿γεςϜͱϑϩϯτΤϯυ
20. ؅ཧը໘։ൃ B2Bܥͷࣄۀͩͱ΄΅ඞਢʹͳΔ։ൃ ΫϥΠΞϯτ͕πʔϧΛίϯτϩʔϧͨ͠ΓϨϙʔτΛݟͨΓ͢ΔͨΊͷը ໘ ۀ຿γεςϜͱϑϩϯτΤϯυ
21. • SSRͱ͔͋·Γ͍Βͳ͍(͋Ε͹ྑ͍͚Ͳ ) • CRUDΛඞ࣮ͣ૷͢Δ • ೝূܥͷ஌ݟ͸ඞਢ • ҙ֎ͱάϥϑΟοΫඳըܥͷ஌͕ࣝ͋Δͱ࢖͏৔໘͕͋Δ(Ϩϙʔτɾͳʹ͔Λ࡞੒͢Δπʔϧͱ͔ ) • UIίϯϙʔωϯτ؅ཧͷ஌ݟ • UIɾUXͷઃܭྗ͕ඞਢ • ׂͱ΍΍͍͜͠State؅ཧ͕͍Δ ۀ຿γεςϜͱϑϩϯτΤϯυ ؅ཧը໘։ൃͷಛ௃
22. 443ͱ͔͋·Γ͍Βͳ͍ ؅ཧը໘͸ͲͪΒ͔ͱ͍͏ͱ8FC Core VitalsͷΑ͏ͳ΋ͷ͕ڧ͘͸ٻΊΒΕͯ͸͍ͳ ͍ͷͰɺSSR౳ແཧͯ͠·Ͱ΍Δඞཁ͸ͳ͍(΍Ζ͏ͱͯ͠΋ೝূ͕͋ΔͷͰ݁ߏେม) ͦΕΑΓ΋ৗʹಈ࡞ΛอূͰ͖Δํ͕ॏཁ ͨͩ͠ύϑΥʔϚϯεࣗମ͸ۀ຿ޮ཰ʹ௚݁͢ΔͷͰɺ$PNQPOFOUͷ෼ׂͱ͔ͦͷ͋ ͨΓ͸͔ͬ͠Γ΍Δඞཁ͕͋Δ ServiceWorker౳΋࢖͏ ͋ͱ͸ͦ΋ͦ΋ϑϩϯτΤϯυଆͷΞϧΰϦζϜͷύϑΥʔϚϯε͕ٻΊΒΕΔ͜ͱ΋ ଟ͍ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
23. $36%Λඞ࣮ͣ૷͢Δ CRUD(Create,Read,Update,Delete) ࡞੒ɾಡΈग़͠ɾߋ৽ɾ࡟আͷུ ؅ཧը໘Ͱ͸ඞͣ͜ͷ͕ͭඞཁʹͳΔ ྫ ChatBotͷγφϦΦ - γφϦΦͷ࡞੒ $SFBUF - ࡞੒ͨ͠γφϦΦͷࢀর 3FBE - γφϦΦͷߋ৽ 6QEBUF - γφϦΦͷ࡟আ %FMFUF ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
24. 3FBE 6QEBUF $SFBUF %FMFUF
25. ೝূܥͷ஌ࣝ͸ඞਢ ඞͣϩάΠϯ͕ඞཁͳ΋ͷͳͷͰɺೝূͷ࢓૊ΈɾͲͷೝূͰ࣮૷͢Δ͔ɾ ཁૉೝূɾιʔγϟϧϩάΠϯͱ͔αʔόαΠυνʔϜͱಉ༷ʹ஌ࣝΛ Ξοϓσʔτ͓ͯ͘͠ඞཁ͕͋Δ ͨͩࠓͲ͖͸'JSFCBTF Auth͔ͭͬͨΓ3rd partyͷศརͳೝূػೳ։ൃπʔ ϧΛ࢖͏͜ͱ͕ଟ͍ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
26. ҙ֎ͱάϥϑΟοΫܥͷ஌͕ࣝ͋ΔͱΑ͍ طଘͷϥΠϒϥϦΛ࢖͏ʹͯ͠΋Ϩϙʔτ౳͸47(ɾ$BOWBT౳Λ࢖ͬͯඳ ը͢Δ͜ͱ͕ଟ͍ͷͰɺͦͷ΁Μͷ஌͕ࣝ͋Δͱ໾ʹཱͭ ͨͩϨϙʔτʹؔͯ͠͸֎෦ͷ#*πʔϧΛ࢖ͬͨΓ͢Δ͜ͱ΋૿͑ͨͷͰඞ ਢͰ͸ͳ͍͔΋ ͦΕҎ֎ʹ΋ը໘ૢ࡞Ͱෳࡶͳ΋ͷΛઃఆ͢Δέʔε΋ͨ·ʹ͋Δ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
28. 6*ίϯϙʔωϯτ؅ཧͷ஌ݟ ؅ཧը໘͸ಉ͡ػೳɾίϯϙʔωϯτΛ܁Γฦ͠࢖͏έʔε͕ଟ͍ͷͰɺ6* ίϯϙʔωϯτΛ͔ͬ͠Γͱ؅ཧ͢Δඞཁ͕͋Δ ಛʹଟ͍ͷ͕ɺҰ෦෼͕ҧ͏ίϯϙʔωϯτ΍ɺΞΧ΢ϯτͷݖݶʹΑͬ ͯ࢖͑Δػೳ͕ҧ͏ίϯϙʔωϯτ ͜ͷล͸؅ཧํ๏ʹ΋ΑΔ͕ɺྫ͑͹"UPNJD DesignͳΒatom/moleclues/ organismsΛͪΌΜͱ෼཭͢Δඞཁ͕Ͱͯ͘Δ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
29. 6*69ͷ஌ݟ ͓٬͞Μ͸ຖ೔ը໘Λݟͯ࡞ۀΛ͢ΔͨΊɺ#$ͷ69ͱ͸ҧ͏গ͠ҧͬͨ 6*69ͷ࣮૷͕ٻΊΒΕΔ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
30. • ॳݟͰ΋໎Θͣૢ࡞Ͱ͖Δ͜ͱ • ૢ࡞ʹͳΕͨਓ΋ૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ • ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ(࡟আ͸֬ೝϙοϓΞοϓग़ͨ͠Γ ) • ΞΫηγϏϦςΟ(͜͜͸B2Cͱಉ͡) ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ 6*69ͷ஌ݟ
31. ॳݟͰ΋໎Θͣૢ࡞Ͱ͖Δ͜ͱ ॳݟͷਓͰ΋࢖͍΍͍͢ͱɺ΋͠ڝ߹ͱͷπʔϧൺֱΛΫϥΠΞϯτ͕࣮ ࢪ͍ͯͨ͠৔߹େ͖ͳΞυόϯςʔδʹͳΔ γϯϓϧʹڝ૪ྗʹͭͳ͕Δ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
    
    6*69ͷ஌ݟ
32. ૢ࡞ʹͳΕͨਓ΋ૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ πʔϧͷૢ࡞ʹͳΕ͖ͯͨਓ͕ΑΓޮ཰Α͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔͱۀ຿ ޮ཰্͕͕ΓɺπʔϧͷධՁϙΠϯτʹͳΔʢγϣʔτΧοτΩʔͱ͔ʣ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
    
    6*69ͷ஌ݟ
33. ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ ؅ཧπʔϧ͸݁ߏக໋తͳૢ࡞Λ࣮ࢪ͢Δ͜ͱ͕͋Δ ԿΒ͔ͷγεςϜͷ ఀࢭɾ࡟আ౳ ͷͰɺඞͣ࡞੒ɾ࡟আ౳ͷૢ࡞ʹ͸༷ʑͳํ๏Ͱ֬ೝΛ͢Δ 69ͷઃܭʹ͢Δ ֬ೝϙοϓΞοϓɾ໊લͷ࠶ೖྗ ·ͨૢ࡞ͷ੒ޭ࣌ʹ͸௨஌΋ग़͢΂͖ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
    
    6*69ͷ஌ݟ
34. ΞΫηγϏϦςΟ ͜͜͸ผʹಛ௃తͰ͸ͳ͍ ΈΜͳͪΌΜͱ΍Γ·͠ΐ͏ લड़ͷૢ࡞ͷ͠΍͢͞ʹ΋௚݁͢ΔͷͰ UBCҠಈͱ͔Ͷ ΍ͬͨํ͕γϯϓ ϧʹධՁʹͭͳ͕Γ΍͍͢ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
35. ׂͱ΍΍͍͜͠4UBUF؅ཧ State؅ཧ͕݁ߏෳࡶʹͳΓ͕ͪ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
36. • ओʹCRUDͷ͍ͤ • Loadingঢ়ଶɾ։ดঢ়ଶ͕͍ͬͺ͍ • ೝূঢ়ଶʹΑͬͯ΋͔ΘͬͨΓ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ 4UBUF؅ཧ
37. $36%ͷ4UBUF؅ཧ ྫ͑͹MJTUܥͷΞΠςϜΛ࡞੒͢Δ৔߹ - อଘલʹೖྗ͞ΕͨΞΠςϜͷঢ়ଶΛ؅ཧ͢Δ - ࡞੒"1*Λୟ͘ - αʔό͔Β࡞੒͞ΕͨΞΠςϜͷ*%͕ฦͬͯ͘Δ - Ϧετͷ4UBUFΛߋ৽ ಛʹҰ࣌తͳ஋ͷ؅ཧΛٻΊΒΕΔέʔε͕ଟ͍ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
    
    4UBUF؅ཧ
38. -PBEJOHɾ։ดঢ়ଶͱ͔ͷ4UBUF؅ཧ APIΛݺͼग़͍ͯ͠Δؒʹଞͷૢ࡞ΛෆՄೳʹͨ͠ΓɺAPIͷਐߦঢ়گΛݟ ͤΔͨΊʹLoadingΛදࣔ͢Δέʔε͕ଟ͍ ͜ͷ-PBEJOHঢ়ଶΛͲ͏؅ཧ͢Δ͔΋࿹͕ࢼ͞ΕΔϙΠϯτ ͋ͱ͸φϏήʔγϣϯͩͬͨΓɺΞΠςϜͷ։ด͕Ͱ͖Δը໘΋ଟ͍ͷͰɺ ͦΕΒࡶଟͳ6*ͷঢ়ଶ؅ཧΛؤுΔඞཁ͕͋Δ ۀ຿γεςϜͱϑϩϯτΤϯυ
    
    ؅ཧը໘։ൃ
    
    4UBUF؅ཧ
39. ΍Γ͕͍
40. 6*ͷແ͍ϑϩϯτΤϯυ ϑϩϯτΤϯυଆͰ΋७ਮͰෳࡶͳϩδοΫͷ࣮૷Λ͢Δ͜ͱ͕݁ߏ͋ΔͷͰɺͦ ͏͍͏ͷ͕޷͖ͳਓ͸޲͍ͯΔͱࢥ͍·͢ ݸਓతͳܦݧͱͯ͠1ྫͰ͕͢ - TagManagerͷ࣮૷ - ϒϥ΢βͷScriptൃՐλΠϛϯάΛશͯίϯτʔϧͨ͠Γ(ϒϥ΢βͷಈ࡞Λ ໛฿͢ΔͨΊʹ༏ઌ౓෇͖ΩϡʔΛ࡞ͬͨΓɺ2෼ώʔϓ࣮૷ͨ͠Γ)ɺը໘্Ͱอ ଘ͞ΕͨjavascriptΛͦͷ৔ͰίϯύΠϧ͢Δػೳͭͬͨ͘Γ - ChatBotͷγφϦΦ࡞੒Ͱ༗޲άϥϑͷ؅ཧɾෛͷॏΈ෇͖࠷୹ܦ࿏Λௐ΂Δ ͳΜ͔Λ΍ͬͨΓ͠·ͨ͠ ͳ͔ͳ͔B2CͰܦݧ͢Δͷ͸೉͍͠಺༰͔ͳͱࢥ͍·͢
41. Ϗδωεͱ௚݁ ࡞ͬͨ΋ͷ͕ΫϥΠΞϯτʹ௚઀ධՁ͞Εͯɺ͞ΒʹͦΕʹରͯ͠ܖ໿ͱ͍ ͏͔ͨͪͰධՁΛ΋Β͑ΔͷͰB2CΑΓ΋͔ͳΓ௚઀తʹධՁ͞Ε·͢ ݸਓతʹ͸࡞ͬͨ΋ͷ͕࢖͍΍ͯ͘͢ɺۀ຿͕͔ͳΓվળ͞ΕͨΓɺ͓٬͞ Μͷച্޲্౳ʹ௚઀ؔΘΕΔͷ͸݁ߏ޷͖Ͱ͢
42. ·ͱΊ
43. ੋඇɺ"*ࣄۀຊ෦΁ʂ ͜Μͳײ͡ͷ࢓ࣄΛ͍ͯ͠ΔͷͰɺڵຯ͕͋Δਓ͸ੋඇʂ
44. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠