再婚や死別の対応

src/app/app.routes.ts

@@ -7,12 +7,17 @@ import { FamilyEdit } from './pages/family-edit/family-edit';
 import { KakochoEdit } from './pages/kakocho-edit/kakocho-edit';
 import { MemorialList } from './pages/memorial-list/memorial-list';
 import { Search } from './pages/search/search';
+import { FamilyTree } from './pages/family-tree/family-tree';
 
 export const routes: Routes = [
   {
     path: '',
     component: Dashboard,
   },
+  {
+    path: 'dashboard',
+    component: Dashboard,
+  },
   {
     path: 'danka-list',
     component: DankaList,
@@ -53,4 +58,8 @@ export const routes: Routes = [
     path: 'search',
     component: Search,
   },
+  {
+    path: 'family-tree',
+    component: FamilyTree,
+  },
 ];

src/app/models/family.ts

@@ -7,5 +7,8 @@ export interface Family {
   relationship: string;
   birthDate: string;
   note: string;
+  fatherId: string;
+  motherId: string;
+  spouseId: string;
+  gender: string;
 }
-

src/app/models/marriage-relation.ts

@@ -0,0 +1,10 @@
+export interface MarriageRelation {
+  id: string;
+  dankaId: string;
+  person1Id: string;
+  person2Id: string;
+  status: 'current' | 'divorced' | 'widowed' | 'unknown';
+  startDate: string;
+  endDate: string;
+  note: string;
+}

src/app/pages/danka-detail/danka-detail.html

@@ -67,62 +67,63 @@
             </nav>
           </div>
           @if (selectedTab === 'basic') {
-          <button
-            type="button"
-            class="edit-button"
-            [routerLink]="['/danka-edit', danka.id]"
-          >
-            編集
-          </button>
+            <button
+              type="button"
+              class="edit-button"
+              [routerLink]="['/danka-edit', danka.id]"
+            >
+              編集
+            </button>
           }
 
           @if (selectedTab === 'kakocho') {
-          <button
-            type="button"
-            class="add-button"
-            [routerLink]="['/kakocho-edit', danka.id]"
-          >
-            故人を登録
-          </button>
-
-          <button
-            type="button"
-            class="edit-button"
-            [routerLink]="['/kakocho-edit', danka.id, kakocholist[0].id]"
-          >
-            編集
-          </button>
+            <button
+              type="button"
+              class="add-button"
+              [routerLink]="['/kakocho-edit', danka.id]"
+            >
+              故人を登録
+            </button>
+
+            <button
+              type="button"
+              class="edit-button"
+              [routerLink]="['/kakocho-edit', danka.id, kakocholist[0].id]"
+            >
+              編集
+            </button>
           }
-
         </div>
 
-        <section class="family-summary">
-          @if (selectedTab === 'basic') {
-          <div class="family-name-area">
-            <p class="family-name">{{ danka.householdName }}</p>
-            <p class="family-head">世帯主: {{ danka.householder }}</p>
-          </div>
+        @if (selectedTab === 'basic' || selectedTab === 'kakocho') {
+          <section class="family-summary">
+            @if (selectedTab === 'basic') {
+              <div class="family-name-area">
+                <p class="family-name">{{ danka.householdName }}</p>
+                <p class="family-head">世帯主: {{ danka.householder }}</p>
+              </div>
 
-          <div class="family-address">
-            <p>郵便番号 〒{{ danka.postalCode }}</p>
-            <p>住所 {{ danka.address }}</p>
-          </div>
+              <div class="family-address">
+                <p>郵便番号 〒{{ danka.postalCode }}</p>
+                <p>住所 {{ danka.address }}</p>
+              </div>
 
-          <button type="button" class="memo-button">
-            回忌を見る
-          </button>
-          }
+              <button type="button" class="memo-button">
+                回忌を見る
+              </button>
+            }
 
-          @if (selectedTab === 'kakocho') {
-          <div class="family-name-area">
-            <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
-          </div>
+            @if (selectedTab === 'kakocho') {
+              <div class="family-name-area">
+                <p class="family-name">{{ danka.householdName }}の過去帳{{ kakocholist.length }} 名</p>
+              </div>
 
-          <button type="button" class="memo-button">
-            年次法要を見る
-          </button>
-          }
-        </section>
+              <button type="button" class="memo-button">
+                年次法要を見る
+              </button>
+            }
+          </section>
+        }
 
         @if (selectedTab === 'basic') {
           <div class="detail-content">
@@ -355,20 +356,229 @@
                 <div class="empty-family-message">
                   登録されている家族情報はありません。
                 </div>
-              }              
+              }
             </p>
           </section>
         }
 
         @if (selectedTab === 'familyTree') {
-          <section class="coming-soon-section">
+          <section class="family-tree-tab-content">
             <div class="section-heading">
               <h2>家系図</h2>
+              <p>
+                家族情報に登録された親子・配偶者の関係をもとに表示します。
+              </p>
             </div>
 
-            <p class="empty-family-message">
-              家系図はこれから実装します。
-            </p>
+            @if (families.length > 0) {
+              <div class="family-tree-layout">
+                <section class="family-tree-area">
+                  <div class="family-tree-toolbar">
+                    <div>
+                      <p class="family-tree-title">
+                        {{ danka.householdName }}の家系図
+                      </p>
+                      <p class="family-tree-caption">
+                        人物カードを選択すると、右側に関係情報が表示されます。
+                      </p>
+                    </div>
+
+                    <div class="family-tree-action-list">
+                      <button type="button" class="tree-action-button"
+                              [routerLink]="['/danka', danka.id, 'family-new']"
+                              [queryParams]="{relationMode: 'child', baseFamilyId: selectedFamily?.id}">
+                        親子を追加
+                      </button>
+
+                      <button type="button" class="tree-action-button"
+                              [routerLink]="['/danka', danka.id, 'family-new']"
+                              [queryParams]="{relationMode: 'spouse', baseFamilyId: selectedFamily?.id}">
+                        配偶者を追加
+                      </button>
+                    </div>
+                  </div>
+
+                  @if (selectedFamily) {
+                    <div class="family-tree-diagram">
+
+                      <div class="tree-generation parent-generation">
+                        @if (getFather(selectedFamily)) {
+                          <button
+                            type="button"
+                            class="family-tree-card small"
+                            (click)="selectFamily(getFather(selectedFamily)!)">
+                            <span class="tree-card-name">{{ getFather(selectedFamily)?.name }}</span>
+                            <span class="tree-card-relationship">父</span>
+                          </button>
+                        }
+                        @if (getMother(selectedFamily)) {
+                          <button type="button" class="family-tree-card small"
+                                  (click)="selectFamily(getMother(selectedFamily)!)">
+                            <span class="tree-card-name">{{ getMother(selectedFamily)?.name }}</span>
+                            <span class="tree-card-relationship">母</span>
+                          </button>
+                        }
+                      </div>
+
+                      <div class="tree-generation main-generation">
+                        <button type="button"
+                                class="family-tree-card active main-person">
+                          <span class="tree-card-name">
+                            {{ selectedFamily.name }}
+                          </span>
+                          <span class="tree-card-relationship">
+                            {{ selectedFamily.relationship || '関係未登録' }}
+                          </span>
+                          <span class="tree-card-birth">
+                            {{ selectedFamily.birthDate || '生年月日未登録' }}
+                          </span>
+                        </button>
+
+                        @if (getSpouse(selectedFamily)) {
+                          <button
+                            type="button"
+                            class="family-tree-card spouse-person"
+                            (click)="selectFamily(getSpouse(selectedFamily)!)">
+                            <span class="tree-card-name">
+                              {{ getSpouse(selectedFamily)?.name }}
+                            </span>
+                            <span class="tree-card-relationship">配偶者</span>
+                            <span class="tree-card-birth">
+                              {{ getSpouse(selectedFamily)?.birthDate || '生年月日未登録' }}
+                            </span>
+                          </button>
+                        }
+                      </div>
+
+                      <div class="tree-generation child-generation">
+                        @if (getChildren(selectedFamily).length > 0) {
+                          @for (child of getChildren(selectedFamily); track child.id) {
+                            <button
+                              type="button"
+                              class="family-tree-card small"
+                              (click)="selectFamily(child)">
+                              <span class="tree-card-name">
+                                {{ child.name }}
+                              </span>
+                              <span class="tree-card-relationship">
+                                {{ child.relationship || '子' }}
+                              </span>
+                            </button>
+                          }
+                        } @else {
+                          <p class="tree-empty-text">
+                            子どもの登録はありません。
+                          </p>
+                        }
+                      </div>
+                    </div>
+                    <div class="family-tree-member-list">
+                      <p class="member-list-title">人物一覧</p>
+
+                      <div class="member-chip-list">
+                        @for (family of families; track family.id) {
+                          <button
+                            type="button"
+                            class="member-chip"
+                            [class.active]="selectedFamily?.id === family.id"
+                            (click)="selectFamily(family)"
+                          >
+                            {{ family.name }}
+                          </button>
+                        }
+                      </div>
+                    </div>
+                  } @else {
+                    <p class="empty-family-message">
+                      人物カードを選択してください。
+                    </p>
+                  }
+                </section>
+
+                <aside class="family-tree-side-panel">
+                  <h3>選択中の人物情報</h3>
+
+                  @if (selectedFamily) {
+                    <div class="selected-person-card">
+                      <p class="selected-person-name">
+                        {{ selectedFamily.name }}
+                      </p>
+
+                      <p class="selected-person-sub">
+                        {{ selectedFamily.furigana || 'ふりがな未登録' }}
+                      </p>
+                    </div>
+
+                    <div class="selected-info-list">
+                      <div class="selected-info-row">
+                        <span>関係</span>
+                        <strong>{{ selectedFamily.relationship || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>生年月日</span>
+                        <strong>{{ selectedFamily.birthDate || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>父</span>
+                        <strong>{{ getFather(selectedFamily)?.name || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>母</span>
+                        <strong>{{ getMother(selectedFamily)?.name || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row">
+                        <span>配偶者</span>
+                        <strong>{{ getSpouse(selectedFamily)?.name || '未登録' }}</strong>
+                      </div>
+
+                      <div class="selected-info-row children-row">
+                        <span>子</span>
+                        <strong>
+                          @if (getChildren(selectedFamily).length > 0) {
+                            @for (child of getChildren(selectedFamily); track child.id) {
+                              <span class="child-name">
+                        {{ child.name }}
+                      </span>
+                            }
+                          } @else {
+                            未登録
+                          }
+                        </strong>
+                      </div>
+                    </div>
+
+                    <div class="selected-person-actions">
+                      <a
+                        class="selected-person-button"
+                        [routerLink]="['/danka', danka.id, 'family', selectedFamily.id, 'edit']"
+                      >
+                        個人情報を編集
+                      </a>
+
+                      <button
+                        type="button"
+                        class="selected-person-button secondary"
+                        (click)="selectedTab = 'kakocho'"
+                      >
+                        過去帳を確認
+                      </button>
+                    </div>
+                  } @else {
+                    <p class="empty-family-message">
+                      人物カードを選択してください。
+                    </p>
+                  }
+                </aside>
+              </div>
+            } @else {
+              <div class="empty-family-message">
+                登録されている家族情報はありません。
+              </div>
+            }
           </section>
         }
       } @else {

src/app/pages/danka-detail/danka-detail.scss

@@ -566,6 +566,395 @@
   margin-top: 24px;
 }
 
+/* =========================
+   家系図タブ
+========================= */
+
+.family-tree-tab-content {
+  margin-top: 24px;
+}
+
+.family-tree-tab-content .section-heading {
+  margin-bottom: 16px;
+}
+
+.family-tree-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 360px;
+  gap: 24px;
+  align-items: start;
+}
+
+.family-tree-area {
+  min-height: 460px;
+  padding: 22px;
+  background: #fffaf3;
+  border: 2px solid #d8c2aa;
+  border-radius: 18px;
+  box-sizing: border-box;
+}
+
+.family-tree-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 18px;
+  margin-bottom: 22px;
+}
+
+.family-tree-title {
+  margin: 0;
+  color: #2f2720;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.family-tree-caption {
+  margin: 4px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.family-tree-action-list {
+  display: flex;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.tree-action-button {
+  min-width: 112px;
+  height: 38px;
+  padding: 0 14px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.tree-action-button:hover {
+  background: #f6efe6;
+}
+
+.family-tree-card-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 14px;
+}
+
+.family-tree-card {
+  min-height: 112px;
+  padding: 16px 18px;
+  border: 2px solid #d8c2aa;
+  border-radius: 14px;
+  background: #ffffff;
+  color: #2f2720;
+  text-align: left;
+  cursor: pointer;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.family-tree-card:hover {
+  background: #f6efe6;
+}
+
+.family-tree-card.active {
+  border-color: #8a6543;
+  background: #eadfce;
+  box-shadow: 0 0 0 3px rgba(138, 101, 67, 0.16);
+}
+
+.tree-card-name {
+  color: #5d3b24;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.tree-card-relationship {
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.tree-card-birth {
+  color: #7b6b5c;
+  font-size: 13px;
+}
+
+.family-tree-side-panel {
+  min-height: 460px;
+  padding: 24px 22px;
+  background: #fffdf9;
+  border: 2px solid #d8caba;
+  border-radius: 36px;
+  box-sizing: border-box;
+}
+
+.family-tree-side-panel h3 {
+  margin: 0 0 16px;
+  color: #2f2720;
+  font-size: 20px;
+  font-weight: 800;
+}
+
+.selected-person-card {
+  margin-bottom: 18px;
+  padding: 16px 18px;
+  background: #eadfce;
+  border: 2px solid #d8caba;
+  border-radius: 14px;
+  box-sizing: border-box;
+}
+
+.selected-person-name {
+  margin: 0;
+  color: #2f2720;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
+.selected-person-sub {
+  margin: 4px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.selected-info-list {
+  display: grid;
+  gap: 10px;
+}
+
+.selected-info-row {
+  display: grid;
+  grid-template-columns: 82px 1fr;
+  gap: 10px;
+  align-items: start;
+  padding: 10px 12px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.selected-info-row span {
+  color: #7b6b5c;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.selected-info-row strong {
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1.6;
+}
+
+.children-row strong {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.child-name {
+  display: inline-flex;
+  align-items: center;
+  min-height: 26px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: #f1e7d8;
+  color: #5d3b24;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.selected-person-actions {
+  display: grid;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.selected-person-button {
+  min-height: 42px;
+  border: 2px solid #8a6543;
+  border-radius: 6px;
+  background: #8a6543;
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 800;
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.selected-person-button:hover {
+  background: #765639;
+}
+
+.selected-person-button.secondary {
+  background: #ffffff;
+  color: #8a6543;
+}
+
+.selected-person-button.secondary:hover {
+  background: #f6efe6;
+}
+
+/* =========================
+   家系図 図式レイアウト
+========================= */
+
+.family-tree-diagram {
+  min-height: 330px;
+  padding: 28px 18px;
+  background: #fffdf9;
+  border: 2px dashed #d8c2aa;
+  border-radius: 18px;
+  box-sizing: border-box;
+  display: grid;
+  gap: 34px;
+}
+
+.tree-generation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 18px;
+  position: relative;
+}
+
+.parent-generation {
+  padding-bottom: 8px;
+}
+
+.main-generation {
+  padding: 8px 0;
+}
+
+.child-generation {
+  padding-top: 8px;
+  flex-wrap: wrap;
+}
+
+.family-tree-card.small {
+  min-height: 86px;
+  max-width: 180px;
+}
+
+.family-tree-card.main-person {
+  min-width: 210px;
+}
+
+.family-tree-card.spouse-person {
+  min-width: 190px;
+}
+
+/* 本人と配偶者の間の線 */
+.main-generation .main-person::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: -20px;
+  width: 20px;
+  height: 2px;
+  background: #8a6543;
+}
+
+/* カードを線の基準にする */
+.main-generation .family-tree-card {
+  position: relative;
+}
+
+/* 親世代から本人世代への縦線 */
+.parent-generation::after {
+  content: "";
+  position: absolute;
+  bottom: -28px;
+  left: 50%;
+  width: 2px;
+  height: 28px;
+  background: #d8c2aa;
+  transform: translateX(-50%);
+}
+
+/* 本人世代から子世代への縦線 */
+.main-generation::after {
+  content: "";
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  width: 2px;
+  height: 30px;
+  background: #d8c2aa;
+  transform: translateX(-50%);
+}
+
+/* 子どもがいない場合の文言 */
+.tree-empty-text {
+  margin: 0;
+  padding: 12px 18px;
+  background: #ffffff;
+  border: 2px solid #d8c2aa;
+  border-radius: 10px;
+  color: #7b6b5c;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.family-tree-member-list {
+  margin-top: 18px;
+  padding: 16px 18px;
+  background: #ffffff;
+  border: 2px solid #d8c2aa;
+  border-radius: 14px;
+  box-sizing: border-box;
+}
+
+.member-list-title {
+  margin: 0 0 10px;
+  color: #5d3b24;
+  font-size: 15px;
+  font-weight: 800;
+}
+
+.member-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.member-chip {
+  min-height: 34px;
+  padding: 6px 12px;
+  border: 2px solid #d8caba;
+  border-radius: 999px;
+  background: #fffdf9;
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.member-chip:hover {
+  background: #f6efe6;
+}
+
+.member-chip.active {
+  border-color: #8a6543;
+  background: #8a6543;
+  color: #ffffff;
+}
+
 /* 家族表が狭い画面では横スクロール */
 @media (max-width: 800px) {
   .family-list-summary {
@@ -585,4 +974,59 @@
   .family-support-area {
     grid-template-columns: 1fr;
   }
-}
+
+  //家系図タブ
+  .family-tree-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .family-tree-toolbar {
+    flex-direction: column;
+  }
+
+  .family-tree-action-list {
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .tree-action-button {
+    width: 100%;
+  }
+
+  .family-tree-side-panel {
+    border-radius: 28px;
+  }
+
+  .selected-info-row {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .family-tree-diagram {
+    padding: 22px 12px;
+    gap: 26px;
+  }
+
+  .tree-generation {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .family-tree-card.small,
+  .family-tree-card.main-person,
+  .family-tree-card.spouse-person {
+    width: 100%;
+    max-width: none;
+    min-width: 0;
+  }
+
+  .main-generation .main-person::after {
+    display: none;
+  }
+
+  .parent-generation::after,
+  .main-generation::after {
+    height: 20px;
+    bottom: -22px;
+  }
+}

src/app/pages/danka-detail/danka-detail.ts

@@ -6,8 +6,10 @@ import { KakochoService } from '../../services/kakocho-service';
 import { Danka } from '../../models/danka';
 import { Family } from '../../models/family';
 import { Kakocho } from '../../models/kakocho';
+import { MarriageRelation } from '../../models/marriage-relation';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+import { MarriageRelationService } from '../../services/marriage-relation-service';
 
 @Component({
   selector: 'app-danka-detail',
@@ -19,14 +21,17 @@ export class DankaDetail {
   danka: Danka | undefined;
   families: Family[] = [];
   kakocholist: Kakocho[] = [];
+  marriageRelations: MarriageRelation[] = [];
   currentYear = new Date().getFullYear();
 
   selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
+  selectedFamily: Family | undefined = undefined;
 
   constructor(
     private dankaService: DankaService,
     private familyService: FamilyService,
     private kakochoService: KakochoService,
+    private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
   ) {
     //遷移先からタブ情報を取得
@@ -42,7 +47,9 @@ export class DankaDetail {
     const id = this.route.snapshot.params['id'];
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
+      this.marriageRelations = this.marriageRelationService.getMarriageRelationsByDankaId(id);
       this.families = this.familyService.getFamiliesByDankaId(id);
+      this.selectedFamily = this.families[0];
       this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
     }
     console.log(this.danka);
@@ -50,6 +57,7 @@ export class DankaDetail {
     console.log(tab);
   }
 
+  //年齢計算の処理
   getAge(birthDate: string) {
     if (birthDate === '') {
       return '-';
@@ -68,11 +76,73 @@ export class DankaDetail {
     console.log(this.kakocholist);
   }
 
+  //回忌計算の処理
   getKaiki(deathDate: string): number {
-    return (
-      this.currentYear -
-      new Date(deathDate).getFullYear() +
-      1
+    return this.currentYear - new Date(deathDate).getFullYear() + 1;
+  }
+
+  //家系図の処理
+  selectFamily(family: Family): void {
+    this.selectedFamily = family;
+  }
+
+  getFamilyById(id: string): Family | undefined {
+    if (!id) {
+      return undefined;
+    }
+    return this.families.find((family) => family.id === id);
+  }
+
+  getFather(family: Family): Family | undefined {
+    return this.getFamilyById(family.fatherId);
+  }
+
+  getMother(family: Family): Family | undefined {
+    return this.getFamilyById(family.motherId);
+  }
+
+  getSpouse(family: Family): Family | undefined {
+    return this.getFamilyById(family.spouseId);
+  }
+
+  getChildren(family: Family): Family[] {
+    return this.families.filter(
+      (child) => child.fatherId === family.id || child.motherId === family.id,
     );
   }
+
+  getCurrentMarriage(family: Family): MarriageRelation | undefined {
+    return this.marriageRelations.find(
+      (relation) =>
+        relation.status === 'current' &&
+        (relation.person1Id === family.id || relation.person2Id === family.id),
+    );
+  }
+
+  getPastMarriages(family: Family): MarriageRelation[] {
+    return this.marriageRelations.filter(
+      (relation) =>
+        relation.status !== 'current' &&
+        (relation.person1Id === family.id || relation.person2Id === family.id),
+    );
+
+  }
+
+  getMarriagePartner(relation: MarriageRelation, family: Family): Family | undefined {
+    const partnerId = relation.person1Id === family.id ? relation.person2Id : relation.person1Id;
+    return this.getFamilyById(partnerId);
+  }
+
+  getMarriageStatusLabel(status: string): string {
+    if (status === 'current') {
+      return '現在の配偶者';
+    }
+    if (status === 'divorced') {
+      return '離婚';
+    }
+    if (status === 'widowed') {
+      return '死別';
+    }
+    return '不明';
+  }
 }

src/app/pages/family-edit/family-edit.html

@@ -22,11 +22,8 @@
               <div class="form-row">
                 <label for="name">氏名</label>
                 <div class="form-field">
-                  <input
-                    id="name"
-                    type="text"
-                    formControlName="name"
-                  />
+                  <input id="name" type="text"
+                         formControlName="name"/>
                   @if (familyForm.get('name')?.invalid && familyForm.get('name')?.touched) {
                     <p class="error-message">氏名を入力してください。</p>
                   }
@@ -36,11 +33,8 @@
               <div class="form-row">
                 <label for="furigana">ふりがな</label>
                 <div class="form-field">
-                  <input
-                    id="furigana"
-                    type="text"
-                    formControlName="furigana"
-                  />
+                  <input id="furigana" type="text"
+                         formControlName="furigana"/>
                   @if (familyForm.get('furigana')?.invalid && familyForm.get('furigana')?.touched) {
                     <p class="error-message">ふりがなを入力してください。</p>
                   }
@@ -50,10 +44,8 @@
               <div class="form-row">
                 <label for="relationship">世帯主との関係</label>
                 <div class="form-field">
-                  <select
-                    id="relationship"
-                    formControlName="relationship"
-                  >
+                  <select id="relationship"
+                          formControlName="relationship">
                     <option value="">選択してください</option>
                     <option value="世帯主">世帯主</option>
                     <option value="配偶者">配偶者</option>
@@ -65,46 +57,97 @@
                     <option value="次女">次女</option>
                     <option value="その他">その他</option>
                   </select>
-
                   @if (familyForm.get('relationship')?.invalid && familyForm.get('relationship')?.touched) {
                     <p class="error-message">世帯主との関係を選択してください。</p>
                   }
                 </div>
               </div>
 
+              <div class="form-row">
+                <label for="gender">性別</label>
+                <div class="form-field">
+                  <select id="gender" formControlName="gender">
+                    <option value="unknown">未設定</option>
+                    <option value="male">男性</option>
+                    <option value="female">女性</option>
+                  </select>
+                </div>
+              </div>
+
               <div class="form-row">
                 <label for="birthDate">生年月日</label>
                 <div class="form-field">
-                  <input
-                    id="birthDate"
-                    type="date"
-                    formControlName="birthDate"
-                  />
+                  <input id="birthDate" type="date"
+                         formControlName="birthDate"/>
                 </div>
               </div>
 
               <div class="form-row">
                 <label for="age">年齢</label>
                 <div class="form-field">
-                  <input
-                    id="age"
-                    type="text"
-                    [value]="getAgeText()"
-                    readonly
-                  />
+                  <input id="age" type="text" [value]="getAgeText()" readonly/>
+                </div>
+              </div>
+
+              <div class="form-row form-row-heading">
+                <label></label>
+                <div class="form-field">
+                  <h3 class="sub-section-title">家系図情報</h3>
+                  <p class="sub-section-description">
+                    家系図に反映する親子・配偶者の関係を設定します。
+                  </p>
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="fatherId">父</label>
+                <div class="form-field">
+                  <select id="fatherId" formControlName="fatherId">
+                    <option value="">選択なし</option>
+                    @for (family of getFamilyOptions(); track family.id) {
+                      <option [value]="family.id">
+                        {{ family.name }}（{{ family.relationship }}）
+                      </option>
+                    }
+                  </select>
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="motherId">母</label>
+                <div class="form-field">
+                  <select id="motherId" formControlName="motherId">
+                    <option value="">選択なし</option>
+                    @for (family of getFamilyOptions(); track family.id) {
+                      <option [value]="family.id">
+                        {{ family.name }}（{{ family.relationship }}）
+                      </option>
+                    }
+                  </select>
+                </div>
+              </div>
+
+              <div class="form-row">
+                <label for="spouseId">配偶者</label>
+                <div class="form-field">
+                  <select id="spouseId" formControlName="spouseId">
+                    <option value="">選択なし</option>
+                    @for (family of getFamilyOptions(); track family.id) {
+                      <option [value]="family.id">
+                        {{ family.name }}（{{ family.relationship }}）
+                      </option>
+                    }
+                  </select>
                 </div>
               </div>
 
               <div class="form-row">
                 <label for="note">備考</label>
                 <div class="form-field">
-                  <textarea
-                    id="note"
-                    formControlName="note"
-                    rows="4"
-                  ></textarea>
+                  <textarea id="note" formControlName="note" rows="4"></textarea>
                 </div>
               </div>
+
             </div>
           </section>
 
@@ -112,11 +155,9 @@
             <div class="householder-area">
               <h3>この方を世帯主にする</h3>
 
-              <button
-                type="button"
-                class="set-householder-button"
-                (click)="setAsHouseholder()"
-              >
+              <button type="button"
+                      class="set-householder-button"
+                      (click)="setAsHouseholder()">
                 世帯主に設定
               </button>
             </div>
@@ -124,10 +165,7 @@
         </div>
 
         <div class="bottom-actions">
-          <button
-            type="button"
-            class="delete-button"
-            (click)="deleteFamily()">
+          <button type="button" class="delete-button" (click)="deleteFamily()">
             削除
           </button>
 
@@ -135,12 +173,8 @@
             キャンセル
           </button>
 
-          <button
-            type="button"
-            class="save-button"
-            [disabled]="familyForm.invalid"
-            (click)="saveFamily()"
-          >
+          <button type="button" class="save-button"
+                  [disabled]="familyForm.invalid" (click)="saveFamily()">
             保存
           </button>
         </div>

src/app/pages/family-edit/family-edit.scss

@@ -148,6 +148,28 @@
   font-weight: 700;
 }
 
+.form-row-heading {
+  margin-top: 30px;
+}
+
+.form-row-heading label {
+  padding-top: 0;
+}
+
+.sub-section-title {
+  margin: 0;
+  color: #2f2720;
+  font-size: 18px;
+  font-weight: 800;
+}
+
+.sub-section-description {
+  margin: 6px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  line-height: 1.6;
+}
+
 .phone-edit-section {
   min-height: 382px;
   padding: 30px 24px 22px;

src/app/pages/family-edit/family-edit.ts

@@ -22,9 +22,11 @@ import { Family } from '../../models/family';
 export class FamilyEdit {
   danka: Danka | undefined;
   family: Family | undefined;
+  families: Family[] = [];
   dankaId: string = '';
   familyId: string | null = null;
-  isEditing = false;
+  relationMode: string = '';
+  baseFamilyId: string = '';
 
   constructor(
     private familyService: FamilyService,
@@ -33,6 +35,9 @@ export class FamilyEdit {
   ) {
     this.dankaId = this.route.snapshot.params['dankaId'];
     this.familyId = this.route.snapshot.params['familyId'];
+    this.families = this.familyService.getFamiliesByDankaId(this.dankaId);
+    this.relationMode = this.route.snapshot.queryParamMap.get('relationMode') ?? '';
+    this.baseFamilyId = this.route.snapshot.queryParamMap.get('baseFamilyId') ?? '';
     if (this.familyId) {
       this.family = this.familyService.getFamilyById(this.familyId);
       if (this.family) {
@@ -42,6 +47,32 @@ export class FamilyEdit {
           relationship: this.family.relationship,
           birthDate: this.family.birthDate,
           note: this.family.note,
+          fatherId: this.family.fatherId,
+          motherId: this.family.motherId,
+          spouseId: this.family.spouseId,
+          gender: this.family.gender,
+        });
+      }
+    }
+
+    if (!this.familyId && this.relationMode === 'spouse') {
+      this.familyForm.patchValue({
+        spouseId: this.baseFamilyId,
+      });
+    }
+
+    if (!this.familyId && this.relationMode === 'child') {
+      const baseFamily = this.familyService.getFamilyById(this.baseFamilyId);
+
+      if (baseFamily?.gender === 'male') {
+        this.familyForm.patchValue({
+          fatherId: this.baseFamilyId,
+        });
+      }
+
+      if (baseFamily?.gender === 'female') {
+        this.familyForm.patchValue({
+          motherId: this.baseFamilyId,
         });
       }
     }
@@ -53,12 +84,16 @@ export class FamilyEdit {
     relationship: new FormControl(''),
     birthDate: new FormControl('', Validators.required),
     note: new FormControl(''),
+    fatherId: new FormControl(''),
+    motherId: new FormControl(''),
+    spouseId: new FormControl(''),
+    gender: new FormControl('unknown'),
   });
 
   getAgeText() {
     const birthDate = this.familyForm.get('birthDate')?.value;
     if (!birthDate) {
-      return;
+      return '生年月日を入力すると自動計算されます';
     }
     const birth = new Date(birthDate);
     const today = new Date();
@@ -71,6 +106,10 @@ export class FamilyEdit {
     return `${age}歳`;
   }
 
+  getFamilyOptions(): Family[] {
+    return this.families.filter((family) => family.id !== this.familyId);
+  }
+
   saveFamily() {
     if (this.familyForm.invalid) {
       return;
@@ -87,9 +126,14 @@ export class FamilyEdit {
       relationship: formValue.relationship?.trim() ?? '',
       birthDate: formValue.birthDate?.trim() ?? '',
       note: formValue.note?.trim() ?? '',
+      fatherId: this.familyForm.value.fatherId ?? '',
+      motherId: this.familyForm.value.motherId ?? '',
+      spouseId: this.familyForm.value.spouseId ?? '',
+      gender: this.familyForm.value.gender ?? 'unknown',
     };
     this.familyService.saveFamily(updatedFamily);
-    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });  }
+    this.router.navigate(['/danka-detail', dankaId], { queryParams: { tab: 'family' } });
+  }
 
   cancelFamilyEdit(): void {
     const dankaId = this.dankaId;

src/app/pages/family-tree/family-tree.html

@@ -0,0 +1,14 @@
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt;　家系図
+</div>
+
+<div class="search-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="search-main">
+
+  </main>
+</div>
+

src/app/pages/family-tree/family-tree.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FamilyTree } from './family-tree';
+
+describe('FamilyTree', () => {
+  let component: FamilyTree;
+  let fixture: ComponentFixture<FamilyTree>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FamilyTree],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FamilyTree);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/family-tree/family-tree.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { AppHeader } from '../../share/header/app-header';
+import { AppSideMenu } from '../../share/side-menu/app-side-menu';
+
+@Component({
+  selector: 'app-family-tree',
+  imports: [AppHeader, AppSideMenu, FormsModule, RouterLink],
+  templateUrl: './family-tree.html',
+  styleUrl: './family-tree.scss',
+})
+export class FamilyTree {}

src/app/services/family-service.ts

@@ -14,6 +14,10 @@ export class FamilyService {
       relationship: '母',
       birthDate: '1975-01-01',
       note: '次の世帯主',
+      fatherId: '5',
+      motherId: '6',
+      spouseId: '3',
+      gender: 'female',
     },
     {
       id: '2',
@@ -23,6 +27,88 @@ export class FamilyService {
       relationship: '長男',
       birthDate: '2005-12-31',
       note: '',
+      fatherId: '3',
+      motherId: '1',
+      spouseId: '7',
+      gender: 'male',
+    },
+    {
+      id: '3',
+      dankaId: '1',
+      furigana: 'すずき　いちろう',
+      name: '鈴木　一郎',
+      relationship: '父',
+      birthDate: '1973-05-10',
+      note: '',
+      fatherId: '',
+      motherId: '',
+      spouseId: '1',
+      gender: 'male',
+    },
+    {
+      id: '4',
+      dankaId: '1',
+      furigana: 'すずき　さくら',
+      name: '鈴木　さくら',
+      relationship: '長女',
+      birthDate: '2008-04-15',
+      note: '',
+      fatherId: '3',
+      motherId: '1',
+      spouseId: '',
+      gender: 'female',
+    },
+    {
+      id: '5',
+      dankaId: '1',
+      furigana: 'さとう　まさお',
+      name: '佐藤　正男',
+      relationship: '母方の祖父',
+      birthDate: '1948-03-20',
+      note: '花子の父',
+      fatherId: '',
+      motherId: '',
+      spouseId: '6',
+      gender: 'male',
+    },
+    {
+      id: '6',
+      dankaId: '1',
+      furigana: 'さとう　ひさこ',
+      name: '佐藤　久子',
+      relationship: '母方の祖母',
+      birthDate: '1950-09-08',
+      note: '花子の母',
+      fatherId: '',
+      motherId: '',
+      spouseId: '5',
+      gender: 'female',
+    },
+    {
+      id: '7',
+      dankaId: '1',
+      furigana: 'すずき　みさき',
+      name: '鈴木　美咲',
+      relationship: '長男の妻',
+      birthDate: '2006-07-22',
+      note: '',
+      fatherId: '',
+      motherId: '',
+      spouseId: '2',
+      gender: 'female',
+    },
+    {
+      id: '8',
+      dankaId: '1',
+      furigana: 'すずき　れん',
+      name: '鈴木　蓮',
+      relationship: '孫',
+      birthDate: '2026-02-01',
+      note: '太郎と美咲の子',
+      fatherId: '2',
+      motherId: '7',
+      spouseId: '',
+      gender: 'male',
     },
   ];
 
@@ -37,14 +123,42 @@ export class FamilyService {
   }
 
   //家族の情報を更新
-  saveFamily(updateFamily: Family) {
-    const index = this.families.findIndex((families) => families.id === updateFamily.id);
-    if (index === -1) {
-      this.families.push(updateFamily);
-      return;
+  saveFamily(updatedFamily: Family): void {
+    const oldFamily = this.families.find((family) => family.id === updatedFamily.id);
+
+    const oldSpouseId = oldFamily?.spouseId ?? '';
+    const newSpouseId = updatedFamily.spouseId ?? '';
+
+    const familyIndex = this.families.findIndex((family) => family.id === updatedFamily.id);
+
+    if (familyIndex !== -1) {
+      this.families[familyIndex] = updatedFamily;
+    } else {
+      this.families.push(updatedFamily);
+    }
+
+    if (oldSpouseId && oldSpouseId !== newSpouseId) {
+      const oldSpouseIndex = this.families.findIndex((family) => family.id === oldSpouseId);
+      if (oldSpouseIndex !== -1 && this.families[oldSpouseIndex].spouseId === updatedFamily.id) {
+        this.families[oldSpouseIndex] = {
+          ...this.families[oldSpouseIndex],
+          spouseId: '',
+        };
+      }
+    }
+
+    if (newSpouseId) {
+      const newSpouseIndex = this.families.findIndex((family) => family.id === newSpouseId);
+
+      if (newSpouseIndex !== -1) {
+        this.families[newSpouseIndex] = {
+          ...this.families[newSpouseIndex],
+          spouseId: updatedFamily.id,
+        };
+      }
     }
-    this.families[index] = updateFamily;
   }
+
   //家族の情報を削除
   deleteFamily(id: string | undefined) {
     const index = this.families.findIndex((family) => family.id === id);

src/app/services/marriage-relation-service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MarriageRelationService } from './marriage-relation-service';
+
+describe('MarriageRelationService', () => {
+  let service: MarriageRelationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MarriageRelationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/marriage-relation-service.ts

@@ -0,0 +1,125 @@
+import { Injectable } from '@angular/core';
+import { MarriageRelation } from '../models/marriage-relation';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MarriageRelationService {
+  private marriageRelations: MarriageRelation[] = [
+    {
+      id: '1',
+      dankaId: '1',
+      person1Id: '2', // 太郎
+      person2Id: '8', // 花子
+      status: 'divorced',
+      startDate: '',
+      endDate: '',
+      note: '前妻',
+    },
+    {
+      id: '2',
+      dankaId: '1',
+      person1Id: '2', // 太郎
+      person2Id: '7', // 美咲
+      status: 'current',
+      startDate: '',
+      endDate: '',
+      note: '現在の配偶者',
+    },
+  ];
+
+  getMarriageRelationsByDankaId(dankaId: string): MarriageRelation[] {
+    return this.marriageRelations.filter((relation) => relation.dankaId === dankaId);
+  }
+
+  getMarriageRelationsByFamilyId(familyId: string): MarriageRelation[] {
+    return this.marriageRelations.filter(
+      (relation) => relation.person1Id === familyId || relation.person2Id === familyId,
+    );
+  }
+
+  getCurrentMarriageByFamilyId(familyId: string): MarriageRelation | undefined {
+    return this.marriageRelations.find(
+      (relation) =>
+        relation.status === 'current' &&
+        (relation.person1Id === familyId || relation.person2Id === familyId),
+    );
+  }
+
+  getPastMarriagesByFamilyId(familyId: string): MarriageRelation[] {
+    return this.marriageRelations.filter(
+      (relation) =>
+        relation.status !== 'current' &&
+        (relation.person1Id === familyId || relation.person2Id === familyId),
+    );
+  }
+
+  getMarriageRelationById(id: string): MarriageRelation | undefined {
+    return this.marriageRelations.find((relation) => relation.id === id);
+  }
+
+  validateMarriageRelation(data: MarriageRelation): string[] {
+    const errors: string[] = [];
+
+    if (!data.person1Id || !data.person2Id) {
+      errors.push('配偶関係の人物が選択されていません。');
+    }
+
+    if (data.person1Id === data.person2Id) {
+      errors.push('同じ人物同士を配偶関係に設定することはできません。');
+    }
+
+    const duplicate = this.marriageRelations.find(
+      (relation) =>
+        relation.id !== data.id &&
+        ((relation.person1Id === data.person1Id && relation.person2Id === data.person2Id) ||
+          (relation.person1Id === data.person2Id && relation.person2Id === data.person1Id)),
+    );
+
+    if (duplicate) {
+      errors.push('この2人の配偶関係はすでに登録されています。');
+    }
+
+    if (data.status === 'current') {
+      const currentConflict = this.marriageRelations.find(
+        (relation) =>
+          relation.id !== data.id &&
+          relation.status === 'current' &&
+          (relation.person1Id === data.person1Id ||
+            relation.person2Id === data.person1Id ||
+            relation.person1Id === data.person2Id ||
+            relation.person2Id === data.person2Id),
+      );
+
+      if (currentConflict) {
+        errors.push(
+          '現在の配偶者は1人までです。既存の配偶関係を離婚・死別などに変更してから登録してください。',
+        );
+      }
+    }
+
+    return errors;
+  }
+
+  saveMarriageRelation(data: MarriageRelation): string[] {
+    const errors = this.validateMarriageRelation(data);
+
+    if (errors.length > 0) {
+      return errors;
+    }
+
+    const index = this.marriageRelations.findIndex((relation) => relation.id === data.id);
+
+    if (index === -1) {
+      this.marriageRelations.push(data);
+    } else {
+      this.marriageRelations[index] = data;
+    }
+
+    return [];
+  }
+
+  deleteMarriageRelation(id: string): void {
+    this.marriageRelations = this.marriageRelations.filter((relation) => relation.id !== id);
+  }
+}