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.2k
JSON & Object Tips
brn
1
490
CA 1Day Youth Bootcamp for Frontend LT
brn
0
950
Modern TypeScript
brn
2
800
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
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1.2k
Team operations that are not burdened by SRE
kazatohiei
1
300
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
120
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
3
440
NPOでのDevinの活用
codeforeveryone
0
790
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
600
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
110
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
Select API from Kotlin Coroutine
jmatsu
1
230
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.3k
The Invisible Side of Design
smashingmag
301
51k
Practical Orchestrator
shlominoach
188
11k
RailsConf 2023
tenderlove
30
1.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
Done Done
chrislema
184
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Automating Front-end Workflow
addyosmani
1370
200k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Balancing Empowerment & Direction
lara
1
410
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 ꂁ؞ٔ䬃׃项俱חזג׃ת… ➙㔐鎉ְַֿהכ ׯה罋ִגر٦ة圓鸡⢪ְת׃׳ֲկ גֿהדׅկ
׀耮ָ֮הֲ׀ְׂת׃կ