JavaScriptでArrayオブジェクトを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptの組み込み関数の1つ【Arrayオブジェクト】を使う方法を解説した記事です。具体的な使い方がわかるように、「slice」など3つのメソッドと1つのプロパティを例に説明します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptの組み込み関数の1つ、JavaScriptでArrayオブジェクトを使う方法について解説します。

また、入門向けのJavaScriptの学習サイトもまとめて紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

 

 

組み込み関数のArrayオブジェクトとは

組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Arrayオブジェクトは、組み込み関数の1つで、配列を扱う際に使います。

 

参考までに、組み込み関数の代表的なものには次のようなものがあります。

 

<組み込み関数(代表的なもの)>

  • String 文字列を扱う
  • Number 数値を扱う
  • Boolean 論理値を扱う
  • Array 配列を扱う
  • Date 日付を扱う
  • Math 数値計算で扱う

 

はじめから関数の内容が決まっているので、こちらで定義する手間もなく、実行するだけ。非常に便利なので重宝します。

組み込みオブジェクトを使う場合、newを使って次のようにオブジェクトを生成します。

var オブジェクト名= new object(); 

 

大石ゆかり

Arrayって配列のことですよね?配列もオブジェクトなんでしょうか?

田島悠介

JavaScriptでは配列はオブジェクトなんだよね。

大石ゆかり

配列は無いんですか?

田島悠介

配列をオブジェクトで包んで、関数を追加したりしてるんだよね。なので純粋な配列ではなくて、配列のような感じになってるんだよね。では、Arrayオブジェクトを生成してみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

Arrayオブジェクトを実際に生成してみよう

適当なオブジェクト名(family)をつけ、Arrayオブジェクトを生成してみます。配列に関する様々なプロオパティやメソッドを出力することができます。

var family = new Array();

これでArrayオブジェクトが1つ生成されましたが、まだfamilyの箱の中身はからっぽの状態です。Taro・Jiro・Saburoを加え、console.logで呼び出してみます。

<!DOCTYPE html>
<html lang = “ja”>
  <head>
    <meta charset = “utf-8″>
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      var family= new Array("Taro", "Jiro", "Saburo");
      console.log(family);
    </script>
  </body>
</html>

※文字列の場合、「” “」や「’ ‘」で囲うのを忘れずに!

3人

 

ここまでできたら、console.logを使って配列に関する様々なプロオパティやメソッドを呼び出してみましょう。

 

 

Arrayオブジェクトのプロパティ・メソッドを呼び出してみよう

Arrayオブジェクトでの配列の扱い方を、1つのプロパティと3つのメソッドを例に見ていきましょう。

 

プロパティ1. length(配列の長さを取得する)

オブジェクトのプロパティを呼び出すやり方の確認です。

変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。

 

配列の長さを取得したいときは、lengthを使ってこのように書きます。

<script>
  var family= new Array("Taro", "Jiro", "Saburo");
  console.log(family.length);
</script>

3

配列amilyのなかにはTaro・Jiro・Saburoの3つの要素が入っているので、「3」が取得されました。

lengthとプロパティについて

配列のlengthプロパティに要素数を代入することで、代入後の要素数が代入前の要素数より小さい場合、要素も削除されます。

今回は、元々、[‘Taro’, ‘Jiro’, ‘Saburo’]だった配列のlengthプロパティに2を代入することで、[‘Taro’, ‘Jiro’, ]にします。

それでは各コードを説明します。

初期値は次のとおりです。

var family = ['Taro', 'Jiro', 'Saburo'];

 

今回は、インデックス3の配列familyのlengthプロパティを2にします。

family.length = 2;

 

配列familyの要素が削除され、配列の値2が表示されるコードです。
この時の配列の値は、[‘Taro’, ‘Jiro’]となっています。
この時の配列要素を表示するコードです。
表示結果は0, 1です。

console.log(Object.keys(family));

 

現在の配列数を表示するコードです。
表示結果は2です。

console.log(family.length);

 

インデックス1番目の要素を表示しようとするコードです。
しかし、文法が違っているためエラーになります。
エラー内容は Uncaught SyntaxError: missing ) after argument list です。

console.log(family.1);

 

現在の2番目要素である、インデックス1の値を表示する正しい文法のコードです。
結果として、Jiroが表示されます。

console.log(family[1]);

 

配列familyのlengthプロパティから1減らした数番目である、インデックス1番目の要素を表示するコードです。
結果として、Jiroが表示されます。

console.log(family[family.length - 1]);

 

現在の3番目要素でインデックス2の値を表示するコードです。
しかし、lengthプロパティを2にしたことで削除されているため表示されません。
表示結果は、 undefined です。

console.log(family[2]);

 

lengthとプロパティのプログラム全体

var family = ['Taro', 'Jiro', 'Saburo']; 
console.log(Object.keys(family));
console.log(family.length);
console.log(family.1); 
console.log(family[1]);
console.log(family[family.length - 1]);
console.log(family[2]);

実行結果

0,1
2
Uncaught SyntaxError: missing ) after argument list
Jiro
Jiro
undefined

メソッド1. slice()(配列の指定した要素を取り出す)

slice()メソッドでは、インデックスを指定することで、指定した要素を取得することができます。

(※インデックスとは、配列の要素にふられた背番号のようなもので、0からはじまり0,1,2……と増えていきます)

 

要素を取り出すときは、( )内で、開始位置と終了位置のインデックス両方を指定する必要があります指定位置を指定しない場合は、開始位置から最後の要素までが取り出されます

 

では、TaroとJirtoを取り出してみましょう。

<script>
  var family= new Array("Taro", "Jiro", "Saburo");
  console.log(family.slice(0,2));
</script>

tarojiro

slice(0,2)と指定すると、0番目のTaroから2番目のひとつ前まで、つまり1番目のJiroまでが取得されます。(0,1)ではないので注意です!

ちなみに、( )のなかを次のように指定すると……

0 → Taro・Jiro・Saburo
0,1 → Taro
1 → Jiro・Saburo
2 → Saburo

少々ややこしいかもしれませんが、ご自分でいろいろと試してみてくださいね。

 

メソッド2. reverse()(配列内の順番をひっくり返す)

reserve() を使うと、配列内の要素の順番をひっくり返すことができます。

<script>
  var family= new Array("Taro", "Jiro", "Saburo");
  console.log(family.reverse());
</script>

reverse

Taro・Jiro・Saburo が逆になり、Saburo・iro・Taro となりました。

 

メソッド3. push()(新しい要素を追加し、要素数を取得する)

push()では、配列末尾に新しい要素を追加し、追加後の要素数を取得することができます。

<script>
  var family= new Array("Taro", "Jiro", "Saburo");
  console.log(family.push("Haruka", "Natsumi"));
</script>

push()

HarukaとNatsumiが追加され、要素数が「3」から「5」に増えました。
念のため、console.logで全体を呼び出してみると……

<script>
  var family= new Array("Taro", "Jiro", "Saburo");
  console.log(family.push("Haruka", "Natsumi"));
  console.log(family);
</script>

console.log(family);
Taro・Jiro・Saburo・Haruka・Natsumiの5人が取得されましたね。

 

その他のArrayオブジェクトサンプル

配列の末尾の要素を削除する

プログラム

var family= new Array("Taro", "Jiro", "Saburo");
// 配列の末尾の要素 "Saburo" を削除
var last = family.pop();
console.log(family);

実行結果

 ["Taro", "Jiro"];

配列の先頭に要素を追加する

プログラム

var family= new Array("Taro", "Jiro", "Saburo");
// 配列の先頭にZero追加
var newLength = family.unshift("Zero");
console.log(family);

実行結果

["Zero","Taro","Jiro", "Saburo"];

要素のインデックスを取得する

プログラム

var family= new Array("Taro", "Jiro", "Saburo");
//要素のインデックスを取得
var ban = family.indexOf("Saburo");
console.log(ban);

実行結果

2

インデックス位置を指定して要素を削除する

プログラム

var family= new Array("Taro", "Jiro", "Saburo");
//インデックス位置を指定して1番目の要素のTaroを削除する
var removedFamily = family.splice(pos, 1);
console.log(family);

実行結果

["Jiro", "Saburo"];

配列をコピーする

プログラム

var family= new Array("Taro", "Jiro", "Saburo");
//配列をコピーする
var familyCopied = family;
console.log(familyCopied);

実行結果

["Taro", "Jiro", "Saburo"];

 

空の配列を定義する方法

空の配列とは、何も入っていない空っぽの配列を定義する事です。
最初に、空っぽの配列を定義する習慣を付けておくことで、不要なデータが混じらない配列操作につながります。

//空の配列を定義しています。
var family = new Array();
1番目の配列である、要素数0の配列にTaroを代入します。
msgArray[0] = "Taro";
100番目の配列である、要素数99の配列に、100roを代入します。
msgArray[99] = "100ro";

//配列の要素数が100存在する場合にconsole.logを実行
if (family.length === 100) {
  console.log("配列の length は 100 です。");
}

Arrayオブジェクトの任意の箇所を削除する

配列の任意の箇所を削除する場合は、delete文を使用します。

var array =["A", "B","C","D","E","F"]
//1番目の要素を削除
delete array[1];
//5番目の要素を削除
delete array[5];

 

多次元配列を作成してみよう

多次元配列とは、2つ以上の種類の要素を組み合わせて配列を作るものです。

JavaScriptでは、多次元配列用のメソッドは用意されていませんが、配列の中に配列を入れることで扱うことが可能です。

上記で説明してきた配列は以下のようなものです。

スクリーンショット 2016-07-21 19.53.12

一方で多次元配列は、次のようなものです。

スクリーンショット 2016-07-21 19.56.13

実際に配列の中にいくつか配列があるというプログラムを書いてみましょう。

var array = [
  [1,2,3],
  [4,5,6],
  [7,8,9]
];
var array1 = array[2];

array1という変数の中には、配列arrayの中にある2の要素に入っている値[7,8,9]という配列が代入されることになります。

多次元配列は、慣れるまでに多少時間がかかるかもしれませんが、使えるようになれば非常に便利でしょう。

 

JavaScriptの組み込み関数の記事は他に、JavaScriptでMathオブジェクトを使う方法もあるので合わせてご覧ください。

 

大石ゆかり

配列オブジェクトを生成すると、最初から組み込まれている、配列に関連した関数も使うことが出来るんですね。

田島悠介

そうそう。そういうのを裏側でやってくれていたりするんだよね。

大石ゆかり

スクリプト言語って裏側で色々動作してるんですね。後、多次元配列というのもあるんですね!

田島悠介

多次元配列はJavaScriptによるミニゲームのマップ何かにも使われるんだよ!書き方を工夫しておかないとわかりづらくなるから注意が必要なんだ。

 

JavaScriptの組み込み関数の1つ、JavaScriptでArrayオブジェクトを使う方法については以上です。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。