Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Function

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Performance

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

SpeedCurve

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Security

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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