多次元配列をもっと簡潔に記述したい

Question

現在、サイトマップを作成するようなWEBサイトを作成しています。

クリックする度にツリー上にどんどん項目が増えていくのですが、これらを配列で管理しようと思ったところ、

      sitedata:[
        {
          id:1,
          title:'ページ1',
          child:[
            {
              id:1,
              title:'ページ1-1',
              child:[]
            },
            {
              id:2,
              title:'ページ1-2',
              child:[
                {
                  id:1,
                  title:'ページ1-2-1',
                  child:[]
                }
              ]
            }
          ]
        },
        {id:2,title:'ページ2',child:[]},
        {id:3,title:'ページ3',child:[]},
      ],

上記のようにネストだらけになってしまいました。現在、下層に行けば行くほどアクセスが困難な混乱状態になっています。

最終的にはローカルストレージに保存出来るようにしたいので、このような形にしたのですがもっと他に方法があるんじゃないかと思い投稿いたしました。

このままネストしながらでいいのか他に何か良い管理の仕方があればお伺いできればと思っています。

そもそもが間違えているかも知れませんが、お手数をお掛けしますがご教授頂けますと幸いです。

Answer 1

合理的かつ分かりやすい構造になっていると思います。

他に何か良い管理の仕方があれば

データをどのように取り扱うのかによります。
localStorageだと個々のブラウザにデータを持つことになるわけですが、
「サイトマップを作成するようなWEBサイト」というのがどういうことを指しているかわかりませんし、
JavaScriptの配列で作ってどのように使っていくのかが質問内容からはくみ取りが難しいです。

Comments

[labo]

見て頂いてありがとうございます！質問内容に不備があり失礼致しました！
これらの配列をループで取り出したかったのですが、何重にもネストされていて取得が難しいなと思いこのような質問になりました！

このまま作成を続けたいと思います！

[m.ts10806]

再帰処理を使えばそこまで難解にはならないと思います

[labo]

ありがとうございます！調べてやってみます！

Answer 2

例示の構造が最も効率的でアクセスしやすいものだと思います

Comments

[labo]

見て頂いてありがとうございます！そう言っていただけると少し自信が付きました！この配列でやっていきたいと思います！

Answer 3

気になる点

既にクローズされていますが、まだ考える余地が残っているように思われます。
まず、一見して気が付いた点がいくつか。

• 複数の子を持つので、child ではなく、children
• 名前から一意な識別子に読める id が複数存在 -> groupId or class に改名
• サイトマップなのに、URLがない
• URL基準で階層化する機構がない
• 階層化する基準が不明 -> リンクを辿った時の同線？
• 命名されているプロパティ名がDOMに似ている

要求仕様

要求仕様が不明なので、「私なら」という前提がつきますが。

• 階層化基準はリンクを辿る順番
• linkPathList プロパティを定義し、サイトマップ上の場所を表す(a>b>cの順で行く場合、/a/b/c のパス形式で表す。該当ページに複数のアクセス方法がある可能性がある為、linkPathは配列形式で複数格納)
• url プロパティを定義
• id は一意な識別子とし、getElementById に相当するAPIを用意する
• 必要であれば、グループ識別子となる classId も用意する(用途不明の為、詳細には触れず)
• localStrageには二次元配列をJSON化かして格納する
• localStrageから取り出す時には独自オブジェクト形式に変換する(class 構文を利用)

JSONではオブジェクトは {}, [] の二種類しか存在できない為、拡張性が貧弱です。
JSONから取り出したデータは中間オブジェクトと割り切り、APIを遣える形式に変換してやると扱いやすくなります。

実装案

具体的には下記の形式で localStrage に格納し、

const siteMapArray = [
  ['id','url','title','linkPathList'],
  ['root','http://example.com/','example',['/']],
  ['foo1','http://example.com/foo1.html','Hello, foo1!',['/foo1']],
  ['foo2','http://example.com/foo2.html','Hello, foo2!',['/foo1/foo2','/sitemap/foo2']],
  ['foo3','http://example.com/foo2/foo3.html','Hello, foo3!',['/foo1/foo2/foo3','/sitemap/foo3']],
  ['piyo','http://example.com/piyo.html','piyo, piyo!',['/piyo','/sitemap/piyo']],
  ['sitemap','http://example.com/bar.html','サイトマップ','/sitemap']
];

localStorage.setItem('siteMap', JSON.stringify(siteMapArray));

下記のように、DOM APIに似たインターフェースを持つ class SiteMap を定義します。

localStorage.setItem('siteMap', JSON.stringify(siteMapArray));

const siteMap = new SiteMap(JSON.parse(localStorage.getItem('siteMap')));

console.log(siteMap.getPageById('foo3').title); // "Hello, foo3!"
console.log(siteMap.getPageByLinkPath('/sitemap/piyo').title); // "piyo, piyo!"
console.log(siteMap.rootPage.url); // "http://example.com/"
console.log(siteMap.rootPage.children[0].children[0].linkPathList); // ['/foo1/foo2','/sitemap/foo2']

内部的には、id, linkPath をキーに持つ new Map を持っておけば、getPageBy*** を実装できます。
一次元データ、二次元データで持っておくと、なにがしかの識別子を元に検索するのが楽になります。
children の親子関係はlinkPathを元に検索して子を定義していくか、new Proxy でプロパティ参照される度に動的に探します。

Re: labo さん

Comments

[labo]

確認するのが遅くなり申し訳ございません！仕様まで考えて頂き恐縮です！
プロパティ名などもご指摘頂いて勉強になりました！urlやpathでたどるような方法も視野に入れて勉強したいと思います！

頂いた例をもとに一度試してみます！ありがとうございました！