タグ機能実装におけるfilter()の使い方について

Question

現在ブログアプリのようなものを作ろうと考えています。
記事を追加する際に記事のタグをthis.state.allTagsから選択し、選ばれたものをselectedTagsに格納し
投稿が完了した段階でselectedTagsのcountを+1してallTagsの該当タグに上書きをしたいと考えています。

this.state = {
      allTags,
      selectedTags: [],
}

// allTagsはタグ登録フォームから追加され、この配列に新しく加わります
allTags = [
 {
    tagText: 'javascript',
    count: 16,
  },
  {
    tagText: 'react',
    count: 12,
  },
  {
    tagText: 'react-native',
    count: 14,
  },
  {
    tagText: 'redux',
    count: 8,
  },
];


// 他のコンポーネントからchildTagsとして['react','redux']のような選択したタグのtagTextの配列が送られてきます
updateTagCount = childTags => {
    let selectedTags = [];
    let unselectedTags = [];

    for (let i = 0; i < childTags.length; i++) {
      selectedTags = this.state.allTags.find(t => t.tagText === childTags[i]);

　　　 selectedTags.count++;
      
      unselectedTags = this.state.allTags.filter(
        t => t.tagText !== childTags[i],
      );
    }
    const { tagText, count } = selectedTags;
    this.setState({
      allTags: [...unselectedTags, { tagText, count }],
    });
  };

一応上記のコードで実現したいことはできるのですが、unselectedTagsとして出力されるのが、childTags[i]の最後の配列の要素だけなので、このやり方は正しいやり方ではない気がしています。
もし何かもっとスマートなやり方等の意見がありましたら、アドバイスいただけますでしょうか。
よろしくお願いいたします！

Answer 1

要するにchildTags内のすべてのタグについてallTagsの対応するcountをインクリメントしたいということでしょうか？(mutationなしで)

for文を使うパターン

updateTagCount = childTags => {
  const newTags = []
  for (const tag of this.state.allTags) {
    const { tagText, count } = tag
    if (childTags.includes(tagText)) {
      newTags.push({ tagText, count: count + 1 })
    } else {
      newTags.push(tag)
    }
  }

  this.setState({
    allTags: newTags,
  })
}

reduceを使うパターン

const updateTagCount = childTags => {
  const newTags = this.state.allTags.reduce((tags, nextTag) => {
    const { tagText, count } = nextTag
    if (childTags.includes(tagText)) {
      tags.push({ tagText, count: count + 1 })
    } else {
      tags.push(nextTag)
    }
    return tags
  }, [])

  this.setState({
    allTags: newTags,
  })
}

childTagsの要素数が多い可能性があるならば、Setに変換しておくと効率が良くなると思います。

Comments

[mati7]

karamarimoさん
この度は大変迅速かつ、さらに二つのやり方を提示してくださるなど本当にありがとうございます。
試してみたところ、両方で実現したいことができました。
reduceを使った実装は調べてみてもprevの値とnextの値を足すだけのような例が多かったので、こういう使い方もできると知れると幅が広がりました。
また、馴染みのあるfor文も実際に自分のソースで例示を示して頂けると大変理解が進み、今後のコーディングに活かせるなぁとしみじみ感じました。

恥ずかしながらSetという概念は知りもしなかったので、こちらも大変勉強になりました。
色々とアドバイスありがとうございます！！！

[karamarimo]

補足すると、ある要素が含まれているかをチェックするのにかかる時間が Set のほうが Array より速いということです。といっても、Set を作るのに線形時間かかるので、今の場合あまり意味がないかもしれません。

[mati7]

karamarimoさん
補足ありがとうございます！
最初にコメント頂けた際に、Setの使い方も簡単にですが調べてみましたので、今後大量かつユニークな配列を扱う際はトライしてみようと思っています。
何より、独学で勉強していると実装に直接的に必要な知識しか調べなくなってしまうので、Setのような、知っておくと場合によってよりよい実装ができる概念や方法から遠ざかってしまいがちです。
なので、こうしてSetというものを教えて頂けただけで得をしたなと感じました。笑

追記までして丁寧にご対応くださりありがとうございました。
また何かありましたら、よろしくお願いします！