Talk Event Report Vol.6
2023.04.19

フロントエンドのためのテストの必要性と始め方!

『フロントエンド開発のためのテスト入門』の著者であるTakepepeさんをお招きしてトークイベントを開催しました!

トピック

  • はじめに
  • テストをはなぜ書く?
  • そもそも「テストを書く」とは??
  • テストの種類
  • テストを始めるには
  • テストの必要性を伝える難しさ
  • さいごに

はじめに

本日は『フロントエンド開発のためのテスト入門』の著者であるTakepepeさんをお招きして、フロントエンドのためのテストの必要性と始め方についてお話ししていただきました!

トークイベントが始まる前から100人以上の方にスペースのリマインダーを設定していただき、運営メンバー一同だいぶ興奮しておりました。実際に今回のトークイベントは初めて参加人数が100人を突破し、あっつあつのトークイベントになりました!Takepepeさんと参加してくださった皆さんに心より感謝申し上げます!

テストはなぜ書くのか

では、早速本題へ。

まず、テストはなぜ書かなくてはならないのでしょうか?

一番の目的は、予期せぬ故障を防ぐためです!実際にコメントでも、テストを始めたきっかけとして「予期せぬ故障を経験して」ということを挙げている方がいましたね... 公開してバグってからじゃ遅いですものね!テスト大事!

そもそも「テストを書く」とは?

フロントエンドエンジニアの皆さんは「テストを書く」と当たり前のように言いますが、個人的に「テストを書く」という感覚が全くわかりませんでした。

ですが、今日のお話を聞いてやっとなんとなくイメージが掴めました!

まず「テストを書く」にはJestというテストのフレームワークを使うそうです。

そしてindex.jsというファイルがあったとしたら、テストのためのindex.test.jsを用意します。そこにJSやTSといった言語を用いてコードを書いていき、実際のブラウザ、もしくは仮想上のブラウザであるJSDOMにてテストをしていきます。

ちなみにテストを行う場所の選択方法としては、基本的にはJSDOMの方が速いそうです。ただ、実際のブラウザ上でテストすべき例として、CSSは実際のブラウザでないと確認できない部分が多いそうです。(なぜなのかちょっとよくわからなかった...)
それ以外のロジックだけ確認するような処理はJSDOM上が良いとのことでした!

ブラックボックステストという機能や関数の中身の処理には着目せず、ユーザーからみた振る舞いだけを確認するテストにおいては、storybook (https://storybook.js.org/)というツールを使うことが多いそうです。動作が行われた時に振る舞いをキャプチャして、正常時の振る舞いとバグが起きた時の振る舞いを見比べることができたり、バグが起きた時に自動的に通知も送ることができるそうで、すごすぎる!

テストの種類

テストの種類には、先述したブラックボックステストの他に、単体テストやホワイトボックステストがあります。

ホワイトボックステストは、モジュールの中の関数の中の処理が正しく動作するかをテストするものですが、ホワイトボックステストは単体テストの中に含まれるそうです。

テストを始めるには

テストを始めたいという方は、この単体テストから始めるのがおすすめだそうです!

第一引数と第二引数を足す(1+1=2)といった簡単な処理からテストを絡めていくのが良きだそうです。

テストのメリデメ

Takepepeさん曰く、実際にプロジェクトでは「テストなんて書かなくていい」と言われてしまうことが多々あるそうです。

でも最初にもあった通り、公開されてからバグに気づくでは遅い!

テストを書きながら正しい挙動をするという証拠を残すことができるのは、テストを書く大きなメリットですよね。ただ、書きながら未然にバグが防げたよ!とわかるのはテストを書く本人だけだそうで、少しテストの切なさも感じました笑

またテストを書いておけば、運用者が変わって万が一処理に異常が出てもすぐに気づくことができるというのもメリットです。
なので、「そんな運用がメインのサイトじゃなかったらテストいらないでしょ」と言わず、どんなプロジェクトにおいてもテストを書いておくことが大事だと思いました。

ただ、逆にテストを書くことで、(当たり前ですが)その分コストが増えたり、大きなリニューアルなどがあれば、それにしたがってテストも書き直さなくてはならない時があるというのはデメリットのようにも思えます。

だからこそ、どこにテストを書くかが重要です!!

壊れる不安があるところや、壊れたら困る場所を重点的にテストを書くことが重要だそうです!Takepepeさん曰く、これが「テストの効率」です!かっこいい.....

さいごに

トークイベントの振り返りとなるレポートを初心者の私なりにまとめてみました!(本当はもっとたくさんお話ししてくださったのですが、これより深そうな話は呪文....)

もっとテストを勉強したい!という方は、Takepepeさんの『フロントエンド開発のためのテスト入門』を読んでいただければと思います!

ただ今までテストに関して全く無知だった私ですが、Takepepeさんがとってもわかりやすく説明してくださったおかげでテストをざっくりと理解できました!

テストの重要性を身にしみて感じましたね....
そしてテストの始め方もイメージができたので、ぜひ挑戦してみたいです!

お忙しい中、快くゲストを引き受けてくださったTakepepeさん、本当にありがとうございました!

皆さんも、お仕事終わりに(もしかしたら途中に)ご参加いただき、本当にありがとうございました!

次回のトークイベントは、5/17(水)21時〜を予定しております!
ぜひご参加いただけると幸いです!

レポートの執筆者

mai
workFrontend Engineer 見習い
新卒。フロントエンドエンジニア。毎日フォー食べたいのになかなか食べれない日々。

その他のレポート

  1. Talk Event Report Vol.17
    ホスティング環境、どうしてる?
    今回のトークイベントはホスティング環境についてお話ししました!メンバーが普段採用しているホスティング環境からそれぞれのメリデメまで盛りだくさんです!
    2024.06.26 @公式Discordサーバー 開催
  2. Talk Event Report Vol.16
    エンジニアの教育、どうしてる?
    今回のテーマは「エンジニアの教育、どうしてる?」です。実際にどういった教育を行っているか、教育において何を意識しているかについて話しました!
    2024.05.29 @公式Discordサーバー 開催
  3. Talk Event Report Vol.15
    チームの技術刷新、どうしてる?
    今回は「チームの技術革新」について、トークイベントを開催しました!今回はいつものトークイベントとは一味違い、社外の同僚のお悩みを一緒に考えるスペシャルトークイベントでお届けします!
    2024.04.24 @公式Discordサーバー 開催
  4. Talk Event Report Vol.14
    忙しいこの時期、どう乗り越えてる?
    今回は年度末ということで、過去最大級にゆるいトークイベントが開催されました!テーマ:忙しいこの時期、どう乗り越えてる?副題:UXデザイナーについて、でお届けします!
    2024.03.27 @公式Discordサーバー 開催
  5. Talk Event Report Vol.13
    エンジニアファーストについてどう思う?
    今日は皆さんとエンジニアファーストについて考えてみました!そこから転じて、エンジニアとして大切にすべきことや、エンジニアとして目指す場所まで!今月は深〜いトークイベントになりました!
    2024.02.28 @公式Discordサーバー 開催
  6. Talk Event Report Vol.12
    CSSどう書いてる?
    今回は新しいコミュニティーリーダーのみなさんも交え、リスナーの皆さんと、CSSの書き方についてお話しました!最近話題のtailwindcssのお話から、UIライブラリ、BEMやFLOCSSなど、今回も色々なお話ができました!
    2024.01.24 @公式Discordサーバー 開催
  7. Talk Event Report Vol.11
    フロントエンドエンジニアとして理想的な職場とは?
    今回のトークイベントは、皆さんと「フロントエンドエンジニアとして理想的な職場とは?」についてお話ししました!
    2023.12.20 @公式Discordサーバー 開催
  8. Talk Event Report Vol.10
    生産性、 どうやってあげる?
    今回のトークイベントは、運営メンバーを中心に、リスナーの皆さんと「生産性が上がらなくて困っていること」や「生産性を上げるために意識していること」についてお話ししました! 
    2023.10.25 @公式Discordサーバー 開催
  9. Talk Event Report Vol.9
    コーディング規約どうしてる?
    今回のトークイベントはDiscordでの開催で、トピックは、Discordでのアンケートを通して最も票が多かった「コーディング規約」でした!社外の同僚たちがいつもコーディング規約のどんなことをどのように意識しているのか、今回のトークイベントも普段知り得ない、フロントエンド情報盛りだくさんの1時間でした!
    2023.09.27 @公式Discordサーバー 開催
  10. Talk Event Report Vol.8
    フレームワークどうしてる?
    今回は、みんなの「フレームワークどうしてる?」ということで、 Next.js・Nuxt.js・Astroにそれぞれ精通しているゲストをお招きして、その魅力や勉強法について語っていただきました!
    2023.08.30 @公式Discordサーバー 開催
  11. Talk Event Report Vol.7
    読まれる技術ブログとは 〜にしはらさんから見たICS MEDIAネタ選びと続け方のポイント〜
    ICSメディアのにしはらさんをお招きして、読まれる技術ブログとは何か、そして、にしはらさんから見たICS MEDIAのネタ選びと続け方のポイントについてお話ししていただきました!
    2023.05.24 @Twitter Space 開催
  12. Meetup Report Vol.5
    いざ!WebGLの世界へ
    webGL総本山のh_doxasさんをお招きしてMeetupを開催しました!
    2023.02.15 @Twitter Space 開催
  13. Meetup Report Vol.4
    やってる?アクセシビリティ対策
    アクセシビリティシャンのゆうてんさんをお招きしてMeetupを開催しました!
    2023.01.18 @Twitter Space 開催
  14. Meetup Report Vol.3
    大特集!ヘッドレスCMS
    MicroCMSの柴田さんをお招きしてMeetupを開催しました!
    2022.12.14 @Twitter Space 開催
  15. Meetup Report Vol.2
    教えて!みんなの開発環境
    最近の開発環境について意見を交換しました!
    2022.11.16 @Twitter Space 開催
  16. Meetup Report Vol.1
    どうする!?フロントエンドクラブ
    記念すべき第一回のMeetupでは今後の方向性について話し合いました!
    2022.10.19 @Twitter Space 開催
一覧へ戻る