今すぐマスターしたい!JavaScriptで配列を使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【配列】を使う方法を解説した記事です。配列では複数の値を入れて使いまわすことができます。応用として「lengthプロパティ」の使い方も紹介しています。

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

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

今回は、JavaScriptで配列を使う方法について解説します。

 

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

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

 

配列とは

配列について学ぶ前に、JavaScriptの変数について復習をしましょう。

変数とは、名前(変数名)をつけた箱に1つの値や文字列といったデータを入れて使い回すというものでした。

varで宣言し、次のように書きます。

var 変数名 = “値、文字列”;

次の変数のプログラムでは、 name という箱に入った Yamada という要素をconsole.logで呼び出しています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>はじめてのJavaScript</title>
  </head>
  <body>
    <script>
      var name = "Yamada";
      console.log(name);
    </script>
  </body>
</html>

Yamada

このように、変数には、データを1つしか入れられないのが基本です。

しかし、変数に背番号のようなもの(インデックス)を付けて拡張し、複数のデータを扱えるようにしたものがあります。これを配列(配列変数)といいます。

 

 

配列を実際に書いてみよう

配列では、ひとつの箱に複数の値を入れることができます。

今回は、family という箱の中に、Taro・Jiro・Saburo という3つの値(要素)を入れます。

※値は [ ]でくくります。

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

 

出力してみましょう。

<script>
  var family = ["Taro", "Jiro", "Saburo"];
  console.log(family);
</script>

family

family の中に、Taro・Jiro・Saburo の3つの値が入っていることが確認できました。

 

 

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

インデックスを指定して取得する

次に、各要素をインデックスを指定して個別に取得してみます。

どのように指定するかを説明します。

 

[ ]の中は、0をはじめとして、0,1,2,……と順に番号(インデックス)が振られている状態です。

ですので、例えば Jiro の値を取り出したい時は、次のように書きます。

<script>
  var family = ["Taro", "Jiro", "Saburo"];
  console.log(family[1]);
</script>

 

実行すると、Jiro が表示されました。

Jiro

 

今の説明を視覚的に表現すると図のようになります。

配列

 

 

要素に値を代入する

Saburo に Hanako という値を代入してみたいと思います。

Saburo は インデックス番号2なので、そこに =Hanakoを代入します。

<script>
  var family = ["Taro", "Jiro", "Saburo"];
  family [2] = "Hanako";
  console.log(family);
</script>

 

呼び出して確認してみると、確かに変わっていますね。

Hanako

 

 

配列のプロパティ

プロパティとは、そのまま「特性・特徴」という意味です。

配列を持つ変数名のあとに「.」に続けてプロパティ名を入れることで、プロパティに応じた情報を取得することができます。

 

ためしに、配列が持つプロパティをひとつ紹介します。

<length>

lengthプロパティ…配列の長さ、つまり要素数を取得することができます。

 

実際に使ってみると……

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

family の要素は Taro・Jiro・Saburo の3つなので、「3」が取得されました。

3

 

プロパティはほかにも様々な種類がありますので、用途に応じてぜひ使ってみてくださいね。

 

JavaScriptで配列を使う方法については以上です。

他にPHPの配列の記事もあるので合わせてご覧ください。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

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