CA 1Day Youth Bootcamp for Frontend LT

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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Nam e !CSO 5BLFUPTIJ"POP੨໺݈ར Occupatio n 'SPOUFOE%FWFMPQFS1SPEVDU0XOFS Compan y $ZCFSBHFOU"*4UVEJPO"*4IJGU OS S $POUSJCVUPSPG7+BWBTDSJQU&OHJOF Abou t IUUQJOGPCODI

Slide 3

Slide 3 text

Carrie r - 201 0 - ྵࡉWebडୗձࣾʹೖࣾJS΍Flash(AS2/3)Λ΍Δ - 201 1 - CyberAgentೖࣾ - ޿ࠂܭଌπʔϧͷ؅ཧը໘ɾλά࣮૷ - TagManagerͷ࣮૷ - …৭ʑ - 201 8 - AIࣄۀຊ෦Chatbot։ൃͰ։ൃ੹೚ऀ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ͭͷࣄۀΛల։

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

"*ࣄۀຊ෦Ͱಇ͘

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

"*ࣄۀຊ෦Ͱಇ͘ ϝσΟΞܥͷࣄۀ෦ͱϏδωεۀଶ͕ҧ͍·͢ ϝσΟΞܥͷଟ͘ͷࣄۀ෦͸B2C(Ϗδωε to ίϯγϡʔϚʔ)Ͱɺ௚઀ফඅऀ ʹ࡞ͬͨ΋ͷΛఏڙ͢ΔۀଶͰ͢ ҰํAIࣄۀຊ෦͸͍ΘΏΔB2B(Ϗδωε to Ϗδωε)ͷۀଶ͕ଟ͘ɺπʔϧ ΍ը໘ͷఏڙઌ͸ओʹاۀʹͳΓ·͢ ͨͩɺͦͷఏڙઌاۀ͕͞Βʹ͓٬͞Μʹͦͷ··ఏڙ͢Δέʔε΋͋ΔͷͰɺ B2B2C(Ϗδωε => Ϗδωε => ίϯγϡʔϚʔ)ͱ͍͏ۀଶ΋ଟʑ͋Γ·͢ ͦͯ͠B2BͰ͸ओʹۀ຿γεςϜͷ։ൃΛߦ͍·͢

Slide 10

Slide 10 text

"*ࣄۀຊ෦Ͱಇ͘ Ͱ͸B2CͱB2BͰ࣮ࡍʹͲΜͳҧ͍͕͋ͬͯɺͲΜͳ࣮຿͕͋Δͷ͔ ͪΐͬͱ͚ͩݟͯΈ·͠ΐ͏

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

8IBUJT+44%, ͓٬͞ΜͷϖʔδʹKBWBTDSJQUͱIUNMͷεχϖοτΛຒΊࠐ·ͤͯ΋Βͬ ͯɺ༷ʑͳࢪࡦΛ࣮ࢪ͢ΔͨΊͷ΋ͷ ۀ຿γεςϜͱϑϩϯτΤϯυ

Slide 14

Slide 14 text

window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID');

Slide 15

Slide 15 text

• ΞΫηεղੳΛͨ͠Γ • WidgetΛදࣔͨ͠Γ • ޿ࠂΛදࣔͨ͠Γ͢Δ ۀ຿γεςϜͱϑϩϯτΤϯυ +44%,ͱ͸

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

• άϩʔόϧԚછʹؾΛ͚ͭΔ • ࢖͑ΔAPIΛͪΌΜͱఆٛ͢Δ(ෆඞཁͳ΋ͷΛ֎ʹग़͞ͳ͍ ) • ͓٬͞ΜͷαΠτ্ͳͷͰηΩϡϦςΟʹؾΛ͚ͭΔ(XSSͱ͔ ) • ύϑΥʔϚϯεʹؾΛ͚ͭΔ • ͓٬͞ΜͷαΠτ্ͳͷͰόά͕͋Δͱதʑ·͍ͣ … • ϒϥ΢βޓ׵ੑ ۀ຿γεςϜͱϑϩϯτΤϯυ +44%,։ൃ

Slide 18

Slide 18 text

+44%,։ൃ UI͕͋Δ৔߹͸͓٬͞ΜͷαΠτʹUIΛ֎෦͔Βߏங͢ΔͷͰɺCSSͷԚ છʹؾΛ͚ͭͨΓɺUIͷ଎౓ͱ͔B2Cͷ஌ݟ΋ඞཁʹͳΔ͜ͱ͕͋Δ ۀ຿γεςϜͱϑϩϯτΤϯυ

Slide 19

Slide 19 text

ϒϥ΢βޓ׵ੑ ΫϥΠΞϯτʹͲͷϒϥ΢β·ͰରԠ͍ͯ͠Δ͔໌ࣔΛٻΊΒΕΔέʔε΋ ଟ͍ͷͰɺͪΌΜͱରԠ04ϒϥ΢βɾαϙʔτํ਑Λ໌͓֬ͯ͘͠ ۀ຿γεςϜͱϑϩϯτΤϯυ

Slide 20

Slide 20 text

؅ཧը໘։ൃ B2Bܥͷࣄۀͩͱ΄΅ඞਢʹͳΔ։ൃ ΫϥΠΞϯτ͕πʔϧΛίϯτϩʔϧͨ͠ΓϨϙʔτΛݟͨΓ͢ΔͨΊͷը ໘ ۀ຿γεςϜͱϑϩϯτΤϯυ

Slide 21

Slide 21 text

• SSRͱ͔͋·Γ͍Βͳ͍(͋Ε͹ྑ͍͚Ͳ ) • CRUDΛඞ࣮ͣ૷͢Δ • ೝূܥͷ஌ݟ͸ඞਢ • ҙ֎ͱάϥϑΟοΫඳըܥͷ஌͕ࣝ͋Δͱ࢖͏৔໘͕͋Δ(Ϩϙʔτɾͳʹ͔Λ࡞੒͢Δπʔϧͱ͔ ) • UIίϯϙʔωϯτ؅ཧͷ஌ݟ • UIɾUXͷઃܭྗ͕ඞਢ • ׂͱ΍΍͍͜͠State؅ཧ͕͍Δ ۀ຿γεςϜͱϑϩϯτΤϯυ ؅ཧը໘։ൃͷಛ௃

Slide 22

Slide 22 text

443ͱ͔͋·Γ͍Βͳ͍ ؅ཧը໘͸ͲͪΒ͔ͱ͍͏ͱ8FC Core VitalsͷΑ͏ͳ΋ͷ͕ڧ͘͸ٻΊΒΕͯ͸͍ͳ ͍ͷͰɺSSR౳ແཧͯ͠·Ͱ΍Δඞཁ͸ͳ͍(΍Ζ͏ͱͯ͠΋ೝূ͕͋ΔͷͰ݁ߏେม) ͦΕΑΓ΋ৗʹಈ࡞ΛอূͰ͖Δํ͕ॏཁ ͨͩ͠ύϑΥʔϚϯεࣗମ͸ۀ຿ޮ཰ʹ௚݁͢ΔͷͰɺ$PNQPOFOUͷ෼ׂͱ͔ͦͷ͋ ͨΓ͸͔ͬ͠Γ΍Δඞཁ͕͋Δ ServiceWorker౳΋࢖͏ ͋ͱ͸ͦ΋ͦ΋ϑϩϯτΤϯυଆͷΞϧΰϦζϜͷύϑΥʔϚϯε͕ٻΊΒΕΔ͜ͱ΋ ଟ͍ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 23

Slide 23 text

$36%Λඞ࣮ͣ૷͢Δ CRUD(Create,Read,Update,Delete) ࡞੒ɾಡΈग़͠ɾߋ৽ɾ࡟আͷུ ؅ཧը໘Ͱ͸ඞͣ͜ͷ͕ͭඞཁʹͳΔ ྫ ChatBotͷγφϦΦ - γφϦΦͷ࡞੒ $SFBUF - ࡞੒ͨ͠γφϦΦͷࢀর 3FBE - γφϦΦͷߋ৽ 6QEBUF - γφϦΦͷ࡟আ %FMFUF ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 24

Slide 24 text

3FBE 6QEBUF $SFBUF %FMFUF

Slide 25

Slide 25 text

ೝূܥͷ஌ࣝ͸ඞਢ ඞͣϩάΠϯ͕ඞཁͳ΋ͷͳͷͰɺೝূͷ࢓૊ΈɾͲͷೝূͰ࣮૷͢Δ͔ɾ ཁૉೝূɾιʔγϟϧϩάΠϯͱ͔αʔόαΠυνʔϜͱಉ༷ʹ஌ࣝΛ Ξοϓσʔτ͓ͯ͘͠ඞཁ͕͋Δ ͨͩࠓͲ͖͸'JSFCBTF Auth͔ͭͬͨΓ3rd partyͷศརͳೝূػೳ։ൃπʔ ϧΛ࢖͏͜ͱ͕ଟ͍ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 26

Slide 26 text

ҙ֎ͱάϥϑΟοΫܥͷ஌͕ࣝ͋ΔͱΑ͍ طଘͷϥΠϒϥϦΛ࢖͏ʹͯ͠΋Ϩϙʔτ౳͸47(ɾ$BOWBT౳Λ࢖ͬͯඳ ը͢Δ͜ͱ͕ଟ͍ͷͰɺͦͷ΁Μͷ஌͕ࣝ͋Δͱ໾ʹཱͭ ͨͩϨϙʔτʹؔͯ͠͸֎෦ͷ#*πʔϧΛ࢖ͬͨΓ͢Δ͜ͱ΋૿͑ͨͷͰඞ ਢͰ͸ͳ͍͔΋ ͦΕҎ֎ʹ΋ը໘ૢ࡞Ͱෳࡶͳ΋ͷΛઃఆ͢Δέʔε΋ͨ·ʹ͋Δ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

6*ίϯϙʔωϯτ؅ཧͷ஌ݟ ؅ཧը໘͸ಉ͡ػೳɾίϯϙʔωϯτΛ܁Γฦ͠࢖͏έʔε͕ଟ͍ͷͰɺ6* ίϯϙʔωϯτΛ͔ͬ͠Γͱ؅ཧ͢Δඞཁ͕͋Δ ಛʹଟ͍ͷ͕ɺҰ෦෼͕ҧ͏ίϯϙʔωϯτ΍ɺΞΧ΢ϯτͷݖݶʹΑͬ ͯ࢖͑Δػೳ͕ҧ͏ίϯϙʔωϯτ ͜ͷล͸؅ཧํ๏ʹ΋ΑΔ͕ɺྫ͑͹"UPNJD DesignͳΒatom/moleclues/ organismsΛͪΌΜͱ෼཭͢Δඞཁ͕Ͱͯ͘Δ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 29

Slide 29 text

6*69ͷ஌ݟ ͓٬͞Μ͸ຖ೔ը໘Λݟͯ࡞ۀΛ͢ΔͨΊɺ#$ͷ69ͱ͸ҧ͏গ͠ҧͬͨ 6*69ͷ࣮૷͕ٻΊΒΕΔ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 30

Slide 30 text

• ॳݟͰ΋໎Θͣૢ࡞Ͱ͖Δ͜ͱ • ૢ࡞ʹͳΕͨਓ΋ૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ • ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ(࡟আ͸֬ೝϙοϓΞοϓग़ͨ͠Γ ) • ΞΫηγϏϦςΟ(͜͜͸B2Cͱಉ͡) ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ 6*69ͷ஌ݟ

Slide 31

Slide 31 text

ॳݟͰ΋໎Θͣૢ࡞Ͱ͖Δ͜ͱ ॳݟͷਓͰ΋࢖͍΍͍͢ͱɺ΋͠ڝ߹ͱͷπʔϧൺֱΛΫϥΠΞϯτ͕࣮ ࢪ͍ͯͨ͠৔߹େ͖ͳΞυόϯςʔδʹͳΔ γϯϓϧʹڝ૪ྗʹͭͳ͕Δ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ6*69ͷ஌ݟ

Slide 32

Slide 32 text

ૢ࡞ʹͳΕͨਓ΋ૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ πʔϧͷૢ࡞ʹͳΕ͖ͯͨਓ͕ΑΓޮ཰Α͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔͱۀ຿ ޮ཰্͕͕ΓɺπʔϧͷධՁϙΠϯτʹͳΔʢγϣʔτΧοτΩʔͱ͔ʣ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ6*69ͷ஌ݟ

Slide 33

Slide 33 text

ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ ؅ཧπʔϧ͸݁ߏக໋తͳૢ࡞Λ࣮ࢪ͢Δ͜ͱ͕͋Δ ԿΒ͔ͷγεςϜͷ ఀࢭɾ࡟আ౳ ͷͰɺඞͣ࡞੒ɾ࡟আ౳ͷૢ࡞ʹ͸༷ʑͳํ๏Ͱ֬ೝΛ͢Δ 69ͷઃܭʹ͢Δ ֬ೝϙοϓΞοϓɾ໊લͷ࠶ೖྗ ·ͨૢ࡞ͷ੒ޭ࣌ʹ͸௨஌΋ग़͢΂͖ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ6*69ͷ஌ݟ

Slide 34

Slide 34 text

ΞΫηγϏϦςΟ ͜͜͸ผʹಛ௃తͰ͸ͳ͍ ΈΜͳͪΌΜͱ΍Γ·͠ΐ͏ લड़ͷૢ࡞ͷ͠΍͢͞ʹ΋௚݁͢ΔͷͰ UBCҠಈͱ͔Ͷ ΍ͬͨํ͕γϯϓ ϧʹධՁʹͭͳ͕Γ΍͍͢ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 35

Slide 35 text

ׂͱ΍΍͍͜͠4UBUF؅ཧ State؅ཧ͕݁ߏෳࡶʹͳΓ͕ͪ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

Slide 36

Slide 36 text

• ओʹCRUDͷ͍ͤ • Loadingঢ়ଶɾ։ดঢ়ଶ͕͍ͬͺ͍ • ೝূঢ়ଶʹΑͬͯ΋͔ΘͬͨΓ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ 4UBUF؅ཧ

Slide 37

Slide 37 text

$36%ͷ4UBUF؅ཧ ྫ͑͹MJTUܥͷΞΠςϜΛ࡞੒͢Δ৔߹ - อଘલʹೖྗ͞ΕͨΞΠςϜͷঢ়ଶΛ؅ཧ͢Δ - ࡞੒"1*Λୟ͘ - αʔό͔Β࡞੒͞ΕͨΞΠςϜͷ*%͕ฦͬͯ͘Δ - Ϧετͷ4UBUFΛߋ৽ ಛʹҰ࣌తͳ஋ͷ؅ཧΛٻΊΒΕΔέʔε͕ଟ͍ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ4UBUF؅ཧ

Slide 38

Slide 38 text

-PBEJOHɾ։ดঢ়ଶͱ͔ͷ4UBUF؅ཧ APIΛݺͼग़͍ͯ͠Δؒʹଞͷૢ࡞ΛෆՄೳʹͨ͠ΓɺAPIͷਐߦঢ়گΛݟ ͤΔͨΊʹLoadingΛදࣔ͢Δέʔε͕ଟ͍ ͜ͷ-PBEJOHঢ়ଶΛͲ͏؅ཧ͢Δ͔΋࿹͕ࢼ͞ΕΔϙΠϯτ ͋ͱ͸φϏήʔγϣϯͩͬͨΓɺΞΠςϜͷ։ด͕Ͱ͖Δը໘΋ଟ͍ͷͰɺ ͦΕΒࡶଟͳ6*ͷঢ়ଶ؅ཧΛؤுΔඞཁ͕͋Δ ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ4UBUF؅ཧ

Slide 39

Slide 39 text

΍Γ͕͍

Slide 40

Slide 40 text

6*ͷແ͍ϑϩϯτΤϯυ ϑϩϯτΤϯυଆͰ΋७ਮͰෳࡶͳϩδοΫͷ࣮૷Λ͢Δ͜ͱ͕݁ߏ͋ΔͷͰɺͦ ͏͍͏ͷ͕޷͖ͳਓ͸޲͍ͯΔͱࢥ͍·͢ ݸਓతͳܦݧͱͯ͠1ྫͰ͕͢ - TagManagerͷ࣮૷ - ϒϥ΢βͷScriptൃՐλΠϛϯάΛશͯίϯτʔϧͨ͠Γ(ϒϥ΢βͷಈ࡞Λ ໛฿͢ΔͨΊʹ༏ઌ౓෇͖ΩϡʔΛ࡞ͬͨΓɺ2෼ώʔϓ࣮૷ͨ͠Γ)ɺը໘্Ͱอ ଘ͞ΕͨjavascriptΛͦͷ৔ͰίϯύΠϧ͢Δػೳͭͬͨ͘Γ - ChatBotͷγφϦΦ࡞੒Ͱ༗޲άϥϑͷ؅ཧɾෛͷॏΈ෇͖࠷୹ܦ࿏Λௐ΂Δ ͳΜ͔Λ΍ͬͨΓ͠·ͨ͠ ͳ͔ͳ͔B2CͰܦݧ͢Δͷ͸೉͍͠಺༰͔ͳͱࢥ͍·͢

Slide 41

Slide 41 text

Ϗδωεͱ௚݁ ࡞ͬͨ΋ͷ͕ΫϥΠΞϯτʹ௚઀ධՁ͞Εͯɺ͞ΒʹͦΕʹରͯ͠ܖ໿ͱ͍ ͏͔ͨͪͰධՁΛ΋Β͑ΔͷͰB2CΑΓ΋͔ͳΓ௚઀తʹධՁ͞Ε·͢ ݸਓతʹ͸࡞ͬͨ΋ͷ͕࢖͍΍ͯ͘͢ɺۀ຿͕͔ͳΓվળ͞ΕͨΓɺ͓٬͞ Μͷച্޲্౳ʹ௚઀ؔΘΕΔͷ͸݁ߏ޷͖Ͱ͢

Slide 42

Slide 42 text

·ͱΊ

Slide 43

Slide 43 text

ੋඇɺ"*ࣄۀຊ෦΁ʂ ͜Μͳײ͡ͷ࢓ࣄΛ͍ͯ͠ΔͷͰɺڵຯ͕͋Δਓ͸ੋඇʂ

Slide 44

Slide 44 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠