【個人開発】家系図Webシステムを作ってみた

経緯

旦那が、私側の親戚の顔と名前を覚えられないと言うので作りました。
とはいえ私も旦那側の親戚の顔と名前は覚えられません。なので、両者のためのシステムです。

使用技術

1. フロントエンドフレームワーク

• React
• TypeScript
• Vite

2. UI/スタイル

• Tailwind CSS
• ReactFlow

3. 状態管理

• Zustand

4. ユーティリティ

• React Dropzone（写真アップロード）
• html2canvas（画面キャプチャ）

5. 開発環境

• ESLint
• Prettier
• PostCSS
• Autoprefixer

6. データ構造

• JSON形式
• UUID

---

実装した機能

1. 基本機能

• 人物管理: 追加・編集・削除
• 関係性管理: 結婚・離婚・親子関係
• 家系図の可視化: ドラッグして調整できるインタラクティブ表示
• データ保存: ブラウザのローカルストレージに永続化

2. 人物管理

• 名前、カタカナ名、性別、生年月日、職業、故人かどうかなど基本情報の登録
• ドラッグ＆ドロップでの写真アップロード
  
• 位置調整（ドラッグで自由に並び替え可能）
  
• 人物情報の編集・削除（人物ノード押下時に表示）
  

3. 関係性管理

• 結婚・離婚関係の設定
  
• 親子関係（血縁・養子の区別あり）
  
• 結婚/離婚ノードの自動生成
  
• 関係性の編集・削除（関係性ノード押下時に表示）
  

4. 家系図表示

• ReactFlowを用いたインタラクティブ表示
• 男性=青、女性=赤の色分け
• 結婚=緑ノード、離婚=黄色ノード
• 親子関係は点線で表示

5. データ管理

• JSONエクスポート / インポート
• データ一括クリア

---

工夫したポイント

1. リロードしても家系図が消えない
   ローカルストレージで永続化。地味に便利です
2. ノードをクリックするだけで編集可能
   「編集ボタンを探す」ステップを省略しました。ユーザーの操作回数を減らす工夫です
3. JSONでエクスポート / インポート可能
   万が一ブラウザのデータが消えても復元できますし、家族でデータを共有するのにも使えます

---

課題

1. 線の引き方が気持ち悪い！
   
   実際にノードを追加した直後は、線がぐちゃぐちゃで見づらいです。
   ノードが重なっていたり、線が交差していたり。
   正直「結婚ノード」なんて作りたくなかったんですが、妥協の産物です。
   いずれは自動で見やすい位置での配置となるようにしたいと思っています。

   こんな感じで↓
   

2. アプリ版も作りたい
   親戚の集まりにPC持っていくのはあんまり現実的じゃないので（私と旦那は持っていくタイプですが）、スマホでサッと見られる・編集できるアプリにしたいなーと思っています。