.net column

.NET開発者のためのブログメディア

JavaScriptの配列の宣言とは?様々な生成方法を紹介

2020年06月04日

SE
JavaScriptの配列の宣言とは、どのようなものなのでしょうか?

PM
数値や文字列、オブジェクトなどを、いくつか一纏めにして順序付けて管理するためのデータ構造です。

JavaScriptの配列の宣言とは?

配列とは数値や文字列、オブジェクトなどを、いくつか一纏めにして順序付けて管理するためのデータ構造です。JavaScriptにも配列は備わっており、様々なケースで利用します。JavaScriptは動的型付けを持つ言語ですので、明示的に「配列を使う」と宣言する必要はありません。変数を定義して、そこに配列を割り当てるだけで配列を使用できるようになります。この記事では配列を使うにあたり、最初に必要となる宣言に該当するような初期化方法や、初期化の際に必要となる最初の配列の生成方法をご紹介します。

JavaScriptの配列の宣言方法

早速、変数に配列を割り当て、配列を扱えるようにしてみましょう。

let 変数 = []のように空の配列を表す[]を変数に割り当てることで、以降はその変数を配列として扱うことができます。上記の例は変数の宣言と同時に配列を割り当て、変数を配列として扱うと宣言的に記述していますが、JavaScriptは動的型付け言語ですので、必ずしも変数の宣言と同時に配列を割り当てる必要はありません。以下のように変数にnullや数値などを割り当てておいて、後で配列を割り当てることも可能です。

しかし、変数に割り当てられた値の型がプログラムの途中で変わるというのは、複雑で理解し難い処理を生み出すことになってしまいます。配列を扱う場合に置いても、上記のように変数の宣言と同時に配列を割り当てるか、変数に配列であることがわかりやすい名前を付けてnullで初期化しておき、変数宣言のすぐ後に配列を割り当てるべきです。

様々なJavaScriptの配列の生成方法

先ほどは変数を宣言し、[]で空の配列を変数に割り当てました。しかし配列は要素の入れ物です。空では役に立ちません。JavaScriptでは、最初から要素を持った配列を生成することもできます。その方法には様々なものがありますので、以下で紹介していきます。

要素を直接記述して生成する

JavaScriptでは[]で要素を囲んだものを配列として扱います。

上記の例では要素に""dog""という文字列を一つもつ配列を、変数arrayに割り当てています。複数の要素を指定する場合は、カンマ,で区切ってそれらを列挙します。

上記のようにすることで、""dog""""cat""""frog""という3つの文字列を要素に持つ配列を、変数に割り当てることができます。なお、最初に[]で囲ったものは配列だ、と説明しましたが例外があります。以下のコードを見てください。

式の右辺の[1, 2]は配列ですが、左辺の[a, b]は配列ではありません。これは分割代入という機能で、実行すると変数aに1が、変数bに2が代入されます。配列を利用して複数の変数に一度に値を割り当てる書き方ですので、左辺を配列と混同しないように注意してください。

他のオブジェクトのメソッドを使用して生成する

JavaScriptで扱う様々なオブジェクトには、配列を生成するメソッドを持つものがあります。ここではそれらのメソッドの中からよく使われるString.prototype.split()メソッドを紹介します。String.prototype.split()は文字列を分割して配列に格納するメソッドです。以下のように使用します。

これを実行すると、文字列はsplitメソッドの引数で指定した半角スペースで分割され、変数arrayには[""JavaScript"", ""is"", ""a"", ""programming"", ""language.""]という配列が代入されます。URL文字列の一部分やディレクトリパスを表す""/example/scripts/my-app.js""などの文字列をスラッシュ/で分割したり、電話番号を表す""0123-456-7890""のような文字列をハイフン-で分割して、市外局番の部分のみ取り出す、といったような使い方ができます。

Array.from()を使用して生成する

少し複雑なケースを考えてみます。オブジェクトを作成して、そのdataプロパティに初期値として256個の数値0を要素に持つ配列を設定したいとします。どのようにプロパティの初期値に256個もの要素を持つ配列を設定するべきでしょうか?[0, 0, 0, ...]のように256個の0をカンマで繋げて記述するのはナンセンスです。一般的には以下のようにするでしょう。

まず空の配列dataArrayを宣言して、それからforループで配列に0を256個追加しています。そして、オブジェクトを作成する際に、dataプロパティの値として作成したdataArrayを設定しています。もちろんこれでも問題はありませんが、dataArrayを作成してからオブジェクトの作成までに多くの他の処理も記述しなければならない場合などに、dataArrayの作成部分を見ただけでは何に使うものなのか分かり辛いことになるでしょう。その逆で、オブジェクトの作成部分だけ見た場合にもdataArrayがどこで作成されていてどんな内容なのかはわかりません。オブジェクトのプロパティの設定と同時に配列を生成できればこの問題は解決します。そのためにはArray.from()というメソッドを使用して、以下のようにします。

Array.from()は他の配列や、リスト形式のオブジェクトなどから新たに配列を生成するメソッドです。上記の例では第一引数に{length: 256}という、lengthというプロパティに256が設定されたオブジェクトが指定されています。実は、Array.from()に渡す元となるオブジェクトには、lengthというプロパティがあればよいのです。長さを表すlengthプロパティの値の回数分、第二引数に渡された関数を実行して、その結果を生成する配列の要素として順番に設定します。例では、アロー関数で() => 0という常に0を返す関数を指定しているので、256回これが実行されて256個の0を要素に持つ配列が生成されています。

ジェネレーターを使用して生成する

先ほどは、要素すべてが0の配列をArray.from()メソッドを使用して生成しました。しかし、もう少し複雑な場合はどうでしょうか。例えば、ある文字列のASCIIコードを16進数形式で一つの文字列として格納している文字列があるとします。これをASCIIコードで一文字分、つまり16進数文字列を2文字ずつに区切ってそれらを要素とする配列を生成してオブジェクトのプロパティに設定したいとします。

この場合でもlet dataArray = [];と、まず別の変数を初期化してから文字列を2文字ずつ分割して配列に格納し、その後でプロパティの値に変数を指定すれば実現できます。しかしArray.from()とジェネレーターを使用して、以下のようにプロパティの値の設定と同時に配列を生成することも可能です。

Array.from()は引数にジェネレーターオブジェクトを受け取ることも可能です。ジェネレーターとは「順序付けられた要素を生成するオブジェクト」というニュアンスで、次々と値を取り出すことができます。ジェネレーターはジェネレーター関数を実行することで作成できます。ジェネレーター関数は一般的な関数とは違いfunction*という構文を使って記述します。上記の例ではfuction* () { for(...) { yield ...; }という無名のジェネレーター関数を作成し、その中で文字列を2文字ずつ切り出しています。そしてその無名のジェネレーター関数を(function* ...)()というように、その場で実行してジェネレーターを生成し、Array.from()の引数に渡しています。このようにジェネレーターを利用して、多様な要素を持つ配列を生成することも可能です。

SE
JavaScriptでは、さまざまな配列生成方法があるのですね。

PM
そうですね。さまざまなパターンをご紹介したので上手く利用してみましょう!

配列の生成方法を使い分けよう

変数の宣言と同時に配列を初期化する方法から、様々な配列の生成方法をご紹介してきました。中にはジェネレーターを利用した複雑に見えるものもありました。ジェネレーターを利用したのは、配列リテラルで[""4A"", ""61"", ""76"", ..., ""2E""]というようにコードを書くのは間違いが起こったり、可読性が低くなると判断したためです。これがもし、要素を3つしか持たないなど単純なケースの場合は、配列リテラルで記述した方がよいでしょう。この記事で紹介したように、JavaScriptの配列の生成方法には色々なものが考えられます。コードが複雑になり過ぎないように、またコーディングの際に要素数の間違いなどが起こらないように、ぜひ適切な配列の生成方法を考えてみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)