Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webフロントエンドはなぜ複雑なのか
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
ozaki25
February 16, 2021
Technology
150
1
Share
Webフロントエンドはなぜ複雑なのか
ozaki25
February 16, 2021
More Decks by ozaki25
See All by ozaki25
20210526_a11y.pdf
ozaki25
0
200
20210525_react_next.pdf
ozaki25
0
160
utility first css
ozaki25
0
120
20201225_how_to_learn_technology.pdf
ozaki25
0
180
20201124_blitz.pdf
ozaki25
0
110
20200727_liff_app.pdf
ozaki25
1
670
20200721_web_vitals.pdf
ozaki25
0
120
20200624_web_otp_api.pdf
ozaki25
1
150
20200128_sentry.pdf
ozaki25
0
130
Other Decks in Technology
See All in Technology
毎日の作業を Claude Code 経由にしたら、 ノウハウがコードになった
kossykinto
0
770
Vision Banana: Image Generators are Generalist Vision Learners
kzykmyzw
0
210
需要創出(Chatwork)×供給(BPaaS) フライホイールとMoat 実行能力の最適配置とAI戦略
kubell_hr
0
2k
AIの揺らぎに“コシ”を与える階層化品質設計
ickx
0
230
拝啓、あの夏の僕へ〜あなたも知っているApp Runnerの世界〜
news_it_enj
0
210
Anthropic「Long-running a gents」をGeminiで再現してみた
tkikuchi
0
790
知ってた?JavaScriptの"正しさ"を検証するテストが5万以上もあること(Test262)
riyaamemiya
1
150
(きっとたぶん)人材育成や教育のような何かの話
sejima
0
620
「SaaSの次の時代」に重要性を増すステークホルダーマネジメントの要諦 ~解像度を圧倒的に高めPdMの価値を最大化させる方法~
kakehashi
PRO
3
3.8k
要件定義の精度を高めるための型と生成AIの活用 / Using Types and Generative AI to Improve the Accuracy of Requirements Definition
haru860
0
300
M5Stack CoreS3とZephyr(RTOS)で Edge AIっぽいことしてみた
iotengineer22
0
430
GitHub Copilot Dev Days
tomokusaba
0
150
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
304
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
133
19k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Embracing the Ebb and Flow
colly
88
5k
Mind Mapping
helmedeiros
PRO
1
180
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
220
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
290
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
730
Unsuck your backbone
ammeep
672
58k
Introduction to Domain-Driven Design and Collaborative software design
baasie
1
770
From π to Pie charts
rasagy
0
180
Transcript
8FCϑϩϯτΤϯυ ͳͥෳࡶͳͷ͔
͡Ίʹ w 8FCϑϩϯτΤϯυෳࡶʁ w ϥΠϒϥϦπʔϧ͕ཚཱͯ͠Α͘Θ͔ΒΜʂ w )5.-Λ࡞Δ͚ͩԿʹͳΜͰΊΜͲ͍͘͞ͷʁ
͡Ίʹ w 8FCϑϩϯτΤϯυෳࡶʁ w ϥΠϒϥϦπʔϧ͕ཚཱͯ͠Α͘Θ͔ΒΜʂ w )5.-Λ࡞Δ͚ͩԿʹͳΜͰΊΜͲ͍͘͞ͷʁ ˰͜ΕΒͷٙͷճͷҰ෦Λհ͠·͢
8FCϑϩϯτΤϯυෳࡶԽͷཁҼ
2ͳͥ8FCϑϩϯτΤϯυෳࡶ͔
"+BWB4DSJQU͕ॾѱͷࠜݯ
Ͱ+BWB4DSJQU͕ඞཁ͔ͩΒ ؤுΔ͔͠ͳ͍
+BWB4DSJQU͕ෆཁͳ໘Ͱ ෳࡶͰͳ͍8FCϑϩϯτΤϯυΛ ᨳՎ͢ΕΑ͍
41"ͱ.1"
41"ͱ.1" w .1"Ͱͳ͍ͳΒෳࡶͰͳ͍8FCϑϩϯτΤϯυͰ0, w 41"͕͍͍ͳΒؤுΔඞཁ͕͋Δ
.1"ͱʁ w αʔό͔Β৽͍͠ϖʔδΛऔಘͯ͠ϖʔδભҠ͢Δ w ᶃભҠઌͷ63-ʹΞΫηε w ᶄ63-ʹରԠ͢ΔϖʔδΛαʔόͰߏங w ᶅߏஙͨ͠ϖʔδΛΫϥΠΞϯτʹฦͯ͠දࣔ͢Δ
.1"ͱʁ w .1"ʹΑΔϖʔδભҠᶃ IPNF͕දࣔ͞Ε͍ͯΔ
.1"ͱʁ w .1"ʹΑΔϖʔδભҠᶄ ΫϦοΫ͢ΔͱIFMMPʹΞΫηε
.1"ͱʁ w .1"ʹΑΔϖʔδભҠᶅ ΫϦοΫ͢ΔͱIFMMPʹΞΫηε αʔό /hello
.1"ͱʁ w .1"ʹΑΔϖʔδભҠᶆ ΫϦοΫ͢ΔͱIFMMPʹΞΫηε αʔό /hello /helloͷHTMLΛߏங
.1"ͱʁ w .1"ʹΑΔϖʔδભҠᶇ αʔό /hello HTMLΛฦ٫ ΫϦοΫ͢ΔͱIFMMPʹΞΫηε
.1"ͱʁ w .1"ʹΑΔϖʔδભҠᶈ αʔό /hello HTMLΛฦ٫ IFMMP͕දࣔ͞ΕΔ
41"ͱʁ w +BWB4DSJQUΛͬͯϖʔδભҠ͢Δ8FCΞϓϦ w ᶃ+BWB4DSJQUͰ63-Λॻ͖͑Δ w ᶄ63-ͷมߋΛτϦΨʔʹ+BWB4DSJQUͰϖʔδΛॻ͖͑Δ
41"ͱʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶃ IFMMP͕දࣔ͞Ε͍ͯΔ
41"ͱʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶄ ΫϦοΫ͢Δͱ+BWB4DSJQUΛͬͯ 63-ΛIPNFʹॻ͖͑Δ
41"ͱʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶅ 63-͕IPNFʹมΘΔ
41"ͱʁ w +BWB4DSJQUʹΑΔϖʔδભҠͷ͔ͨ͠ᶆ 63-ͷมߋΛݕͯ͠ϖʔδΛॻ͖͑ ඞཁʹԠͯ͡αʔό͔ΒσʔλΛऔಘͨ͠Γ͢Δ
41"ͱ.1"ͷಛ w 41" w +BWB4DSJQUͰϖʔδΛॻ͖ ͑ΔͷͰભҠ͕ߴ w +BWB4DSJQUΛ͍·͘Δ w σʔλ"1*ΞΫηεͰऔಘ
w .1" w ϖʔδભҠͷʹ௨৴͕ඞཁ w +BWB4DSJQUඞਢͰͳ͍ w +BWB4DSJQUΛ͍͗͢Δͱϝ ϯς͕ਏ͘ͳΔ
41"Λ͍͍ͨ໘ w ᶃΫϥΠΞϯτͰෳࡶͳಈ͖Λ࣮ݱ͍ͨ͠໘ w ϖʔδભҠͷύϑΥʔϚϯεΛٻ͍ͨ͠ w +BWB4DSJQUΛͬͨಈతͳ6*Λ࣮ݱ͍ͨ͠ w ΫϥΠΞϯτͷίʔυϝϯςφϒϧʹ͍ͨ͠ w
ᶄαʔόαΠυ͕ܰྔͳ໘ w ֎෦"1*ͷΞΫηε'BB4ͰࣄΓΔ w αʔόαΠυͷܰྔͳͷͰ41"ͰΫϥΠΞϯτͷ࣮ʹूத͍ͨ͠
+BWB4DSJQUΛ͏ͱͳͥෳࡶʹͳΔͷ͔
ϒϥβ্Ͱಈ࡞͢Δͱ͍͏੍ w 8FCΞϓϦϒϥβ্Ͱಈ࡞͢Δ w ͭ·Γ+BWB4DSJQUϒϥβ্Ͱ࣮ߦ͞ΕΔ ϒϥβ αʔό +BWB4DSJQUͬͪ͜Ͱಈ͘
ϒϥβ্Ͱಈ࡞͢Δͱ͍͏੍ w ࣮ߦڥ͕ϒϥβͱ͍͏͜ͱ ΫϥΠΞϯτͷڥʹΑ࣮ͬͯߦڥ͕ҟͳΔͱ͍͏͜ͱ
ϒϥβ্Ͱಈ࡞͢Δͱ͍͏੍ w +BWB4DSJQUͷόʔδϣϯ w ϒϥβʹΑͬͯαϙʔτ͍ͯ͠Δόʔδϣϯ͕ҟͳΔ w ͔ͱ͍ͬͯݹ͍ํʹ߹ΘͤΔͷφϯηϯε w ಉ࣌ଓͷ੍ݶ w
ϒϥβ͔Βಉ࣌ʹ௨৴Ͱ͖Δ͕ܾ·ͬͯΔʢ͍͍ͨͯຊʣ w ͳͷͰେྔͷϑΝΠϧΛಡΈࠐΉ͜ͱආ͚͍ͨ
ϒϥβ্Ͱಈ࡞͢Δͱ͍͏੍ w +BWB4DSJQUͷόʔδϣϯ w ϒϥβʹΑͬͯαϙʔτ͍ͯ͠Δόʔδϣϯ͕ҟͳΔ w ͔ͱ͍ͬͯݹ͍ํʹ߹ΘͤΔͷφϯηϯε ˰࠷৽ͷه๏Ͱॻ͍ͯݹ͍όʔδϣϯʹτϥϯεύΠϧ͢Ε͍͍ w ಉ࣌ଓͷ੍ݶ
w ϒϥβ͔Βಉ࣌ʹ௨৴Ͱ͖Δ͕ܾ·ͬͯΔʢ͍͍ͨͯຊʣ w ͳͷͰେྔͷϑΝΠϧΛಡΈࠐΉ͜ͱආ͚͍ͨ ˰ͭͷϑΝΠϧʹόϯυϧ͢Ε͍͍
ࢀߟ +BWB4DSJQUͷ༷ w +BWB4DSJQUͷ༷&$."4DSJQUͰఆΊΒΕ͍ͯΔ w &$."4DSJQUόʔδϣϯ·Ͱ࿈൪Ͱ͔Βຖ 761͍ͯ͠ΔͷͰྐྵ͕όʔδϣϯͱ͚ͯͭ͠ΒΕΔ w &$."4DSJQU&4ͱུ͞Εόʔδϣϯͱ߹ΘͤͯҎԼͷΑ͏ʹ ݺΕΔ
w FY&4 &4 &4
όʔδϣϯͷτϥϯεύΠϧ w ಈ࡞ڥʹԠͯ͡ݹ͍όʔδϣϯʹτϥϯεύΠϧ͍ͨ͠ χʔζ͕͋Δ w #BCFMΛ͏͜ͱͰ࣮ݱͰ͖Δ #BCFMΛͬͯ τϥϯεύΠϧ
+BWB4DSJQUϑΝΠϧͷόϯυϧ w ϞδϡʔϧόϯυϥʔͱݺΕΔπʔϧΛ͏͜ͱͰ +BWB4DSJQUͷґଘؔΛղܾͯͭ͠ͷϑΝΠϧʹ ·ͱΊΔ͜ͱ͕Ͱ͖Δ ผϑΝΠϧʹґଘ ֎෦ϥΠϒϥϦʹґଘ CVOEMFKT ͭͷϑΝΠϧʹ·ͱ·ͬ
ͨͷ͕ੜ͞ΕΔ ϞδϡʔϧόϯυϥʔΛ௨͢
+BWB4DSJQUϑΝΠϧͷόϯυϧ w ϞδϡʔϧόϯυϥʔͷॲཧͷதͰ#BCFMΛ࣮ߦ͢Δέʔεଟ͍ YYYKT YYYKT YYYKT CVOEMFKT #BCFMͰ چόʔδϣϯʹ
τϥϯεύΠϧ ґଘؔͷղܾ ϞδϡʔϧόϯυϥʔΛ௨͢
+BWB4DSJQUϑΝΠϧͷόϯυϧ w ϞδϡʔϧόϯυϥʔͷॲཧͷதͰ#BCFMΛ࣮ߦ͢Δέʔεଟ͍ YYYKT YYYKT YYYKT CVOEMFKT #BCFMͰ چόʔδϣϯʹ
τϥϯεύΠϧ ґଘؔͷղܾ ϞδϡʔϧόϯυϥʔΛ௨͢ ଞʹ͍Ζ͍ΖͳॲཧΛ ϞδϡʔϧόϯυϥʔͰ࣮ߦͰ͖Δ
͜͜·Ͱͷ͓͞Β͍
͜͜·Ͱͷ͓͞Β͍ w 8FCϑϩϯτΤϯυͷෳࡶ͞ͷࠜݯ+BWB4DSJQU w 41"Λ࠾༻͍ͨ͠߹͜ͷෳࡶ͔͞ΒಀΕΒΕͳ͍ w ϒϥβͰಈ࡞͢Δͱ͍͏ੑ্࣭ҎԼͷߟྀ͕ඞཁ w ݹ͍όʔδϣϯͰಈ࡞͢ΔΑ͏ʹ͍ͨ͠ w
ͭͷϑΝΠϧʹόϯυϧ͍ͨ͠ w Ϟδϡʔϧόϯυϥʔͱ#BCFMΛ͏ͱղܾͰ͖Δ
͜ΕҎ֎ʹ՝͕͍Ζ͍Ζ͋Δ
ͦΕΒΛղܾ͢ΔͨΊʹ ͍Ζ͍Ζग़ͯ͘Δ
5ZQF4DSJQUΛ͍͍ͨ
5ZQF4DSJQUͱ w +BWB4DSJQUͷ֦ுݴޠ w ͬͬ͘͟Γݴ͏ͱ੩తͳܕఆ͕ٛՃ͞Εͨ+BWB4DSJQU w ͦͷ··Ͱಈ͔ͳ͍ͷͰ+BWB4DSJQUʹτϥϯεύΠͯ͠͏ +BWB4DSJQU 5ZQF4DSJQU
5ZQF4DSJQUͷτϥϯεύΠϧ w 5ZQF4DSJQUΛ+BWB4DSJQUʹτϥϯεύΠϧ͢ΔॲཧϏϧυͷྲྀ ΕʹΈࠐΉ͜ͱʹͳΔ w τϥϯεύΠϧʹUTD UTMPBEFS #BCFMͷ͍ͣΕ͔Λ͏ YYYKT
YYYKT YYYUT CVOEMFKT #BCFMͰ چόʔδϣϯʹ τϥϯεύΠϧ ґଘؔͷղܾ ϞδϡʔϧόϯυϥʔΛ௨͢ 5ZQF4DSJQUΛ +BWB4DSJQUʹ τϥϯεύΠϧ
$PEF4QMJUUJOH͍ͨ͠
$PEF4QMJUUJOHͱ w શͯͷϑΝΠϧΛͭʹόϯυϧ͢ΔͱϑΝΠϧαΠζ͕࣍ୈʹ େ͖͘ͳͬͯ͘Δ w ϑΝΠϧαΠζ͕େ͖͍ͱಡΈࠐΈʹ͕͔͔࣌ؒͬͯදࣔ ͕Լͯ͠͠·͏
$PEF4QMJUUJOHͱ w શͯͷϑΝΠϧΛͭʹόϯυϧ͢ΔͱϑΝΠϧαΠζ͕࣍ୈʹ େ͖͘ͳͬͯ͘Δ w ϑΝΠϧαΠζ͕େ͖͍ͱಡΈࠐΈʹ͕͔͔࣌ؒͬͯදࣔ ͕Լͯ͠͠·͏ ˰ϑΝΠϧΛ͚ͯඞཁͳͷ͚ͩऔಘ͢ΔΑ͏ʹ͠Α͏
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IPNF IFMMP BCPVU શ෦Ͱϖʔδ͋Δͱ͢Δ
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IPNF IFMMP BCPVU +BWB4DSJQUΛׂͯ͠ੜ BCPVUKT IFMMPKT
IPNFKT NBJOKT
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IPNF IFMMP BCPVU શϖʔδڞ௨ͰΘΕΔίʔυ BCPVUKT IFMMPKT
IPNFKT NBJOKT
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IPNF IFMMP BCPVU ֤ϖʔδڞ͚ͩͰΘΕΔίʔυ BCPVUKT IFMMPKT
IPNFKT NBJOKT ֤ϖʔδڞ͚ͩͰΘΕΔίʔυ ֤ϖʔδڞ͚ͩͰΘΕΔίʔυ
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IPNF IPNFʹΞΫηε
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IPNF ඞཁͳϑΝΠϧ͚ͩऔಘ IPNFKT NBJOKT
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IPNF IPNFΛදࣔ IPNFKT NBJOKT
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IFMMP IFMMPʹΞΫηε IPNFKT NBJOKT
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IFMMP IPNFKT NBJOKT ՃͰඞཁͳ ϑΝΠϧ͚ͩऔಘ IFMMPKT
$PEF4QMJUUJOHͷΈ w ϖʔδ୯ҐͰׂ͢Δέʔε͕ଟ͍ IFMMP IPNFKT NBJOKT IFMMPΛදࣔ IFMMPKT
$PEF4QMJUUJOHͷ࣮ݱ w Ϟδϡʔϧόϯυϥʔͷػೳͱͯ͠$PEF4QMJUUJOHΛ࣮ݱͰ͖Δ YYYKT YYYKT YYYKT CVOEMFKT #BCFMͰ چόʔδϣϯʹ
τϥϯεύΠϧ ґଘؔͷղܾ ϞδϡʔϧόϯυϥʔΛ௨͢ $PEF4QMJUUJOH ͢Δ
·ͱΊ
·ͱΊ w +BWB4DSJQU༷ʑͳࣄ͔ΒίʔυʹखΛՃ͑Δχʔζ͕͋Δ w ͦͷͨΊʹ͍Ζ͍ΖͳπʔϧΛͬͯෳࡶʹͳ͍ͬͯΔ w ࠓճհ͍ͯ͠ͳ͍ࣄ·ͩͨ͘͞Μ͋ΔͷͰͱͯෳࡶ w ྫ͑։ൃதϗοτϦϩʔυ͍ͨ͠ͱ͔
͜ΕΒΛશ෦ཧղ͠ͳ͍ͱ 8FCϑϩϯτΤϯυͷ։ൃͰ͖ͳ͍ͷʁ
ͦΜͳ͜ͱͳ͍ʂ
εςοϓΞοϓͷ͔ͨ͠ w ηοτΞοϓࡁΈͷڥΛߏஙͰ͖ΔHFOFSBUPS͕ॆ࣮ͯ͠Δ w 3FBDUͳΒ$SFBUF3FBDU"QQɺ7VFͳΒ7VF$-*ͳͲͳͲ w ॳ৺ऀͷ͏ͪͦΕΒʹཔͬͯ։ൃΛਐΊΕ0, w HFOFSBUPSͷઃఆΛม͑ΔඞཁੑΛײ͖ͯͨ͡Β ͲΜͳ͜ͱΛ͍ͬͯΔͷֶ͔ͼ࢝ΊΕΑ͍
͋Γ͕ͱ͏͍͟͝·ͨ͠