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
930
Metro Bundler in Web
sasurau4
0
960
reading-mtc2018-web.pdf
sasurau4
1
560
Other Decks in Programming
See All in Programming
All About Angular's New Signal Forms
manfredsteyer
PRO
0
200
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
810
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
Six and a half ridiculous things to do with Quarkus
hollycummins
0
200
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
110
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
210
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
3
720
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
230
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Docker and Python
trallard
46
3.6k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Agile that works and the tools we love
rasmusluckow
331
21k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Documentation Writing (for coders)
carmenintech
75
5.1k
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"
まとめ バイナリの世界は奥が深い コンピューターの気持ちになれる