Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

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

Masashi Hirano

June 17, 2020
Tweet

More Decks by Masashi Hirano

Other Decks in Programming

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