MENU

【初心者向け】JavaScriptの配列とは?意味と基本をわかりやすく解説【ITTI】

目次

配列とは何か

JavaScriptにおける配列とは、複数の値を順番に格納できる特別なオブジェクトです。

通常の変数は1つの値しか持てませんが、配列を使えば「りんご」「バナナ」「みかん」といった複数のデータをひとまとめにできます。

イメージすると「番号付きロッカー」。最初のロッカーは0番、次は1番…と番号で管理され、必要なときに番号を指定して中身を取り出せます。

配列の特徴

順序がある:要素は必ず0から始まる番号で管理される


要するに、配列は「順番つきの箱の並び」です。

const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]);

実行結果
"apple"


console.log(fruits[1]);

実行結果
"banana"

最初の要素は「0番目」から始まる。  イメージすると「ロッカーの番号札が0から始まる」感じです。

柔軟性が高い:文字列・数値・オブジェクトなど、異なる型を混ぜて格納できる


JavaScriptの配列は、同じ型だけでなく色々な型を一緒に入れられます。

要するに、関数も値なので配列に入れられる。

const mixed = [42, "apple", true, { name: "Ken" }];
console.log(mixed[3].name);

実行結果
"Ken"

CやJavaのように「型を揃えないといけない」言語と違って、JSは自由度が高い。  ただし「何が入っているか分かりにくくなる」ので、実務ではあまり混ぜすぎない方がいい。

サイズが可変:後から要素を追加・削除できる

配列は「固定長」ではなく、後から要素を足したり消したりできます。

要するに、配列を配列の末尾を削除したり、末尾に追加することができる。

let numbers = [1, 2, 3];
numbers.push(4);末尾に追加せよ ⇦ここを注目
console.log(numbers);

実行結果
[1, 2, 3, 4]


numbers.pop();末尾を削除せよ ⇦ここを注目
console.log(numbers);

実行結果
[1, 2, 3]

C言語の配列のように「最初にサイズを決める」必要がない。  「伸び縮みするリスト」と考えると分かりやすい。

配列が必要になる場面

リスト管理:Todoリスト、買い物リストなど

const todos = ["ブログを書く", "犬の散歩", "夕飯の買い物"];
console.log(todos[1]);

実行結果
"犬の散歩"

データ処理:ユーザーの入力履歴や検索結果をまとめる

const searchHistory = ["JavaScript 配列", "SEO 記事", "犬 散歩"];
console.log(searchHistory.length);

実行結果
3履歴の件数

繰り返し処理:ループと組み合わせて効率的に処理できる

const users = ["Taro", "Hanako", "Ken"];

配列の中身を1つずつ取り出して処理する
users.forEach(name => console.log(name));

users という配列に3人の名前が入っている。forEach は「配列の要素を1つずつ取り出して処理する」メソッド。name => console.log(name) は「取り出した要素を画面に表示する」という処理。

実行結果

Taro
Hanako
Ken

初心者がつまずきやすいポイント

•  インデックスは0から始まる → fruits[0] が最初の要素。

•  lengthは「最後の番号」ではなく「要素数」。

インデックスとは、要素を入れた瞬間に自動的に「0から始まる番号」。

length プロパティとは、「いま要素がいくつ入っているか」を教えてくれる特別なプロパティ。

•  配列とオブジェクトの違い → 配列は「順序付き」、オブジェクトは「名前付き」。

要するに、

配列 → 番号で特定することができる

const fruits = ["apple", "banana", "orange"];
console.log(fruits[1]); // "banana"



オブジェクト → 名前で特定することができる

const person = { name: "Taro", age: 25 };
console.log(person.name); // "Taro"

まとめ

•  配列とは、複数の値を順序付きで格納できる入れ物。

•  インデックス番号でアクセスし、lengthで要素数を確認できる。

•  リスト管理や繰り返し処理に欠かせない基本データ構造。

•  初心者は「0から始まる番号」と「lengthの意味」でよくつまずく。

配列を理解することは、JavaScriptの基礎を固める第一歩。次は「配列メソッド(push, map, filterなど)」を学ぶと、さらに実践的に使えるようになります。

最後まで読んで頂きありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フロントエンドを基礎から学びつつ、UXデザインで“わかりやすさ”を形にしています。

コメント

コメントする

目次