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
610
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
750
CLIから見るAngular, React, Vue
sasurau4
1
910
Metro Bundler in Web
sasurau4
0
940
reading-mtc2018-web.pdf
sasurau4
1
550
Other Decks in Programming
See All in Programming
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PicoRuby on Rails
makicamel
2
120
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
280
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
120
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
710
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
7.9k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
690
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
190
ふつうの技術スタックでアート作品を作ってみる
akira888
0
400
XP, Testing and ninja testing
m_seki
3
230
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
14k
Optimizing for Happiness
mojombo
379
70k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Adopting Sorbet at Scale
ufuk
77
9.4k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Code Reviewing Like a Champion
maltzj
524
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Gamification - CAS2011
davidbonilla
81
5.3k
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"
まとめ バイナリの世界は奥が深い コンピューターの気持ちになれる