フロントエンドエキスパートを中心に開発支援チームによるサイボウズのフロントエンドの品質保証に対する活動を発表しました。
質問・感想など: https://twitter.com/shisama_
発表したイベント: 【オンライン】SaaSを支える品質担保術/レガシーコード、アーキテクチャ、[email protected]ラクス - connpass https://rakus.connpass.com/event/177676/
Frontend Quality Assuranceat Cybozu, Inc#RakusMeetupMasashi Hirano / @shisama_
View Slide
ฏ ণ࢜ / Masashi Hirano@shisama_shisamaNode.js Core Collaborator
What is this presentation for?• ϑϩϯτΤϯυͷ࣭อূʹ͍ͭͯ• αΠϘζ͕ߦ͍ͬͯΔऔΓΈʹ͍ͭͯհ͠·͢ʂ
ݕূϑϩʔͱ୲୯ମςετ && 2"ςετηΩϡϦςΟύϑΥʔϚϯεϓϩμΫτ։ൃνʔϜ ։ൃࢧԉνʔϜ։ൃதɾPull Request୯ҐɾϚʔδޙϦϦʔεલޙϦάϨογϣϯςετ
ιϑτΣΞ࣭ͱʁhttps://www.ipa.go.jp/files/000065855.pdf
ιϑτΣΞ࣭ͱʁhttps://www.ipa.go.jp/files/000065855.pdfࠓʮػೳʯʮੑೳʯʮηΩϡϦςΟʯʹ͍ͭͯ؆୯ʹ͠·͢
Function
αΠϘζͷػೳʹର͢Δ࣭อূ• ୯ମςετɺE2EɺUIςετΛಋೖ͍ͯ͠Δ• ςετΛॻ͘จԽਁಁ͍ͯ͠Δ• kintone ։ൃνʔϜʮಡΈ͘͢ςετՄೳͳίʔυΛॻ͘ʯΛϛογϣϯͷ̍ͭʹ͍ͯ͠Δ• ςετ࣭อূͷઐνʔϜ(QAνʔϜ)͕͍Δ• ϓϩμΫτ։ൃνʔϜͰݟ͚ͭΒΕͳ͍ෆ۩߹ͳͲΛݟ͚ͭͯใࠂͯ͘͠ΕΔ
Performance
αΠϘζͷύϑΥʔϚϯεʹର͢Δ࣭อূ• SpeedCurve ͰఆظతʹϓϩμΫτίʔϙϨʔταΠτΛܭଌ• ϑϩϯτΤϯυΤΩεύʔτ͕ܭଌ݁ՌΛ֬ೝ• ύϑΥʔϚϯε͕Լ͕ͬͨ߹ݪҼٻ• ϓϩμΫτνʔϜͳͲଞνʔϜʹใࠂ
SpeedCurve
Lighthouse13• Google • OSS• Chrome devTools ʹඪ४ࡌ• Chrome ExtensionɺCLIɺCI(GitHub Actions, CircleCI, etc)༷ʑͳܗࣜͰ͞Ε͍ͯΔ
Security
ϑϩϯτΤϯυʹؔ͢Δ੬ऑੑhttps://blog.cybozu.io/entry/npm-vulnerabilities-and-postinstallhttps://blog.cybozu.io/entry/2020/05/07/110331
αΠϘζͷηΩϡϦςΟʹର͢Δ׆ಈ• ηΩϡϦςΟεϖγϟϦετνʔϜ(PSIRT)͕͍Δ• ੬ऑੑใ੍ۚ• ߏཧ• ֤Ͱར༻͍ͯ͠Δ 3rd Party Λཧ• package-lock.jsonɺyarn.lock ͔Β͍ͬͯΔ 3rd Party ͷϥΠϒϥϦʹ੬ऑੑ͕ͳ͍͔PSIRTνʔϜ͕֬ೝͯ͘͠ΕΔ• npm ύοέʔδͷ੬ऑੑஅπʔϧ ( Snyk )• ΜͳηΩϡϦςΟʹؔ͢Δࣾใڞ༗ͳͲ
https://blog.cybozu.io/entry/2020/04/28/080000
Snyk18• 3rd PartyϥΠϒϥϦͷ੬ऑੑΛνΣοΫ͢ΔαʔϏε• CVEͷσʔλΛ͍ͬͯΔ• ༷ʑͳݴޠʹରԠ͍ͯ͠Δ• ੬ऑੑΛमਖ਼͢ΔPull RequestΛࣗಈੜ• OSSແྉͰ͑Δ
https://speakerdeck.com/masashiϑϩϯτΤϯυͷηΩϡϦςΟʹؔ͢ΔաڈൃදࢿྉࢀߟʹͲ͏ͧ
Conclusion• ઐతͳΛ࣋ͭ։ൃࢧԉνʔϜ• ϓϩμΫτνʔϜ͕҆৺ͯ͠ػೳ։ൃͰ͖Δ• ϓϩμΫτνʔϜ͕ڠಇ࣭ͯ͠ΛߴΊΔ͜ͱ͕ग़དྷΔ• πʔϧΛಋೖ͢Δ• ൺֱత؆୯ʹͰ͖Δ
https://blog.cybozu.io/entry/2019/08/05/190000ͦͷଞͷϑϩϯτΤϯυͷऔΓΈͳͲϒϩάʹهࡌ͍ͯ͠·͢ʂ