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
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
210
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
680
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
「気づいたら仕事が終わっている」バクラクAIエージェント本番運用の裏側 / layerx-bakuraku-aie2026
yuya4
18
10k
関西に縁あるMicrosoft MVPsが語るCopilotの未来
kasada
0
1.1k
Mastering Ruby Box
tagomoris
3
150
Oracle AI Database@Azure:サービス概要のご紹介
oracle4engineer
PRO
6
1.9k
価格.comをAI駆動で全面刷新する ー 30年分の技術的負債を返し、次の30年の土台をつくる ー / AI Engineering Summit Tokyo 2026
tkyowa
47
52k
TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する
shuta13
0
360
製造業のクラウド活用最適解〜AI,DXを加速するデータ基盤の作り方〜
hamadakoji
0
370
新アーキテクチャ「TiDB X」解説とDedicated比較 TiDB Cloud Premiumのゲーム運用活用を検証
staffrecruiter
0
110
LLMを「主役」にしないための 3つの原則
techtekt
PRO
0
110
AI活用を推進するために ファインディが下した、一つの小さな決断
starfish719
0
240
AI Testing Talks: Challenges of Applying AI in Software Testing: From Hype to Practical Use
exactpro
PRO
1
130
PHP と TypeScript の型システム比較:AI 時代の「型」は誰のためにあるのか? #frontend_phpcon_do / frontend_phpcon_do_2026
shogogg
1
250
Featured
See All Featured
WCS-LA-2024
lcolladotor
0
620
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
160
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
390
Test your architecture with Archunit
thirion
1
2.3k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
390
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
320
Chasing Engaging Ingredients in Design
codingconduct
0
210
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
marcoroth
1
150
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.5k
Done Done
chrislema
186
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
28
3.5k
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
380
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ͷઃఆΛม͑ΔඞཁੑΛײ͖ͯͨ͡Β ͲΜͳ͜ͱΛ͍ͬͯΔͷֶ͔ͼ࢝ΊΕΑ͍
͋Γ͕ͱ͏͍͟͝·ͨ͠