はじめに
先日、React の勉強会で、React Flow の実装について取り上げました 🫐
フローチャート、マインドマップ、ネットワーク図など、
視覚的にわかりやすい UI/UX は、モダンな Web アプリケーションにおいて重要な要素です。
今回は、ReactFlow について調査したので、基礎的な内容をまとめました！
時間の節約になれば、嬉しいです 🙌
React Flow とは？
React で、インタラクティブなダイアグラムを、簡単に実装できるのが、React Flow です。
figma や miro のような、ドラッグ＆ドロップ可能な GUI で、
フローチャートやマインドマップが構築できます！
Webermes という会社によって、
活発に開発・メンテナンスされており、多くの機能を提供してくれるのが、特徴の一つです。
React Flow の使い方
React Flow は、ノードとエッジを定義だけで、簡単に導入できます。
ん、そもそも、ノードとエッジとは、、？
（03/23 更新）
プレビュー用の画像と、URL を追記しました！
ノードとは？
ノードとは、要素のブロックのことです。クリックして、ノードを移動させたりできます。
ノードは、一般的に、以下のデータを持ちます：
- 一意な id
- 表示テキスト
- x, y のポジション（マップ上のどこにあるか）
エッジとは？
エッジとは、ノードを繋ぐ線のことです。
エッジは、一般的に、以下のデータを持ちます：
- 一意な id
- 始点ノードの id
- 終点ノードの id
最新バージョン（v11 以降）: @xyflow/react
ちなみに、React Flow ライブラリの名前は、時間と共に変更されてきました。
当記事執筆時点（2025/03/22）では、：
- 最新バージョン（v11 以降）:
@xyflow/react - 以前のバージョン:
reactflow
2023 年後半頃に、React Flow は「xyflow」というプロジェクト名に移行し、
パッケージ名も @xyflow/react に変更されました。
この変更により、同じ開発チームが提供する Svelte Flow などの他のフローライブラリとともに、
統一されたエコシステムになったようです！
そのため：
- 新しいプロジェクトを始める場合は
@xyflow/reactをインストールすることが推奨されます - 既存のプロジェクトでは、まだ
reactflowを使用している場合があります
インストール例：
# 新しい方法
npm install @xyflow/react
# 以前の方法
npm install reactflow
両方とも基本的に同じライブラリですが、
最新の機能やバグ修正は @xyflow/react で提供されているので、注意です 👍
React への導入手順
さて、基本的な使い方を理解したところで、
React への導入を確認してみましょう！
下記は、簡略化したサンプルコードです：
1. ライブラリのインストール
npm install @xyflow/react
2. コンポーネントの作成
// App.jsx
import { useCallback } from "react";
import ReactFlow, {
Controls,
Background,
useNodesState,
useEdgesState,
addEdge,
} from "@xyflow/react";
import "@xyflow/react/dist/style.css";
// 初期ノードとエッジの定義
const initialNodes = [
{
id: "1",
type: "input",
data: { label: "スタート" },
position: { x: 250, y: 5 },
},
{
id: "2",
data: { label: "処理" },
position: { x: 250, y: 100 },
},
{
id: "3",
type: "output",
data: { label: "完了" },
position: { x: 250, y: 200 },
},
];
const initialEdges = [
{ id: "e1-2", source: "1", target: "2" },
{ id: "e2-3", source: "2", target: "3" },
];
function FlowChart() {
const [nodes, setNodes] = useNodesState(initialNodes);
const [edges, setEdges] = useEdgesState(initialEdges);
// 接続処理
const onConnect = useCallback(
(params) => setEdges((eds) => addEdge(params, eds)),
[setEdges]
);
return (
<div style={{ width: "100%", height: "300px" }}>
<ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} fitView>
<Controls />
<Background />
</ReactFlow>
</div>
);
}
export default FlowChart;
このシンプルなコードで、ドラッグ可能なノードと線を持つ基本的なフローチャートが実装できます。
もちろん、公式ドキュメントを参考にして、
さらに、部分的にカスタマイズしていくことが、可能です！
なぜ React Flow なのか？
個人的には、ReactFlow の魅力は、
導入しやすさとカスタマイズ性の両立にあると、考えています！
ReactFlow を選ぶ理由としては：
- ドラッグ＆ドロップの組み込み：インタラクションの実装が容易
- デフォルトで豊富な機能：ズーム、パン、ミニマップなどが最初から使える
- カスタマイズ性：独自のノードやエッジを自由に定義できる
- レスポンシブ対応：モバイルデバイスにも対応
- 安定したパフォーマンス：多数のノードやエッジでも適切に処理
個人的には、クイックスタートや Example 集など、
公式ドキュメントが丁寧でわかりやすいのも、使いやすいポイントです！
おわりに
最後まで読んでいただだき、ありがとうございます 🥳
下記の、React ハンズオン勉強会での、振り返りのような記事ですが、
少しでも参考になれば、嬉しいです！
そして、もし、間違いや補足情報などがありましたら、
ぜひコメントを追加してください！
Happy Hacking :)
参考
Discussion