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
ArrayBufferとBinary
Search
Daiki Ihara
June 06, 2019
Programming
1
620
ArrayBufferとBinary
2019-06-06 @ meguroes #21
Daiki Ihara
June 06, 2019
Tweet
Share
More Decks by Daiki Ihara
See All by Daiki Ihara
tc39_study
sasurau4
1
760
CLIから見るAngular, React, Vue
sasurau4
1
920
Metro Bundler in Web
sasurau4
0
960
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Programming
See All in Programming
Cache Me If You Can
ryunen344
1
610
TDD 実践ミニトーク
contour_gara
1
290
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
510
RDoc meets YARD
okuramasafumi
4
170
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
8
3.5k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
400
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Deep Dive into Kotlin Flow
jmatsu
1
300
AI時代のUIはどこへ行く?
yusukebe
17
8.7k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
210
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Why Our Code Smells
bkeepers
PRO
339
57k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How GitHub (no longer) Works
holman
315
140k
4 Signs Your Business is Dying
shpigford
184
22k
Optimizing for Happiness
mojombo
379
70k
Scaling GitHub
holman
463
140k
Unsuck your backbone
ammeep
671
58k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Transcript
ArrayBuffer とBinary sasurau4 Meguro.es #21 2019/06/06
Introduce myself { "id": "sasurau4", "name": "Daiki Ihara", "description": "Front-end
engineer at CureApp, Inc.", "techs": { "work": [ "React Native", "TypeScript", "JavaScript", "MongoDB" ], "hobby": ["React", "TypeScript", "JavaScript" ,"deno"], }, "homepage": "https://sasurau4.github.io/profile/" }
Today's contents 4 7 17 1. はじめに 2. バイナリとは 3.
バイナリーで遊ぶ
なぜArrayBuffer 仕事でBluetooth でとある機器をつなぐ必要があった その機器がこんな値を返してくる [48, 49, 48, 46, 48] [48,
48, 49, 46, 50] [48, 48, 48, 46, 56] どうもBinary らしい Binary を扱う?どうするんだ?
ArrayBuffer
None
binary binary: 2 の, 2 進法の, 2 成分の bi-: 2
つの bicycle: 2 つの輪 -> ⾃転⾞ bilingual: 2 つの⾔葉 -> 2 カ国語を喋れる⼈ git bisect: 2 分探索してくれるやつ
binary バイナリ (binary) とは⼆進法のことであるが、コンピュータが処理・記憶するために2 進化されたファイルまたは その内部表現の形式(バイナリデータ)のことを指して⽤いることが多い。 https://ja.wikipedia.org/wiki/%E3%83%90%E3%82%A4%E3%83%8A%E3%83%AA
10
2 進数 0 と1 だけで表現された数値
1 桁のとき 0 1
2 桁のとき 00 01 10 11
3 桁のとき 000 001 010 011 100 101 110 111
例1 10 進数: 255 2 進数: 11111111 例2 10 進数:
10000 2 進数: 10011100010000
16 進数 0-9 とA-F の16 ⽂字を使って表現された数値 JavaScript では、0x00 など0x を先頭につけて表す
10 進数: 255 2 進数: 11111111 16 進数: FF
bit とbyte bit 情報量の単位 binary digit の略 1bit で2 進数の1
桁で表せる情報量、つまり2 つの状態を表せる byte 情報量の単位 1byte = 8bit = 256 通りの値を⽰せる 16 進数で表すのにちょうどよい
ArrayBuffer とTypedArray とDataView バッファ ArrayBuffer 固定⻑のバイナリデータを⽰すために使われる 直接操作ができない ビュー TypedArray ArrayBuffer
の配列状のビューを提供する Uint8Array など DataView 任意のデータをバッファに読み書きする TypedArray と違い、バイトオーダーを制御できる
実践 const buf = new ArrayBuffer(1) let u8 = new
Uint8Array(buf) u8[0] = 65 String.fromCharCode.apply(0, u8) // -> "A" const buf = new ArrayBuffer(2) let u8 = new Uint8Array(buf) let u16 = new Uint16Array(buf) u16[0] = 12354 // u8 -> Uint8Array[66, 48] // u16 -> Uint16Array[12354] String.fromCharCode.apply(0, u8) // -> "B0" String.fromCharCode.apply(0, u16) // -> " あ"
https://developer.mozilla.org/ja/docs/Web/JavaScript/Typed_arrays
最初の疑問の答え const value = [48, 49, 48, 46, 48] value.map(v
=> String.fromCharCode(v)).join("") // -> "010.0"
まとめ バイナリの世界は奥が深い コンピューターの気持ちになれる