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
3k
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
Deep Dive into React Stream/Serialize
mugi_uno
5
1.6k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
41
21k
コロナ禍 Frontend おさらい
mugi_uno
1
410
Toyama.rb
mugi_uno
1
93
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.7k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.5k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.4k
マルチカーソルのLT
mugi_uno
0
240
消費税軽減税率制度
mugi_uno
7
7k
Other Decks in Programming
See All in Programming
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
110
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
880
Outline View in SwiftUI
1024jp
1
320
ヤプリ新卒SREの オンボーディング
masaki12
0
130
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
Amazon Qを使ってIaCを触ろう!
maruto
0
400
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
10
1.3k
CSC509 Lecture 12
javiergs
PRO
0
160
CSC509 Lecture 09
javiergs
PRO
0
140
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
250
Featured
See All Featured
KATA
mclloyd
29
14k
Building Your Own Lightsaber
phodgson
103
6.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Automating Front-end Workflow
addyosmani
1366
200k
Being A Developer After 40
akosma
86
590k
The Cost Of JavaScript in 2023
addyosmani
45
6.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Adopting Sorbet at Scale
ufuk
73
9.1k
How GitHub (no longer) Works
holman
310
140k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
Facilitating Awesome Meetings
lara
50
6.1k
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