フロントエンド開発 + データ構造とアルゴリズム: DSA がどのように React アプリを強化できるか ⚡

フロントエンドに焦点を当てたインタビューでは、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 (
    <div>
      {postIds.map(id => (
        <Post key={id} post={postsById[id]} />
      ))}
    </div>
  );
}

function Post({ post }) {
  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.content}</p>
    </div>
  );
}

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

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 (
    <div>
      {currentNode.prev && (
        <img src={currentNode.prev.value.src} alt={currentNode.prev.value.alt} className="prev-image" />
      )}
      <img src={currentNode.value.src} alt={currentNode.value.alt} className="main-image" />
      {currentNode.next && (
        <img src={currentNode.next.value.src} alt={currentNode.next.value.alt} className="next-image" />
      )}
      <div>
        <button onClick={() => setCurrentNode(currentNode.prev)} disabled={!currentNode.prev}>
          Previous
        </button>
        <button onClick={() => setCurrentNode(currentNode.next)} disabled={!currentNode.next}>
          Next
        </button>
      </div>
    </div>
  );
}

この 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 (
    <div>
      <p>{comment.text}</p>
      {comment.children?.map(child => (
        <div style={{ paddingLeft: '20px' }} key={child.id}>
          <Comment comment={child} />
        </div>
      ))}
    </div>
  );
}

あなたに関連するかもしれないもう 1 つの人気の投稿:

記述は少なく、修正は不要: 信頼性の高いコードの技術

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

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

7. Graphs ?: Building Complex Data Relationships and Navigation

Example 1: Routing between multiple views
You can represent routes between pages as a graph, ensuring flexible navigation paths in an 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}`);
  }
}

Example 2: User relationship modeling
Graphs are perfect for modeling social connections or any kind of relationship where multiple entities are interconnected.

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']

Note: We use graphs to show reviewer dependencies in Middleware.

TL;DR — Those School Lessons Pay Off

Those DSA classes might have felt abstract back in the day, but data structures are powering the world around you in React.

Objects, stacks, queues, linked lists, trees, and graphs are more than just theory — they’re the backbone of the clean, efficient, and scalable apps you build every day.

So the next time you manage state in a queue or handle complex UI logic, remember: you’ve been training for this since school. ?

Let me know which data structures you’ve been using the most!

以上がフロントエンド開発 + データ構造とアルゴリズム: DSA がどのように React アプリを強化できるか ⚡の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。