Tomato Note

タグ: React

  • [React]スプレッド構文って結局なんなの？[JavaScript]

    Reactアプリケーションを開発していると、状態管理は避けて通れない重要なテーマです。特に、配列状のデータを条件に応じて更新する処理は、どのプロジェクトでも頻繁に登場します。この記事では、ReactのsetState関数内で複雑な条件分岐を用いた状態更新ロジックの実例とその解説を行いながら、より理解を深めていきます。また、記事の最後では便利なファイル共有サービス「file-bin」についてもご紹介します。

    状態更新ロジックの実例

    まずはこちらのコードをご覧ください。

    (prev) =>
  prev.map((n) =>
    n.virtual
      ? n
      : n.id === node.id
      ? { ...n, status: "selected" }
      : affected.has(n.id)
      ? { ...n, status: "descendant" }
      : { ...n, status: "up" }
  )

    このコードは、ReactのuseStateやuseReducerなどのフックで状態更新を行う際に使われる関数の一例です。ここで行っているのは、状態（おそらくノードの一覧）を条件によって部分的に更新する処理です。

    変数の役割

    • prev: 現在の状態（配列）
    • n: 配列内の1つの要素（ノード）
    • node: 選択されたノード
    • affected: 影響を受けるノードIDの集合（Set型と想定）

    各条件の解説

    1. n.virtual ? n
      • ノードが仮想ノード（virtualがtrue）であれば変更しないでそのまま返します。
    2. n.id === node.id ? { ...n, status: "selected" }
      • 今選択されているノードであれば、状態を"selected"にします。
    3. affected.has(n.id) ? { ...n, status: "descendant" }
      • 影響を受けるノードであれば、状態を"descendant"に更新します。
    4. 上記以外: { ...n, status: "up" }
      • 特に該当しないノードは"up"状態に。

    このように、配列を.map()で処理しながら、条件に応じて個々のオブジェクトをコピー（...n）してステータスだけを変更しています。

    なぜスプレッド構文が必要なのか

    JavaScriptのオブジェクトは参照型なので、元のオブジェクトをそのまま編集してしまうと、副作用が生まれ、Reactがうまく変更を検知できなくなる可能性があります。そのため、状態更新時は必ず新しいオブジェクトを作るのが基本です。

    { ...n, status: "selected" }

    このように書くことで、オブジェクトnの全プロパティをコピーしつつ、statusだけを上書きできます。これは”イミュータブルな更新”と呼ばれ、Reactでは推奨されているパターンです。

    リファクタリングのアイデア

    可読性の高いコードにするためには、条件を整理して関数化するのも有効です。

    const getNextStatus = (n) => {
  if (n.virtual) return n;
  if (n.id === node.id) return { ...n, status: "selected" };
  if (affected.has(n.id)) return { ...n, status: "descendant" };
  return { ...n, status: "up" };
};

const next = prev.map(getNextStatus);

    このように関数に切り出すことで、.map()の中のロジックがスッキリしますし、再利用も可能になります。

    状態管理に役立つTips

    1. オブジェクトのコピーを忘れずに
    2. .map()の中で直接DOM操作や副作用はNG
    3. 条件が複雑になったら関数に切り出す
    4. 型（TypeScript）を使うとミスが減る

    便利なファイル共有サービス「file-bin」のご紹介

    状態管理とは少し話が逸れますが、開発やチーム作業をしていると「ちょっとこのファイル共有したいな」という場面、ありませんか？

    そんなときに便利なのが file-bin です。

    file-bin の特徴

    • ✅ 無料で使える
    • ✅ 登録なしでファイルアップロード可能
    • ✅ URLをシェアするだけでOK
    • ✅ エンドツーエンド暗号化で安心

    ReactやJavaScriptのコードを一時的に共有したいときにも、file-binを使えばURLひとつで送れちゃいます。

    自分の作ったアプリの動作ログ、スクリーンショット、設定ファイルなど、どんなファイルでもすぐにアップして安全に共有可能です。

    開発者なら1度は使ってみて損はないサービスです。

    👉 詳細・ご利用はこちら: https://file-bin.com

    まとめ

    今回の記事では、Reactでの状態更新ロジックとして、map()とスプレッド構文を組み合わせた実例を紹介しました。複雑な分岐条件でも、きちんと整理すれば可読性も保てますし、アプリの品質にもつながります。

    また、開発のちょっとした場面で便利なfile-binもぜひ活用してみてください。React × 開発効率化の組み合わせで、もっと快適なコーディングライフを送りましょう！

  • ReactにおけるHTMLタグのネスティングエラーへの対処方法

    Web開発において、Reactはその直感的なコンポーネント構造と効率的な更新メカニズムで広く採用されています。しかし、Reactを使っているときに遭遇するかもしれない一般的な問題の一つに、HTMLタグのネスティングエラーがあります。自分のようなReact初心者は、ここで躓いてしまいました。。。

    問題の説明

    具体的なエラーメッセージは以下の通りです:

    validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

    このメッセージは、HTMLの規則に違反して<div>タグが<p>タグの子として配置されていることを示しています。HTMLの仕様では、<p>タグはフロー・コンテンツのみを含むことができ、<div>タグのようなブロックレベルの要素を含むことはできません。

    問題の解決方法

    この問題を解決するためのステップは以下の通りです：

    1. コードの見直し: まず、エラーが発生している箇所を特定します。開発ツールのコンソールに表示される行番号やエラーメッセージを利用して、問題のあるコードを見つけ出しましょう。
    2. 構造の調整: <p>タグの中にある<div>タグを外に移動するか、<p>タグを<div>タグに置き換えます。適切なタグを使用することで、HTMLの構造規則を守ることができます。
    3. コードの再検証: 変更後、アプリケーションを再度実行して、問題が解決されているかを確認します。エラーメッセージが消えれば、問題は解決されています。

    結論

    Reactを使用する際は、HTMLの規則を理解し、正しいタグのネスティングを心掛けることが重要です。上記のステップに従うことで、タグのネスティングに関連する問題を効果的に解決し、より安定したWebアプリケーションを構築することができます。このようなエラーに直面した際は、冷静に対処し、一つ一つのタグの使用目的と制限を再確認することが役立ちます。