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
Software Architecture
hschwentner
6
2.1k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
800
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Open source software: how to live long and go far
gaelvaroquaux
0
650
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
580
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.4k
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
時計仕掛けのCompose
mkeeda
1
310
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
1
130
Featured
See All Featured
Fireside Chat
paigeccino
34
3.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
For a Future-Friendly Web
brad_frost
176
9.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Embracing the Ebb and Flow
colly
84
4.6k
GraphQLとの向き合い方2022年版
quramy
44
13k
Producing Creativity
orderedlist
PRO
344
39k
Docker and Python
trallard
44
3.3k
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 ꂁ؞ٔ䬃׃项俱חזג׃ת… ➙㔐鎉ְַֿהכ ׯה罋ִגر٦ة圓鸡⢪ְת׃׳ֲկ גֿהדׅկ
׀耮ָ֮הֲ׀ְׂת׃կ