JavaScriptを使ってプログラミングをしていると、データをまとめて管理したい場面がたくさんあります。
そんな時に便利なのが連想配列ですが、いざデータを追加しようとすると書き方に迷ってしまうことも多いですよね。
基本となる2つの書き方を覚えてしまえば、誰でも簡単にデータを追加できるようになります。
この記事ではJavaScriptの連想配列にデータを追加する方法について解説していきます。
連想配列にデータを追加する2つの基本構文
JavaScriptの連想配列にデータを追加する方法は、大きく分けて2つの書き方があります。
1つ目はドット記法、2つ目はブラケット記法と呼ばれる書き方です。
どちらも目的は同じですが、状況に合わせて使い分けるのがポイントになります。
まずは基本的な書き方をしっかり覚えて、自分のプログラムで使えるようにしていきましょう。
- ドット記法はシンプルで書きやすい
- ブラケット記法は柔軟な書き方ができる
- 状況に合わせて2つを使い分けることが大切
まずはこの2つの名前だけでも覚えておいてください。
それぞれの具体的な使い方をマスターすればコードを書くのが楽しくなります。
直感的に書けるドット記法によるデータ追加
一番よく使われるのが、ドットで繋いでデータを追加するドット記法です。
書き方がとてもシンプルなので、プログラムをパッと見た時に分かりやすいというメリットがあります。
具体的な書き方は、連想配列の名前の後にドットを書いて、追加したいキーの名前を指定します。
let user = {};
user.name = "太郎";
user.age = 20;このように書くだけで、連想配列の中に新しいデータが追加されます。
- 書き方がシンプルで短く済む
- 後からコードを読んだ時に理解しやすい
- キーの名前が決まっている時に一番おすすめ
通常のデータ追加であれば、迷わずドット記法を使いましょう。
ほとんどの場面でこの書き方が活躍してくれます。
変数を使いたい時に便利なブラケット記法
もう1つの方法が、カッコを使ってデータを追加するブラケット記法です。
ドット記法の方が簡単なのですが、キーの名前を変数で指定したい時や、キーに記号が含まれている時にはブラケット記法を使わなければいけません。
let user = {};
let keyName = "age";
user[keyName] = 20;
user["first-name"] = "太郎";このように、カッコの中に文字列や変数を入れて指定します。
- 変数の中身をキーとして使うことができる
- ハイフンやスペースなどが入ったキーでも追加できる
- プログラムを動かしながらキーを決めたい時に便利
ドット記法でエラーになってしまう時は、ブラケット記法を試してみてください。
この2つを使いこなせれば、連想配列の操作はバッチリです。
連想配列にデータを追加する際の注意点
連想配列にデータを追加する時、少しだけ気をつけておきたいポイントがあります。
それは、追加しようとしている大元の連想配列が作られていないとエラーになるということです。
空の連想配列すら用意されていない状態では、ドット記法を使ってもデータを追加することができません。
let user;
user.name = "太郎";
// ここでエラーになりますエラーを防ぐためには、必ず最初に空の波カッコを使って連想配列を作っておく必要があります。
- データを入れる前に変数を初期化しておく
- すでに同じキーがある場合はデータが上書きされる
- スペルミスに気をつけてキーを指定する
同じキーを指定するとエラーにはならず、中身が書き換わってしまうので注意しましょう。
プログラムが動かない時は、まず変数の中身を確認するのがコツです。
連想配列のデータ追加に関するよくある質問
JavaScriptの連想配列を使っていると、いろんな疑問が出てくると思います。
ここでは、プログラミング初心者の方がよくつまずくポイントをQアンドA形式でまとめました。
自分の疑問と同じものがないか、ぜひ確認してみてくださいね。
- 連想配列と配列の違いは？ キーが文字列か数字かという点です
- 複数のデータを一気に追加するには？ Object.assignなどが使えます
- 連想配列の中身を確認したい時は？ console.logを使うのが便利です
配列と連想配列がごっちゃになりやすいので、違いを意識しながら書きましょう。
まずは1つずつデータを追加する基本を完璧にするのがおすすめです。
プログラミングを本格的に学ぶならスクールがおすすめ
ここまでJavaScriptの連想配列について解説してきましたが、いかがでしたでしょうか。
独学で勉強していると、どうしても分からないところで手が止まってしまうことがありますよね。
そんな時は、プロから直接教わることができるプログラミングスクールの活用を検討してみてください。
分からないことをすぐに質問できる環境があれば、学習のスピードは格段に上がります。
- 専属のメンターが学習を徹底的にサポートしてくれる
- 実践的なカリキュラムで即戦力となるスキルが身につく
- 就職や転職に向けたアドバイスも受けることができる
無料体験や無料カウンセリングを実施しているスクールも多いので、まずは相談してみるのがおすすめです。
あなたの目標に合わせて、最適な学習環境を選んでみてください。
DMM WEBCAMP 学習コース（プログラミングコース）
Skill Hacks
CodeCamp
JavaScriptの連想配列への追加方法まとめ
最後に、今回学習した連想配列へのデータ追加方法について振り返っておきましょう。
基本となるのはドット記法とブラケット記法の2種類でしたね。
どちらもJavaScriptのプログラミングでは毎日のように使う書き方なので、しっかりマスターしておいてください。
状況に合わせて最適な書き方を選ぶことが、上達への第一歩になります。
まずは自分の手でコードを書いてみて、どのように動くのかを確認してみてくださいね。
今日学んだことを活かして、ぜひオリジナルプログラムを作ってみてください。
少しずつできることを増やして、プログラミングを楽しんでいきましょう。
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
