Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドでテストを書くまでの道のり
Search
takanorip
December 11, 2017
Technology
0
380
フロントエンドでテストを書くまでの道のり
takanorip
December 11, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
780
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.8k
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
200
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
脳波を用いた嗜好マッチングシステム
hokkey621
0
290
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
設計を積み重ねてシステムを刷新する
sansantech
PRO
0
170
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
190
システム・ML活用を広げるdbtのデータモデリング / Expanding System & ML Use with dbt Modeling
i125
1
330
偏光画像処理ライブラリを作った話
elerac
1
170
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Fireside Chat
paigeccino
34
3.2k
Facilitating Awesome Meetings
lara
52
6.2k
A designer walks into a library…
pauljervisheath
205
24k
How to Ace a Technical Interview
jacobian
276
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Done Done
chrislema
182
16k
Designing for humans not robots
tammielis
250
25k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Transcript
フロントエンドで テストを書くまでの道のり Takanori Oki @UIT#1 フロントエンドふりかえり 2017
⾃⼰紹介 • ⼤⽊ 尊紀(オオキ タカノリ) • @takanorip • 株式会社スマートドライブ •
フロントエンドエンジニア • React、Vue、Polymer、Web制作全般、WordPress • Polymer-Japan翻訳チーム
None
今年⼀番の変化
None
Web制作会社 (受託) ↓ ⾞両系スタートアップ (⾃社サービス)
通算3社⽬ (社会⼈3年⽬)
Web制作会社編
Web制作会社 • 業務内容 • ⼤規模ウェブサイトのリニューアル • LPの制作など • テスト?なにそれ?って感じ •
テスト書いたことある⼈がいない • テスト書く時間がない、常に炎上 • リリースしたらおしまいなことも多いので、いちいち テスト書いてられない
転職の⽬的、⽬標 • もっとJavaScript書きたい • 残業減らしたい • Reactとかやりたい • ちゃんとフロントエンドエンジニアを名乗れるように なりたい
「ちゃんとした フロントエンドエンジニア」?
テストをちゃんと書く フロントエンドエンジニア ちゃんとした フロントエンドエンジニア =
SmartDrive編
SmartDrive • 業務内容 • ⾃社サービスの運⽤、新機能開発 • プロダクトの開発が落ち着いてきたので、本格的に テストを書き始めたフェーズ • 静的型チェックもやり始めた
• ⼈⽣初テスト書いた!
テスト環境 • Flowtype • 静的型チェック • Jest • Action、Reducer、redux-sagaのtask、その他JS •
ページ単位のsnapshotテスト • コンポーネントのテストは別
テスト環境その2 • Storybook • コンポーネントカタログをサクッと作るライブラリ • Storyshots • Storybookに登録されているコンポーネントの snapshotテストをしてくれるライブラリ
• Puppeteer • 導⼊検討中 • E2Eテストの本命?
import initStoryshots from '@storybook/addon-storyshots'; initStoryshots();
テスト書いてみた感想 • Storybookでのコンポーネント運⽤をテストを ⼀緒にできるの嬉しい • But、コンポーネントのテストとCSS modulesの 相性が悪く、⼤変だった • Flowtypeを導⼊してから実⾏時エラーが減った
• Immutable.jsとの相性が悪くてつらかった • E2Eテストを導⼊して⾃動化したい
良いお年を!