社内勉強会資料。制作系のフロントエンド技術者向けに、ソフトウェアテストについて概要をまとめたスライドです。 ・テストとは何か ・frontplateのテスト環境 ・実践ユニットテスト ・実践システムテスト ブログで更に詳しい情報を記載しています: http://media-massage.net/works/docs/learning_software_test_from_web_production_side/ 本資料に関連し、『Pairwiser』について更に掘り下げた記事『Webアプリのテスト工数を削減できるかもしれないペアワイズ法とPairwiser』もQiitaに公開しています。 http://qiita.com/y_hokkey/items/0a433ba25a5c5587d4ad

1. P R E S E N T A T I O N :
フロントエンドエンジニア 堀祐磨(ホリデー)
Web制作者視点
で理解する
ソフトウェアテスト

2. Web制作者視点で理解するソフトェアテスト
自己紹介
堀 祐磨 (ホリデー)
1988年生まれ。多摩美術大学を中
退後、デザイナーとしてグラフィッ
クデザイン・Webデザイン・UIデ
ザインを経験。
2015年、株式会社LIGにフロント
エンドエンジニアとして入社。
2

3. Web制作者視点で理解するソフトェアテスト
本日の内容：
今日お話するのは…
テストとは何か
frontplateのテスト環境
実践ユニットテスト
こんな時にこれ使うと便利
実践システムテスト
オールペア法による組合せテスト
3

4. Web制作者視点で理解するソフトェアテスト
テストとは何か
4

5. Web制作者視点で理解するソフトェアテスト
ソフトウェアが
ちゃんとしていることを
検証して、
品質を担保する工程
5

6. Web制作者視点で理解するソフトェアテスト
要はバグを出しつくして
潰す工程
6

7. Web制作者視点で理解するソフトェアテスト
「品質が低い」ソフトウェアとは…
バグによって本来の機能が制限され、そのソフトウェア
に期待する機能(価値)を顧客やユーザーに提供できない
̶̶知識ゼロから学ぶソフトウェアテスト 【改訂版】
7
“
”http://www.amazon.co.jp/dp/B00HQ7S5CA/

8. Web制作者視点で理解するソフトェアテスト
テストとは何か
お金や人命に関わるソフトのテスト
にはたいへんなコストをかける
Web決済システム
工場の生産管理システム
航空便の予約管理システム
医療機器の制御ソフト
人工衛星の管制システム
8

9. Web制作者視点で理解するソフトェアテスト
テストとは何か
お金や人命に関わるソフトのテスト
にはたいへんなコストをかける
…こういったものに比べたらWeb
制作分野はテストに対してかなり
雑なのは否めない
同じソフトウェア産業の一部であ
るし、Web制作に取り入れられ
ることは取り入れたいと思う
9

10. Web制作者視点で理解するソフトェアテスト
なぜ、Web制作には
ちゃんとしたテストが
根付いてこなかったのか
10

11. Web制作者視点で理解するソフトェアテスト
なぜ、Web制作にはちゃんとしたテストが根付いてこなかったのか
理由を考えてみた
歴史的にプログラミングじゃない部分が
多かったから
バグが出ても人的・物理的リスクが小さいから
ソフトウェア的な品質よりも、デザインの品質や
スピードと柔軟性の方が大事だから
ソフトウェアとしての規模が小さいから
そこまでちゃんとやらなくてもなんとかなってる
11

12. Web制作者視点で理解するソフトェアテスト
とはいえ…
12

13. Web制作者視点で理解するソフトェアテスト
なぜ、Web制作にはちゃんとしたテストが根付いてこなかったのか
こんな時はちゃんとテスト
するべき
長期的な発展や保守が見込まれるとき
フロントエンドに対する
機能要件が多い時(SPAなど)
規模が大きいとき
13

14. Web制作者視点で理解するソフトェアテスト
さらに…
14

15. Web制作者視点で理解するソフトェアテスト
なぜ、Web制作にはちゃんとしたテストが根付いてこなかったのか
テストを意識することで
開発力がアップ!
高品質な実装ができる
設計が良くなる
納品後の瑕疵対応が減る
ソフトウェア開発への理解が深まる
技術者としての市場価値UP!
15

16. Web制作者視点で理解するソフトェアテスト
テストの種類
16

17. Web制作者視点で理解するソフトェアテスト
ホワイトボックステスト
17

18. Web制作者視点で理解するソフトェアテスト
ソフトウェアの内部的な
仕組みに対して
テストをする
18

19. Web制作者視点で理解するソフトェアテスト
ホワイトボックステスト
例：ユニットテスト
関数またはメソッドを1つづつ呼び出し、入
力と出力が仕様通りであるかを検証するテス
ト手法。自動化が前提となる。
条件分岐がある場合は、それを全部実行する
想定される入力値を全部実際に入れてみて
実行する
19

20. getJpnDayの実装

21. getJpnDayのテストコード
(※本当はこの下に全部の曜日のテストケースを書く)

22. Web制作者視点で理解するソフトェアテスト
ブラックボックステスト
22

23. Web制作者視点で理解するソフトェアテスト
ソフトウェアを外から
見たときの振舞いを
テストする
23

24. Web制作者視点で理解するソフトェアテスト
ホワイトボックステスト
例：システムテスト
完成したシステムが要件が満たしている
かどうか、実際に動かして確認する。基
本は手動での確認となる。
内部の実装を知らなくてもテストできる
再帰テストが辛いので自動化の試みは色々
あるけど、結局楽な方法はない
24

25. Web制作者視点で理解するソフトェアテスト
誤解しがちなこと
25

26. Web制作者視点で理解するソフトェアテスト
ホワイトボックステストが
完璧なら
ブラックボックステストは
不要?
26

27. Web制作者視点で理解するソフトェアテスト
→NO
コードが仕様通りであること
は担保できるが、仕様自体に
間違いや漏れがあることはホ
ワイトボックステストでは分
からない
27

28. Web制作者視点で理解するソフトェアテスト
自動化テストは
メリットばかり?
28

29. Web制作者視点で理解するソフトェアテスト
→NO
自動テスト自体がプログラムなの
で、テスト自体にもバグが潜む
ソフトウェアの仕様変更に合わせ
て、テストの仕様変更も必要
増えてきたテストは、実行するだ
けでも時間がかかる
29

30. Web制作者視点で理解するソフトェアテスト
テストはバグがないことを
確認する作業?
30

31. Web制作者視点で理解するソフトェアテスト
→NO
人間が作るものには絶対にバ
グがあるので、テストはバグ
を出すための作業。むしろバ
グが出ないテストはやり方を
疑うべき
31

32. Web制作者視点で理解するソフトェアテスト
一度クリアしたテストは
しばらくやらなくてOK?
32

33. Web制作者視点で理解するソフトェアテスト
→NO
厳密には、ソースコードが修
正される度に全件やり直さな
いとデグレが起きていないか
担保できない。ブラックボッ
クステストも同様
33

34. Web制作者視点で理解するソフトェアテスト
あれ…テストって超大変な
作業じゃない…?
34

35. Web制作者視点で理解するソフトェアテスト
→YES
実はテストって超大変です。
これだけでソフトウェア工学
の一大分野っぽいです
35

36. Web制作者視点で理解するソフトェアテスト
frontplateのテスト環境
36
※frontplateとは
LIGのCTOが作ったフロントエンド制作用の
テンプレートのこと(オープンソース)
https://github.com/frontainer/frontplate

37. Web制作者視点で理解するソフトェアテスト
Karma + mocha +
power-assert +
sinon.js + phantomJS
+ babel + webpack
37
※frontplate v3.0での構成

38. Web制作者視点で理解するソフトェアテスト
frontplateのテスト環境
Karma
node.js上でJSテストを実行するためのテスト実行環境を提供
mocha
テストを実施するテストフレームワークを提供
power-assert
テストに必要なアサーション機能を提供
sinon.js
テストに便利なテストダブル機能を提供
phantomJS
コマンドラインWebブラウザの機能を提供
babel/webpack
KarmaでもES6とwebpackの機能を利用できるようにする
38

39. Web制作者視点で理解するソフトェアテスト
各ツールの意味：
テスト実行環境
node.js上でJSテストを実行するための環境を提供する
テストフレームワーク
テストを実施する枠組み・ルールを提供してくれる
TDDスタイルとBDDスタイル(個人的にはBDD推奨)
describe()はテストをグループ化してコメントを付ける関数
it()の内部が1つのテストケースになる
アサーション
テスト結果が期待値と同じかどうかを確かめるための関数
power-assertは、デバッグ情報を超綺麗に出力してくれる
39

40. power-assertのデバッグ表示

41. Web制作者視点で理解するソフトェアテスト
各ツールの意味：テストダブルとは
テストの対象となる関数が依存する、テスト対象外の機能を擬似的に
再現するための機能を「テストタブル」と呼ぶ。
テストスタブ
ある機能が別の関数を呼んで処理をしているけど、その別の関数
の結果を都合の良い値にしてテストしたい
既存の他の関数の戻り値を改竄できる機能
テストモック
ある機能が別の関数を呼んで処理をしているけど、その別の関数
は外部のライブラリに所属している
ダミーのオブジェクトや関数を偽装できる機能
テストスパイ
ある関数に引き渡された引数が何であるかを
取り出せる機能
41

42. Web制作者視点で理解するソフトェアテスト
便利なものがセッティング
済みですぐに使える!
42

43. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
43

44. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
frontplateでのテストの書き方
関数やClass構文で機能を実装し、機能ごとにファイル
を分割して開発する
src/[pc|sp]/test/に「～Spec.js」を作成
importで検証したい関数やクラスを読み込む
関数・クラスのインスタンスに対してテストを実地する
テストを書いたら gulp test で実行
44

45. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
日頃からテストしやすい
実装をする
副作用は最小限に
テストケースが書けるかどうかを考えて
実装する
関数に戻り値を付ける癖を
45

46. Web制作者視点で理解するソフトェアテスト
「こんな時どうすれば?」集
46

47. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
こんな時どうすれば?
ブラウザの位置情報APIを使ったテストが
したい!
phantomJSにはgeolocationが未実装
自分で適当なオブジェクトを作って
navigatorにぶら下げる
又はsinon.jsでテストモックを作る
47

48. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
こんな時どうすれば?
HTML構造がないとDOM操作に関する
テストができない!
Karmaにfixtureという機能がある
fixtureを使うと、phamtomJSに
HTMLの断片を渡すことが可能
48

49. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
こんな時どうすれば?
サーバからAJAXでjsonを受け取る部分
をテストしたい!
sinon.jsのfakeServerメソッドでダ
ミーのJSONレスポンスを実装する
49

50. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
こんな時どうすれば?
エラー時に、webpackで結合後の行数
でエラー場所が表示されちゃう!
npm install ̶save-dev karma-
sourcemap-loader
karma.conf.jsにsourcemapを追加
50

52. Web制作者視点で理解するソフトェアテスト
実践ユニットテスト
こんな時どうすれば?
phantomJSで bind() メソッドが動かない! エラー
出る!!
npm install ̶save-dev phantomjs-
polyfill
phantomJSでES6の一部の機能が動かない!
エラー出る!!
npm install ̶save-dev babel-polyfill
52

53. Web制作者視点で理解するソフトェアテスト
感想
53

54. Web制作者視点で理解するソフトェアテスト
半分以上、テストよりも、
テストのために必要なモッ
クの準備やブラウザ機能の
再現に工数かけてる…
54

55. Web制作者視点で理解するソフトェアテスト
とはいえ、テストがある部
分のリファクタリングはす
ごくやりやすい。
作ってよかった!
55

56. Web制作者視点で理解するソフトェアテスト
実践システムテスト
56

57. Web制作者視点で理解するソフトェアテスト
テスト仕様書の作成
57

58. Web制作者視点で理解するソフトェアテスト
テスト仕様書の作成
テスト仕様書の作成
なるべく意地悪な視点でテスト
ケースを考える
誰が読んでも分かるレベルでテ
スト手順を文書化する
バグを見つけたら即チケット化
58

59. Web制作者視点で理解するソフトェアテスト
テスト仕様書の作成
テスト仕様書の作成
59
「知識ゼロから学ぶソフトウェアテスト 改訂版」P169より
誰でも分かる
手順書の例：

60. Web制作者視点で理解するソフトェアテスト
ある検索機能のテスト
60

61. Web制作者視点で理解するソフトェアテスト
GETパラメータによる検索機能
61
文字列A
検索
文字列B
絞り込み条件1
絞り込み条件2
絞り込み条件3
絞り込み条件4

62. Web制作者視点で理解するソフトェアテスト
ちゃんとテストするには、
全部の組み合せでのテスト
が必要
62

63. Web制作者視点で理解するソフトェアテスト63
文字列A
入力フィールド
4パターンの2乗
一般的文字列／未入力／
極端に複雑な文字／
極端に長い文字
条件あり／条件なし
チェックボックス
2パターンの4乗
必要なテストの数： 256
検索
文字列B
絞り込み条件1
絞り込み条件2
絞り込み条件3
絞り込み条件4

64. Web制作者視点で理解するソフトェアテスト
256パターン/
64

65. Web制作者視点で理解するソフトェアテスト
今後1個チェックボックス
が増える度にテスト工数が
乗数的に増える(́ω｀*)ﾈｰ
65

66. Web制作者視点で理解するソフトェアテスト
ある検索機能のテスト
オールペア法と直行表
「組合せの強さ」に着目して、大幅に組合せ
数を減らすテストケース作成方法
参考文献
直行表とオールペア法の並行運用によるソフ
トウェアテスト
組み合わせテストを科学的に効率化する――
手法とツール、品質保証のための道具
66

67. Web制作者視点で理解するソフトェアテスト
ある検索機能のテスト
オールペア法と直行表
現実的に全パターンテストするのは
無理
全パターンのテストをやらなくても、
少しだけ品質を落とすだけでかなり
の部分をいい感じにテストできる組
合せを作れる
その理由は理系だと分かるっぽい
67

68. http://jasst.jp/symposium/jasst14tokyo/pdf/C4-1-1.pdf
直行表とオールペア法の並行運用によるソフトウェアテスト

69. Web制作者視点で理解するソフトェアテスト
無料のエクセルファイルが
あるが、Macだと動作し
ない…
69
PictMaster
https://osdn.jp/projects/pictmaster/

70. Web制作者視点で理解するソフトェアテスト
オールペア法を使える無料
のWebサービスを発見!
70

71. https://inductive.no/pairwiser/

74. Web制作者視点で理解するソフトェアテスト
検索機能のテストケースが
256→48～4パターンま
でに減った!
74

75. Thank you!
http://media-massage.net/
デザインとWeb開発とその他諸々。