CA 1Day Youth Bootcamp for Frontend LT

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

View Slide

Nam
e

!CSO 5BLFUPTIJ"POP੨໺݈ར

Occupatio
n

'SPOUFOE%FWFMPQFS1SPEVDU0XOFS
Compan
y

$ZCFSBHFOU"*4UVEJPO"*4IJGU
OS
S

$POUSJCVUPSPG7+BWBTDSJQU&OHJOF
Abou
t

IUUQJOGPCODI

View Slide

Carrie
r

- 201
0

- ྵࡉWebडୗձࣾʹೖࣾJS΍Flash(AS2/3)Λ΍Δ
- 201
1

- CyberAgentೖࣾ
- ޿ࠂܭଌπʔϧͷ؅ཧը໘ɾλά࣮૷
- TagManagerͷ࣮૷
- …৭ʑ
- 201
8

- AIࣄۀຊ෦Chatbot։ൃͰ։ൃ੹೚ऀ

View Slide

View Slide

ͭͷࣄۀΛల։

View Slide

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

View Slide


View Slide

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

View Slide

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

View Slide

Ͱ͸B2CͱB2BͰ࣮ࡍʹͲΜͳҧ͍͕͋ͬͯɺͲΜͳ࣮຿͕͋Δͷ͔
ͪΐͬͱ͚ͩݟͯΈ·͠ΐ͏

View Slide


View Slide

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

View Slide

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

View Slide

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

View Slide

• ΞΫηεղੳΛͨ͠Γ
• WidgetΛදࣔͨ͠Γ
• ޿ࠂΛදࣔͨ͠Γ͢Δ
+44%,ͱ͸

View Slide

+44%,։ൃ
UI͕ͳ͍৔߹͸γϯϓϧʹjavascript/typescriptίʔυʹͳΔͷͰɺϩδοΫ
த৺ͷ७ਮͳϓϩάϥϛϯάʹͳΔ͜ͱ͕ଟ͍

ҙ֎ͱOQNʹ΋࢖͑Δύοέʔδ͕ͳ͍͜ͱ͕ଟͯࣗ͘࡞ίʔυϝΠϯʹ
ͳΔέʔε΋ ΍Γ͍ͨ͜ͱ͕ಛघͳέʔε


View Slide

• άϩʔόϧԚછʹؾΛ͚ͭΔ
• ࢖͑ΔAPIΛͪΌΜͱఆٛ͢Δ(ෆඞཁͳ΋ͷΛ֎ʹग़͞ͳ͍
)

• ͓٬͞ΜͷαΠτ্ͳͷͰηΩϡϦςΟʹؾΛ͚ͭΔ(XSSͱ͔
)

• ύϑΥʔϚϯεʹؾΛ͚ͭΔ
• ͓٬͞ΜͷαΠτ্ͳͷͰόά͕͋Δͱதʑ·͍ͣ
…

• ϒϥ΢βޓ׵ੑ
+44%,։ൃ

View Slide

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

View Slide

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

View Slide

؅ཧը໘։ൃ
B2Bܥͷࣄۀͩͱ΄΅ඞਢʹͳΔ։ൃ

ΫϥΠΞϯτ͕πʔϧΛίϯτϩʔϧͨ͠ΓϨϙʔτΛݟͨΓ͢ΔͨΊͷը
໘

View Slide

• SSRͱ͔͋·Γ͍Βͳ͍(͋Ε͹ྑ͍͚Ͳ
)

• CRUDΛඞ࣮ͣ૷͢Δ
• ೝূܥͷ஌ݟ͸ඞਢ
• ҙ֎ͱάϥϑΟοΫඳըܥͷ஌͕ࣝ͋Δͱ࢖͏৔໘͕͋Δ(Ϩϙʔτɾͳʹ͔Λ࡞੒͢Δπʔϧͱ͔
)

• UIίϯϙʔωϯτ؅ཧͷ஌ݟ
• UIɾUXͷઃܭྗ͕ඞਢ
• ׂͱ΍΍͍͜͠State؅ཧ͕͍Δ
؅ཧը໘։ൃͷಛ௃

View Slide

443ͱ͔͋·Γ͍Βͳ͍
؅ཧը໘͸ͲͪΒ͔ͱ͍͏ͱ8FC Core VitalsͷΑ͏ͳ΋ͷ͕ڧ͘͸ٻΊΒΕͯ͸͍ͳ
͍ͷͰɺSSR౳ແཧͯ͠·Ͱ΍Δඞཁ͸ͳ͍(΍Ζ͏ͱͯ͠΋ೝূ͕͋ΔͷͰ݁ߏେม)

ͦΕΑΓ΋ৗʹಈ࡞ΛอূͰ͖Δํ͕ॏཁ

ͨͩ͠ύϑΥʔϚϯεࣗମ͸ۀ຿ޮ཰ʹ௚݁͢ΔͷͰɺ$PNQPOFOUͷ෼ׂͱ͔ͦͷ͋
ͨΓ͸͔ͬ͠Γ΍Δඞཁ͕͋Δ

ServiceWorker౳΋࢖͏

͋ͱ͸ͦ΋ͦ΋ϑϩϯτΤϯυଆͷΞϧΰϦζϜͷύϑΥʔϚϯε͕ٻΊΒΕΔ͜ͱ΋
ଟ͍
ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ

View Slide

$36%Λඞ࣮ͣ૷͢Δ
CRUD(Create,Read,Update,Delete)

࡞੒ɾಡΈग़͠ɾߋ৽ɾ࡟আͷུ

؅ཧը໘Ͱ͸ඞͣ͜ͷ͕ͭඞཁʹͳΔ

ྫ ChatBotͷγφϦΦ

- γφϦΦͷ࡞੒ $SFBUF

- ࡞੒ͨ͠γφϦΦͷࢀর 3FBE

- γφϦΦͷߋ৽ 6QEBUF

- γφϦΦͷ࡟আ %FMFUF


View Slide

3FBE 6QEBUF
$SFBUF %FMFUF

View Slide

ೝূܥͷ஌ࣝ͸ඞਢ
ඞͣϩάΠϯ͕ඞཁͳ΋ͷͳͷͰɺೝূͷ࢓૊ΈɾͲͷೝূͰ࣮૷͢Δ͔ɾ
ཁૉೝূɾιʔγϟϧϩάΠϯͱ͔αʔόαΠυνʔϜͱಉ༷ʹ஌ࣝΛ
Ξοϓσʔτ͓ͯ͘͠ඞཁ͕͋Δ

ͨͩࠓͲ͖͸'JSFCBTF Auth͔ͭͬͨΓ3rd partyͷศརͳೝূػೳ։ൃπʔ
ϧΛ࢖͏͜ͱ͕ଟ͍

View Slide

ҙ֎ͱάϥϑΟοΫܥͷ஌͕ࣝ͋ΔͱΑ͍
طଘͷϥΠϒϥϦΛ࢖͏ʹͯ͠΋Ϩϙʔτ౳͸47(ɾ$BOWBT౳Λ࢖ͬͯඳ
ը͢Δ͜ͱ͕ଟ͍ͷͰɺͦͷ΁Μͷ஌͕ࣝ͋Δͱ໾ʹཱͭ

ͨͩϨϙʔτʹؔͯ͠͸֎෦ͷ#*πʔϧΛ࢖ͬͨΓ͢Δ͜ͱ΋૿͑ͨͷͰඞ
ਢͰ͸ͳ͍͔΋

ͦΕҎ֎ʹ΋ը໘ૢ࡞Ͱෳࡶͳ΋ͷΛઃఆ͢Δέʔε΋ͨ·ʹ͋Δ

View Slide

View Slide

6*ίϯϙʔωϯτ؅ཧͷ஌ݟ
؅ཧը໘͸ಉ͡ػೳɾίϯϙʔωϯτΛ܁Γฦ͠࢖͏έʔε͕ଟ͍ͷͰɺ6*
ίϯϙʔωϯτΛ͔ͬ͠Γͱ؅ཧ͢Δඞཁ͕͋Δ

ಛʹଟ͍ͷ͕ɺҰ෦෼͕ҧ͏ίϯϙʔωϯτ΍ɺΞΧ΢ϯτͷݖݶʹΑͬ
ͯ࢖͑Δػೳ͕ҧ͏ίϯϙʔωϯτ

͜ͷล͸؅ཧํ๏ʹ΋ΑΔ͕ɺྫ͑͹"UPNJD DesignͳΒatom/moleclues/
organismsΛͪΌΜͱ෼཭͢Δඞཁ͕Ͱͯ͘Δ

View Slide

6*69ͷ஌ݟ
͓٬͞Μ͸ຖ೔ը໘Λݟͯ࡞ۀΛ͢ΔͨΊɺ#$ͷ69ͱ͸ҧ͏গ͠ҧͬͨ
6*69ͷ࣮૷͕ٻΊΒΕΔ

View Slide

• ॳݟͰ΋໎Θͣૢ࡞Ͱ͖Δ͜ͱ
• ૢ࡞ʹͳΕͨਓ΋ૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ
• ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ(࡟আ͸֬ೝϙοϓΞοϓग़ͨ͠Γ
)

• ΞΫηγϏϦςΟ(͜͜͸B2Cͱಉ͡)
6*69ͷ஌ݟ

View Slide

ॳݟͰ΋໎Θͣૢ࡞Ͱ͖Δ͜ͱ
ॳݟͷਓͰ΋࢖͍΍͍͢ͱɺ΋͠ڝ߹ͱͷπʔϧൺֱΛΫϥΠΞϯτ͕࣮
ࢪ͍ͯͨ͠৔߹େ͖ͳΞυόϯςʔδʹͳΔ

γϯϓϧʹڝ૪ྗʹͭͳ͕Δ
ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ6*69ͷ஌ݟ

View Slide

ૢ࡞ʹͳΕͨਓ΋ૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ
πʔϧͷૢ࡞ʹͳΕ͖ͯͨਓ͕ΑΓޮ཰Α͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔͱۀ຿
ޮ཰্͕͕ΓɺπʔϧͷධՁϙΠϯτʹͳΔʢγϣʔτΧοτΩʔͱ͔ʣ

View Slide

ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ
؅ཧπʔϧ͸݁ߏக໋తͳૢ࡞Λ࣮ࢪ͢Δ͜ͱ͕͋Δ ԿΒ͔ͷγεςϜͷ
ఀࢭɾ࡟আ౳
ͷͰɺඞͣ࡞੒ɾ࡟আ౳ͷૢ࡞ʹ͸༷ʑͳํ๏Ͱ֬ೝΛ͢Δ
69ͷઃܭʹ͢Δ ֬ೝϙοϓΞοϓɾ໊લͷ࠶ೖྗ

·ͨૢ࡞ͷ੒ޭ࣌ʹ͸௨஌΋ग़͢΂͖

View Slide

ΞΫηγϏϦςΟ
͜͜͸ผʹಛ௃తͰ͸ͳ͍

ΈΜͳͪΌΜͱ΍Γ·͠ΐ͏

લड़ͷૢ࡞ͷ͠΍͢͞ʹ΋௚݁͢ΔͷͰ UBCҠಈͱ͔Ͷ
΍ͬͨํ͕γϯϓ
ϧʹධՁʹͭͳ͕Γ΍͍͢

View Slide

ׂͱ΍΍͍͜͠4UBUF؅ཧ
State؅ཧ͕݁ߏෳࡶʹͳΓ͕ͪ

View Slide

• ओʹCRUDͷ͍ͤ
• Loadingঢ়ଶɾ։ดঢ়ଶ͕͍ͬͺ͍
• ೝূঢ়ଶʹΑͬͯ΋͔ΘͬͨΓ
4UBUF؅ཧ

View Slide

$36%ͷ4UBUF؅ཧ
ྫ͑͹MJTUܥͷΞΠςϜΛ࡞੒͢Δ৔߹

- อଘલʹೖྗ͞ΕͨΞΠςϜͷঢ়ଶΛ؅ཧ͢Δ

- ࡞੒"1*Λୟ͘

- αʔό͔Β࡞੒͞ΕͨΞΠςϜͷ*%͕ฦͬͯ͘Δ

- Ϧετͷ4UBUFΛߋ৽

ಛʹҰ࣌తͳ஋ͷ؅ཧΛٻΊΒΕΔέʔε͕ଟ͍
ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ4UBUF؅ཧ

View Slide

-PBEJOHɾ։ดঢ়ଶͱ͔ͷ4UBUF؅ཧ
APIΛݺͼग़͍ͯ͠Δؒʹଞͷૢ࡞ΛෆՄೳʹͨ͠ΓɺAPIͷਐߦঢ়گΛݟ
ͤΔͨΊʹLoadingΛදࣔ͢Δέʔε͕ଟ͍

͜ͷ-PBEJOHঢ়ଶΛͲ͏؅ཧ͢Δ͔΋࿹͕ࢼ͞ΕΔϙΠϯτ

͋ͱ͸φϏήʔγϣϯͩͬͨΓɺΞΠςϜͷ։ด͕Ͱ͖Δը໘΋ଟ͍ͷͰɺ
ͦΕΒࡶଟͳ6*ͷঢ়ଶ؅ཧΛؤுΔඞཁ͕͋Δ
ۀ຿γεςϜͱϑϩϯτΤϯυ؅ཧը໘։ൃ4UBUF؅ཧ

View Slide

΍Γ͕͍

View Slide

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

View Slide

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

View Slide

·ͱΊ

View Slide

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

View Slide

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

View Slide

CA 1Day Youth Bootcamp for Frontend LT

CA 1Day Youth Bootcamp for Frontend LT

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

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

Other Decks in Programming

Featured

Transcript