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
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
Sony_KMP_Journey_KotlinConf2026
sony
2
210
TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する
shuta13
0
360
もりもり新機能を一挙紹介! AgentCoreに入門して、AWS上にAIエージェントを構築しよう
minorun365
PRO
6
780
チームで実践する AI-DLC 思考の軌跡を残すチェックポイント設計
belongadmin
0
2.6k
サプライチェーンセキュリティの空白地帯 - 信頼できる”依存性”の未来を考える
rung
PRO
2
680
Claude Code×Terraform IaC テンプレート駆動開発
itouhi
0
240
データ基盤をDataformで整えた話 〜 開発環境を添えて 〜
takapy
0
110
新アーキテクチャ「TiDB X」解説とDedicated比較 TiDB Cloud Premiumのゲーム運用活用を検証
staffrecruiter
0
110
DevOps Agentで始めるAWS運用 〜フロンティアエージェントが変える運用の現場〜
nyankotaro
1
210
生成 AI × MCP で切り拓く次世代 SRE!自律型運用への挑戦と開発者体験の進化
_awache
0
150
正解のないAIプロダクトをどう導くか?dodaが挑む、ユーザーの『本音』を構造化する評価設計と検証のリアル
techtekt
PRO
0
180
Databricks における 生成AIガバナンスの実践
taka_aki
1
310
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
380
Fashionably flexible responsive web design (full day workshop)
malarkey
408
66k
30 Presentation Tips
portentint
PRO
1
320
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
130
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.3k
BBQ
matthewcrist
89
10k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
770
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
auna
0
150
Code Review Best Practice
trishagee
74
20k
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
400
Amusing Abliteration
ianozsvald
1
200
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ͷઃఆΛม͑ΔඞཁੑΛײ͖ͯͨ͡Β ͲΜͳ͜ͱΛ͍ͬͯΔͷֶ͔ͼ࢝ΊΕΑ͍
͋Γ͕ͱ͏͍͟͝·ͨ͠