フロントエンドでテストを書くまでの道のり

Transcript

1. フロントエンドで テストを書くまでの道のり Takanori Oki @UIT#1 フロントエンドふりかえり 2017
2. ⾃⼰紹介 • ⼤⽊ 尊紀（オオキ タカノリ） • @takanorip • 株式会社スマートドライブ • フロントエンドエンジニア • React、Vue、Polymer、Web制作全般、WordPress • Polymer-Japan翻訳チーム
4. 今年⼀番の変化
6. Web制作会社
 （受託） ↓ ⾞両系スタートアップ （⾃社サービス）
7. 通算3社⽬ （社会⼈3年⽬）
8. Web制作会社編
9. Web制作会社 • 業務内容 • ⼤規模ウェブサイトのリニューアル • LPの制作など • テスト？なにそれ？って感じ • テスト書いたことある⼈がいない • テスト書く時間がない、常に炎上 • リリースしたらおしまいなことも多いので、いちいち テスト書いてられない
10. 転職の⽬的、⽬標 • もっとJavaScript書きたい • 残業減らしたい • Reactとかやりたい • ちゃんとフロントエンドエンジニアを名乗れるように なりたい
11. 「ちゃんとした フロントエンドエンジニア」？
12. テストをちゃんと書く フロントエンドエンジニア ちゃんとした フロントエンドエンジニア =
13. SmartDrive編
14. SmartDrive • 業務内容 • ⾃社サービスの運⽤、新機能開発 • プロダクトの開発が落ち着いてきたので、本格的に
 テストを書き始めたフェーズ • 静的型チェックもやり始めた • ⼈⽣初テスト書いた！
15. テスト環境 • Flowtype • 静的型チェック • Jest • Action、Reducer、redux-sagaのtask、その他JS • ページ単位のsnapshotテスト • コンポーネントのテストは別
16. テスト環境その2 • Storybook • コンポーネントカタログをサクッと作るライブラリ • Storyshots • Storybookに登録されているコンポーネントの snapshotテストをしてくれるライブラリ • Puppeteer • 導⼊検討中 • E2Eテストの本命？
17. import initStoryshots from '@storybook/addon-storyshots'; initStoryshots();
18. テスト書いてみた感想 • Storybookでのコンポーネント運⽤をテストを
 ⼀緒にできるの嬉しい • But、コンポーネントのテストとCSS modulesの
 相性が悪く、⼤変だった • Flowtypeを導⼊してから実⾏時エラーが減った • Immutable.jsとの相性が悪くてつらかった • E2Eテストを導⼊して⾃動化したい
19. 良いお年を！