はじめに: 配列はデータを順番に扱うための基本形
前の記事では、データ容量をビットやバイトの大きさとして見ました。文字、画像、JSON、通信データは、最終的にはデータのまとまりとして保存・送信されます。
では、プログラムの中で複数のデータを扱うとき、そのデータはどのように整理されるのでしょうか。ここで登場する基本的な考え方が、配列です。
配列は、複数の値を順番に並べて扱うためのデータ構造です。JavaScriptでも、点数の一覧、タスクの一覧、APIから返ってきたユーザー一覧など、さまざまな場面で配列を使います。
基本情報技術者試験でも、配列はアルゴリズム問題の土台になります。線形探索、二分探索、スタック、キュー、ソートなど、多くの処理は配列を使って説明できます。この記事では、JavaScriptの配列を入口にしながら、メモリ上の並びや操作コストの考え方を整理します。
配列は、複数のデータを順番に並べて扱うための基本的なデータ構造です。
配列は添字で要素を取り出す
まずは、JavaScriptの配列を見てみます。
const scores = [80, 95, 70];
console.log(scores[0]);
console.log(scores[1]);
console.log(scores.length);scores には、3つの点数が順番に入っています。配列の中に入っている1つ1つの値を、要素と呼びます。
配列では、要素の位置を添字で指定します。多くのプログラミング言語と同じように、JavaScriptの配列の添字は0から始まります。そのため、scores[0] は1番目の要素、scores[1] は2番目の要素を表します。
最初は「1番目なのに0」と感じるかもしれません。しかし、配列をメモリ上の並びとして考えると、0番目は「先頭から0個分ずれた位置」と見ることができます。次の章で、この考え方をもう少し見ていきます。
配列では、要素の位置を表す添字を使って目的の値を取り出します。
メモリ上では「並んでいる」と考えると分かりやすい
基本情報の学習では、配列を「同じ種類のデータがメモリ上に順番に並んでいるもの」と考えると分かりやすくなります。
たとえば、整数が3つ入った配列を考えます。概念的には、次のようにデータが並んでいるイメージです。
index: 0 1 2
value: 80 95 70もし1つの要素が同じ大きさで並んでいるなら、先頭の位置と添字から、目的の要素の位置を計算できます。0番目は先頭、1番目は1つ分進んだ場所、2番目は2つ分進んだ場所、という考え方です。
この「順番に並んでいる」というイメージがあると、添字で要素を取り出す意味が分かりやすくなります。また、配列を使った探索やソートの動きも追いやすくなります。
ただし、JavaScriptの配列が実際にメモリ上で必ずこの通りに並んでいる、と断定する必要はありません。JavaScriptエンジンは、配列の中身や使い方に応じて内部表現を最適化します。ここでは、基本情報やアルゴリズムを理解するための概念モデルとして「順番に並んでいる」と考えます。
配列は、メモリ上に同じ種類のデータが順番に並んでいると考えると理解しやすくなります。
添字アクセスが速い理由
配列の特徴の1つは、添字を指定して要素へアクセスしやすいことです。
const values = [10, 20, 30, 40, 50];
console.log(values[3]);このコードでは、values[3] で4番目の要素を取り出しています。配列の概念モデルでは、添字が分かれば目的の位置を計算できるため、先頭から1つずつ探す必要がありません。
計算量の記事で見た表現を使うなら、配列の添字アクセスは O(1) と考えられます。要素数が5個でも、1000個でも、添字が分かっていれば「その位置を取りに行く」操作として考えられるからです。
もちろん、これは配列の基本モデルに基づく説明です。JavaScriptではエンジンの内部最適化がありますが、プログラムを書く側の理解としては、添字アクセスは速い操作だと押さえておくとよいでしょう。
配列は添字で位置を指定できるため、目的の要素へ直接アクセスしやすい構造です。
挿入や削除では後ろの要素が動くことがある
配列は添字アクセスが得意ですが、すべての操作が同じように軽いわけではありません。特に、途中への挿入や先頭からの削除では、後ろの要素を動かす必要が出ることがあります。
const tasks = ["A", "B", "C"];
tasks.splice(1, 0, "X");
console.log(tasks);
tasks.shift();
console.log(tasks);splice(1, 0, "X") は、添字1の位置に "X" を挿入します。もともと "B" と "C" があった場所は、後ろへずれることになります。
shift() は、配列の先頭の要素を取り出して削除します。先頭が消えると、後ろの要素を前へ詰める必要があります。要素数が少なければ気になりませんが、大きな配列で何度も行うとコストが大きくなることがあります。
一方、配列の末尾に追加する push() は、途中挿入より扱いやすいことが多いです。スタックの記事で push() と pop()、キューの記事で push() と shift() を見た人は、この違いを思い出すと理解しやすいでしょう。
配列の途中への挿入や先頭からの削除では、要素をずらす処理が必要になることがあります。
JavaScriptの配列は「便利な抽象」として使える
ここまで、配列をメモリ上に順番に並ぶデータとして説明しました。ただし、JavaScriptの配列は、基本情報で学ぶ単純な配列よりも便利で柔軟です。
JavaScriptの配列は、あとから要素を追加できます。
const items = [];
items.push("HTML");
items.push("CSS");
items.push("JavaScript");
console.log(items);また、数値、文字列、オブジェクトなど、異なる種類の値を同じ配列に入れることもできます。
const mixed = [1, "text", { ok: true }];
console.log(mixed[2]);これは実務では便利ですが、基本情報で出てくる「同じ種類のデータが連続して並ぶ配列」とは少し違います。JavaScriptでは、メモリの細かい配置を開発者が直接指定するのではなく、JavaScriptエンジンが内部でうまく扱います。
そのため、学習では2つの見方を分けるとよいでしょう。基本情報やアルゴリズムでは、配列を「順番に並ぶデータ」として理解する。JavaScriptを書くときは、それを便利に使える抽象化された配列として扱う。この両方を持っておくと、試験にも実務にもつながります。
JavaScriptの配列は便利な抽象ですが、基本情報で学ぶ配列の考え方を知ると操作の意味を理解しやすくなります。
TypedArrayでメモリに近い見方をしてみる
JavaScriptには、通常の配列とは別にTypedArrayという仕組みがあります。TypedArrayは、数値データを決まった型の並びとして扱うためのものです。
たとえば、Uint8Array は、0から255までの整数を並べて扱えます。8ビット、つまり1バイトの値を並べるイメージに近いです。
const bytes = new Uint8Array([65, 66, 67]);
console.log(bytes[0]);
console.log(bytes.length);この例では、3つのバイト値を持つ配列のように扱えます。JavaScriptで理解するデータ容量の記事で見たデータ容量や、JavaScriptで理解する文字コードの記事で見た文字コードのバイト列を思い出すと、TypedArrayはかなりメモリやバイナリデータに近い考え方だと分かります。
通常のWebアプリでは、毎日TypedArrayを書くわけではないかもしれません。しかし、画像データ、音声データ、ファイル処理、暗号処理、Web APIの低レベルな処理では、バイト列としてデータを見る場面があります。
TypedArrayを使うと、JavaScriptでもバイト列に近いデータの並びを扱えます。
試験ではどう問われるか
基本情報技術者試験では、配列はアルゴリズムの基本としてよく出てきます。添字を使って要素を参照したり、ループで先頭から順番に処理したり、条件に合う値を探したりします。
線形探索では、配列の先頭から順番に値を調べます。二分探索では、整列済みの配列に対して中央の要素を見ながら探索範囲を半分にしていきます。スタックやキューも、配列を使って考えると動きが追いやすくなります。
また、途中への挿入や削除では要素をずらす必要がある、という考え方も重要です。配列は「添字アクセスは得意だが、位置によっては挿入削除にコストがかかる」と整理しておくと、計算量の理解にもつながります。
基本情報では、配列を添字で扱いながら、探索や更新の流れを追えることが重要です。
実務ではどう使われるか
Web開発では、配列は日常的に使います。APIから返ってきた一覧データ、フォームの入力項目、商品リスト、検索結果、画面に表示するカード一覧など、複数のデータを扱う場面では配列がよく登場します。
たとえば、APIからユーザー一覧が返ってきたとします。
const users = [
{ id: 1, name: "Aki" },
{ id: 2, name: "Mina" },
{ id: 3, name: "Ren" }
];
const names = users.map((user) => user.name);
console.log(names); これまでの例では使っていませんが、map() を使うと、配列の各要素を変換できます。filter() で条件に合う要素だけを取り出したり、find() で目的の要素を探したりすることもあります。こういった配列操作のメソッドに慣れておくと非常に便利です。
ただし、大きな配列に対して何度も検索や並び替えを行うと、処理時間に影響することがあります。画面が遅い、APIデータの加工が重い、一覧表示がもたつく、といった場面では、配列操作の回数や計算量を見ることが役立ちます。
Web開発では、一覧データやAPIレスポンスを扱う場面で配列の考え方が日常的に使われます。
まとめ: 配列はメモリとアルゴリズムをつなぐ入口
配列は、複数のデータを順番に並べて扱うための基本的なデータ構造です。添字を使うことで、目的の位置にある要素を取り出せます。
基本情報の学習では、配列をメモリ上に順番に並ぶデータとして考えると理解しやすくなります。添字アクセスは得意ですが、途中への挿入や先頭からの削除では、要素をずらす処理が必要になることがあります。
JavaScriptの配列は、実際にはエンジンにより抽象化・最適化されています。それでも、配列の基本モデルを知っていると、push()、shift()、splice()、map()、filter() などの操作が何をしているのか理解しやすくなります。
配列の考え方は、探索、ソート、スタック、キュー、そしてこれから学ぶ再帰処理や木構造にもつながります。データがどのように並び、どのように処理されるのかを考える入口として、配列を押さえておきましょう。
配列を理解すると、メモリ上のデータの並びとアルゴリズムの動きがつながって見えてきます。
コメント