はじめに
テストコードを書くべきだと言う話はエンジニアをやっていると耳にタコができるぐらい聞くかと思います。
でも、意外とフロントエンドのテストコードを書いたことがある方は少ないんじゃないでしょうか？
今回は、フロントエンドこそテストコードを書いて欲しいと言う話をします。
そもそもテストコードをなぜ書くのか？
1. 動作をコードレベルで補償するため
バックエンドであればAPIを叩いてレスポンスを確認したり、フロントエンドであればブラウザでぽちぽちすれば動作は確認できるかと思います。
逆に言うと、動作環境を用意し試してみるまで正しく動作しているかわからない。ということになります。
コードレビューをしている時に思うんです。
コードを見ればどんなことをしているのかは大体わかるけど、、これ、本当に動くんだろうか。。と
そんな状態で
とは言えないです。
2. 実装スピードを上げるため
テストコードを書くと、実装スピードが上がります。
コード量が増えるんだから時間がかかるだろう。と思われがちかと思いますが、逆だと思います。
テストコードがないから実装に時間がかかってるんです。
3. 関心事を分離したコードを書くため
かなり気をつけていないと、一つの関数に二つ以上の機能を持たせてしまうことがあります。
小さいプログラムだとそこまで可読性が下がらずに書けてしまったりするので、気づけないんですね。
でも、テストコードを書くと、検証したい内容とは直接的に関係のない処理やデータをモックしないといけないから気づけたりします。
よくテストコードの副次効果と言われたりしますが、僕はむしろこちらがメインぐらい重要だと思います。
なぜフロントエンドこそ書くべきなのか
上記のテストコードを書く理由を踏まえた上で、「なぜフロントエンドこそ書くべきなのか」という話をします。
1. バックエンドより動作が不安定なため
フロントエンドは環境が固定できるバックエンドとは違い、ユーザーの手元で動くコードがほとんどです。
APIにも依存し、ユーザーの行動、環境にも依存してしまいます。
- APIから本当にそのデータが返ってくるのか
- 通信環境が悪く、データをフェッチできなかったらどうなるのか
- ボタンを連続で2回押した時はどうなるのか
- 古いブラウザを使っていた時はどうなるのか
- etc..
動作が不安定なフロントエンドだからこそテストコードが必要だと思います
2. バックエンドより実装ハードルがあるため
先に話した通り、フロントエンドはバックエンドに依存します。
つまり、バックエンドの実装が終わるまで動作テストできなったりします。
モックデータを使って先に実装したいですよね？
モックデータを返すサーバーを用意するより、テストコードをきちんと書いてモックデータを読み込むようにすれば良いと思います。
他にも、APIを叩けば動作させることができるバックエンドとは違い、ブラウザを立ち上げ、該当ページまで順にアクセスしないといけない
という制約もあります。
アクセスコントロールなどがあるとこういう時間が無駄になってきます。
まとめ
今回は、フロントエンドこそテストコードを書いて欲しいという話をしました。
書き方がわからない。みたいな人もいると思うのでまたの機会に書き方についても話せればと思います。