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.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
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
12
6.2k
Deep Dive into React Stream/Serialize
mugi_uno
8
2k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
41
22k
コロナ禍 Frontend おさらい
mugi_uno
1
420
Toyama.rb
mugi_uno
1
110
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.7k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.5k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.5k
マルチカーソルのLT
mugi_uno
0
260
Other Decks in Programming
See All in Programming
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
340
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
110
Grafana Cloudとソラカメ
devoc
0
140
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
チームリードになって変わったこと
isaka1022
0
180
ペアーズでの、Langfuseを中心とした評価ドリブンなリリースサイクルのご紹介
fukubaka0825
2
300
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
技術を根付かせる / How to make technology take root
kubode
1
240
SpringBoot3.4の構造化ログ #kanjava
irof
2
950
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
520
富山発の個人開発サービスで日本中の学校の業務を改善した話
krpk1900
4
370
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
The Language of Interfaces
destraynor
156
24k
Writing Fast Ruby
sferik
628
61k
Embracing the Ebb and Flow
colly
84
4.6k
What's in a price? How to price your products and services
michaelherold
244
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
How to Ace a Technical Interview
jacobian
276
23k
We Have a Design System, Now What?
morganepeng
51
7.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
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