サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu

フロントエンドエキスパートを中心に開発支援チームによるサイボウズのフロントエンドの品質保証に対する活動を発表しました。

質問・感想など:
https://twitter.com/shisama_

発表したイベント:
【オンライン】SaaSを支える品質担保術/レガシーコード、アーキテクチャ、EOL@ラクス - connpass
https://rakus.connpass.com/event/177676/

Transcript

1. Frontend Quality Assurance
   at Cybozu, Inc
   #RakusMeetup
   Masashi Hirano / @shisama_
   

   View Slide

2. ฏ໺ ণ࢜ / Masashi Hirano
   @shisama_
   shisama
   Node.js Core Collaborator
   

   View Slide

3. What is this presentation for?
   • ϑϩϯτΤϯυͷ඼࣭อূʹ͍ͭͯ
   • αΠϘ΢ζ͕ߦ͍ͬͯΔऔΓ૊Έʹ͍ͭͯ঺հ͠·͢ʂ
   

   View Slide

4. View Slide

5. ݕূϑϩʔͱ୲౰
   ୯ମςετ && 2"ςετ
   ηΩϡϦςΟ
   ύϑΥʔϚϯε
   ϓϩμΫτ։ൃνʔϜ ։ൃࢧԉνʔϜ
   ։ൃத
   ɾPull Request୯Ґ
   ɾϚʔδޙ
   ϦϦʔεલޙ
   ϦάϨογϣϯςετ
   

   View Slide

6. ιϑτ΢ΣΞ඼࣭ͱ͸ʁ
   https://www.ipa.go.jp/files/000065855.pdf
   

   View Slide

7. ιϑτ΢ΣΞ඼࣭ͱ͸ʁ
   https://www.ipa.go.jp/files/000065855.pdf
   ࠓ೔͸ʮػೳʯʮੑೳʯʮηΩϡϦςΟʯ
   ʹ͍ͭͯ؆୯ʹ࿩͠·͢
   

   View Slide

8. Function
   

   View Slide

9. αΠϘ΢ζͷػೳʹର͢Δ඼࣭อূ
   • ୯ମςετɺE2EɺUIςετΛಋೖ͍ͯ͠Δ
   • ςετΛॻ͘จԽ͸ਁಁ͍ͯ͠Δ
   • kintone ։ൃνʔϜ͸ʮಡΈ΍͘͢ςετՄೳͳίʔυΛॻ͘ʯΛϛο
   γϣϯͷ̍ͭʹ͍ͯ͠Δ
   • ςετ΍඼࣭อূͷઐ໳νʔϜ(QAνʔϜ)͕͍Δ
   • ϓϩμΫτ։ൃνʔϜͰ͸ݟ͚ͭΒΕͳ͍ෆ۩߹ͳͲΛݟ͚ͭͯใࠂͯ͠
   ͘ΕΔ
   

   View Slide

10. Performance
    

    View Slide

11. αΠϘ΢ζͷύϑΥʔϚϯεʹର͢Δ඼࣭อূ
    • SpeedCurve ͰఆظతʹϓϩμΫτ΍ίʔϙϨʔταΠτΛܭଌ
    • ϑϩϯτΤϯυΤΩεύʔτ͕ܭଌ݁ՌΛ֬ೝ
    • ύϑΥʔϚϯε͕Լ͕ͬͨ৔߹͸ݪҼ௥ٻ
    • ϓϩμΫτνʔϜͳͲଞνʔϜʹใࠂ
    

    View Slide

12. SpeedCurve
    

    View Slide

13. Lighthouse
    13
    • Google ੡
    • OSS
    • Chrome devTools ʹඪ४౥ࡌ
    • Chrome ExtensionɺCLIɺCI
    (GitHub Actions, CircleCI, etc)
    ༷ʑͳܗࣜͰ഑෍͞Ε͍ͯΔ
    

    View Slide

14. Security
    

    View Slide

15. ϑϩϯτΤϯυʹؔ͢Δ੬ऑੑ
    https://blog.cybozu.io/entry/npm-vulnerabilities-and-postinstall
    https://blog.cybozu.io/entry/2020/05/07/110331
    

    View Slide

16. αΠϘ΢ζͷηΩϡϦςΟʹର͢Δ׆ಈ
    • ηΩϡϦςΟεϖγϟϦετνʔϜ(PSIRT)͕͍Δ
    • ੬ऑੑใ঑੍ۚ౓
    • ߏ੒؅ཧ
    • ֤੡඼Ͱར༻͍ͯ͠Δ 3rd Party ੡඼Λ؅ཧ
    • package-lock.jsonɺyarn.lock ͔Β࢖͍ͬͯΔ 3rd Party ͷϥΠϒϥϦʹ੬ऑੑ͕ͳ͍͔
    PSIRTνʔϜ͕֬ೝͯ͘͠ΕΔ
    • npm ύοέʔδͷ੬ऑੑ਍அπʔϧ ( Snyk )
    • ੝ΜͳηΩϡϦςΟʹؔ͢Δࣾ಺৘ใڞ༗ͳͲ
    

    View Slide

17. https://blog.cybozu.io/entry/2020/04/28/080000
    

    View Slide

18. Snyk
    18
    • 3rd PartyϥΠϒϥϦͷ੬ऑੑΛ
    νΣοΫ͢ΔαʔϏε
    • CVEͷσʔλΛ࢖͍ͬͯΔ
    • ༷ʑͳݴޠʹରԠ͍ͯ͠Δ
    • ੬ऑੑΛमਖ਼͢ΔPull Request
    Λࣗಈੜ੒
    • OSS͸ແྉͰ࢖͑Δ
    

    View Slide

19. https://speakerdeck.com/masashi
    ϑϩϯτΤϯυͷηΩϡϦςΟʹؔ͢Δաڈൃදࢿྉ΋ࢀߟʹͲ͏ͧ
    

    View Slide

20. Conclusion
    • ઐ໳తͳ෼໺Λ࣋ͭ։ൃࢧԉνʔϜ
    • ϓϩμΫτνʔϜ͕҆৺ͯ͠ػೳ։ൃͰ͖Δ
    • ϓϩμΫτνʔϜ͕ڠಇͯ͠඼࣭ΛߴΊΔ͜ͱ͕ग़དྷΔ
    • πʔϧΛಋೖ͢Δ
    • ൺֱత؆୯ʹͰ͖Δ
    

    View Slide

21. https://blog.cybozu.io/entry/2019/08/05/190000
    ͦͷଞͷϑϩϯτΤϯυ΁ͷऔΓ૊ΈͳͲ͸ϒϩάʹهࡌ͍ͯ͠·͢ʂ
    

    View Slide