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
New Order in Cascade Sorting Order
Search
Hajime Mugishima
August 24, 2024
Programming
3
3.7k
New Order in Cascade Sorting Order
2024/8/24(土) フロントエンドカンファレンス北海道
Hajime Mugishima
August 24, 2024
Tweet
Share
More Decks by Hajime Mugishima
See All by Hajime Mugishima
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
13
6.9k
Deep Dive into React Stream/Serialize
mugi_uno
8
2.1k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
41
24k
コロナ禍 Frontend おさらい
mugi_uno
1
460
Toyama.rb
mugi_uno
1
140
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.8k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.6k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.6k
マルチカーソルのLT
mugi_uno
0
300
Other Decks in Programming
See All in Programming
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
1.2k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
階層化自動テストで開発に機動力を
ickx
1
400
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
20250708_JAWS_opscdk
takuyay0ne
2
140
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
0
320
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
940
生成AI時代のコンポーネントライブラリの作り方
touyou
1
300
Workers を定期実行する方法は一つじゃない
rokuosan
0
120
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
660
型で語るカタ
irof
0
770
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.9k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How GitHub (no longer) Works
holman
314
140k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
What's in a price? How to price your products and services
michaelherold
246
12k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
The Pragmatic Product Professional
lauravandoore
35
6.8k
The Language of Interfaces
destraynor
158
25k
Transcript
/FX0SEFSJO$BTDBEF4PSUJOH0SEFS ϑϩϯτΤϯυΧϯϑΝϨϯεւಓ )BKJNF.VHJTIJNB$ZCP[V*OD
!NVHJ@VOP )BKJNF.VHJTIJNB $ZCP[V*OD 'SPOUFOE&YQFSU5FBN
$BTDBEF4PSUJOH0SEFSͱ
$BTDBEF4PSUJOH0SEFS w $BTDBEFʹؔ͢Δ༷ɺ $44$BTDBEJOHBOE*OIFSJUBODFʹఆٛ͞Ε͍ͯΔ ݱࡏͷקࠂ-FWFM IUUQTXXXXPSH53DTTDBTDBEF w ͦͷதͰɺద༻͞ΕΔ༏ઌॱҐʹؔ͢Δ༷͕ $BTDBEF4PSUJOH0SEFSͱͯ͠ఆٛ͞Ε͍ͯΔ
͜Μͳײ͡ͷཧղͰʁͱ͍͏Πϝʔδ
ৄࡉ w $44ηϨΫλৄࡉͰ༏ઌॱҐ͕ܾ·Δ w ηϨΫλ*%ˠΫϥεˠཁૉͷॱʹ༏ઌ͞ΕΔ w ৄࡉ͕ಉ͡߹ɺ࠷ޙʹએݴ͞Εͨͷ͕উͭ
TUZMFଐੑ w TUZMFଐੑͰཁૉʹελΠϧΛࢦఆͰ͖Δ w ৄࡉͰͷελΠϧΑΓ༏ઌ͞ΕΔ
JNQPSUBOU w JNQPSUBOUΛ͑ࡉ͔͍͜ͱແࢹͯ͠࠷ڧʹͳΕΔ w ୭͕͠Ͳ͔͜Ͱʮؾܰʹ͏ͳʯͱݴΘΕͨΑ͏ͳؾ͕͢Δ
͜͜·ͰͬͯΔʂ
༷Λ۷ΓԼ͛Δͱ Βͳ͍෦͕͋ͬͨΓ͢Δ
͞Βʹɺ$BTDBEF4PSUJOH0SEFSʹ ؔ࿈͢Δ༷૿͍͑ͯΔ
ͨͱ͑ʜ w JNQPSUBOUͰ্ॻ͖Ͱ͖ͳ͍ελΠϧଘࡏ͢Δʁ w $BTDBEF-BZFSTͱ4DPQFE4UZMFͲͪΒ͕༏ઌ͞ΕΔʁ w 4UZMFଐੑͱ$BTDBEF-BZFSTɺͲͪΒ͕༏ઌ͞ΕΔʁ w $BTDBEF-BZFSTͷԼҐϨΠϠͰJNQPSUBOUΛ͏ͱͲ͏ͳΔʁ w
ৄࡉ͕ಉ͡߹ɺ4DPQFE4UZMFͲ͏ద༻͞ΕΔʁ
$BTDBEF4PSUJOH0SEFSΛ࠶ֶश͠Α͏ʂ
ैདྷͷ$BTDBEF4PSUJOH0SEFSͷ͓͞Β͍
$BTDBEF4PSUJOH0SEFS $44$BTDBEJOHBOE*OIFSJUBODF-FWFM 0SJHJOBOE*NQPSUBODF $POUFYU 4QFDJ fi DJUZ
0SEFSPG"QQFBSBODF
0SJHJOBOE*NQPSUBODF w 0SJHJOˠ$44ͷىݯఆٛݩ w 6TFS"HFOUϒϥβ͕࣋ͭ$44 w 6TFSϢʔβʔελΠϧγʔτ ˢΑΓ༏ઌʣ w "VUIPSϖʔδఏڙͷ$44
ˢΑΓ༏ઌʣ w *NQPSUBODFˠJNQPSUBOU༩ͷ༗ແ w JNQPSUBOU͕ڧ͍ͷɺ0SJHJOBOE*NQPSUBODF͕ $BTDBEF4PSUJOH0SEFSͷઌ಄ʹଘࡏ͍ͯ͠ΔͨΊ
0SJHJOBOE*NQPSUBODF w JNQPSUBOU0SJHJOʹӨڹΛड͚Δ w *NQPSUBOU6TFS"HFOUϒϥβ͕࣋ͭ$44ʢˣΑΓ༏ઌʣ w *NQPSUBOU6TFSϢʔβʔελΠϧγʔτʢˣΑΓ༏ઌʣ w *NQPSUBOU"VUIPSϖʔδఏڙͷ$44 w
࣮ɺϒϥβ͕࣋ͭJNQPSUBOU༩ͷελΠϧ্ॻ͖Ͱ͖ͳ͍
$POUFYU w 4IBEPX%0.ͷએݴৄࡉΑΓ༏ઌ͞ΕΔ
$POUFYU w IPTU ٖࣅΫϥεͰ෦͔Β4IBEPX)PTUελΠϧʹׯবͰ͖Δ ˠ௨ৗ֎෦Ͱͷએݴ͕༏ઌ͞ΕΔ ௨ৗˠ֎෦ελΠϧ͕༏ઌ
$POUFYU w IPTU ͱJNQPSUBOUΛΈ߹ΘͤΔͱ༏ઌॱҐ͕ٯస ˠ4IBEPX%0.֎෦͔Β্ॻ͖ෆՄʹͳΔ JNQPSUBOUʹΑΓٯస͢Δ
4QFDJGJDJUZ w $44ৄࡉ ৄࡉࣗମͷઆ໌ׂѪ͠·͢ʣ w -FWFMͷ߹ɺTUZMFBUUSJCVUFʹ͍ͭͯ͜͜Ͱݴٴ͞Ε͍ͯΔ IUUQTXXXXPSH53DTTDBTDBEFDBTDBEFTQFDJ fi DJUZ %FFQ-༁
͜ͷεςοϓͰɺελΠϧɾϧʔϧʹଐ͞ͳ͍એݴʢελΠϧଐੑͷ༰ͳͲʣɺ ͲͷηϨΫλΑΓߴ͍ಛҟੑΛ࣋ͭͱݟͳ͞Ε·͢ɻ
4QFDJGJDJUZ w ༨ஊXIFSF ٖࣅΫϥε w ࢦఆ͞ΕͨηϨΫλͷৄࡉڧ੍తʹʹͳΔ w ༏ઌॱҐͷ੍ޚʹ͓͍ͯॏཁͳͷͰ͓͑ͯ͘ͱྑ͍ ৄࡉ
0SEFSPG"QQFBSBODF w ͜͜·Ͱͷͯ͢Ͱ֬ఆ͠ͳ͔ͬͨ߹ɺ ࠷ޙʹએݴ͞Εͨͷ͕উͭ
$44$BTDBEJOHBOE*OIFSJUBODF -FWFMˠ-FWFM ˞&EJUPST%SBGU
0SJHJOBOE*NQPSUBODF $POUFYU 5IF4UZMF"UUSJCVUF -BZFST 4QFDJ
fi DJUZ 4DPQF1SPYJNJUZ 0SEFSPG"QQFBSBODF $BTDBEF4PSUJOH0SEFS $44$BTDBEJOHBOE*OIFSJUBODF-FWFM
-BZFST5IF4UZMF"UUSJCVUF
$BTDBEF-BZFST!MBZFS w 0SJHJO͓Αͼ$POUFYUͷதͰϨΠϠʔ ֊ Λ࡞ΕΔ w ΑΓޙͰએݴ͞ΕͨϨΠϠʔͷελΠϧ͕༏ઌ͞ΕΔ w Ϟμϯϒϥβͷ࠷৽҆ఆ൛Ͱ͋Εར༻Մೳ #BTFMJOF
҉ͷ-BZFS w ໌ࣔతʹ-BZFSʹؚΊ͍ͯͳ͍ελΠϧ ैདྷͷελΠϧ ɺ҉తʹଘࡏ͢Δ࠷ऴϨΠϠʔʹՃ͞ΕΔ w -BZFSΛར༻͍ͯ͠ͳ͍ελΠϧɺར༻͍ͯ͠ΔελΠϧΑΓڧ͍
4UZMF"UUSJCVUFͱ$BTDBEF-BZFST w TUZMFଐੑʹΑΔࢦఆϨΠϠʔͷελΠϧΑΓ༏ઌ͞ΕΔ w $BTDBEF4PSUJOH0SEFS্ͰTUZMFଐੑ 5IF4UZMF"UUSJCVUFͱͯ͠ѻΘΕΔΑ͏ʹͳΓɺ 4UZMF"UUSJCVUFˠ$BTDBEF-BZFSTˠ4QFDJ fi DJUZͷॱং͕໌֬ʹ
$BTDBEF-BZFSTͱJNQPSUBOU w JNQPSUBOU·͓ͨલ͔ w JNQPSUBOU͕༩͞Ε͍ͯΔએݴ-BZFSͷ༏ઌ͕ٯస͢Δ ઌʹએݴ͞Εͨ -BZFSͷελΠϧ͕༏ઌ
$BTDBEF-BZFSTͱJNQPSUBOU w JNQPSUBOU·͓ͨલ͔ w JNQPSUBOU͕༩͞Ε͍ͯΔએݴ-BZFSͷ༏ઌ͕ٯస͢Δ ςετදࣔ༻λΠτϧ ҉ϨΠϠʔͳͷͰ উͯͳ͘ͳͬͪΌͬͨʜ
0SJHJOBOE*NQPSUBODF $POUFYU 5IF4UZMF"UUSJCVUF -BZFST 4QFDJ
fi DJUZ 4DPQF1SPYJNJUZ 0SEFSPG"QQFBSBODF TUZMFଐੑ JNQPSUBOU એݴ͕ઌͷϨΠϠʔ JNQPSUBOU એݴ͕ޙͷϨΠϠʔ JNQPSUBOU ҉ϨΠϠʔ JNQPSUBOU TUZMFଐੑ ҉ϨΠϠʔ એݴ͕ޙͷϨΠϠʔ એݴ͕ઌͷϨΠϠʔ $BTDBEF4PSUJOH0SEFS۷ΓԼ͛ͨΠϝʔδ
4DPQF1SPYJNJUZ
4DPQFE4UZMF!TDPQF w !TDPQFͰ4DPQFE4UZMFείʔϓ͖ελΠϧΛએݴͰ͖Δ w %0.πϦʔͷҰ෦ൣғʹݶఆͯ͠ελΠϧΛద༻͢Δ w ࣌Ͱ'JSFGPYҎ֎ͷ ࠷৽ϝδϟʔϒϥβͷ࠷৽όʔδϣϯͰར༻Մೳ QBSFOUԼͷΈ ελΠϧ͕༗ޮ
4DPQF1SPYJNJUZ!TDPQFͷۙੑ w ෳͷείʔϓ͕িಥͨ͠߹ɺ ΑΓείʔϓϧʔτʹ͍ۙελΠϧ͕༏ઌ͞ΕΔ w %0.πϦʔ্ͷϗοϓʢωετʣͰۙੑΛผ͢Δ
4DPQF1SPYJNJUZ!TDPQFͷۙੑ ϗοϓ ϗοϓ
4DPQF1SPYJNJUZ!TDPQFͷۙੑ ϗοϓ
ैདྷͷελΠϧͷ4DPQF1SPYJNJUZ w !TDPQFΛΘͣείʔϓϧʔτΛ࣋ͨͳ͍એݴͷ߹ɺ ۙੑΛஅ͢ΔͨΊͷϗοϓʿͱΈͳ͞ΕΔ w ͭ·Γɺඞͣ!TDPQFΛ͏ελΠϧ͕༏ઌ͞ΕΔʜʁ ϗοϓʿ ? ϗοϓ
0SJHJOBOE*NQPSUBODF $POUFYU 5IF4UZMF"UUSJCVUF -BZFST 4QFDJ
fi DJUZ 4DPQF1SPYJNJUZ 0SEFSPG"QQFBSBODF $BTDBEF4PSUJOH0SEFS $44$BTDBEJOHBOE*OIFSJUBODF-FWFM ༏ઌॱҐ ৄࡉˠείʔϓ
είʔϓͱৄࡉ w $BTDBEF4PSUJOH0SEFSʹ͓͚Δ είʔϓͷڧ͞ʹ͍ͭͯΒٞ͘͞Ε͍ͯͨ <DTTDBTDBEF>4USPOHWTXFBLTDPQJOHQSPYJNJUZ IUUQTHJUIVCDPNXDDTTXHESBGUTJTTVFT w ࠷ऴతʹɺείʔϓৄࡉΑΓऑ͍ʢXFBLTDPQJOHʣͰ߹ҙ͞Εͨ w
ৄࡉ͕ಉ͡߹ͷΈείʔϓΛ༻͍ͨൺֱ͕ߦΘΕΔ
είʔϓ͕ৄࡉΑΓڧ͍ͱԿ͕ʁ w طଘͷಈ࡞ͱͷޓੑ w είʔϓΛΘͳ͍ΦʔόϥΠυશʹෆՄೳͱͳΔ w ৄࡉͷ๊͍͑ͯͨΦʔόϥΠυ࣌ͷ͕ѱԽ͔͠Ͷͳ͍ w ৄࡉͷ՝ͷҰͭɺڧ͍ࢦఆʹϩοΫ͞Εͯ͠·͏͜ͱ JEʹউͭʹJE͕ඞཁʹͳΔ
w είʔϓ͕ৄࡉΑΓ༏ઌ͞ΕΔ߹ɺείʔϓͰϩοΫ͞ΕΔ w ΦʔόϥΠυͷॊೈੑৄࡉΑΓ͍ %0.πϦʔ্Ͱ͍ۙࢦఆʹ͠ͳ͚Ε͍͚ͳ͍
0SJHJOBOE*NQPSUBODF $POUFYU 5IF4UZMF"UUSJCVUF -BZFST 4QFDJ
fi DJUZ 4DPQF1SPYJNJUZ 0SEFSPG"QQFBSBODF $BTDBEF4PSUJOH0SEFS $44$BTDBEJOHBOE*OIFSJUBODF-FWFM ΑΓڧ͍ৄࡉͷࢦఆ ʙҎԼɺৄࡉ͕ಉ͡߹ʙ ۙੑͷߴ͍είʔϓࢦఆ ۙੑͷ͍είʔϓࢦఆ είʔϓࢦఆͷͳ͍ελΠϧ
·ͱΊ
? 2 $ISPNJVNͰ ϓϨʔεϗϧμͷ MJOFIFJHIUͷʁ QY QY
QY QY ͓͞Β͍
!MBZFSͰͷJNQPSUBOUࢦఆ ˠ҉ϨΠϠʔΑΓ༏ઌ͞ΕΔ ? ͓͞Β͍
ৄࡉ͕ಉ͡ ˠείʔϓۙͰఆ͞ΕΔ ? ͓͞Β͍
? ϗοϓʿ ϗοϓ ໌ࣔతͳ!TDPQF͕ είʔϓͷۙੑͰ༏ઌ͞ΕΔ ˣ QY ͓͞Β͍
͔͠͠ݱ࣮ඇͰ͋Δ ϓϨʔεϗϧμͷMJOFIFJHIU $ISPNJVNͷ6TFS"HFOU4UZMFͰ JNQPSUBOUࢦఆ͕ೖ͍ͬͯΔ ˣ "VUIPS4UZMFͰઈର্ॻ͖Ͱ͖ͳ͍ ͨ͑͜OPSNBM ϒϥβґଘ ͓͞Β͍
·ͱΊ w $BTDBEF4PSUJOH0SEFSʹؔ࿈͢Δ༷૿͍͑ͯΔ w ར༻͠ͳͯ͘ɺϥΠϒϥϦܦ༝Ͱ͏͜ͱ͋ΓಘΔ FH1BOEB$44Ͱ$BTDBEF-BZFSΛར༻͍ͯ͠Δ w ࣍ੈͷ$44։ൃʹඋ͓͖͑ͯ·͠ΐ͏ʂ w
ͳ͓ɺҾ͖ଓ͖JNQPSUBOU҆қʹ͏ͱةݥͰ͢
None