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
mugi / Hajime Mugishima
August 24, 2024
Programming
3
3.9k
New Order in Cascade Sorting Order
2024/8/24(土) フロントエンドカンファレンス北海道
mugi / Hajime Mugishima
August 24, 2024
Tweet
Share
More Decks by mugi / Hajime Mugishima
See All by mugi / Hajime Mugishima
サイボウズフロントエンドの横断活動から考える AI時代にできること
mugi_uno
4
1.8k
令和7年版 あなたが使ってよいフロントエンド機能とは
mugi_uno
14
7k
Deep Dive into React Stream/Serialize
mugi_uno
8
2.2k
Next.js App Router での MPA フロントエンド刷新
mugi_uno
40
25k
コロナ禍 Frontend おさらい
mugi_uno
1
460
Toyama.rb
mugi_uno
1
160
kintoneフロントエンド刷新 〜新規参加5ヶ月から見るリアル〜
mugi_uno
3
1.8k
Javaを富山でやってたはずがSwiftのためにMacBook買ったらRubyでリモートワーカーになってJSの本を出版するまでを思い返す
mugi_uno
7
2.6k
脱レガシーフロントエンドのために知っておいたほうがいいこと
mugi_uno
20
7.6k
Other Decks in Programming
See All in Programming
AI 時代だからこそ抑えたい「価値のある」PHP ユニットテストを書く技術 #phpconfuk / phpcon-fukuoka-2025
shogogg
1
410
ボトムアップの生成AI活用を推進する社内AIエージェント開発
aku11i
0
1.6k
Blazing Fast UI Development with Compose Hot Reload (droidcon London 2025)
zsmb
0
500
Honoを技術選定したAI要件定義プラットフォームAcsimでの意思決定
codenote
0
140
乱雑なコードの整理から学ぶ設計の初歩
masuda220
PRO
28
8.4k
ビルドプロセスをデバッグしよう!
yt8492
0
290
Dive into Triton Internals
appleparan
0
480
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
kotaro7750
0
240
自動テストのアーキテクチャとその理由ー大規模ゲーム開発の場合ー
segadevtech
2
950
Introducing RemoteCompose: break your UI out of the app sandbox.
camaelon
2
540
レイトレZ世代に捧ぐ、今からレイトレを始めるための小径
ichi_raven
0
200
チーム開発の “地ならし"
konifar
5
3.2k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Scaling GitHub
holman
463
140k
How to Ace a Technical Interview
jacobian
280
24k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Practical Orchestrator
shlominoach
190
11k
Visualization
eitanlees
150
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Done Done
chrislema
186
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
Facilitating Awesome Meetings
lara
57
6.6k
What's in a price? How to price your products and services
michaelherold
246
12k
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