JavaScriptで蟻本 データ構造 Union-Find木判定

# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・データ構造のUnion-Find木p94 についてです。


# 問題
```
以下２つのUnion-Find木を結合せよ

入力：
親:[0,1,1,0,6,1,6,4]
木の深さ:[0,1,1,0,2,1,2,2]

結果
親:[0,6,1,0,6,1,6,4]
木の深さ:[0,1,1,0,2,1,2,2]
```

## 図示
![image-1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/335ba83e-7dd9-2216-54ed-5235bed2f168.png)


# コード部分
```javascript
    //
    /**
     *  Union-Find木の根を求める。
     * @param par{Array} 各要素のの親
     * @param x{Number} 求めたい要素
     */
    const  find = (par,x) =>{
        // 親と要素が一致する
        if(par[x] == x){
            console.log(`${par}|　| 親par[${x}]（=${par[x]}）と要素x（=${x}）が一致する場合、xを返す`)
            return x;
        }
        // 親と要素が一致しない場合、親を再帰的に探す
        else{
            console.log(`${par}|　| 親par[${x}]（=${par[x]}）と要素x（=${x}）が一致しない場合、親を再帰的に探す`)
            return par[x] = find(par,par[x]);
        }
    }
    //
    /**
     * Union-Find木を結合する
     * @param par{Array} 各要素のの親
     * @param rank {Array} 各要素の木の深さ
     * @param x{Number} 結合する要素1つ目
     * @param y{Number} 結合する要素2つ目
     */
    const  unite = (par, rank, x,y) =>{
        console.log(`par|rank|行動`);
        console.log(`--|---|---`)
        x = find(par,x);
        y = find(par,y);
        // 親が一致する場合、結合する必要がない
        if( x == y){
            console.log(`${par}|${rank}|親が一致しているため結合しないで終了する。`)
            return};

        //木の深さが深い方に結合する
        if(rank[x] < rank[y]){
            par[x] = y;
            console.log(`${par}|${rank}|1つ目の要素xより2つ目の要素yの木の深さが深いため、xの親をyに変更する。`);
        }else{
            par[y] = x;
            console.log(`${par}|${rank}|2つ目の要素yより1つ目の要素xの木の深さが深いため、yの親をxに変更する。`);
            if(rank[x] == rank[y]){rank[x] =  rank[x] + 1;}
        }
        console.log(`結合後の各要素の親:${par}`)
        console.log(`結合後の各要素の木の深さ:${rank}`)
    }
    
    var par,rank;
    par = [0,1,1,0,6,1,6,4]
    rank = [0,1,1,0,2,1,2,2]
    // par=[0,6,1,0,6,1,6,4] と表示される。
    unite(par,rank,6,1)
```

## python tutor
コードを実際に動かせるwebサイト
ステップ実行かつステップ事の変数を確認できる特徴があります。

[Python Tutorリンク](https://pythontutor.com/render.html#code=%20%20%20%20const%20%20find%20%3D%20%28par,x%29%20%3D%3E%7B%0A%20%20%20%20%20%20%20%20//%20%E8%A6%AA%E3%81%A8%E8%A6%81%E7%B4%A0%E3%81%8C%E4%B8%80%E8%87%B4%E3%81%99%E3%82%8B%0A%20%20%20%20%20%20%20%20if%28par%5Bx%5D%20%3D%3D%20x%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bpar%7D%7C%E3%80%80%7C%20%E8%A6%AApar%5B%24%7Bx%7D%5D%EF%BC%88%3D%24%7Bpar%5Bx%5D%7D%EF%BC%89%E3%81%A8%E8%A6%81%E7%B4%A0x%EF%BC%88%3D%24%7Bx%7D%EF%BC%89%E3%81%8C%E4%B8%80%E8%87%B4%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%80%81x%E3%82%92%E8%BF%94%E3%81%99%60%29%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20x%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20//%20%E8%A6%AA%E3%81%A8%E8%A6%81%E7%B4%A0%E3%81%8C%E4%B8%80%E8%87%B4%E3%81%97%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%80%81%E8%A6%AA%E3%82%92%E5%86%8D%E5%B8%B0%E7%9A%84%E3%81%AB%E6%8E%A2%E3%81%99%0A%20%20%20%20%20%20%20%20else%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bpar%7D%7C%E3%80%80%7C%20%E8%A6%AApar%5B%24%7Bx%7D%5D%EF%BC%88%3D%24%7Bpar%5Bx%5D%7D%EF%BC%89%E3%81%A8%E8%A6%81%E7%B4%A0x%EF%BC%88%3D%24%7Bx%7D%EF%BC%89%E3%81%8C%E4%B8%80%E8%87%B4%E3%81%97%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%80%81%E8%A6%AA%E3%82%92%E5%86%8D%E5%B8%B0%E7%9A%84%E3%81%AB%E6%8E%A2%E3%81%99%60%29%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20par%5Bx%5D%20%3D%20find%28par,par%5Bx%5D%29%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20//%0A%20%20%20%20/**%0A%20%20%20%20%20*%20Union-Find%E6%9C%A8%E3%82%92%E7%B5%90%E5%90%88%E3%81%99%E3%82%8B%0A%20%20%20%20%20*%20%40param%20par%7BArray%7D%20%E5%90%84%E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%AE%E8%A6%AA%0A%20%20%20%20%20*%20%40param%20rank%20%7BArray%7D%20%E5%90%84%E8%A6%81%E7%B4%A0%E3%81%AE%E6%9C%A8%E3%81%AE%E6%B7%B1%E3%81%95%0A%20%20%20%20%20*%20%40param%20x%7BNumber%7D%20%E7%B5%90%E5%90%88%E3%81%99%E3%82%8B%E8%A6%81%E7%B4%A01%E3%81%A4%E7%9B%AE%0A%20%20%20%20%20*%20%40param%20y%7BNumber%7D%20%E7%B5%90%E5%90%88%E3%81%99%E3%82%8B%E8%A6%81%E7%B4%A02%E3%81%A4%E7%9B%AE%0A%20%20%20%20%20*/%0A%20%20%20%20const%20%20unite%20%3D%20%28par,%20rank,%20x,y%29%20%3D%3E%7B%0A%20%20%20%20%20%20%20%20console.log%28%60par%7Crank%7C%E8%A1%8C%E5%8B%95%60%29%3B%0A%20%20%20%20%20%20%20%20console.log%28%60--%7C---%7C---%60%29%0A%20%20%20%20%20%20%20%20x%20%3D%20find%28par,x%29%3B%0A%20%20%20%20%20%20%20%20y%20%3D%20find%28par,y%29%3B%0A%20%20%20%20%20%20%20%20//%20%E8%A6%AA%E3%81%8C%E4%B8%80%E8%87%B4%E3%81%99%E3%82%8B%E5%A0%B4%E5%90%88%E3%80%81%E7%B5%90%E5%90%88%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%AA%E3%81%84%0A%20%20%20%20%20%20%20%20if%28%20x%20%3D%3D%20y%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bpar%7D%7C%24%7Brank%7D%7C%E8%A6%AA%E3%81%8C%E4%B8%80%E8%87%B4%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%9F%E3%82%81%E7%B5%90%E5%90%88%E3%81%97%E3%81%AA%E3%81%84%E3%81%A7%E7%B5%82%E4%BA%86%E3%81%99%E3%82%8B%E3%80%82%60%29%0A%20%20%20%20%20%20%20%20%20%20%20%20return%7D%3B%0A%0A%20%20%20%20%20%20%20%20//%E6%9C%A8%E3%81%AE%E6%B7%B1%E3%81%95%E3%81%8C%E6%B7%B1%E3%81%84%E6%96%B9%E3%81%AB%E7%B5%90%E5%90%88%E3%81%99%E3%82%8B%0A%20%20%20%20%20%20%20%20if%28rank%5Bx%5D%20%3C%20rank%5By%5D%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20par%5Bx%5D%20%3D%20y%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bpar%7D%7C%24%7Brank%7D%7C1%E3%81%A4%E7%9B%AE%E3%81%AE%E8%A6%81%E7%B4%A0x%E3%82%88%E3%82%8A2%E3%81%A4%E7%9B%AE%E3%81%AE%E8%A6%81%E7%B4%A0y%E3%81%AE%E6%9C%A8%E3%81%AE%E6%B7%B1%E3%81%95%E3%81%8C%E6%B7%B1%E3%81%84%E3%81%9F%E3%82%81%E3%80%81x%E3%81%AE%E8%A6%AA%E3%82%92y%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%80%82%60%29%3B%0A%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20par%5By%5D%20%3D%20x%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bpar%7D%7C%24%7Brank%7D%7C2%E3%81%A4%E7%9B%AE%E3%81%AE%E8%A6%81%E7%B4%A0y%E3%82%88%E3%82%8A1%E3%81%A4%E7%9B%AE%E3%81%AE%E8%A6%81%E7%B4%A0x%E3%81%AE%E6%9C%A8%E3%81%AE%E6%B7%B1%E3%81%95%E3%81%8C%E6%B7%B1%E3%81%84%E3%81%9F%E3%82%81%E3%80%81y%E3%81%AE%E8%A6%AA%E3%82%92x%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%80%82%60%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%28rank%5Bx%5D%20%3D%3D%20rank%5By%5D%29%7Brank%5Bx%5D%20%3D%20%20rank%5Bx%5D%20%2B%201%3B%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20console.log%28%60%E7%B5%90%E5%90%88%E5%BE%8C%E3%81%AE%E5%90%84%E8%A6%81%E7%B4%A0%E3%81%AE%E8%A6%AA%3A%24%7Bpar%7D%60%29%0A%20%20%20%20%20%20%20%20console.log%28%60%E7%B5%90%E5%90%88%E5%BE%8C%E3%81%AE%E5%90%84%E8%A6%81%E7%B4%A0%E3%81%AE%E6%9C%A8%E3%81%AE%E6%B7%B1%E3%81%95%3A%24%7Brank%7D%60%29%0A%20%20%20%20%7D%0A%20%20%20%20%0A%20%20%20%20var%20par,rank%3B%0A%20%20%20%20par%20%3D%20%5B0,1,1,0,6,1,6,4%5D%0A%20%20%20%20rank%20%3D%20%5B0,1,1,0,2,1,2,2%5D%0A%20%20%20%20//%20par%3D%5B0,6,1,0,6,1,6,4%5D%20%E3%81%A8%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%80%82%0A%20%20%20%20unite%28par,rank,6,1%29&cumulative=false&curInstr=0&heapPrimitives=nevernest&mode=display&origin=opt-frontend.js&py=js&rawInputLstJSON=%5B%5D&textReferences=false)

# その他情報

## 感想
フリーハンドで図を書くのも理解が深まりますね

## 依存関係グラフ
依存関係グラフは変数の結びつきを一目でわかりやすくするための図です。
変数の流れを確認しやすくすることでワーキングメモリの負担を減らすことができます。
作成方法はコード上の変数に丸付けて線を繋げています。

![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/9ae01539-565e-0c3e-1cd6-f754ab115f83.png)


## 状態遷移図
計算内容を明示する表。
ステップごとの変数の値を各列に表示します。
複雑な計算を行うコードを理解するのに役立つ表です。

par|rank|行動
--|---|---
0,1,1,0,6,1,6,4|　| 親par[6]（=6）と要素x（=6）が一致する場合、xを返す
0,1,1,0,6,1,6,4|　| 親par[1]（=1）と要素x（=1）が一致する場合、xを返す
0,6,1,0,6,1,6,4|0,1,1,0,2,1,2,2|2つ目の要素yより1つ目の要素xの木の深さが深いため、yの親をxに変更する。


# 参考資料

プログラミングコンテストチャレンジブック [第2版]　マイナビ　p84

プログラマー脳　秀和システム
p73 python tutor
p71 状態遷移表　
p69 依存関係グラフ

# githubコミット部分

https://github.com/RYA234/laravel9_vite_vue3/commit/1647ab1a03686e2222b4474598b3b4458caa41fb