JavaScriptで蟻本 グラフ 二部グラフ判定

# 概要
アルゴリズムの学習記録を投稿します。
今回は蟻本・グラフの２部グラフ判定p93についてです。

# 問題
```
p93
頂点数nの無向グラフが与えられます。隣接している頂点同士が違う色になるように、頂点に色を塗っていきます。
２色以内ですべての頂点を塗ることができるか判定してください。
多重辺やループはないものとします。

例１
入力
n=3
graph = [[1,2],[0,2],[0,1]]

出力
"No"

例２
入力
n=4
graph = [[1,3],[0,2],[1,3],[0,2]];

出力
"Yes"

```




# コード部分
```javascript
    // ２部グラフ判定 p93
    /**
     * @param number{Number}頂点の数
     * @param graphArray{Array} 辺の情報
     * @return ans {String} Yes :二色以内で塗り分け可能 No: 二色以内で塗り分け不可能
     */
    const  checkBipartite = (number,graphArray) =>{
        let i = 0 ;
        const colors = new Array(number).fill(0);

        //　深さ優先探索　他の頂点とを網羅するために使用する。
        /**
         * @param v{Number} 頂点番号
         * @param c{Number}} 色の情報 -1or1が入る。
         * @return ans {String} true :二色以内で塗り分け可能 false: 二色以内で塗り分け不可能
         */
        const dfs= (v,c) =>{
            // console.log(`${v}の色を${c}色に塗る`);
            colors[v] = c;
            console.log(`${i}|なし|def(${i},${c}) | |${v}を${c}色に塗る|${colors}`);
            for(let j = 0;j<graphArray[v].length;j++){
                // 頂点vに対して、隣接する頂点毎にループする。
                // 隣接している頂点が同じ色の場合
                if(colors[graphArray[v][j]] == c){
                    console.log(`${i}|${j}|def(${i},${c}) | colors[graphArray[v][j]] == c  </br> colors[graphArray[${v}][${j}]]（ ＝${colors[graphArray[v][j]]}） == ${c}|${v}と${graphArray[v][j]}は同じ${c}色${colors}`);
                    return false;
                }
                // 隣接している頂点が塗られていない場合異なる色で塗る。
                if(colors[graphArray[v][j]] == 0 && !dfs(graphArray[v][j],-c)){
                    console.log(`${i}|${j}| def(${graphArray[v][j]},${-c} | colors[graphArray[v][j]] == 0  </br> colors[graphArray[${v}][${j}]]（ ＝${colors[graphArray[v][j]]}） == 0 |${v}は塗り替えられていないので${-c}色に塗る|${colors}`);
                    return false;
                }
                console.log(`${i}|${j}|def(${i},${c})| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[${v}][${j}]]（ ＝${colors[graphArray[v][j]]}） !== 0  and ${c}|${v}と${graphArray[v][j]}は既に異なる色に塗られている|${colors}`);
            }
            // 全ての色が塗れた場合。
            // console.log("色が塗れた場合");
            console.log(`${i}|なし|def(${i},${c}) | |すべての頂点が塗れた|${colors}`);
            return true;
        }
        // 全ての頂点に対してループする。
        console.log(`i|j|!dfs(i,1)|条件|行動|graphの色`)
        for( i= 0;i<number; i++){
            if(colors[i] == 0){
                if(!dfs(i,1)){
                    console.log("No");
                    return "No";
                }
            }
        }
        console.log("Yes");
        return "Yes";
    }

    const testCase2Number = 4;
    const testCase2Array = [[1,3],[0,2],[1,3],[0,2]];
    // Yes
    checkBipartite(testCase2Number,testCase2Array)
```

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

[Python Tutorリンク](https://pythontutor.com/render.html#code=const%20%20checkBipartite%20%3D%20%28number,graphArray%29%20%3D%3E%7B%0A%20%20%20%20let%20i%20%3D%200%20%3B%0A%20%20%20%20const%20colors%20%3D%20new%20Array%28number%29.fill%280%29%3B%0A%20%20%20%20const%20dfs%3D%20%28v,c%29%20%3D%3E%7B%0A%20%20%20%20%20%20%20%20//%20console.log%28%60%24%7Bv%7D%E3%81%AE%E8%89%B2%E3%82%92%24%7Bc%7D%E8%89%B2%E3%81%AB%E5%A1%97%E3%82%8B%60%29%3B%0A%20%20%20%20%20%20%20%20colors%5Bv%5D%20%3D%20c%3B%0A%20%20%20%20%20%20%20%20console.log%28%60%24%7Bi%7D%7C%E3%81%AA%E3%81%97%7Cdef%28%24%7Bi%7D,%24%7Bc%7D%29%20%7C%20%7C%24%7Bv%7D%E3%82%92%24%7Bc%7D%E8%89%B2%E3%81%AB%E5%A1%97%E3%82%8B%7C%24%7Bcolors%7D%60%29%3B%0A%20%20%20%20%20%20%20%20for%28let%20j%20%3D%200%3Bj%3CgraphArray%5Bv%5D.length%3Bj%2B%2B%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20//%20%E9%A0%82%E7%82%B9v%E3%81%AB%E5%AF%BE%E3%81%97%E3%81%A6%E3%80%81%E9%9A%A3%E6%8E%A5%E3%81%99%E3%82%8B%E9%A0%82%E7%82%B9%E6%AF%8E%E3%81%AB%E3%83%AB%E3%83%BC%E3%83%97%E3%81%99%E3%82%8B%E3%80%82%0A%20%20%20%20%20%20%20%20%20%20%20%20//%20%E9%9A%A3%E6%8E%A5%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E9%A0%82%E7%82%B9%E3%81%8C%E5%90%8C%E3%81%98%E8%89%B2%E3%81%AE%E5%A0%B4%E5%90%88%0A%20%20%20%20%20%20%20%20%20%20%20%20if%28colors%5BgraphArray%5Bv%5D%5Bj%5D%5D%20%3D%3D%20c%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bi%7D%7C%24%7Bj%7D%7Cdef%28%24%7Bi%7D,%24%7Bc%7D%29%20%7C%20colors%5BgraphArray%5Bv%5D%5Bj%5D%5D%20%3D%3D%20c%20%20%3C/br%3E%20colors%5BgraphArray%5B%24%7Bv%7D%5D%5B%24%7Bj%7D%5D%5D%EF%BC%88%20%EF%BC%9D%24%7Bcolors%5BgraphArray%5Bv%5D%5Bj%5D%5D%7D%EF%BC%89%20%3D%3D%20%24%7Bc%7D%7C%24%7Bv%7D%E3%81%A8%24%7BgraphArray%5Bv%5D%5Bj%5D%7D%E3%81%AF%E5%90%8C%E3%81%98%24%7Bc%7D%E8%89%B2%24%7Bcolors%7D%60%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20//%20%E9%9A%A3%E6%8E%A5%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E9%A0%82%E7%82%B9%E3%81%8C%E5%A1%97%E3%82%89%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E7%95%B0%E3%81%AA%E3%82%8B%E8%89%B2%E3%81%A7%E5%A1%97%E3%82%8B%E3%80%82%0A%20%20%20%20%20%20%20%20%20%20%20%20if%28colors%5BgraphArray%5Bv%5D%5Bj%5D%5D%20%3D%3D%200%20%26%26%20!dfs%28graphArray%5Bv%5D%5Bj%5D,-c%29%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bi%7D%7C%24%7Bj%7D%7C%20def%28%24%7BgraphArray%5Bv%5D%5Bj%5D%7D,%24%7B-c%7D%20%7C%20colors%5BgraphArray%5Bv%5D%5Bj%5D%5D%20%3D%3D%200%20%20%3C/br%3E%20colors%5BgraphArray%5B%24%7Bv%7D%5D%5B%24%7Bj%7D%5D%5D%EF%BC%88%20%EF%BC%9D%24%7Bcolors%5BgraphArray%5Bv%5D%5Bj%5D%5D%7D%EF%BC%89%20%3D%3D%200%20%7C%24%7Bv%7D%E3%81%AF%E5%A1%97%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%89%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E3%81%AE%E3%81%A7%24%7B-c%7D%E8%89%B2%E3%81%AB%E5%A1%97%E3%82%8B%7C%24%7Bcolors%7D%60%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%60%24%7Bi%7D%7C%24%7Bj%7D%7Cdef%28%24%7Bi%7D,%24%7Bc%7D%29%7C%20colors%5BgraphArray%5Bv%5D%5Bj%5D%5D%20!%3D%3D%200%20and%20c%20%20%3C/br%3E%20colors%5BgraphArray%5B%24%7Bv%7D%5D%5B%24%7Bj%7D%5D%5D%EF%BC%88%20%EF%BC%9D%24%7Bcolors%5BgraphArray%5Bv%5D%5Bj%5D%5D%7D%EF%BC%89%20!%3D%3D%200%20%20and%20%24%7Bc%7D%7C%24%7Bv%7D%E3%81%A8%24%7BgraphArray%5Bv%5D%5Bj%5D%7D%E3%81%AF%E6%97%A2%E3%81%AB%E7%95%B0%E3%81%AA%E3%82%8B%E8%89%B2%E3%81%AB%E5%A1%97%E3%82%89%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%7C%24%7Bcolors%7D%60%29%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20//%20%E5%85%A8%E3%81%A6%E3%81%AE%E8%89%B2%E3%81%8C%E5%A1%97%E3%82%8C%E3%81%9F%E5%A0%B4%E5%90%88%E3%80%82%0A%20%20%20%20%20%20%20%20//%20console.log%28%22%E8%89%B2%E3%81%8C%E5%A1%97%E3%82%8C%E3%81%9F%E5%A0%B4%E5%90%88%22%29%3B%0A%20%20%20%20%20%20%20%20console.log%28%60%24%7Bi%7D%7C%E3%81%AA%E3%81%97%7Cdef%28%24%7Bi%7D,%24%7Bc%7D%29%20%7C%20%7C%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E9%A0%82%E7%82%B9%E3%81%8C%E5%A1%97%E3%82%8C%E3%81%9F%7C%24%7Bcolors%7D%60%29%3B%0A%20%20%20%20%20%20%20%20return%20true%3B%0A%20%20%20%20%7D%0A%20%20%20%20//%20%E5%85%A8%E3%81%A6%E3%81%AE%E9%A0%82%E7%82%B9%E3%81%AB%E5%AF%BE%E3%81%97%E3%81%A6%E3%83%AB%E3%83%BC%E3%83%97%E3%81%99%E3%82%8B%E3%80%82%0A%20%20%20%20console.log%28%60i%7Cj%7C!dfs%28i,1%29%7C%E6%9D%A1%E4%BB%B6%7C%E8%A1%8C%E5%8B%95%7Cgraph%E3%81%AE%E8%89%B2%60%29%0A%20%20%20%20for%28%20i%3D%200%3Bi%3Cnumber%3B%20i%2B%2B%29%7B%0A%20%20%20%20%20%20%20%20if%28colors%5Bi%5D%20%3D%3D%200%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if%28!dfs%28i,1%29%29%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log%28%22No%22%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20%22No%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20console.log%28%22Yes%22%29%3B%0A%20%20%20%20return%20%22Yes%22%3B%0A%7D%0A%0A%20%20%20%20const%20testCase2Number%20%3D%204%3B%0A%20%20%20%20const%20testCase2Array%20%3D%20%5B%5B1,3%5D,%5B0,2%5D,%5B1,3%5D,%5B0,2%5D%5D%3B%0A%20%20%20%20//%20Yes%0A%20%20%20%20checkBipartite%28testCase2Number,testCase2Array%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/b8384776-0f5d-d7a2-45c3-4fe6e6735d09.png)


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

### 例1
i|j|!dfs(i,1)|条件|行動|graphの色
-|-|---------|---|----|-------
0|なし|def(0,1) | |0を1色に塗る|1,0,0
0|なし|def(0,-1) | |1を-1色に塗る|1,-1,0
0|0|def(0,-1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[1][0]]（ ＝1） !== 0  and -1|1と0は既に異なる色に塗られている|1,-1,0
0|なし|def(0,1) | |2を1色に塗る|1,-1,1
0|0|def(0,1) | colors[graphArray[v][j]] == c  </br> colors[graphArray[2][0]]（ ＝1） == 1|2と0は同じ1色1,-1,1
0|1| def(2,1 | colors[graphArray[v][j]] == 0  </br> colors[graphArray[1][1]]（ ＝1） == 0 |1は塗り替えられていないので1色に塗る|1,-1,1
0|0| def(1,-1 | colors[graphArray[v][j]] == 0  </br> colors[graphArray[0][0]]（ ＝-1） == 0 |0は塗り替えられていないので-1色に塗る|1,-1,1

No

### 例2

i|j|!dfs(i,1)|条件|行動|graphの色
-|-|---------|---|----|-------
0|なし|def(0,1) | |0を1色に塗る|1,0,0,0
0|なし|def(0,-1) | |1を-1色に塗る|1,-1,0,0
0|0|def(0,-1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[1][0]]（ ＝1） !== 0  and -1|1と0は既に異なる色に塗られている|1,-1,0,0
0|なし|def(0,1) | |2を1色に塗る|1,-1,1,0
0|0|def(0,1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[2][0]]（ ＝-1） !== 0  and 1|2と1は既に異なる色に塗られている|1,-1,1,0
0|なし|def(0,-1) | |3を-1色に塗る|1,-1,1,-1
0|0|def(0,-1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[3][0]]（ ＝1） !== 0  and -1|3と0は既に異なる色に塗られている|1,-1,1,-1
0|1|def(0,-1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[3][1]]（ ＝1） !== 0  and -1|3と2は既に異なる色に塗られている|1,-1,1,-1
0|なし|def(0,-1) | |すべての頂点が塗れた|1,-1,1,-1
0|1|def(0,1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[2][1]]（ ＝-1） !== 0  and 1|2と3は既に異なる色に塗られている|1,-1,1,-1
0|なし|def(0,1) | |すべての頂点が塗れた|1,-1,1,-1
0|1|def(0,-1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[1][1]]（ ＝1） !== 0  and -1|1と2は既に異なる色に塗られている|1,-1,1,-1
0|なし|def(0,-1) | |すべての頂点が塗れた|1,-1,1,-1
0|0|def(0,1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[0][0]]（ ＝-1） !== 0  and 1|0と1は既に異なる色に塗られている|1,-1,1,-1
0|1|def(0,1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[0][1]]（ ＝-1） !== 0  and 1|0と3は既に異なる色に塗られている|1,-1,1,-1
0|なし|def(0,1) | |すべての頂点が塗れた|1,-1,1,-1

### 例3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/ed056b62-0830-bcae-973c-730d0442d25e.png)


```
入力
n=2
graph = [[1],[0]]

出力
"Yes"
```

i|j|!dfs(i,1)|条件|行動|graphの色
-|-|---------|---|----|-------
0|なし|def(0,1) | |0を1色に塗る|1,0
0|なし|def(0,-1) | |1を-1色に塗る|1,-1
0|0|def(0,-1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[1][0]]（ ＝1） !== 0  and -1|1と0は既に異なる色に塗られている|1,-1
0|なし|def(0,-1) | |すべての頂点が塗れた|1,-1
0|0|def(0,1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[0][0]]（ ＝-1） !== 0  and 1|0と1は既に異なる色に塗られている|1,-1
0|なし|def(0,1) | |すべての頂点が塗れた|1,-1


Yes


### 例4

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/8f3e4211-d5f1-148e-9c88-d840ddd77168.png)


```
入力
n=4
graph = [[1,2,3],[0,2,3],[0,1,3],[0,1,2]]

出力
"Yes"

```

i|j|!dfs(i,1)|条件|行動|graphの色
-|-|---------|---|----|-------
0|なし|def(0,1) | |0を1色に塗る|1,0,0,0
0|なし|def(0,-1) | |1を-1色に塗る|1,-1,0,0
0|0|def(0,-1)| colors[graphArray[v][j]] !== 0 and c  </br> colors[graphArray[1][0]]（ ＝1） !== 0  and -1|1と0は既に異なる色に塗られている|1,-1,0,0
0|なし|def(0,1) | |2を1色に塗る|1,-1,1,0
0|0|def(0,1) | colors[graphArray[v][j]] == c  </br> colors[graphArray[2][0]]（ ＝1） == 1|2と0は同じ1色1,-1,1,0
0|1| def(2,1 | colors[graphArray[v][j]] == 0  </br> colors[graphArray[1][1]]（ ＝1） == 0 |1は塗り替えられていないので1色に塗る|1,-1,1,0
0|0| def(1,-1 | colors[graphArray[v][j]] == 0  </br> colors[graphArray[0][0]]（ ＝-1） == 0 |0は塗り替えられていないので-1色に塗る|1,-1,1,0


No


# 参考資料

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

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

# githubコミット部分

https://github.com/RYA234/laravel9_vite_vue3/commit/1a3a325336463027966c3b76d51185fc325dbb03