フロントエンドのテストについて

社内向けにフロントエンドのテストについて思っていることを発表したのと、Vue.jsのテスト方法について

スライド内のリンク
https://qiita.com/kurosame/items/8d82ef8d36c106c6e8bc

Transcript

1. フロントエンドの
   テストについて
   2018
   年
   6
   月
   22
   日
   

   View Slide

2. 前置き
   Vue.js
   でのテストの話です
   

   View Slide

3. テスト書いてますか？
   

   View Slide

4. 書いてる人も書いてない人もいる
   と思いますが
   

   View Slide

5. 今日は書いてない方に目を向け
   て考えてみたいと思います
   

   View Slide

6. なぜテストを書かない（書きたくない）のか
   いくつか理由を考えてみました
   ・スケジュール的な問題
   ・そもそもどこをどうテストするか分からない
   ・テストコードを書くのがダルい、テスト環境作るのはもっとダルい
   他にも理由はあると思いますが、この３つが思いつきました
   

   View Slide

7. スケジュール的な問題について
   スケジュール的に厳しいから、テストはリリース後とか時間が出来た
   ときにまとめて書くという選択は良くあると思います
   もしくはテストを書かない方針にするという判断もしていると思いま
   す
   

   View Slide

8. でも仮にリーダー的な人
   が、、
   

   View Slide

9. リーダー的な人＞
   スケジュールにテストの分の工数を組
   み込みます！
   なのでテスト書いてください！
   

   View Slide

10. ってなったら、
    テストを書き慣れている人はいいかも
    しれないですが
    

    View Slide

11. テストをあまり書く習慣がない人は、
    「え、面倒なことになったな、、」
    って思うでしょう
    

    View Slide

12. 結局下
    2
    つの問題が解決しないと、テストを書く（書きたい）という状
    態にならないでしょう
    ・スケジュール的な問題
    ・そもそもどこをどうテストするか分からない
    ・テストコード書くのがダルい、テスト環境作るのはもっとダルい
    

    View Slide

13. そもそも、どこをどうテストするか分からない
    

    View Slide

14. 解決になりませんが、これに関しては
    テスト慣れが必要かなと思ってます。。
    

    View Slide

15. 私も最初は分からないながらも、テスト
    を書いてきて、だんだん慣れて、ちょっ
    とずつ良いテストが書けるようになって
    きました（たぶん）
    

    View Slide

16. テストを書く習慣がつくと
    ・コーディングしながら、この処理はテストできる
    か
    ・テストが難しいから別の簡単な実装方法を考え
    よう
    ・そもそもテストがいらないやり方を考えよう
    ってなります
    

    View Slide

17. この考えが身につくと、良いプログラ
    ムが書けそうな気がしませんか？
    

    View Slide

18. そして実際テストを書くってなると、
    3
    つ目に書いたやつが障壁で
    しょう
    ・スケジュール的な問題
    ・そもそもどこをどうテストするか分からない
    ・テストコードを書くのがダルい、テスト環境作るのはもっとダルい
    

    View Slide

19. テスト環境作るのがダルい
    

    View Slide

20. 開発環境に加えて、テスト環境も作る
    のは大変
    

    View Slide

21. テスト環境は作れる人に任せよう！
    

    View Slide

22. 作れる人がいなければ「XXX-cli」などの
    スキャフォールディングツールにまかせ
    ても良いと思います
    

    View Slide

23. なので、、
    

    View Slide

24. ・スケジュール的な問題
    ・そもそもどこをどうテストするか分からない
    ・テストコード書くのがダルい、テスト環境作るのはもっとダルい
    ここだけ頑張ろう！
    

    View Slide

25. Vue.jsの話になりますが、最近はテスト
    周りのエコシステムが充実し、非常に簡
    単にテストコードが書けるようになりまし
    た
    

    View Slide

26. 今回はテストコードを簡単に効率良く書く
    ために色々考えて実装したので、紹介し
    たいと思います
    

    View Slide

27. テスト書くぞ！
    

    View Slide

28. Vue.jsのテストをモダンにする
    https://qiita.com/kurosame/items/8d82ef8d36c106c6e8bc
    

    View Slide

29. さいごに
    私が思うテストを書くメリット（これが全てではないですが）
    ・全体的にテストを自動化しておけば、テスト対象のモジュールが他のモジュールに依存している時にエラーに
    気づける
    ・関数の使い方が分からない時などドキュメント代わりになる（誰かが作ったプラグインなどを使う時にドキュメント
    が無ければ、テストを見ることがよくあります）
    ・
    E2E
    テストをちゃんと書いておけば、その画面全てのイベントが分かる。最強のドキュメント
    ・ユニットテストは言語が変わればフレームワークも変わるが、
    E2E
    テストはフレームワークは基本同じだと思うの
    で、
    1
    回どこかで書いておくと、今後もノウハウが生きます
    ・今後何年とメンテナンスしていくシステムを作っている思うので、未来で楽するために最初に時間と労力を投資
    しましょう！
    

    View Slide