Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
CA 1Day Youth Bootcamp for Frontend LT
Taketoshi Aono(青野健利 a.k.a brn)
December 13, 2021
Programming
0
360
CA 1Day Youth Bootcamp for Frontend LT
Taketoshi Aono(青野健利 a.k.a brn)
December 13, 2021
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
Modern TypeScript
brn
2
570
javascript - behind the scene
brn
3
500
tc39 proposals
brn
0
520
プロダクト開発とTypeScript
brn
8
2.5k
React-Springでリッチなアニメーション
brn
1
440
javascript internationalization API
brn
0
550
How V8 executes WASM
brn
3
1.4k
memory_in_javascript.pdf
brn
0
710
RegExp and Unicode in javascript
brn
0
480
Other Decks in Programming
See All in Programming
What's new in Shopware 6.5
shyim
0
110
OSSから学んだPR Descriptionの書き方
fugakkbn
4
140
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
ECテックカンファレンス2023
kspace
1
360
Remote SSHで行うVS Codeリモートホスト開発とトラブルシューティング
smt7174
1
500
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.5k
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
130
Becoming an Android Librarian (Android World Wide 2023 Jan)
skydoves
2
220
domain層のモジュール化 / MoT TechTalk #15
mot_techtalk
0
130
低レイヤーから始める GUI
fadis
18
9.4k
Step Functions Distributed Map を使ってみた
codemountains
0
110
Hatena Engineer Seminar #23「新卒研修で気軽に『ありがとう』を伝え合える Slack アプリを開発した話」
slashnephy
0
350
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
74
4.3k
Happy Clients
brianwarren
90
5.8k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
A better future with KSS
kneath
230
16k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Building an army of robots
kneath
301
40k
In The Pink: A Labor of Love
frogandcode
132
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
The Mythical Team-Month
searls
210
40k
Building Adaptive Systems
keathley
27
1.3k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Transcript
"*ࣄۀຊ෦ͱϑϩϯτΤϯυΤϯδχΞ
Nam e !CSO 5BLFUPTIJ"POP੨݈ར Occupatio n 'SPOUFOE%FWFMPQFS1SPEVDU0XOFS Compan y
$ZCFSBHFOU"*4UVEJPO"*4IJGU OS S $POUSJCVUPSPG7+BWBTDSJQU&OHJOF Abou t IUUQJOGPCODI
Carrie r - 201 0 - ྵࡉWebडୗձࣾʹೖࣾJSFlash(AS2/3)ΛΔ - 201 1
- CyberAgentೖࣾ - ࠂܭଌπʔϧͷཧը໘ɾλά࣮ - TagManagerͷ࣮ - …৭ʑ - 201 8 - AIࣄۀຊ෦Chatbot։ൃͰ։ൃऀ
None
ͭͷࣄۀΛల։
ຊͷ༰ "*ࣄۀຊ෦Ͱಇ͘ ۀγεςϜͱϑϩϯτΤϯυ Γ͕͍
"*ࣄۀຊ෦Ͱಇ͘
"*ࣄۀຊ෦Ͱಇ͘ AIࣄۀຊ෦ͰϑϩϯτΤϯυ։ൃऀ͕ͲΜͳ͜ͱΛ͍ͯ͠Δ͔தʑ૾͠ ͮΒ͍Ͱ͢ΑͶʁ
"*ࣄۀຊ෦Ͱಇ͘ ϝσΟΞܥͷࣄۀ෦ͱϏδωεۀଶ͕ҧ͍·͢ ϝσΟΞܥͷଟ͘ͷࣄۀ෦B2C(Ϗδωε to ίϯγϡʔϚʔ)Ͱɺফඅऀ ʹ࡞ͬͨͷΛఏڙ͢ΔۀଶͰ͢ ҰํAIࣄۀຊ෦͍ΘΏΔB2B(Ϗδωε to Ϗδωε)ͷۀଶ͕ଟ͘ɺπʔϧ ը໘ͷఏڙઌओʹاۀʹͳΓ·͢
ͨͩɺͦͷఏڙઌاۀ͕͞Βʹ͓٬͞Μʹͦͷ··ఏڙ͢Δέʔε͋ΔͷͰɺ B2B2C(Ϗδωε => Ϗδωε => ίϯγϡʔϚʔ)ͱ͍͏ۀଶଟʑ͋Γ·͢ ͦͯ͠B2BͰओʹۀγεςϜͷ։ൃΛߦ͍·͢
"*ࣄۀຊ෦Ͱಇ͘ ͰB2CͱB2BͰ࣮ࡍʹͲΜͳҧ͍͕͋ͬͯɺͲΜͳ࣮͕͋Δͷ͔ ͪΐͬͱ͚ͩݟͯΈ·͠ΐ͏
ۀγεςϜͱϑϩϯτΤϯυ
ۀγεςϜͱϑϩϯτΤϯυ • JS SDKΛ࡞ͬͨΓ • ސ٬͕͏ཧը໘Λ࡞ͬͨΓ • ͓٬͞ΜͷϑϩϯτΤϯυपΓͷΈղܾΛ͠·͢ʂ
8IBUJT+44%, ͓٬͞ΜͷϖʔδʹKBWBTDSJQUͱIUNMͷεχϖοτΛຒΊࠐ·ͤͯΒͬ ͯɺ༷ʑͳࢪࡦΛ࣮ࢪ͢ΔͨΊͷͷ ۀγεςϜͱϑϩϯτΤϯυ
<!-- 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>
• ΞΫηεղੳΛͨ͠Γ • WidgetΛදࣔͨ͠Γ • ࠂΛදࣔͨ͠Γ͢Δ ۀγεςϜͱϑϩϯτΤϯυ +44%,ͱ
+44%,։ൃ UI͕ͳ͍߹γϯϓϧʹjavascript/typescriptίʔυʹͳΔͷͰɺϩδοΫ த৺ͷ७ਮͳϓϩάϥϛϯάʹͳΔ͜ͱ͕ଟ͍ ҙ֎ͱOQNʹ͑Δύοέʔδ͕ͳ͍͜ͱ͕ଟͯࣗ͘࡞ίʔυϝΠϯʹ ͳΔέʔε Γ͍ͨ͜ͱ͕ಛघͳέʔε ۀγεςϜͱϑϩϯτΤϯυ
• άϩʔόϧԚછʹؾΛ͚ͭΔ • ͑ΔAPIΛͪΌΜͱఆٛ͢Δ(ෆඞཁͳͷΛ֎ʹग़͞ͳ͍ ) • ͓٬͞ΜͷαΠτ্ͳͷͰηΩϡϦςΟʹؾΛ͚ͭΔ(XSSͱ͔ ) • ύϑΥʔϚϯεʹؾΛ͚ͭΔ
• ͓٬͞ΜͷαΠτ্ͳͷͰόά͕͋Δͱதʑ·͍ͣ … • ϒϥβޓੑ ۀγεςϜͱϑϩϯτΤϯυ +44%,։ൃ
+44%,։ൃ UI͕͋Δ߹͓٬͞ΜͷαΠτʹUIΛ֎෦͔Βߏங͢ΔͷͰɺCSSͷԚ છʹؾΛ͚ͭͨΓɺUIͷͱ͔B2CͷݟඞཁʹͳΔ͜ͱ͕͋Δ ۀγεςϜͱϑϩϯτΤϯυ
ϒϥβޓੑ ΫϥΠΞϯτʹͲͷϒϥβ·ͰରԠ͍ͯ͠Δ͔໌ࣔΛٻΊΒΕΔέʔε ଟ͍ͷͰɺͪΌΜͱରԠ04ϒϥβɾαϙʔτํΛ໌͓֬ͯ͘͠ ۀγεςϜͱϑϩϯτΤϯυ
ཧը໘։ൃ B2Bܥͷࣄۀͩͱ΄΅ඞਢʹͳΔ։ൃ ΫϥΠΞϯτ͕πʔϧΛίϯτϩʔϧͨ͠ΓϨϙʔτΛݟͨΓ͢ΔͨΊͷը ໘ ۀγεςϜͱϑϩϯτΤϯυ
• SSRͱ͔͋·Γ͍Βͳ͍(͋Εྑ͍͚Ͳ ) • CRUDΛඞ࣮ͣ͢Δ • ೝূܥͷݟඞਢ • ҙ֎ͱάϥϑΟοΫඳըܥͷ͕ࣝ͋Δͱ͏໘͕͋Δ(Ϩϙʔτɾͳʹ͔Λ࡞͢Δπʔϧͱ͔ )
• UIίϯϙʔωϯτཧͷݟ • UIɾUXͷઃܭྗ͕ඞਢ • ׂͱ͍͜͠Stateཧ͕͍Δ ۀγεςϜͱϑϩϯτΤϯυ ཧը໘։ൃͷಛ
443ͱ͔͋·Γ͍Βͳ͍ ཧը໘ͲͪΒ͔ͱ͍͏ͱ8FC Core VitalsͷΑ͏ͳͷ͕ڧ͘ٻΊΒΕ͍ͯͳ ͍ͷͰɺSSRແཧͯ͠·ͰΔඞཁͳ͍(Ζ͏ͱͯ͠ೝূ͕͋ΔͷͰ݁ߏେม) ͦΕΑΓৗʹಈ࡞ΛอূͰ͖Δํ͕ॏཁ ͨͩ͠ύϑΥʔϚϯεࣗମۀޮʹ݁͢ΔͷͰɺ$PNQPOFOUͷׂͱ͔ͦͷ͋ ͨΓ͔ͬ͠ΓΔඞཁ͕͋Δ ServiceWorker͏ ͋ͱͦͦϑϩϯτΤϯυଆͷΞϧΰϦζϜͷύϑΥʔϚϯε͕ٻΊΒΕΔ͜ͱ
ଟ͍ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
$36%Λඞ࣮ͣ͢Δ CRUD(Create,Read,Update,Delete) ࡞ɾಡΈग़͠ɾߋ৽ɾআͷུ ཧը໘Ͱඞͣ͜ͷ͕ͭඞཁʹͳΔ ྫ ChatBotͷγφϦΦ - γφϦΦͷ࡞ $SFBUF -
࡞ͨ͠γφϦΦͷࢀর 3FBE - γφϦΦͷߋ৽ 6QEBUF - γφϦΦͷআ %FMFUF ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
3FBE 6QEBUF $SFBUF %FMFUF
ೝূܥͷࣝඞਢ ඞͣϩάΠϯ͕ඞཁͳͷͳͷͰɺೝূͷΈɾͲͷೝূͰ࣮͢Δ͔ɾ ཁૉೝূɾιʔγϟϧϩάΠϯͱ͔αʔόαΠυνʔϜͱಉ༷ʹࣝΛ Ξοϓσʔτ͓ͯ͘͠ඞཁ͕͋Δ ͨͩࠓͲ͖'JSFCBTF Auth͔ͭͬͨΓ3rd partyͷศརͳೝূػೳ։ൃπʔ ϧΛ͏͜ͱ͕ଟ͍ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
ҙ֎ͱάϥϑΟοΫܥͷ͕ࣝ͋ΔͱΑ͍ طଘͷϥΠϒϥϦΛ͏ʹͯ͠Ϩϙʔτ47(ɾ$BOWBTΛͬͯඳ ը͢Δ͜ͱ͕ଟ͍ͷͰɺͦͷΜͷ͕ࣝ͋Δͱʹཱͭ ͨͩϨϙʔτʹؔͯ͠֎෦ͷ#*πʔϧΛͬͨΓ͢Δ͜ͱ૿͑ͨͷͰඞ ਢͰͳ͍͔ ͦΕҎ֎ʹը໘ૢ࡞ͰෳࡶͳͷΛઃఆ͢Δέʔεͨ·ʹ͋Δ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
None
6*ίϯϙʔωϯτཧͷݟ ཧը໘ಉ͡ػೳɾίϯϙʔωϯτΛ܁Γฦ͠͏έʔε͕ଟ͍ͷͰɺ6* ίϯϙʔωϯτΛ͔ͬ͠Γͱཧ͢Δඞཁ͕͋Δ ಛʹଟ͍ͷ͕ɺҰ෦͕ҧ͏ίϯϙʔωϯτɺΞΧϯτͷݖݶʹΑͬ ͯ͑Δػೳ͕ҧ͏ίϯϙʔωϯτ ͜ͷลཧํ๏ʹΑΔ͕ɺྫ͑"UPNJD DesignͳΒatom/moleclues/ organismsΛͪΌΜͱ͢Δඞཁ͕Ͱͯ͘Δ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
6*69ͷݟ ͓٬͞Μຖը໘Λݟͯ࡞ۀΛ͢ΔͨΊɺ#$ͷ69ͱҧ͏গ͠ҧͬͨ 6*69ͷ࣮͕ٻΊΒΕΔ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
• ॳݟͰ໎Θͣૢ࡞Ͱ͖Δ͜ͱ • ૢ࡞ʹͳΕͨਓૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ • ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ(আ֬ೝϙοϓΞοϓग़ͨ͠Γ ) • ΞΫηγϏϦςΟ(͜͜B2Cͱಉ͡) ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
6*69ͷݟ
ॳݟͰ໎Θͣૢ࡞Ͱ͖Δ͜ͱ ॳݟͷਓͰ͍͍͢ͱɺ͠ڝ߹ͱͷπʔϧൺֱΛΫϥΠΞϯτ͕࣮ ࢪ͍ͯͨ͠߹େ͖ͳΞυόϯςʔδʹͳΔ γϯϓϧʹڝ૪ྗʹͭͳ͕Δ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ6*69ͷݟ
ૢ࡞ʹͳΕͨਓૉૣ͘ૢ࡞Ͱ͖Δ͜ͱ πʔϧͷૢ࡞ʹͳΕ͖ͯͨਓ͕ΑΓޮΑ͘ૢ࡞Ͱ͖ΔΑ͏ʹͳΔͱۀ ޮ্͕͕ΓɺπʔϧͷධՁϙΠϯτʹͳΔʢγϣʔτΧοτΩʔͱ͔ʣ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ6*69ͷݟ
ૢ࡞ϛε͕ى͖ͮΒ͍͜ͱ ཧπʔϧ݁ߏக໋తͳૢ࡞Λ࣮ࢪ͢Δ͜ͱ͕͋Δ ԿΒ͔ͷγεςϜͷ ఀࢭɾআ ͷͰɺඞͣ࡞ɾআͷૢ࡞ʹ༷ʑͳํ๏Ͱ֬ೝΛ͢Δ 69ͷઃܭʹ͢Δ ֬ೝϙοϓΞοϓɾ໊લͷ࠶ೖྗ ·ͨૢ࡞ͷޭ࣌ʹ௨ग़͖͢ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ6*69ͷݟ
ΞΫηγϏϦςΟ ͜͜ผʹಛతͰͳ͍ ΈΜͳͪΌΜͱΓ·͠ΐ͏ લड़ͷૢ࡞ͷ͢͠͞ʹ݁͢ΔͷͰ UBCҠಈͱ͔Ͷ ͬͨํ͕γϯϓ ϧʹධՁʹͭͳ͕Γ͍͢ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
ׂͱ͍͜͠4UBUFཧ Stateཧ͕݁ߏෳࡶʹͳΓ͕ͪ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ
• ओʹCRUDͷ͍ͤ • Loadingঢ়ଶɾ։ดঢ়ଶ͕͍ͬͺ͍ • ೝূঢ়ଶʹΑ͔ͬͯΘͬͨΓ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ 4UBUFཧ
$36%ͷ4UBUFཧ ྫ͑MJTUܥͷΞΠςϜΛ࡞͢Δ߹ - อଘલʹೖྗ͞ΕͨΞΠςϜͷঢ়ଶΛཧ͢Δ - ࡞"1*Λୟ͘ - αʔό͔Β࡞͞ΕͨΞΠςϜͷ*%͕ฦͬͯ͘Δ - Ϧετͷ4UBUFΛߋ৽
ಛʹҰ࣌తͳͷཧΛٻΊΒΕΔέʔε͕ଟ͍ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ4UBUFཧ
-PBEJOHɾ։ดঢ়ଶͱ͔ͷ4UBUFཧ APIΛݺͼग़͍ͯ͠Δؒʹଞͷૢ࡞ΛෆՄೳʹͨ͠ΓɺAPIͷਐߦঢ়گΛݟ ͤΔͨΊʹLoadingΛදࣔ͢Δέʔε͕ଟ͍ ͜ͷ-PBEJOHঢ়ଶΛͲ͏ཧ͢Δ͔͕ࢼ͞ΕΔϙΠϯτ ͋ͱφϏήʔγϣϯͩͬͨΓɺΞΠςϜͷ։ด͕Ͱ͖Δը໘ଟ͍ͷͰɺ ͦΕΒࡶଟͳ6*ͷঢ়ଶཧΛؤுΔඞཁ͕͋Δ ۀγεςϜͱϑϩϯτΤϯυཧը໘։ൃ4UBUFཧ
Γ͕͍
6*ͷແ͍ϑϩϯτΤϯυ ϑϩϯτΤϯυଆͰ७ਮͰෳࡶͳϩδοΫͷ࣮Λ͢Δ͜ͱ͕݁ߏ͋ΔͷͰɺͦ ͏͍͏ͷ͕͖ͳਓ͍ͯΔͱࢥ͍·͢ ݸਓతͳܦݧͱͯ͠1ྫͰ͕͢ - TagManagerͷ࣮ - ϒϥβͷScriptൃՐλΠϛϯάΛશͯίϯτʔϧͨ͠Γ(ϒϥβͷಈ࡞Λ ฿͢ΔͨΊʹ༏ઌ͖ΩϡʔΛ࡞ͬͨΓɺ2ώʔϓ࣮ͨ͠Γ)ɺը໘্Ͱอ ଘ͞ΕͨjavascriptΛͦͷͰίϯύΠϧ͢Δػೳͭͬͨ͘Γ
- ChatBotͷγφϦΦ࡞Ͱ༗άϥϑͷཧɾෛͷॏΈ͖࠷ܦ࿏ΛௐΔ ͳΜ͔ΛͬͨΓ͠·ͨ͠ ͳ͔ͳ͔B2CͰܦݧ͢Δͷ͍͠༰͔ͳͱࢥ͍·͢
Ϗδωεͱ݁ ࡞ͬͨͷ͕ΫϥΠΞϯτʹධՁ͞Εͯɺ͞ΒʹͦΕʹରͯ͠ܖͱ͍ ͏͔ͨͪͰධՁΛΒ͑ΔͷͰB2CΑΓ͔ͳΓతʹධՁ͞Ε·͢ ݸਓతʹ࡞ͬͨͷ͕͍ͯ͘͢ɺۀ͕͔ͳΓվળ͞ΕͨΓɺ͓٬͞ Μͷച্্ʹؔΘΕΔͷ݁ߏ͖Ͱ͢
·ͱΊ
ੋඇɺ"*ࣄۀຊ෦ʂ ͜Μͳײ͡ͷࣄΛ͍ͯ͠ΔͷͰɺڵຯ͕͋Δਓੋඇʂ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠