目次


JavaScript 言語入門, 第 4 回

配列

Comments

コンテンツシリーズ

このコンテンツは全7シリーズのパート#です: JavaScript 言語入門, 第 4 回

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:JavaScript 言語入門, 第 4 回

このシリーズの続きに乞うご期待。

Interactive code: When you see Run at the top of a code sample, you can run the code, check the results, make changes, and run it again.

編集者による注記: このシリーズは、対話式コーディング機能を追加して更新されています。コード・リストに「実行」ボタンがある場合、そのコードを実行して結果を確認し、コードを変更してから再度実行して、その成果を確認できることを意味します。

配列は変数と似ていますが、1 つの名前の下に複数の値および式を保持できるという点で異なります。配列を強力なものにしているのは、複数の値を 1 つの変数に格納できるところです。JavaScript 配列に格納できるデータには、量の制約も、型の制約もありません。さらに、配列をスクリプト内で宣言した後は、宣言したスコープ内にある限り、配列に含まれるすべての要素のあらゆる値に随時アクセスすることができます。

同様のデータを格納する配列

配列には、JavaScript 言語で使用できる任意のデータ型、さらには他の配列も保管することができますが、最も一般的な使用方法は、同様のデータを 1 つの配列に格納し、配列にはそこに含まれる要素に関連する名前を割り当てることです。以下に、2 つの別個の配列を使用して、それぞれに同様のデータを格納する例を記載します。

同様の値を配列に格納する
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");

上記の要素はすべて 1 つの配列に格納することも可能ですが、そうすると論理的ではなくなり、あとで例えば配列内のデータを識別する場合などに問題が生じる可能性があります。

配列に含まれる値にアクセスするのは簡単ですが、そこには 1 つの罠があります。それは、配列では常に ID は 1 ではなく 0 から始まることです。最初のうちは混乱しがちですが、ID は 0 から始まって、例えば 0、1、2、3 のようにインクリメントされていきます。配列の要素にアクセスするには要素の ID を指定し、それによって配列内でのその要素の位置を参照する必要があります。以下に、同様の値を格納する配列の例を記載します。

挑戦!

挑戦アイコンまず、「実行」をクリックして、以下のコードをそのまま実行した場合の結果を確認します。その上で、配列の要素 [0] ではなく、最初の要素 [1] を代入するようにコードを変更してください。

Show result

特定の要素に値を代入する配列

配列内の要素を指定して、その値を代入または更新することも可能です。それには、前に配列の要素にアクセスしたときと同じように行います。以下の例で、配列の特定の要素に値を代入する方法を確認してください。

挑戦!

挑戦アイコン まず、「実行」をクリックして、以下のコードをそのまま実行した場合の結果を確かめます。次に、コードをいろいろと変更して、どのような結果になるのかを確認してください。

Show result

配列のプロパティーとメソッド

配列で重要となるプロパティーとメソッドには、以下があります。

.push 
//Add a new element to the end of the array

.length
//Prints the length of array

.pop
//Removes the element at the end of the array

.reverse
//Reverses the order of elements in the array

.sort
//Sorts the elements of an array

挑戦!

挑戦アイコンこの演習では、変数に学生を代入した上で、push、length、pop、reverse、および sort メソッドを使って配列を操作します。

Show result

まとめと次のステップ

以上で、変数、演算子、配列については十分に理解できたはずです。次回は、今までに学んだ知識を実践に移し、条件文を使用してロジックを作成する作業に取り掛かります。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=1049312
ArticleTitle=JavaScript 言語入門, 第 4 回: 配列
publish-date=09072017