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
javascriptのデータ構造について
Search
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Programming
0
150
javascriptのデータ構造について
javascriptのデータ構造の特徴とパフォーマンスについて
Taketoshi Aono(青野健利 a.k.a brn)
June 07, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
3k
Parsing Javascript
brn
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
280
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
120
技術を改善し続ける
gumioji
0
100
『GO』アプリ データ基盤のログ収集システムコスト削減
mot_techtalk
0
130
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
890
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
190
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
140
Pulsar2 を雰囲気で使ってみよう
anoken
0
250
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
140
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
410
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Raft: Consensus for Rubyists
vanstee
137
6.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Transcript
j ja av va as sc cr ri ip pt
t D Da at ta a S St tr ru uc ct tu ur re es s
せ: @brn (ꫬꅿ⨳ⵃa.k.a ـٕ٦ظ) 耵噟: ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، ⠓爡: Cyberagent ،سذؙأةآؔRightSegment٥AI Messenger
ـؚٗ: http://abcdef.gets.b6n.ch/ Twitter: https://twitter.com/brn227 GitHub: https://github.com/brn
Why? ،ٕ؞ٔؤيכ㢳ֻך㜥さر٦ة圓鸡ח״ג寸㹀ׁתׅկ תػؿؓ٦وٝأךنزٕطحؙחזך ر٦ة圓鸡ך㜥さָ㢳ְדׅկ זךדծjavascriptךر٦ة圓鸡ך • 暴䗙 • ػؿؓ٦وٝأ •
⢪ְ䨽 ֶ鑧דֹלה䙼ְתׅկ
הִ֮׆鋙ִֿה • 㘗ָずׄ㜥さדꂁד葺ְ㜥さ => Array • 㘗ָ麩ֻגꂁָ葺ְ㜥さ => Object •
せד،ؙإأ׃ְ㜥さ => Object • Set⢪ְְ㜥さ => Object • Objectؗ٦ח׃Map٥Setָק׃ְ㜥さ => Map٥Set • Iterator⢪ְְ㜥さ => Object.keys • 暴㹀ךObjectַ׃ַ،ؙإأׇֻׁזְ㜥さ => WeakMap • Objectך㼐ㄏהず劍׃ְ㜥さ => WeakMap • غ؎شٔ䪔ְְהֹ => TypedArray • ؒٝر؍،ٝ濼ְהֹ => DataSet
Array ת׆כծֶ꼧厩ךꂁדׅկ P Pr ro os s • ؎ٝرحؙأ穗歋ד،ؙإأֿׅהדծ넝鸞ח暴㹀ךر٦ة《䖤〳腉 •
ꥴזֻ⚛ץהًٌٔ♳ח鸬竲׃걄㚖ד然⥂ׁ넝鸞 C Co on ns s • ر٦ةꆀָ㟓ִה䯏Ⰵׅןחًٌٔⱄ《䖤ծ؝ؾ٦ָ饥鹼ְ • 䌢ח侧⦼ד،ؙإأ׃זְהְֽזְկ
Array ꂁכ姻׃ֻ⢪ִלծjavascriptךر٦ة圓鸡ך⚥דכ剑鸞דׅկ 姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ • 銲稆ך㘗ׇ֮կ
• 鸬竲׃ג䯏Ⰵׅկꥴ瑞ֽזְկ • ؔـآؙؑزה׃ג⢪זְկ
Object ְײ鸬䟝ꂁה׃ג⢪ִתׅկ 鸞䏝כꂁך如ח傍ְדׅկ P Pr ro os s • ؗ٦せָ荈歋
• ⦼荈歋 • 知⽃ח䭁䓸דֹ • ꂁה׃ג⢪ִ C Co on ns s • ؗ٦せחכ俑㶵׃ַ⢪ִזְ侧⦼כ荈⹛㢌䳔
Object ꂁה׃ג⢪ִկ var likeArray = {length: 1, 0: 'a'} lengthفٗػذ؍鏣㹀ׅהꂁך״ֲח䮶莸ֲ圫חזתׅկ
Object 姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ • 鸬䟝ꂁחׅ㜥さכծؗ٦חכ俑㶵׃ַ⢪זְկ •
ꂁה׃ג⢪ֲ㜥さכlength鏣㹀ׅ
ArrayBuffer٥ArrayBufferView ArrayBufferכغ؎شٔךغحؿ؋ד⽃⡤דכ乼⡲דֹזְկ TypedArrayַDataViewדview♷ִֿהד乼⡲〳腉חזկ TypedArrayכ㘗➰ֹ侧⦼ꂁ Uint**Array Int**Array ך״ֲחUnsignedהSignedך✳珏겲ָ8ַ32תד֮կ DataViewכفٓحزؿؓ٦ي杝甧ךغ؎ز乼⡲欽Viewדծ فٓحزؿؓ٦يךؒٝر؍،ٝ搀鋔׃ג乼⡲דֹկ
const u32Arr = new Uint32Array(new ArrayBuffer(1024));! // ArrayBufferの第一引数はバイト数、実際の要素数はViewのバイト数で割った数 // 32bitなら1024
/ 4で256要素格納可能 u32Arr[0] = 1; // ここでは0byteオフセット byteLength = 0 && length = 0! u32Arr[1] = 1; // ここでは4byteオフセット byteLength = 4 && length = 1! ! const dv = new DataView(new ArrayBuffer(1024));! dv.setUint8(2, 1); // Uint8の値を2byteオフセットの位置に書き込む! dv.setInt32(0, 1); // Int32の値を4byteオフセットの位置に書き込む
ArrayBuffer٥ArrayBufferView 姻׃ֻ⢪ֲ • غ؎شٔر٦ة䪔ֲהֹ • 侧⦼ךךꂁ (䖓鶢)
Map Java괏זMapؙٓأדׅկ ֿךؙٓأך剑㣐ך暴䗙כؗ٦חׅץגךؔـآؙؑز ⢪ִֿהדׅկ P Pr ro os s •
ؗ٦ָ荈歋 • iterator㹋鄲׃ג֮ C Co on ns s • ؗ٦ָ撑䭯竲ֽ • 鹼ְ
Map 姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ • ؗ٦חؔـآؙؑز⢪ֲ㜥さכ⢪זֻז׃ַ嶊ׅկ •
俑㶵ؗ٦חׅ㜥さכ⢪זְկ➿חؔـآؙؑز ⢪ֲ
Set Java괏זSetؙٓأדׅկ Mapהずׄ״ֲחؔـآؙؑزؗ٦חדֹתׅկ P Pr ro os s • ؗ٦ָ荈歋
• iterator㹋鄲׃ג֮ C Co on ns s • ؗ٦ָ撑䭯竲ֽ • 鹼ְ
Set 姻 姻׃ ׃ֻ ֻ⢪ ⢪ֲ ֲ • ؗ٦חؔـآؙؑز⢪ֲ㜥さכ⢪זֻז׃ַ嶊ׅկ •
俑㶵ؗ٦חׅ㜥さכ⢪זְկ➿חؔـآؙؑز ⢪ֲ
WeakMap ؔـآؙؑزךؗ٦חהծ䓲撑ד䭯תׅկ ؔـآؙؑزָGCׁהず儗חؗ٦嶊徦׃תׅկ P Pr ro os s • ؔـآؙؑزך㼐ㄏ罋ִזֻג葺ְ
• ؔـآؙؑزؗ٦חדֹ C Co on ns s • ؎ذٖ٦ءّٝדֹזְկ • 鹼ְ
WeakMap 姻׃ֻ⢪ֲ • فٓ؎ك٦زر٦ة⡲הֹװٍؗحءُ㹋鄲ׅ㜥さח⢪ֲկ
WeakSet WeakMapךSet晛 ⟃♴殛
Be better … Javascriptחכ醱꧟זر٦ة圓鸡ָזְךדծObject㢳欽׃ָկ ׃ַ׃ؔـآؙؑز湫䱸鍗ךכדֹֽ鼘ְֽկ ⡦׃㘗ָזְךדծ植㖈ך㹋ꥷך圓鸡ָ⡦זךַ✮䟝׃בְկ Objectחꣲ׆javascriptךر٦ة圓鸡כ腚䓲זךדծفٔىذ؍ـر٦ة 圓鸡ח鍗הֹכדֹֽծؙٓأ瘝ד䬄韋⻉ׅץֹկ
// より防御的なデータ構造 Object.freeze({}); // webのマナーではないれども... Object.defineProperty(arr, 'length', {! writable: false,!
value: arr.length! }); // lengthを固定!
Abstraction ☓ data.something = 100; // ָֿ鷄⸇זךַծ刿倜זךַַׅ זְ ◦ data.setSomething(100);
// ؙٓأך㜥さ ◦ interface Data {something: number} // typescript
Performance javascriptדכ葿ղ䊨㣗׃גر٦ة圓鸡⡲״ծ⽃秪זꂁך倯ָ넝鸞ז ؛٦أָ㢳ְկ זז撑ך㽷䨽䚍ַָזػؿؓ٦وٝأח갟ַֻկ 鸬穠ٔأز⡲ְֻזꂁ⢪ִ
Performance TypedArrayכ鹼ְկ 劤勻傍ְכ׆זךָկկկ תؒٝآٝח״ג剑黝⻉ָ׃ַׁגְזְկ Firefoxכ傍ְ Safari٥Chrome٥IE/Edgeכꂁךקֲָ傍ְկ
0 10 20 30 40 50 60 70 80 90
100 Chrom Safari Firefox Edge Performance 剑鹼ְך100%ה׃הֹךぐر٦ة圓鸡ךػؿؓ٦وٝأ(2017/06/06) http://jsben.ch/#/hohWB
Performance • ؚٓؿ鋅הMapָ衼׃ֻ鹼ְկ • MapַWeakMapכػؿؓ٦وٝأؙٔذ؍ٕؕז㜥䨽דכ銲岣䠐 • ꂁכהחַֻ傍ְկ如挿דؔـآؙؑزկ • 㘗ָ♧荜׃זְ㜥さך鸞䏝⡚♴Safari瘝דכ孡אְֽկ •
Edgeָ穠圓⮚猕
Result • 㘗ָずׄ㜥さדꂁד葺ְ㜥さ => Array • 㘗ָ麩ֻגꂁָ葺ְ㜥さ => Object •
せד،ؙإأ׃ְ㜥さ => Object • Set⢪ְְ㜥さ => Object • Objectؗ٦ח׃Map٥Setָק׃ְ㜥さ => Map٥Set • Iterator⢪ְְ㜥さ => Object.keys • 暴㹀ךObjectַ׃ַ،ؙإأׇֻׁזְ㜥さ => WeakMap • Objectך㼐ㄏהず劍׃ְ㜥さ => WeakMap • غ؎شٔ䪔ְְהֹ => TypedArray • ؒٝر؍،ٝ濼ְהֹ => DataSet
Summary ꂁ؞ٔ䬃׃项俱חזג׃ת… ➙㔐鎉ְַֿהכ ׯה罋ִגر٦ة圓鸡⢪ְת׃׳ֲկ גֿהדׅկ
׀耮ָ֮הֲ׀ְׂת׃կ