Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CA 1Day Youth Bootcamp for Frontend LT

CA 1Day Youth Bootcamp for Frontend LT

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

Transcript

  1. "*ࣄۀຊ෦ͱϑϩϯτΤϯυΤϯδχΞ

  2. Nam e !CSO 5BLFUPTIJ"POP੨໺݈ར  Occupatio n 'SPOUFOE%FWFMPQFS1SPEVDU0XOFS Compan y

    $ZCFSBHFOU"*4UVEJPO"*4IJGU OS S $POUSJCVUPSPG7+BWBTDSJQU&OHJOF Abou t IUUQJOGPCODI
  3. Carrie r - 201 0 - ྵࡉWebडୗձࣾʹೖࣾJS΍Flash(AS2/3)Λ΍Δ - 201 1

    - CyberAgentೖࣾ - ޿ࠂܭଌπʔϧͷ؅ཧը໘ɾλά࣮૷ - TagManagerͷ࣮૷ - …৭ʑ - 201 8 - AIࣄۀຊ෦Chatbot։ൃͰ։ൃ੹೚ऀ
  4. None
  5. ͭͷࣄۀΛల։

  6. ຊ೔ͷ಺༰ "*ࣄۀຊ෦Ͱಇ͘ ۀ຿γεςϜͱϑϩϯτΤϯυ ΍Γ͕͍

  7. "*ࣄۀຊ෦Ͱಇ͘

  8. "*ࣄۀຊ෦Ͱಇ͘ AIࣄۀຊ෦ͰϑϩϯτΤϯυ։ൃऀ͕ͲΜͳ͜ͱΛ͍ͯ͠Δ͔தʑ૝૾͠ ͮΒ͍Ͱ͢ΑͶʁ

  9. "*ࣄۀຊ෦Ͱಇ͘ ϝσΟΞܥͷࣄۀ෦ͱϏδωεۀଶ͕ҧ͍·͢ ϝσΟΞܥͷଟ͘ͷࣄۀ෦͸B2C(Ϗδωε to ίϯγϡʔϚʔ)Ͱɺ௚઀ফඅऀ ʹ࡞ͬͨ΋ͷΛఏڙ͢ΔۀଶͰ͢ ҰํAIࣄۀຊ෦͸͍ΘΏΔB2B(Ϗδωε to Ϗδωε)ͷۀଶ͕ଟ͘ɺπʔϧ ΍ը໘ͷఏڙઌ͸ओʹاۀʹͳΓ·͢

    ͨͩɺͦͷఏڙઌاۀ͕͞Βʹ͓٬͞Μʹͦͷ··ఏڙ͢Δέʔε΋͋ΔͷͰɺ B2B2C(Ϗδωε => Ϗδωε => ίϯγϡʔϚʔ)ͱ͍͏ۀଶ΋ଟʑ͋Γ·͢ ͦͯ͠B2BͰ͸ओʹۀ຿γεςϜͷ։ൃΛߦ͍·͢
  10. "*ࣄۀຊ෦Ͱಇ͘ Ͱ͸B2CͱB2BͰ࣮ࡍʹͲΜͳҧ͍͕͋ͬͯɺͲΜͳ࣮຿͕͋Δͷ͔ ͪΐͬͱ͚ͩݟͯΈ·͠ΐ͏

  11. ۀ຿γεςϜͱϑϩϯτΤϯυ

  12. ۀ຿γεςϜͱϑϩϯτΤϯυ • JS SDKΛ࡞ͬͨΓ • ސ٬͕࢖͏؅ཧը໘Λ࡞ͬͨΓ • ͓٬͞ΜͷϑϩϯτΤϯυपΓͷ೰ΈղܾΛ͠·͢ʂ

  13. 8IBUJT+44%, ͓٬͞Μͷϖʔδʹ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Λදࣔͨ͠Γ • ޿ࠂΛදࣔͨ͠Γ͢Δ ۀ຿γεςϜͱϑϩϯτΤϯυ +44%,ͱ͸

  16. +44%,։ൃ UI͕ͳ͍৔߹͸γϯϓϧʹjavascript/typescriptίʔυʹͳΔͷͰɺϩδοΫ த৺ͷ७ਮͳϓϩάϥϛϯάʹͳΔ͜ͱ͕ଟ͍ ҙ֎ͱOQNʹ΋࢖͑Δύοέʔδ͕ͳ͍͜ͱ͕ଟͯࣗ͘࡞ίʔυϝΠϯʹ ͳΔέʔε΋ ΍Γ͍ͨ͜ͱ͕ಛघͳέʔε ۀ຿γεςϜͱϑϩϯτΤϯυ

  17. • άϩʔόϧԚછʹؾΛ͚ͭΔ • ࢖͑ΔAPIΛͪΌΜͱఆٛ͢Δ(ෆඞཁͳ΋ͷΛ֎ʹग़͞ͳ͍ ) • ͓٬͞ΜͷαΠτ্ͳͷͰηΩϡϦςΟʹؾΛ͚ͭΔ(XSSͱ͔ ) • ύϑΥʔϚϯεʹؾΛ͚ͭΔ

    • ͓٬͞ΜͷαΠτ্ͳͷͰόά͕͋Δͱதʑ·͍ͣ … • ϒϥ΢βޓ׵ੑ ۀ຿γεςϜͱϑϩϯτΤϯυ +44%,։ൃ
  18. +44%,։ൃ 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౳Λ࢖ͬͯඳ ը͢Δ͜ͱ͕ଟ͍ͷͰɺͦͷ΁Μͷ஌͕ࣝ͋Δͱ໾ʹཱͭ ͨͩϨϙʔτʹؔͯ͠͸֎෦ͷ#*πʔϧΛ࢖ͬͨΓ͢Δ͜ͱ΋૿͑ͨͷͰඞ ਢͰ͸ͳ͍͔΋ ͦΕҎ֎ʹ΋ը໘ૢ࡞Ͱෳࡶͳ΋ͷΛઃఆ͢Δέʔε΋ͨ·ʹ͋Δ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

  27. None
  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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠