JavaScript アドバンス

JS 型付き配列のメソッド

1. from() メソッド

from() メソッドは、任意のイテラブル(Iterable)オブジェクトから新しい型付き配列を作成します。

例:
文字列から型付き配列を作成:

// 文字列の各文字を数値として解釈して作成
const myArr = Int16Array.from("1234567890");

配列から型付き配列を作成:

// 標準の配列から作成
const myArr = Int16Array.from([1,2,3,4,5,6,7,8,9,0]);

2. of() メソッド

of() メソッドは、引数として渡された複数の数値から新しい型付き配列を作成します。

const myArr = Int16Array.of(1,2,3,4,5,6,7,8,9,0);

3. constructor.name プロパティ

constructor.name プロパティは、その型付き配列の名前(型名)を返します。

// インスタンスの型名(例: "Int16Array")を取得
myArr.constructor.name

4. BYTES_PER_ELEMENT プロパティ

BYTES_PER_ELEMENT は、配列の各要素を格納するために使用されるバイト数を返します。

// 1要素あたりのバイト数を取得
myArr.BYTES_PER_ELEMENT

5. 共通の配列メソッド

Typed Array は、**標準の配列(Standard Arrays)**と多くのメソッドを共有しています。

  • 反復(Iteration): forEach(), map(), filter(), reduce(), reduceRight(), every(), some(), find(), findIndex(), findLast(), findLastIndex()
  • 検索(Searching): includes(), indexOf(), lastIndexOf()
  • 操作(Manipulation): at(), copyWithin(), fill(), reverse(), set(), slice(), sort(), subarray()
  • 変換(Conversion): join(), toLocaleString(), toString()
  • 非破壊的メソッド(Non-mutating): toReversed(), toSorted(), with()

6. fill() メソッド

fill() メソッドは、型付き配列内のすべての要素を指定した値に変更します。

例:
すべての配列要素を特定の値で埋める:

myArr.fill(200);

fill() メソッドは、開始インデックスと終了インデックスの2つのオプション引数を取ることができます。

例:
一部の配列要素を値で埋める:

// 0番目から3番目の直前までを200で埋める
myArr.fill(200, 0, 3);

7. find() メソッド

find() メソッドは、テスト関数を満たす最初の要素を返します。

// 18より大きい最初の要素を取得
myArr.find((x) => x > 18)

8. some() メソッド

some() メソッドは、提供された関数によって true が返される要素が少なくとも1つ存在する場合に true を返します。

// 18より大きい要素が1つでもあるかチェック
myArr.some((x) => x > 18)

9. 利用できない配列メソッド

一部の配列メソッドは、型付き配列では利用できません。これは、型付き配列が固定長(Fixed-length)であり、構造を変更できない性質を持っているためです。

メソッド標準の ArrayTyped Array
pop()使用可能不可
push()使用可能不可
shift()使用可能不可
unshift()使用可能不可
splice()使用可能不可
flat()使用可能不可
flatMap()使用可能不可
concat()使用可能不可
toSpliced()使用可能不可

10. Typed Array をサポートするブラウザ API

型付き配列は、バイナリデータを高速に扱う必要がある多くのモダンなブラウザ API で利用されています。

10.1 Fetch API の例

fetch(url)
.then(request => request.arrayBuffer())
.then(arrayBuffer => {
  // バイナリデータとして Typed Array 等で処理
});

10.2 Canvas API の例

const canvas = document.getElementById('my_canvas');
const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// imageData.data は Uint8ClampedArray を返す
const uint8ClampedArray = imageData.data;