●学校情報

講座一覧・募集状況

学習方法

学習サポート

修了生の評価

受講生の横顔

当学院について

入学相談

入学手続

 

●講座情報

技術者養成講座

プログラミング講座

WEB講座

情報処理試験講座

Excel講座

Access講座

 

●関連コラム

関連コラム

関連用語集

 

logo

 

 

関連用語集

JavaScriptの配列とは?基本の使い方から応用まで解説

JavaScriptで複数のデータをまとめて扱いたいときに便利なのが「配列」です。
配列を使うことで、同じ種類のデータを効率的に管理・操作することができます。

この記事では、JavaScriptにおける配列の基本的な使い方や操作方法、よく使われるメソッドについて解説します。

配列とは?

配列とは、複数のデータを1つの変数でまとめて扱うためのデータ構造です。

const fruits = ["りんご", "バナナ", "みかん"];

このように、配列は [ ](角括弧)で囲んでデータをカンマ区切りで並べて作成します。

配列の要素にアクセスする

配列の中の要素には、インデックス(番号)を使ってアクセスします。
インデックスは0から始まります。

const fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits[0]); // "りんご"
console.log(fruits[1]); // "バナナ"

配列の要素を変更する

インデックスを指定すれば、配列の中のデータを変更することもできます。

fruits[1] = "ぶどう";
console.log(fruits); // ["りんご", "ぶどう", "みかん"]

配列の要素数を確認する

配列の要素の数(長さ)は length プロパティで取得できます。

console.log(fruits.length); // 3

配列の操作に使える便利なメソッド

配列には、多くの便利なメソッドが用意されています。代表的なものをいくつか紹介します。

  • push():末尾に要素を追加
  • pop():末尾の要素を削除
  • shift():先頭の要素を削除
  • unshift():先頭に要素を追加
  • slice():指定した範囲の要素を取り出す
  • splice():任意の位置に追加・削除
  • forEach():すべての要素に処理を行う

配列のループ処理

配列の要素を順番に処理したい場合は、for文やforEachメソッドを使います。

for文の例

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

forEachの例

fruits.forEach(function(item) {
  console.log(item);
});

多次元配列

配列の中に配列を入れることで、多次元配列を作ることもできます。

const matrix = [
  [1, 2, 3],
  [4, 5, 6]
];

console.log(matrix[1][2]); // 6

まとめ

  • 配列は複数のデータをまとめて扱える構造
  • インデックスを使って要素にアクセス・変更できる
  • lengthで要素数を取得できる
  • 便利なメソッドを使えば操作が簡単になる
  • 繰り返し処理や多次元配列も可能

配列は、JavaScriptの中でも非常に重要な構造のひとつです。
使い方に慣れてくると、より柔軟なプログラムを作成できるようになります。

 

JavaScript関連用語集

−−−−−  JavaScript  −−−−−

JavaScriptの変数とは?初心者にもわかりやすく解説

JavaScriptの定数(const)とは?使い方と注意点をわかりやすく解説

JavaScriptの関数とは?基本から使い方まで丁寧に解説

JavaScriptの配列とは?基本の使い方から応用まで解説

JavaScriptのオブジェクトとは?基本の使い方から応用まで解説

JavaScriptのプロパティとは?基本から使い方までわかりやすく解説

JavaScriptのメソッドとは?基本と使い方をわかりやすく解説

JavaScriptのスコープとは?基礎からしっかり理解しよう

JavaScriptのクロージャとは?仕組みと使い方をわかりやすく解説

JavaScriptのコールバック関数とは?仕組みと使い方をやさしく解説

JavaScriptの非同期処理とは?基本から使い方までわかりやすく解説

JavaScriptのPromiseとは?非同期処理をわかりやすく管理する方法

JavaScriptのasync / awaitとは?Promiseをもっと簡単に書く方法

JavaScriptのイベントとは?クリックや入力に反応する仕組みを解説

JavaScriptのイベントリスナーとは?イベント処理の基本を解説

JavaScriptのDOMとは?Webページを操作する基本をやさしく解説

JavaScriptのJSONとは?データのやりとりに使われる基本形式を解説

JavaScriptのデータ型とは?基本の種類と使い方をわかりやすく解説

JavaScriptの型変換とは?自動変換と明示的変換の仕組みを解説

JavaScriptのnullとは?「何もない」を明示する特別な値

JavaScriptのundefinedとは?「未定義」を表す特別な値を理解しよう

JavaScriptのNaNとは?数値にならないことを示す特別な値を解説

JavaScriptのループとは?繰り返し処理の基本と使い方を解説

JavaScriptのif文とは?条件に応じた処理の書き方を解説

JavaScriptのswitch文とは?複数の条件分岐をすっきり書く方法

JavaScriptのクラスとは?オブジェクト指向の基本構文を解説

JavaScriptの継承とは?クラスの機能を引き継ぐ仕組みを解説

JavaScriptのモジュールとは?ファイル分割と再利用を可能にする仕組みを解説

JavaScriptの即時関数(IIFE)とは?その仕組みと使いどころを解説

JavaScriptのグローバル汚染を防ぐ方法とは?安全なスクリプト管理の基本