.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. Javascript
  5. JavaScriptでの連想配列の使い方!多次元配列と連想配列の違い

JavaScriptでの連想配列の使い方!多次元配列と連想配列の違い

  • Javascript
  • プログラミング言語
公開日時:   更新日時:
JavaScriptでの連想配列の使い方!多次元配列と連想配列の違い
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    システム
    エンジニア
    「連想配列」というデータ構造について詳しく教えてください。
    プロジェクト
    マネージャー
    まず「オブジェクト」と「配列」についての理解から始めましょう。

    JavaScriptではじめる「連想配列」


    「連想配列」はJavaScriptに限らず、プログラムでデータをあつかうための重要かつ便利なデータ構造です。連想配列を利用することでプログラミングの世界観が変わり、コーディングの効率化だけでなくデータベース設計や連携も意識するようになります。

    JavaScriptでも「連想配列」をあつかえるので、その基本的な内容について解説します。

    オブジェクトと配列とは?

    「連想配列」を説明する前に、まず「オブジェクト」と「配列」について理解しておく必要があります。オブジェクトはプログラムであつかうデータの最小単位です。配列もオブジェクトの1つですが数字の「インデックス(Index)」と「値」から構成されるデータの集合です。

    では、まずJavaScriptで配列を宣言して操作してみましょう。

    配列を宣言する

    JavaScriptの配列は「[]」ブラケットで宣言ができ、値を設定する場合は、[value1, value2, …]と記述します。例えば「どうのつるぎ」「かわのたて」「かわのぼうし」といった3つのアイテム名を配列で宣言すると以下のようになります。

    配列をインデックス(Index)で指定する

    配列には「0」からはじまる整数の「インデックス(Index)」をもちます。配列のインデックスをキーと呼ぶこともありますが、ここではインデックスとします。例えば配列「name_array」から「かわのたて」を取得するには、2番目のインデックスである「1」でアクセスします。

    値段の配列を指定する

    同じ要領で3つのアイテムの値段を「150」「80」「100」の配列で宣言し、インデックス「1」でアクセスします。

    多次元配列とは

    多次元配列は、配列の中に配列を入れるデータ構造をいいます。例えば3×3の行列をJavaScriptの配列で宣言するコードは以下のようになります。

    オブジェクトを宣言する

    つぎにJavaScriptのオブジェクトを作成します。空のオブジェクトを作成するには以下のように「{}」ブラケットで宣言します。

    オブジェクトをまとめて宣言する

    さて、ここでアイテム名「どうのつるぎ」「かわのたて」「かわのぼうし」と、値段「150」「80」「100」をまとめて宣言するにはどのようにすればいいでしょうか。

    多次元配列でも処理できますが、さらにわかりやすくするには今回の本題「連想配列」を利用すると便利です。

    連想配列とは

    それでは連想配列を利用してみましょう。連想配列は通常の配列のような数字の「インデックス(Index)」ではなく「キー(key)」を利用して変数を宣言し、キーは数字でなくても構いません。

    また連想配列は「key(キー)」と「value(値)」で宣言するため「key-valueオブジェクト」や「Dictionary」とも呼ばれます。

    連想配列のルール

    連想配列の宣言はいくつかのルールがあります。連想配列の宣言は、配列の「[]」ブラケットでなく、オブジェクトの「{}」ブラケットで表記します。JavaScriptの連想配列と配列のアクセス方法を混同しないようにしましょう。

    つぎに、キー(key)と値(value)は「:」(コロン)で区切った「key : value」のペアで記述します。そしてペアが増えるごとに「,」(カンマ)で区切って複数指定します。キーは「””」「”」で囲んでも構いません。まとめると以下のようになります。

    連想配列を宣言する

    まずはアイテム名「どうのつるぎ」について考えてみます。連想配列の作成は「キー(key)」「値(value)」を「:」で区切るため、キーを「name」と定義し、値を「どうのつるぎ」とすると以下の連想配列で表せます。

    連想配列の値を取得する

    JavaScriptのプロパティのアクセス方法は「オブジェクト.プロパティ名」で指定します。連想配列も同様に「連想配列.キー」で指定します。「.」はJavaScriptのオブジェクトにアクセスする重要な記述です。

    例えば、itemから「どうのつるぎ」を取得するにはキーを「name」と定義したため「item.name」でアクセスします。ただし例外的に変数でキーを指定する場合、item[変数]と「[]」ブラケットでアクセスしなければいけません。

    連想配列にキーと値を追加する

    連想配列に新たなキーと値を追加するには「連想配列.キー = 値」となります。連想配列に既にキーが存在する場合は値を更新します。

    例えば値段(price)が150の場合は、以下のように設定します。

    連想配列の一覧を考える

    連想配列の基本が理解できたら、3つの連想配列のアイテム一覧を配列で考えてみましょう。表にまとめると以下のようになります。

    index name price
    0 どうのつるぎ 150
    1 かわのたて 80
    2 かわのぼうし 100

    連想配列を変数に定義する

    「どうのつるぎ」「かわのたて」「かわのぼうし」をアイテム名、値段でそれぞれ連想配列にすると以下のようになります。ただ連想配列を1つずつ変数で宣言しているため冗長的です。

    連想配列の一覧を配列にまとめる

    つぎに各連想配列を配列にまとめてみましょう。アイテム一覧の配列「items」を作成し、連想配列をそれぞれ格納すると以下のように宣言できます。

    連想配列の一覧にアクセスする

    連想配列の一覧(配列)の中は複数のデータが入っていますが、配列のインデックスと連想配列のキーで指定できます。例えば「items」からアイテム名、値段を取得するには以下のようになります。

    多次元配列をループ処理する

    もう少し実践的に配列をループ処理してみましょう。JavaScriptのループはさまざまな種類がありますが、今回はforEach()を利用して多次元配列と連想配列の配列を比較してみます。

    多次元配列をループ処理する場合、配列のインデックスを意識する必要があります。計算上都合がよい場合もありますが、何のデータを操作しているか視覚的にわかりにくい傾向にあります。

    連想配列の配列をループ処理する

    つぎに連想配列と配列を利用したデータ構造の場合はどうでしょうか。連想配列の一覧を配列にまとめたデータをループ処理してみます。

    ループの中が連想配列のため「name」や「price」でアクセスすることで視覚的にもわかりやすくなります。これはオブジェクト指向を意識したコードといえます。

    システム
    エンジニア
    「オブジェクト」はデータの最小単位、「配列」はデータの集合なんですね。
    プロジェクト
    マネージャー
    非常に実践的な内容ですので、実際に書いて理解を深めていくことが重要です。

    JavaScriptの連想配列への理解を深めよう

    「連想配列」はJavaScriptに限らず、どのプログラミング言語においても重要かつ実践的なデータ構造です。

    配列、オブジェクト、連想配列といったさまざまなデータ構造は、実際に手を動かすことで理解がより深まるので、いろいろなプログラミングに挑戦してみましょう。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job