フロントエンドに焦点を当てたインタビューでは、DSA がまったく考慮されないことがよくあります。

そして、学校や大学で DSA を勉強したことを覚えている人にとっては、すべての例が純粋にアルゴリズムのように感じられました (正当な理由があります)。しかし、私たちが毎日使用する製品がこの概念をどのように活用しているかについての例やガイダンスはほとんどありませんでした。

「これは必要になるでしょうか?」
このことをよく尋ねますよね？ ?

React アプリで今すぐ利用できるデータ構造をいくつか紹介します。 ?

目次

1. 導入
2. 配列: 状態管理の頼りになる
3. オブジェクトとハッシュ マップ: 効率化のための正規化されたデータ ストア
4. 二重リンクリスト: コンテキストによるナビゲーション
5. スタック: 不変の動作を伴う元に戻す/やり直し機能
6. キュー: 連続した API 呼び出しの管理
7. ツリー: 再帰コンポーネントのレンダリング
8. グラフ: 複雑なデータ関係とナビゲーションの構築
9. 結論

関連記事:

SDE1 から SDE2、そしてその先へ！ ?実際に必要なこと。

ミドルウェア担当 Jayant Bhawal ・ 6 月 10 日

＃キャリア ＃プロモーション #webdev #初心者

1. 配列 ?: 状態管理の頼りになるもの

配列は React のいたるところにあります。 .map() または .filter() がどのように機能するかを理解するのに助けが必要な場合は、おそらくこの投稿が少し早すぎると思われます。ただし、心配しないでください。これらの配列メソッドに慣れると、リストのレンダリング、コンポーネントの状態の管理、データの変換にそれらがいかに重要であるかがわかります。

2. オブジェクトとハッシュ マップ ?️: 効率化のための正規化されたデータ ストア

React アプリでユーザーや投稿などのエンティティの大規模なコレクションを扱う場合、データをオブジェクト (ハッシュ マップ) に正規化すると、読み取りと更新が大幅に効率化されます。深く入れ子になった構造を操作する代わりに、エンティティを ID によってマップします。

例: ID を持つ正規化されたストアからの読み取り

const postsById = {
  1: { id: 1, title: 'First Post', content: 'Content of first post' },
  2: { id: 2, title: 'Second Post', content: 'Content of second post' }
};

const postIds = [1, 2];

function PostList() {
  return (
    

      {postIds.map(id => (
        
      ))}
    
  );
}

function Post({ post }) {
  return (
    

      
{post.title}
      
{post.content}
    
  );
}

このパターンにより、特にコレクション全体を再レンダリングせずに更新や読み取りを迅速に行う必要がある大規模なデータセットの場合に、効率的なデータ アクセスが可能になります。

3. 二重リンクリスト ?: コンテキストによるナビゲーション

二重リンク リストは、前と次の要素の両方から コンテキストが必要な場合に便利です。各画像が参照用に隣接する画像を表示する フォト ギャラリー に移動することを考えてください。インデックスを使用する代わりに、現在のノードをコンポーネントの状態に直接保存します。

例: コンテキストを持つ要素間のナビゲーションのための二重リンクリスト

class Node {
  constructor(value) {
    this.value = value;
    this.next = null;
    this.prev = null;
  }
}

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
  }

  add(value) {
    const newNode = new Node(value);
    if (!this.head) {
      this.head = newNode;
      this.tail = newNode;
    } else {
      this.tail.next = newNode;
      newNode.prev = this.tail;
      this.tail = newNode;
    }
  }
}

const imageList = new DoublyLinkedList();
imageList.add({ id: 1, src: 'image1.jpg', alt: 'First Image' });
imageList.add({ id: 2, src: 'image2.jpg', alt: 'Second Image' });
imageList.add({ id: 3, src: 'image3.jpg', alt: 'Third Image' });

function Gallery() {
  const [currentNode, setCurrentNode] = useState(imageList.head);

  return (
    

      {currentNode.prev && (
        
      )}
      
      {currentNode.next && (
        
      )}
      

         setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        
         setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        
      
    
  );
}

この React コンポーネント内:

• 現在のノードは状態に保存され、前または次のノードがあるかどうかに基づいて UI が更新されます。
• ボタンを使用すると、ユーザーはリストを前後に移動でき、移動先のノードがない場合は無効になります。
• この構造は、カルーセル、メディア ギャラリー、プレイリストなどの UI コンポーネントで一般的に使用される、周囲の要素からのコンテキストを使用して リアルタイム ナビゲーションをシミュレートします。

4. スタック ?: 不変の動作を伴う元に戻す/やり直し機能

スタックを使用すると、後入れ先出し (LIFO) ロジックを使用して 元に戻す/やり直し 操作を効率的に管理できます。不変操作 (concat、slice) を使用することで、状態が変更されないままであることを保証できます。

例: 不変のプッシュとポップによる元に戻す/やり直し

const [undoStack, setUndoStack] = useState([]);
const [redoStack, setRedoStack] = useState([]);
const [formState, setFormState] = useState({ name: '', email: '' });

const updateForm = (newState) => {
  setUndoStack(prev => prev.concat([formState]));  // Immutable push
  setRedoStack([]);  // Clear redo stack
  setFormState(newState);
};

const undo = () => {
  if (undoStack.length > 0) {
    const lastState = undoStack.at(-1);
    setUndoStack(prev => prev.slice(0, -1));  // Immutable pop
    setRedoStack(prev => prev.concat([formState]));  // Move current state to redo
    setFormState(lastState);
  }
};

const redo = () => {
  if (redoStack.length > 0) {
    const lastRedo = redoStack.at(-1);
    setRedoStack(prev => prev.slice(0, -1));  // Immutable pop
    setUndoStack(prev => prev.concat([formState]));  // Push current state to undo
    setFormState(lastRedo);
  }
};

5. キュー ?: 連続した API 呼び出しの管理

キューは 先入れ先出し (FIFO) 方式で動作し、API 呼び出しや通知などのタスクが正しい順序で処理されるようにするのに最適です。

例: API 呼び出しのキューイング

const [apiQueue, setApiQueue] = useState([]);

const enqueueApiCall = (apiCall) => {
  setApiQueue(prevQueue => prevQueue.concat([apiCall]));  // Immutable push
};

const processQueue = () => {
  if (apiQueue.length > 0) {
    const [nextCall, ...restQueue] = apiQueue;
    nextCall().finally(() => setApiQueue(restQueue));  // Immutable pop
  }
};

6. ツリー ?: 再帰コンポーネントのレンダリング

ツリーは、コメント スレッド、フォルダー構造、メニューなどのネストされたコンポーネントを処理するときに React で一般的に使用されます。

例: コメント ツリーを再帰的にレンダリングする

const commentTree = {
  id: 1,
  text: "First comment",
  children: [
    { id: 2, text: "Reply to first comment", children: [] },
    { id: 3, text: "Another reply", children: [{ id: 4, text: "Nested reply" }] }
  ]
};

function Comment({ comment }) {
  return (
    

      
{comment.text}
      {comment.children?.map(child => (
        

          
      ))}
    
  );
}

あなたに関連する可能性のある別の人気投稿:

記述を減らし、修正は不要: 信頼性の高いコードの技術

ミドルウェア向け Dhruv Agarwal ・ 6 月 17 日

＃開発者 #生産性 ＃プログラミング ＃キャリア

7. グラフ ?: 複雑なデータ関係とナビゲーションの構築

例 1: 複数のビュー間のルーティング
ページ間のルートをグラフとして表すことができ、SPA での柔軟なナビゲーション パスを確保できます。

const routesGraph = {
  home: ['about', 'contact'],
  about: ['home', 'team'],
  contact: ['home'],
};

function navigate(currentRoute, targetRoute) {
  if (routesGraph[currentRoute].includes(targetRoute)) {
    console.log(`Navigating from ${currentRoute} to ${targetRoute}`);
  } else {
    console.log(`Invalid route from ${currentRoute} to ${targetRoute}`);
  }
}

例 2: ユーザー関係モデリング
グラフは、社会的つながり、または複数のエンティティが相互接続されているあらゆる種類の関係をモデル化するのに最適です。

const usersGraph = {
  user1: ['user2', 'user3'],
  user2: ['user1', 'user4'],
  user3: ['user1'],
  user4: ['user2']
};

function findConnections(userId) {
  return usersGraph[userId] || [];
}

console.log(findConnections('user1'));  // Outputs: ['user2', 'user3']

注: ミドルウェアにおけるレビュー担当者の依存関係を示すためにグラフを使用します。

TL;DR — 学校の授業が報われる

これらの DSA クラスは昔は抽象的だと感じられたかもしれませんが、データ構造は React の周囲の世界を動かしています。

オブジェクト、スタック、キュー、リンク リスト、ツリー、グラフは単なる理論ではなく、毎日構築するクリーンで効率的でスケーラブルなアプリのバックボーンです。

次にキュー内の状態を管理したり、複雑な UI ロジックを処理したりするときは、学生時代からこのためのトレーニングをしてきたことを思い出してください。 ?

あなたが最もよく使用しているデータ構造を教えてください!