プログラミングやWEB制作の勉強ならCANIT (キャニット)

【入門編6】JavaScriptの配列を使って複数データを扱おう

JavaScript入門

本記事ではJavaScriptの配列について解説します。

配列を使えると複数データを同時に扱うことが出来て便利です。

配列の作り方や配列からデータを取り出す方法、などをみていきましょう。

JavaScriptの配列とは?

配列とは、共通点のある複数のデータを格納したものです。

複数データを配列に格納することで、ソースコードが見やすくなります

たとえば、1から10までのデータを変数に格納すると

var number1=1;
var number2=2;
var number3=3;
var number4=4;
…
…

みたいな感じになりますよね。

しかしこれでは、コードの行数が多くなってしまいます。

また、変数もたくさん使うことになり、後で何の変数を定義したか、分からなくなりがちです。

配列を使えば、以下のように一行で書けます。

var numbers = new Array(1,2,3,4,5,6,7,8,9,10);

配列に格納すれば、このようにすっきりしますね。

また、配列に格納することで、格納したデータを一変に操作することが可能です。

たとえば、数値をまとめて2倍したり、まとめて削除したり、といったことができます。

配列を使うと、このようなメリットがあるのです。

JavaScriptの配列の使い方

それではJavaScriptの配列の使い方をみていきましょう。

ここでは以下の項目に分けて解説します。

  • 配列を作る
  • 配列にデータを追加する
  • 配列からデータを削除する
  • 配列のデータを検索する

これらを覚えれば、ひとまず配列の基礎は理解できます。

配列を作る

まずは配列を作る方法から解説します。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
document.write(list[0]);
</script>
</body>
</html>

○実行結果

配列を作る場合、

new Array({データ一覧})

というように記述します。

上記では「太郎」「花子」「二郎」という3つのデータを、list配列に格納しています。

このように記述すれば、配列は作成可能です。

配列のデータを取り出す場合は、「配列名[{データの位置}]」というように記述します。

上記では「list[0]」により、0番目の「太郎」を取り出していますね。

注意点ですが、プログラムでは1からではなく0から数えるのが基本です。

そのため0番目が、配列の一番最初になります。

また、配列のデータを全て取り出す場合は、for文を活用します。

○コード例

<script>
var list = new Array("太郎", "花子", "二郎");
for(var i=0; i<3; i++){
	document.write(list[i] + " ");
}
</script>

○実行結果

for文を使ってデータ位置を順に指定することで、配列の全てのデータを取り出しています。

配列にデータを追加する

つづいて、元からある配列にデータを追加する方法をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
list[3] = "綾子";
for(var i=0; i<4; i++){
	document.write(list[i] + " ");
}
</script>
</body>
</html>

○実行結果

データを追加する場合は、「list[3] = “綾子”;」というように記述します。

これは配列の3番目に「綾子」が格納されました。

このように、配列のデータ位置を指定すれば、その位置にデータを入れられます

配列からデータを削除する

逆に、配列からデータを削除する方法をみていきましょう。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
delete list[1];
for(var i=0; i<3; i++){
	document.write(list[i] + " ");
}
</script>
</body>
</html>

○実行結果


データを削除する場合、「delete文」を使います

delete 削除したいデータ;

このように記述することで、そのデータが削除されます。

上記の例ではlist配列の1番目のデータの「花子」を削除しています。

配列のデータを検索する

最後に配列のデータを検索する方法を解説します。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var list = new Array("太郎", "花子", "二郎");
document.write(list.indexOf("花子"));
</script>
</body>
</html>

○実行結果

データを検索する際は、「indexOf」というものを使います

配列名.indexOf({検索したいデータ})

と、記述することで、データの検索が可能です。

もしそのデータがある場合、データの位置を返します。

上記では、「花子」を配列から検索しています。

「花子」は1番目にあるため「1」が表示されていますね。

まとめ

本記事では、JavaScriptの配列について解説しました。

配列の作り方や削除方法、検索方法などがお分かり頂けたかと思います。

配列を使えるようになると、複数データを同時に扱えて便利なので、ぜひやり方を覚えてくださいね。

次回はJavaScriptのオブジェクトをみていきましょう。

❤内容は役に立ちましたか?皆さまのご意見が励みになります☺
YesNo
手に職をつけてプログラマー転職

そろそろ本気で将来のことを考えなくちゃ……手に職をつけてプログラマーやエンジニアに転職したいなぁ。でも、プログラミングスクールってものすごくたくさんあるし、なんか敷居が高いのよね

これからプログラマーやエンジニアへの転身を目指すあなたに、どのスクールがもっとも適しているのかを紹介します。

JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました