Nuxt.jsでオブジェクトのプロパティを動的に参照する方法

はじめに

日々の開発の中で、JavaScriptやNuxt.jsでオブジェクトのプロパティを動的に参照するという状況に遭遇することはよくある。この記事では、その一例として、数値型のキーを持つオブジェクトから特定のプロパティを動的に取得しようとした際に遭遇した問題とその解決策を共有する。

問題の詳細

例えば、以下のようなオブジェクトがある。

javascript

let items = {
  units: { "1": "cm", "2": "m" }
};

また、以下のようなフォームデータがあるとする。

javascript

let formData = {
  unit: 1  // または 2
};

ここで、Nuxt.jsのテンプレートで {{ items.units[formData.unit] }} のように、値を参照して表示しようとした時、「cm」の表示を期待したが、されなかった。

問題解析

JavaScriptでは、オブジェクトのキーは文字列として扱われる。しかし、数値をキーとして使用すると、JavaScriptが内部で数値を文字列に自動的に変換する。このため、私のコードでは数値型の formData.unit が文字列型のキーを持つ items.units オブジェクトに対して正しく参照されなかったようだ。

解決策

ここで、Number() を使用して formData.unit を明示的に数値に変換し、その後プロパティにアクセスしてみた。

html

{{ items.units[Number(formData.unit)] }}

このコードでは、formData.capacityUnit を明示的に数値に変換してからプロパティへのアクセスを行っている。

まとめ

この記事では、JavaScriptとNuxt.jsで数値型のキーを持つオブジェクトのプロパティを動的に参照する際の問題とその解決策について解説した。暗黙の型変換が期待通りに動作しない場合、明示的な型変換を試みることで問題が解決する可能性がある。これはJavaScriptの動的型付けによる特性を理解し、適切に対応するための一例かなと思う。

・JavaScriptのオブジェクトのキーは文字列として扱われる。
・数値をキーとして使用すると、JavaScriptは内部で自動的に文字列に変換する。
・暗黙の型変換は常に期待通りの結果を生むわけではない。
・明示的な型変換を行うことで問題を解決することができる。