オブジェクトの中のオブジェクトにアクセスしたい

Question

JavaScriptで変数の作成の仕方で分からないところがあり質問させていただきました。
下のようなオブジェクトを作成していまして、food.fruitsで「フルーツ」という文字列、fruits.appleで「りんご」という文字列にアクセスできます。

const food = {
  fruits: 'フルーツ'
};

const fruits = {
  banana: 'バナナ',
  apple : 'りんご',
  orange: 'みかん'
};

今このオブジェクトは別々なのですが、これを一つにまとめて、

• food.fruitsで、「フルーツ」という文字列
• food.fruits.appleで、「りんご」という文字列

にアクセスできればなと思っております。

下のような形で作成してみたのですが、これはエラーが出てしまいました・・・

const food = {
  fruits = 'フルーツ',
  {
    banana: 'バナナ',
    apple : 'りんご',
    orange: 'みかん'
  }
}

いろいろ試してみたのですが、良い方法が分からず困っております。
もし詳しい方がいらっしゃいましたらご教授いただけますと助かります。
よろしくお願いいたします。

Comments

[thyda.eiqau]

オブジェクトの中のオブジェクトにアクセスしたい、という命題は、food.fruitsというオブジェクトにアクセスしたいという事ですよね。
> food.fruitsで「フルーツ」という文字列
というのは、food.fruitsがオブジェクトではなく文字列であることを求めていますが、ここの矛盾についてはどうお考えでしょうか。

Answer 1

良い方法が分からず困っております

ベストプラクティスを知りたいということですね。
データの持ち方として「一貫性を持たせる」事が重要になります。

一つの変数・プロパティは一つの値「文字列 or オブジェクト」しか格納できませんので、
名前と子供要素の両方が持ちたければ下記のような「名前」と「子孫」を定義して一生深く掘っていく仕組みを作るのが良いでしょう。

const food = {
  name: '食べ物',
  children: {
    fruits: {
      name: 'フルーツ',
      children: {
        banana: {
          name: 'バナナ',
          children: {}
        },
        apple : {
          name: 'りんご',
          children: {}
        },
        mandarin: {
          name: 'みかん',
          children: []
        },
      }
    }
  }
}

いやちょっとまって？
これ使いにくいでしょ？

私はfood.fruitsで"フルーツ"を取り出したいのに、
なんでfood.children.fruits.nameにしなきゃいけないんだ？

フルーツはまだいいわ
food.fruits.appleで"アップル"に辿り着こうと思ったら
food.children.fruits.children.apple.nameとかありえんわ！

こうなると思います。

---

ではどうするか？
検索関数もセットで準備しましょう。

// childrenを再帰的に掘っていく関数を実装
const getItem = (list, path) => {
  const paths = path.split('.');
  // パスかリストのどちらかを掘り終えたら検索終了
  if (!paths[0]) return list;
  if (!list.children) return {};

  // null値やundefined値はプロパティを所持していないので
  // アクセスを試みた時点でエラーとなる現象を回避する為に空のオブジェクトを返させる
  const result = list.children[paths[0]] || {};

  // 先頭要素だけ消し飛ばして更に子供要素に入っていく
  return getItem(result, paths.slice(1).join('.'));
}

// food.fruits.appleで検索したいのでlistという変数を作って更にネストさせる
const list = {
  name: 'リスト',
  children: {
    food: {
      name: '食べ物',
      children: {
        fruits: {
          name: 'フルーツ',
          children: {
            banana: {
              name: 'バナナ',
              children: {},
            },
            apple: {
              name: 'りんご',
              children: {},
            },
            mandarin: {
              name: 'みかん',
              children: {},
            },
          }
        }
      }
    }
  }
}

console.log(getItem(list, "").name); // リスト
console.log(getItem(list, "food").name); // 食べ物
console.log(getItem(list, "food.fruits").name); // フルーツ
console.log(getItem(list, "food.fruits.apple").name); // りんご

// 洒落た出力がしたければこんなテストも出来る
console.log(JSON.stringify(
  ["", "food", "food.fruits", "food.fruits.apple"].map(
    path => getItem(list, path).name
  ), null, 2
));
// [
//   "リスト",
//   "食べ物",
//   "フルーツ",
//   "りんご"
// ]

---

【おまけ】 これで良くねという別解

Mapやオブジェクトのキーには別にコロン.等の文字列を含めても構いません。

const list = {
  "food": "食べ物",
  "food.fruits": "フルーツ",
  "food.fruits.apple": "りんご",
  "food.fruits.banana": "バナナ",
  "food.fruits.mandarin": "みかん",
}

console.log(list["food.fruits.apple"]); // りんご

// 子供要素の一覧を検索出来る関数も作ってみた
const filterChildren = (list, path) =>
  Object.keys(list).filter(key => key.indexOf(path + '.') == 0);

console.log(filterChildren(list, "food.fruits"));
// ["food.fruits.apple", "food.fruits.banana", "food.fruits.mandarin"]

これで良いじゃんと、代替案も添えて提案するのも出来るエンジニアの仕事の一つです。

Comments

[takopo]

ご回答ありがとうございます！
このような方法があるのですね。
こちらの拙い質問にも関わらず、ここまで詳しくお教えいただいて感動しております。
書いていただいた内容は私にとってはレベルが高すぎてついていけない部分があるのですが、少しずつ読み解いていこうと思います。
大変勉強になりました。ありがとうございました。

[miyabi-sun]

コードは上級者が即納品出来るようなレベルでサラッと書いてます。
なのでちょっと大変かも知れませんね。

まずはfor文で同じ挙動をするようなコードを頑張って書いてみてください。

Answer 2

そのアクセスの仕方は不可能です
fruitsが文字列なら、文字列からappleプロパティはアクセスできません

Comments

[yambejp]

あえてやるなら、Stringオブジェクトを利用するとか・・・

const food = {
fruits:Object.assign(new String('フルーツ'),{
banana: 'バナナ',
apple : 'りんご',
orange: 'みかん',
}),
};
console.log(food.fruits);
console.log(food.fruits.apple);

[takopo]

ご回答ありがとうございます。
オブジェクトについて間違った認識をしておりました。
書いていただいたコードでうまくアクセスできたのですが、
オブジェクトについてきちんと調べて、他のアクセスの仕方を考えてみたいと思います。

Answer 3

可能か不可能かで言ったら可能ですが、推奨できません。オブジェクトならオブジェクト、文字列なら文字列で固めるべきです。
もし私がチームメンバーがこんなコードを書いていたら、二度とその人とは一緒のプロジェクトに入りたくないと思うでしょう。

const food = {fruits: (()=>{
  const str = new String('フルーツ');
  str.apple = 'りんご';
  return str;
})()};
document.write(`<p>${food.fruits}</p>`);
document.write(`<p>${food.fruits.apple}</p>`);

Comments

[thyda.eiqau]

document.writeを使っているのはスマホからCodePenで検証コードを書いていてConsoleが見られなかったからです。document.writeを使うのも推奨できません。

[takopo]

ご回答ありがとうございます。
おっしゃる通り確かに考え方が間違っておりました・・・
ご回答いただいたコードはとても素晴らしくうまくいきましたが、改めてもう一度考え直してみたいと思います。

[yambejp]

codepenにもconsole機能は一応あります。
ただhtmlに表記したほうが確かにわかりやすいと思います。
document.writeするより特定のタグのtextContentを書き換えたほうが
より汎用性が高いかもしれません