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
160
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
14
9.3k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
810
javascript - behind the scene
brn
3
740
tc39 proposals
brn
0
880
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
700
Other Decks in Programming
See All in Programming
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
15
5.6k
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.8k
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
ニーリーにおけるプロダクトエンジニア
nealle
0
950
GPUを計算資源として使おう!
primenumber
1
250
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
CDK引数設計道場100本ノック
badmintoncryer
2
480
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
210
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
360
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
Featured
See All Featured
Scaling GitHub
holman
460
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Building an army of robots
kneath
306
45k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How GitHub (no longer) Works
holman
314
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
KATA
mclloyd
30
14k
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 ꂁ؞ٔ䬃׃项俱חזג׃ת… ➙㔐鎉ְַֿהכ ׯה罋ִגر٦ة圓鸡⢪ְת׃׳ֲկ גֿהדׅկ
׀耮ָ֮הֲ׀ְׂת׃կ