JavaScript - The TypedArray Object

こんにちは、未来のプログラミングスーパースターの皆さん！? 今日は、JavaScriptのTypedArraysの世界に楽しく飛び込んでみましょう。プログラミングが初めての人でも心配しないでください - 私が親切なガイドとして、少しずつ進んでいきます。お気に入りの飲み物を用意して、リラックスして、一緒に見ていきましょう！

What is a TypedArray?

大きなパーティを計画するとき（谁だってパーティが好きでしょうよね？）に、カップやプレート、食器の数を管理する必要があります。それと同じようなことをJavaScriptのTypedArrayが行います - 特定のデータを効率的に整理して保存する手助けをしてくれます。

TypedArrayは、JavaScriptの特別な種類の配列で、特定の種類の数値のみを含めることができます。これは、フォーク、スプーン、ナイフを全部一緒に大きな引き出しに入れるのではなく、それぞれに別の箱を用意するようなものです。

// 8ビット整数のTypedArrayを作成
const myArray = new Int8Array(5);
console.log(myArray); // 出力: Int8Array(5) [0, 0, 0, 0, 0]

この例では、5つの8ビット整数を保持できるTypedArrayを作成しています。これは、-128から127の範囲の数を保持できる5つの小さな箱を用意するようなものです。

Why TypedArray?

「なぜTypedArraysを使うのか？」と思っているかもしれません。素晴らしい質問です！TypedArraysには、特定の状況で非常に便利なパワフルな機能があります：

1. 速度: 数値演算がより速くなります。
2. メモリ効率: 固定のメモリを使用します。
3. 互換性: バイナリデータや他の言語との連携が良好です。

これは、万能ナイフを使う代わりに専門工具を使うようなものです - 時々、完璧なフィットが必要です！

TypedArray Objects

JavaScriptには、さまざまな種類のTypedArraysが用意されており、それぞれ異なる数値の種類とサイズに対応しています。以下に整理された表で見てみましょう：

TypedArray	説明	範囲
Int8Array	8ビット符号付き整数	-128 to 127
Uint8Array	8ビット符号なし整数	0 to 255
Int16Array	16ビット符号付き整数	-32,768 to 32,767
Uint16Array	16ビット符号なし整数	0 to 65,535
Int32Array	32ビット符号付き整数	-2,147,483,648 to 2,147,483,647
Uint32Array	32ビット符号なし整数	0 to 4,294,967,295
Float32Array	32ビット浮動小数点	~1.2E-38 to ~3.4E+38
Float64Array	64ビット浮動小数点	~5.0E-324 to ~1.8E+308

これは相当なリストですね！でも心配しないでください - 例を使ってすべてを明確にします。

TypedArray Properties

TypedArraysには便利なプロパティがあります。見てみましょう：

1. length

これはTypedArrayに含まれる要素の数を教えてくれます。

const myArray = new Int16Array(3);
console.log(myArray.length); // 出力: 3

2. BYTES_PER_ELEMENT

このプロパティは配列の各要素がどれだけのバイトを占めるかを示します。

console.log(Int8Array.BYTES_PER_ELEMENT); // 出力: 1
console.log(Int16Array.BYTES_PER_ELEMENT); // 出力: 2

これは、私たちの保管システムの各箱がどれだけの大きさかを知るようなものです！

TypedArray Static Methods

TypedArraysには、インスタンスを作成しなくても使用できるビルトインメソッドがいくつかあります。見てみましょう：

1. TypedArray.from()

このメソッドは、配列のようなオブジェクトから新しいTypedArrayを作成します。

const regularArray = [1, 2, 3, 4];
const typedArray = Int8Array.from(regularArray);
console.log(typedArray); // 出力: Int8Array(4) [1, 2, 3, 4]

これは、混合された食器引き出しをきれいに整理された箱に変えるようなものです！

2. TypedArray.of()

このメソッドは、可変数の引数で新しいTypedArrayを作成します。

const myArray = Int16Array.of(1, 2, 3, 4, 5);
console.log(myArray); // 出力: Int16Array(5) [1, 2, 3, 4, 5]

これは、「ここにアイテムがあります。整理してください！」と言うようなものです！

TypedArray Instance Methods

TypedArrayのインスタンスで使用できるメソッドを見てみましょう：

1. set()

このメソッドはTypedArrayに値をコピーします。

const myArray = new Int8Array(5);
myArray.set([1, 2, 3]);
console.log(myArray); // 出力: Int8Array(5) [1, 2, 3, 0, 0]

これは、整理された箱にアイテムを入れるようなものです。

2. subarray()

このメソッドは、元の配列の一部を新しいTypedArrayとして返します。

const originalArray = new Int8Array([1, 2, 3, 4, 5]);
const subArray = originalArray.subarray(1, 4);
console.log(subArray); // 出力: Int8Array(3) [2, 3, 4]

これは、保管システムから特定のタスクためにいくつかの箱を取り出すようなものです。

Examples

実際の例で知識をまとめてみましょう！

Example 1: Creating and Modifying a TypedArray

// 8ビット符号なし整数のTypedArrayを作成
const pixelData = new Uint8Array(4);

// ピクセルのRGB値を設定（赤: 255、緑: 128、青: 64、アルファ: 255）
pixelData[0] = 255; // 赤
pixelData[1] = 128; // 緑
pixelData[2] = 64;  // 青
pixelData[3] = 255; // アルファ（完全な不透明）

console.log(pixelData); // 出力: Uint8Array(4) [255, 128, 64, 255]

この例では、Uint8Arrayを使ってピクセルの色値を表現しています。各値は0から255の範囲で、8ビット符号なし整数に完璧に適しています！

Example 2: Using TypedArrays for Performance

const size = 1000000;

// 通常配列を使う場合
console.time('Regular Array');
const regularArray = new Array(size);
for (let i = 0; i < size; i++) {
regularArray[i] = i;
}
console.timeEnd('Regular Array');

// TypedArrayを使う場合
console.time('TypedArray');
const typedArray = new Int32Array(size);
for (let i = 0; i < size; i++) {
typedArray[i] = i;
}
console.timeEnd('TypedArray');

このコードを実行すると、TypedArrayが速いことが分かるでしょう！これは、整理された保管システムとすべてを一大山に放り込むのと同じです。

そして、ここまでがTypedArraysの旅でした！ TypedArraysを理解し、実際に使ってみましょう。練習は完璧を生みますので、これらの概念を試してみてください。

それでは、 TypedArraysの魔術師になって、他の開発者を感心させましょう！次回まで、ハッピーコーディング！??‍??‍?

Credits: Image by storyset