Zenn
株式会社HAMWORKS
✍️

テストコードの勉強のためにChatGPTを出題者にした

2025/04/01に公開

ちょっと新たな分野をやってみようと、最近JestやTesing Libraryを勉強しています。(もともとテスト書けないとなぁと思っていたのでようやく着手したという感じ)

テストとはなんぞや?どうやって書けばいいんや?というところから知りたかったので、いくつかUdemyも受講しました。

https://www.udemy.com/course/react-frontend-test-tutorial/

https://www.udemy.com/course/ts-webapp-test/

※ バックエンド編以降はまだ。一旦フロントエンドのテストに集中!

私は動画見ながら手を動かすのが性に合ってるようなので、なにか勉強するときは大体Udemyから始めます。
その中で、「これって何?」「これとこれはどう違うの?」って思ったものが出たタイミングで動画を止めて、ChatGPTに解説してもらっていました。


テンション高いChatGPT

余談ですがなぜか私のChatGPTは陽キャです。


別のチャットでやってる食事管理。やはり陽キャ

特にプロンプト入れたりしてないんですが、これまでのやりとりから人格形成したのかな………。

閑話休題。こんな感じでわからないところやいまいち理解できてないかも………と思ったとき、自然言語で自分が理解できるまで付き合ってくれるのがお気に入りポイントです。
この陽キャ、間違ってても一旦は「いい着眼点!!!」とか褒めが入るので時々合ってるのか合ってないのか一見で判断が難しいときがありますが………(※ちゃんと間違ってたらあとで正しく解説してくれる)

そんな感じでしばらくは解説者がわりに使うことが多かったんですが、ふと「今の私の状況に沿って問題出せるんじゃない?」と思い立って、出題者になってもらうことにしました。

https://github.com/chiilog/learn-frontend-testing

リポジトリはこちら。相変わらず環境セットアップは自分でやっています。

  • Vite
  • Jest
  • Testing Library(React)
  • husky
  • lint-staged
  • Prettier

ESLintはViteと一緒に入ってきたのでリストからは割愛。
設定の過程で「Prettierのおすすめ構成は?」とか聞いたりしたけど、環境作ることが目的ではないのでここはさっくりと終わらせます。

超初級の問題から出題してもらう

自分の理解度がまだよくわかっていないので、段階を踏みながら「今自分がどこまで理解しているのか?」を掘っていきます。

https://github.com/chiilog/learn-frontend-testing/tree/main/src/components/01-add-function

問題はシンプルな足し算の関数でしたが、せっかくなので例外処理のテストも書いてみるなどしました。
例外のテストは関数でラップするとかが頭から抜けてたので、問題からさらに深掘りして色々書いてみるのが勉強になりそう。

結果をレビューしてもらったのがこちら。

https://github.com/chiilog/learn-frontend-testing/blob/main/src/components/01-add-function/REVIEW.md

ChatGPTのデスクトップアプリを入れてCursorと連携しているので、mdファイルに書き出しもChatGPTにやってもらっています。結構mdで書かせたら途中でmd形式終わることがあったりして結構見づらいのでね………。

「テストがやや重複気味」はふつーにコピペして増やしてたのを残してただけなのでスルーしましたが、おすすめリファクタのeach()は確かに!!!!って思いました。同じようなテストなんだからeachで書けましたね。

こんな感じで続々と問題を出していってもらうつもりです。アプリ作るレベルのテストになったら、Reactのコード書くのもやろうかなと画策中。WordPress絡みでしかReact触ってないので、もっと色々知識を蓄えたい。

株式会社HAMWORKS
株式会社HAMWORKS

Discussion

ログインするとコメントできます