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
540
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
680
CLIから見るAngular, React, Vue
sasurau4
1
760
Metro Bundler in Web
sasurau4
0
780
reading-mtc2018-web.pdf
sasurau4
1
460
Other Decks in Programming
See All in Programming
使ってみよう Azure AI Document Intelligence
kosmosebi
2
300
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
26
8.2k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
120
Ruby Function Composition
bkuhlmann
1
330
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
490
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
300
Netty Chicago Java User Group 2024-04-17
sullis
0
170
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
360
エンターテイメント業界で利用されるAWS
demuyan
0
210
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
410
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
Why Our Code Smells
bkeepers
PRO
331
56k
Navigating Team Friction
lara
178
13k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The Invisible Side of Design
smashingmag
294
49k
Become a Pro
speakerdeck
PRO
11
4.5k
The Cost Of JavaScript in 2023
addyosmani
16
3.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Atom: Resistance is Futile
akmur
259
25k
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"
まとめ バイナリの世界は奥が深い コンピューターの気持ちになれる