TypeScript Graph でコードレビューの心理的障壁を乗り越える

コードレビューを任されたとき、特にコードベースの土地勘のない箇所のレビューに対して心理的な障壁を感じませんか？ TypeScript Graph というツールを作り心理的障壁を乗り越えた事例を紹介します。また、TypeScript Graph を使うことで視覚化されてきた、我々の PR や設計の問題点についても考察します。

Transcript

1. 
   54,BJHJ
   ,BOTBJ
   
   גࣜձࣾυϫϯΰ
   εϙϯαʔ-5
   5ZQF4DSJQU
   (SBQI
   ͰίʔυϨ Ϗϡʔͷ৺ཧతোนΛ৐Γӽ͑Δ
2. ϗϦͪΌΜ • υϫϯΰڭҭࣄۀ ZEN Study WebϑϩϯτΤϯυ։ൃ • ๺ւಓߐผࢢࡏॅ • झຯɿ εέʔτϘʔυ🛹 • ݸਓ։ൃ • ਺ಠΞϓϦ ʢTSͱVueͷ࿅शͷͨΊʹ࡞Γ࢝Ίͨʣ • TypeScript Gr a ph ʢ͜ͷLTͰ঺հ͠·͢ʣ X: @YSK8_ / https://github.com/ysk8hori
3. ίʔυϨϏϡʔʹ৺ཧతোนΛײ͍ͯ͡·ͤΜ͔ʁ
4. ίʔυϨϏϡʔͷ৺ཧతোนͷཧ༝ w ίϛϡχέʔγϣϯͷน
   w എܠͷཧղͷน
   w ڍಈͷཧղͷน
   w ίʔυͷཧղͷน ˠ
   ࠓ೔͸͜Εʹ͍ͭͯ
   
   
   
   
   (JU)VC
   ͷ
   13
   Λલఏʹͯ͠
   
   
   
   
   ࿩͠·͢
5. ίʔυͷཧղͷนͱ͸ʁ
6. 13
   ͔ΒಘΒΕΔίʔυपΓͷ৘ใ w λΠτϧ
   w આ໌
   w ίϛοτίϝϯτ
   w มߋର৅ϑΝΠϧͷҰཡ
   w ίʔυͷ
   EJ f ˠ มߋͷৄࡉͰ͋Δ
   มߋ఺ͷ৘ใ͔͠ͳ͍ ঢ়گʹΑͬͯ৘ใͷྔɾ࣭ͱ΋ʹҟͳΔ ˠ
7. ৄࡉա͗Δ৘ใ͕෦෼తʹ͔͠खʹೖΒͳ͍ͷͰ
   पลͷίʔυ΋ؚΊͯಡΉ ίʔυͷཧղͷͨΊʹ
   ߴ͍ίετΛ෷Θͳ͚Ε͹ ͳΒͳ͍ͱ͍͏
   ৺ཧతোน
8. 5ZQF4DSJQU
   (SBQI ͦ͜Ͱ Λ࡞Γ·ͨ͠💪
9. 5ZQF4DSJQU
   (SBQI
   ͱ͸ ϑΝΠϧಉ࢜ͷґଘؔ܎Λࢹ֮Խ͢Δ$-*πʔϧ
   ίʔυΛಡ·ͣʹʹ೴ͷϝϞϦΛফඅͤͣʹɺߏ଄ΛཧղͰ͖Δ
10. 5ZQF4DSJQU
    (SBQI
    Λ࢖͏ͱͲ͏ݟ͑Δʁ ͍͔ͭ͘ͷϦϙδτϦΛ୳ࡧ͠ͳ͕Β঺հ͠·͢
11. ྫɿZTLIPSJ
    
    
    
    
    
    
    UZQFTDSJQUHSBQI
12. ྫɿQNOESTKPUBJ
    ࢀߟ
    IUUQTHJUIVCDPNQNOESTKPUBJ
    
13. 4UPSZCPPL TUPSZCPPLDPEFDPSFTSDNBOBHFS
14. 4UPSZCPPL TUPSZCPPLDPEFDPSFTSDNBOBHFSDPNQPOFOUTMBZPVU
15. 4UPSZCPPL TUPSZCPPLDPEFDPSFTSDNBOBHFSDPOUBJOFS
16. 5ZQF4DSJQU
    (SBQI
    ͷޮՌ w ࢹ֮తʹߏ଄ΛཧղͰ͖Δ͜ͱͰɺ
    w ෆཁͳίʔυϦʔσΟϯάΛলྗԽͰ͖Δ
    w ͦΕͧΕͷίʔυͷ໾ׂΛ૝૾Ͱ͖Δ
    w ίʔυϦʔσΟϯάͷऔֻ͔ͬΓʹͳΔ
    w ߏ଄্ͷ໰୊͕͋Ε͹࡯஌Ͱ͖Δ
17. ͱ͸͍͑ɺ
    13
    ͷͨͼʹखݩͰ$-*Λୟ͘ͷ͸໘౗🤔💭
18. %FMUB
    5ZQF4DSJQU
    (SBQI
    "DUJPO
    Λެ։ 1VMM
    3FRVFTU
    Ͱͷมߋର৅ϑΝΠϧͱ
    ͦͷपลͷґଘؔ܎Λࢹ֮Խ͢Δ
    (JU)VC
    "DUJPO
19. 5ZQF4DSJQU
    (SBQI
    ʹΑͬͯ
    ίʔυͷཧղͷนΛ௿ͯ͘͠
    ίʔυϨϏϡʔͷ৺ཧతোนΛ৐Γӽ͑ͨʂ🎉
20. ฐࣾϑϩϯτΤϯυͷ
    13
    Ͱͷࣄྫ
    ͔ͦ͜Βಘͨؾ͖ͮ
21. ࣄྫ
    ৽͍͠ςΩετೖྗίϯϙʔωϯτΛ࣮૷ w ʮ৽͍͠ίϯϙʔωϯτͱςετͱε τʔϦʔΛ࡞ͬͯɺͦΕ͕Ͳ͔͜Β΋ ࢖༻͞Ε͍ͯͳ͍ʯ͜ͱ͕͙͢ʹ෼͔ Δɻྑ͍ɻ ˞੨৭ͷϊʔυ͸৽ن௥Ճ͞ΕͨϑΝΠϧ
22. ࣄྫ
    ͱ͋Δը໘ʹͱ͋Δද߲ࣔ໨Λ௥Ճ w ߏ଄͸ཧղͰ͖Δ
    w Ͳͷ6*ίϯϙʔωϯτΛมߋ͔ͨ͠Θ͔Δ
    w มߋର৅ͷςετ΋มߋ͞Ε͔ͨΘ͔Δ
    w ʮද߲ࣔ໨ͷ௥Ճͳͷ͔ͩΒɺϑΝΠϧ͕ ௥Ճ͞Εͯ΋ྑ͍ͷͰ͸🤔❓ʯ
    ͳͲͷٙ໰Λ͔࣋ͬͯΒίʔυΛݟΕΔɻ
23. w άϥϑ͕େ͖͗ͯ͢ߏ଄Λ೺Ѳ͖͠Εͳ͍
    ˠ
    ཧղ͕ࠔ೉
    ˠ
    ϨϏϡʔ͕ࠔ೉ ࣄྫ άϥϑ͕େ͖͘ͳͬͯ͠·͏ͷ͸ͳͥʁ
    🤔
24. άϥϑ͕େ͖͘ͳͬͯ͠·͏ͷ͸ͳͥʁ
    🤔 w ؔ܎ͷ͋Δॲཧ͕ۙ͘ʹू·͍ͬͯͳ͍
    w Ұͭͷ
    1VMM
    3FRVFTU
    Ͱଟ͘ͷ͜ͱΛ΍Ζ͏ͱ͍ͯ͠Δ
    w มߋՕॴ͕੹຿աଟʹͳ͍ͬͯΔ
    w มߋՕॴ΁ͷґଘ͕ଟ͍
25. มߋՕॴ͕੹຿աଟ w มߋՕॴͷґଘઌ͕ଟ͍৔߹͸άϥϑ͕େ͖͘ͳΔ
    ˠ
    มߋՕॴͷ੹຿͕ଟ͗͢ΔՄೳੑ͕͋Δ
26. มߋՕॴ΁ͷґଘ͕ଟ͍ w มߋՕॴ͕͍Ζ͍ΖͳՕॴ͔Β࢖ΘΕ͍ͯΔ
    ˠ
    ΞϓϦέʔγϣϯͷίΞͷ෦෼ʢNPEFM
    ͳͲʣ΍
    
    
    
    
    ൚༻తͳ෦඼ʢVUJMJUZ
    ͳͲʣΛมߋ͢Δͱ͜͏ͳΔ
    w άϥϑ͕େ͖͘ͳΔ͜ͱ͸໰୊ͳ͍͕
    มߋ͸৻ॏʹߦ͏ඞཁ͕͋Δ
27. άϥϑ͕େ͖͘ͳͬͯ΋ྑ͍มߋ͸͋Δ ͦͷଞɺάϥϑ͕େ͖͘ͳΔมߋྫ
    w ΞʔΩςΫνϟͷมߋͳͲେ͖ͳϦϑΝΫλϦϯά
    w ԿΒ͔ͷཧ༝Ͱ
    13
    Λ෼͚Δ͜ͱ͕ඇޮ཰Ͱ͋Δมߋ
    w ʜFUD ԿΕʹͤΑίʔυͷཧղͷน͸ߴ͘ͳͬͯ͠·͏ͷͰ
    Ͱ͖Δ͚ͩখ͍͞άϥϑ͕ग़ΔΑ͏ͳมߋΛ໨ࢦ͍ͨ͠
28. ·ͱΊ w 5ZQF4DSJQU
    (SBQI
    ͰϑΝΠϧಉ࢜ͷґଘؔ܎Λࢹ֮Խ͢Δ͜ͱͰ
    ߏ଄Λ೺Ѳ͠ίʔυϨϏϡʔͷ৺ཧతোนΛԼ͛ΒΕΔ
    w มߋՕॴपลͷʮάϥϑ͕େ͖͍ʯʮѱ͍ʯͰ͸ͳ͍͕ɺ
    େ͖͘ͳΔཧ༝͕ਖ਼౰Ͱ͋Δ͔Λߟ͑·͠ΐ͏ɻ
    w ʢϗϦͷܦݧଇ্ɺʣґଘάϥϑͷߏ଄͕ʮ៉ྷɾݟ΍͍͢ʯʮྑ͍ߏ଄ʯ Ͱ͸ͳͦ͞͏ɻ
29. 8F
    BSF
    IJSJOH
    υϫϯΰʹ͸ɺ5ZQF4DSJQU
    ྗΛൃشͰ͖Δ ؀ڥ͕͋Γ·͢ɻ