サイボウズが行うフロントエンドの品質保証 / 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_
2. ฏ໺ ণ࢜ / Masashi Hirano @shisama_ shisama Node.js Core Collaborator
3. What is this presentation for? • ϑϩϯτΤϯυͷ඼࣭อূʹ͍ͭͯ • αΠϘ΢ζ͕ߦ͍ͬͯΔऔΓ૊Έʹ͍ͭͯ঺հ͠·͢ʂ
5. ݕূϑϩʔͱ୲౰ ୯ମςετ && 2"ςετ ηΩϡϦςΟ ύϑΥʔϚϯε ϓϩμΫτ։ൃνʔϜ ։ൃࢧԉνʔϜ ։ൃத ɾPull Request୯Ґ ɾϚʔδޙ ϦϦʔεલޙ ϦάϨογϣϯςετ
6. ιϑτ΢ΣΞ඼࣭ͱ͸ʁ https://www.ipa.go.jp/files/000065855.pdf
7. ιϑτ΢ΣΞ඼࣭ͱ͸ʁ https://www.ipa.go.jp/files/000065855.pdf ࠓ೔͸ʮػೳʯʮੑೳʯʮηΩϡϦςΟʯ
   ʹ͍ͭͯ؆୯ʹ࿩͠·͢
8. Function
9. αΠϘ΢ζͷػೳʹର͢Δ඼࣭อূ • ୯ମςετɺE2EɺUIςετΛಋೖ͍ͯ͠Δ • ςετΛॻ͘จԽ͸ਁಁ͍ͯ͠Δ • kintone ։ൃνʔϜ͸ʮಡΈ΍͘͢ςετՄೳͳίʔυΛॻ͘ʯΛϛο γϣϯͷ̍ͭʹ͍ͯ͠Δ • ςετ΍඼࣭อূͷઐ໳νʔϜ(QAνʔϜ)͕͍Δ • ϓϩμΫτ։ൃνʔϜͰ͸ݟ͚ͭΒΕͳ͍ෆ۩߹ͳͲΛݟ͚ͭͯใࠂͯ͠ ͘ΕΔ
10. Performance
11. αΠϘ΢ζͷύϑΥʔϚϯεʹର͢Δ඼࣭อূ • SpeedCurve ͰఆظతʹϓϩμΫτ΍ίʔϙϨʔταΠτΛܭଌ • ϑϩϯτΤϯυΤΩεύʔτ͕ܭଌ݁ՌΛ֬ೝ • ύϑΥʔϚϯε͕Լ͕ͬͨ৔߹͸ݪҼ௥ٻ • ϓϩμΫτνʔϜͳͲଞνʔϜʹใࠂ
12. SpeedCurve
13. Lighthouse 13 • Google ੡ • OSS • Chrome devTools ʹඪ४౥ࡌ • Chrome ExtensionɺCLIɺCI (GitHub Actions, CircleCI, etc) ༷ʑͳܗࣜͰ഑෍͞Ε͍ͯΔ
14. Security
15. ϑϩϯτΤϯυʹؔ͢Δ੬ऑੑ https://blog.cybozu.io/entry/npm-vulnerabilities-and-postinstall https://blog.cybozu.io/entry/2020/05/07/110331
16. αΠϘ΢ζͷηΩϡϦςΟʹର͢Δ׆ಈ • ηΩϡϦςΟεϖγϟϦετνʔϜ(PSIRT)͕͍Δ • ੬ऑੑใ঑੍ۚ౓ • ߏ੒؅ཧ • ֤੡඼Ͱར༻͍ͯ͠Δ 3rd Party ੡඼Λ؅ཧ • package-lock.jsonɺyarn.lock ͔Β࢖͍ͬͯΔ 3rd Party ͷϥΠϒϥϦʹ੬ऑੑ͕ͳ͍͔ PSIRTνʔϜ͕֬ೝͯ͘͠ΕΔ • npm ύοέʔδͷ੬ऑੑ਍அπʔϧ ( Snyk ) • ੝ΜͳηΩϡϦςΟʹؔ͢Δࣾ಺৘ใڞ༗ͳͲ
17. https://blog.cybozu.io/entry/2020/04/28/080000
18. Snyk 18 • 3rd PartyϥΠϒϥϦͷ੬ऑੑΛ νΣοΫ͢ΔαʔϏε • CVEͷσʔλΛ࢖͍ͬͯΔ • ༷ʑͳݴޠʹରԠ͍ͯ͠Δ • ੬ऑੑΛमਖ਼͢ΔPull Request Λࣗಈੜ੒ • OSS͸ແྉͰ࢖͑Δ
19. https://speakerdeck.com/masashi ϑϩϯτΤϯυͷηΩϡϦςΟʹؔ͢Δաڈൃදࢿྉ΋ࢀߟʹͲ͏ͧ
20. Conclusion • ઐ໳తͳ෼໺Λ࣋ͭ։ൃࢧԉνʔϜ • ϓϩμΫτνʔϜ͕҆৺ͯ͠ػೳ։ൃͰ͖Δ • ϓϩμΫτνʔϜ͕ڠಇͯ͠඼࣭ΛߴΊΔ͜ͱ͕ग़དྷΔ • πʔϧΛಋೖ͢Δ • ൺֱత؆୯ʹͰ͖Δ
21. https://blog.cybozu.io/entry/2019/08/05/190000 ͦͷଞͷϑϩϯτΤϯυ΁ͷऔΓ૊ΈͳͲ͸ϒϩάʹهࡌ͍ͯ͠·͢ʂ