JavaScriptで連想配列のキーの存在チェックの方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで連想配列のキーの存在チェックの方法について現役エンジニアが解説しています。連想配列とは、キーと値を持ったデータ構造のことを指します。キーの存在チェックの方法には、if文でチェックする方法やin演算子を使用する方法があります。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptで連想配列のキーの存在チェックの方法について解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
目次
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで連想配列のキーの存在チェックの方法について詳しく説明していくね！
お願いします！
JavaScriptの連想配列とは
連想配列は、JavaScriptでデータを管理するときの構造の1つです。
値のみを並べる通常の配列とは違い、「キー」と「値」が一対の関係となって定義されています。
const data = {
キー1: 値1, //キー1にひもづく値は、値1である
キー2: 値2
}この構造のメリットは、「その値が何を意味するのかを明確にしてデータを管理できること」です。
例えば、あるWebサービスに登録されたユーザーの情報を連想配列にすると、以下の通りそれがどんな情報であるのか一目瞭然です。
const user = {
id: 1,
name: 'Taro',
age: '20'
email: 'xxxxx@xx.xx'
}
// *実際のサービスでユーザー情報を管理する際は、セキュリティに十分配慮しましょう。
連想配列の文法
名前こそ「連想配列」ですが、その文法はJavaScriptのオブジェクトそのものです。
通常の配列と異なり、[]ではなく{}で囲っている点に注意しましょう。
連想配列の値は、オブジェクトに対してキーを参照することで呼び出せます。
具体的には、.（ドット記法）で呼び出す方法と、[]（ブラケット記法）で呼び出す方法とがあります。
以下は連想配列から値を呼び出す一例です。
const fruits = {
apple: "りんご",
orange: "オレンジ"
}
//単純にキーの名前で呼び出すときは、ドット記法
fruits.apple //りんご
//変数を使ってキーを参照したい場合は、ブラケット記法
const key = "orange"
fruits[key] //オレンジ
連想配列のキーの存在チェックとは
「キーの存在チェック」についてイメージを持つために、まずは以下のコードを見てください。
const fruits = {
apple: {
name: "りんご",
price: "300"
}
}連想配列の値には、文字列や数値だけでなくオブジェクトを指定することもできます。
上記の例では、appleというキーに対して、nameとpriceのデータを持つオブジェクトが定義されていますね。
それでは、ここで以下のように呼び出すとどうなるでしょうか。
fruits.orange.price //Uncaught TypeError: Cannot read property 'price' of undefinedfruitsという連想配列にorangeというキーが存在しないため、「存在しないpriceなんて呼び出せない」というエラーが出ました。
※このエラーについての詳細な解説は、こちらの記事を参照してください。
こうしたエラーを避けるためには、処理を行う前にキーが実際に存在するのかチェックすると安全です。
それでは次の章で、具体的なキーの存在チェックの方法について見ていきましょう。
連想配列のキーの存在チェックの方法
連想配列のキーが存在するかを判定する一番シンプルな方法は、if文とin演算子を利用した記述です。
if (orange in fruits) {
//orangeというキーが存在する場合の処理
console.log(fruits.orange.price)
} else {
//orangeというキーが存在しない場合の処理
console.log("orangeの情報がありません")
}キー in オブジェクトの形式で判定することで、そのオブジェクトに指定したキーがあればtrue、なければfalseが返ります。
なお、従来の方法として、以下のような記述もあります。
if (fruits.orange) {
//存在する場合の処理
} else {
//存在する場合の処理
}
この方法の欠点として、”” (空文字)や0（ゼロ）もfalseとして判定されてしまう点があります。
const scores: {
total: 0
}
//このif文は、falseになってしまう！
if (scores.total) {
}
したがって、「キーの存在チェック」という目的においてはin演算子を利用すると安全です。
実際に書いてみよう
連想配列のキーの存在チェックが必要になるのは、参照するキーの内容が通信やユーザー操作によって変動する場合が多いです。
（最初から参照する内容が決まっているなら、存在しないというケースはなくなりますね。）
今回は、学校の先生が生徒のテストの点数を検索する際、検索した氏名にひもづくデータがあればその点数を表示し、なければ「検索結果がありません」と表示するプログラムを書いてみましょう！
動作イメージは次のとおりです。
それでは、実際のコードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text" id="student-name" placeholder="生徒の氏名を入力">
<button type="button" id="search">検索</button>
<script>
//検索欄を取得
const studentName = document.getElementById("student-name");
//検索ボタンを取得
const searchButton = document.getElementById("search");
//生徒の氏名にひもづく点数のデータ
const scoreData = {
//キーに日本語の文字列も指定できる
"田中": 90,
"鈴木": 80,
"佐藤": 70
}
//検索ボタンを押した時の処理
searchButton.addEventListener('click', () => {
//検索ワードを取得
const name = studentName.value;
//scoreDataにnameが指すキーが存在するかチェック
if (name in scoreData) {
console.log(`${name}さんの点数は、${scoreData[name]}点です`) }
else {
console.log("検索結果はありません")
}
})
</script>
</body>
</html>ポイントは、以下の部分です。
//scoreDataにnameが指すキーが存在するかチェック
if (name in scoreData) {
console.log(`${name}さんの点数は、${scoreData[name]}点です`) }
else {
console.log("検索結果はありません")
}
キー in オブジェクト の文法を利用して、氏名のキーが存在するかをチェックしています。
今回の解説は以上です！
| 高田悠（たかだゆう）
JavaScriptを用いた実装など、フロントエンド領域の開発が得意。 なかでもWeb上での3D表現に興味があり、これまでにWebAR（AR=拡張現実）の実装案件を複数経験。 ワークライフバランスを重視し、趣味の音楽活動や釣りを楽しみつつフリーランス生活を送っている。 |
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
テックアカデミーでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
