Slide 1
Slide 1 text
非機能テストのシフトレフト
あれ？テストを自動化したけど何か足りない？
Slide 2
Slide 2 text
自己紹介
＞ クラスメソッド株式会社
開発3年、クラウドエンジニア2年
最近テストを体系的に学ぶためJSTQB受験
＞ 経歴
ダイの大冒険
＞ 好きなもの
モダンアプリケーションコンサルティング部
＞名前
bun913（今泉大樹）
Slide 3
Slide 3 text
みなさん、テストの自動化してますか？
（ご挨拶
Slide 4
Slide 4 text
「テストがないと安心して
開発できません！」
とある同僚の答え
Slide 5
Slide 5 text
わりと無条件で導入する仕組み
Slide 6
Slide 6 text
TypeScript/JavaScriptの例
・EsLintやPrettier
リンタ・フォーマッタ Unit・統合テスト
TypeScript/JavaScriptの例
・JestやVitest
With コンテナ仮想化
コンテナ仮想化技術で、モックで
はなくDBMSを利用する
静的解析・テストの自動化（CI）
Slide 7
Slide 7 text
Q. では、なぜこれらを導入するの
A.
心理的安全性とか、品質保証？
Slide 8
Slide 8 text
品質ってなんだっけ？
「安心」はなんとなくわかる気がする。しらんけど。
Slide 9
Slide 9 text
機能適合性
品質特性とは
ISO25010
システム・ソフトウェアの品質モデル
性能効率性 互換性 使用性
信頼性 セキュリティ 保守性 移植性
Slide 10
Slide 10 text
そして気づく
あれ？いいとこ、機能適合性と保守性しか見れてないのでは？
Slide 11
Slide 11 text
セキュリティ・使用性
なども早めにテストしたいよね
タイトルの「非機能要件」を回収しています
Slide 12
Slide 12 text
シフトレフトとは
参考: https://dev.classmethod.jp/articles/saitchan_snyk_20230719/
Slide 13
Slide 13 text
セキュリティのシフトレフト
Slide 14
Slide 14 text
例えばどういうこと？
日々の Pull Request時点でのCIで脆弱性を検知
コードを書いている時点で脆弱性を検知
GitHubのDependabot や trivy によるコンテナイメージ脆弱性スキャン
など
Snyk の Snyk Code や Java の Find Security Bugs など
Slide 15
Slide 15 text
（例）Snyk Codeによる検知画面
参考: https://dev.classmethod.jp/articles/snyk_code_with_vscode/
Slide 16
Slide 16 text
GitHubのDependabot
だけでも有効化しましょう
脆弱性のあるライブラリを修正した Pull Requestまで出してくれるの本当に神
Slide 17
Slide 17 text
使用性のテストのシフトレフト
Slide 18
Slide 18 text
例えばどういうこと？
UIコンポーネントの見た目の部分のテスト
その他アクセシビリティの問題の検知など
Chromatic や reg-suit による継続的なビジュアルリグレッションテスト
画面上の表示や、変更による見た目の崩れをより早く気づく
React 用の ESLintルール による静的解析なども（筆者未使用）
Slide 19
Slide 19 text
（例）Chromaticの差分検知
参考: https://dev.classmethod.jp/articles/chromatic-storybook-review-and-deploy/
Slide 20
Slide 20 text
要するに言いたかったこと
Slide 21
Slide 21 text
「なんとなく」でテスト自動化はいけない（自戒）
システムの特性とテストの目的（守りたい）ことは整理・合意しておきたい
Slide 22
Slide 22 text
ご清聴ありがとうございました