入力チェックの単体テストで面倒なあの作業の負担を軽減させるサービスを開発した話
こんにちは👋
今回は入力チェックの単体テストで入力するテキストを簡単に用意できる「文字列ジェネレーター」というサービスを開発した話をしたいと思います。
文字列ジェネレーターについて
「文字列ジェネレーター」とは、簡単に説明すれば「指定された文字または文字列を使用して任意の桁数の文字列を生成するサービス」になります。
開発背景
日本で何かしらの開発を行うとき、「文字入力のバリデーションチェックが正常に行われているか」という内容で単体テストを行う場合、いちいち文字を入力し、その結果をスクリーンショットでエビデンスとして保存するという古より伝わりし手法でテスト工程を行うことがあります。
私が経験した例ですと、「テキストボックスに40文字以上の入力があった場合、エラーメッセージを表示する」という機能があった場合、テスターは39文字を入力してエラーメッセージが表示されないパターンと、40文字を入力してエラーメッセージが表示されるパターンの2枚のスクリーンショットをエビデンスとして撮ったりします。
上記のようなテストパターンのたびに、指定の桁数の文字列を作成したり、それを何度も入力したりするのは、ただでさえ面倒な手動テストの工程をより面倒にしてしまいます。
そこで、テストで使用する入力用テキストを簡単に作成できないかということで開発したのが今回紹介する「文字列ジェネレーター」になります。
実際のところ、「指定された文字または文字列を使用して任意の桁数の文字列を生成するサービス」は既に多くのサイトで提供されていますが、今回は「テストで使用する入力用テキストを簡単に作成する」という観点から開発を行ったため、機能がシンプルで使いやすくなっています。
主な機能
以下の画像に描かれている番号に従って機能の説明をしたいと思います。
- 文字列の生成に使用する文字および文字列入力欄
ここに生成される文字列に使用したい文字および文字列を入力します。入力文字数の制限は無く、全角および半角の様々な文字の入力に対応しています。
- 生成される文字列の桁数入力欄
ここに生成される文字列の桁数を入力します。1以上10000以下の間で好きな桁数を指定できます。
- 文字列生成ボタン
このボタンを押下することで、1で入力された文字を使用して2で入力された桁数の文字列を生成します。
- 生成文字列表示エリア
ここに生成された文字列が表示されます。例えば、「TEST」という文字列を使用して5桁の文字列を生成するときは「TESTT」となり、3桁の文字列を生成するときは「TES」となります。
また、一度生成された文字列はページから離れない限り消えることがないので何度でも繰り返し使うことができます。
- 桁数表示
生成された文字列の桁数が表示されます。
- Copyボタン
生成された文字列をワンクリックでコピーできます。
- Deleteボタン
不要となった文字列を削除することができます。
使用技術
詳細は上記のStackShareから確認いただければと思いますので、この記事では個人的に説明しておきたいポイントだけ書こうかなと思います。
なぜReduxを使うのか
この規模のアプリでReduxを使用する必要は無いと思いましたが、以前勉強したReduxを使用して何か作りたいと個人的に思っていたので、良い機会だと思って使ってみました。今回のアプリではユーザーから入力された値から文字列を生成し、カードデザインのコンポーネントを構築する過程で使用しています。Redux Toolkitを使用したため、記述がシンプルになり、Reduxのごちゃごちゃ感もあまり感じること無く実装できたかなと思います。
実際のところは、今回のアプリではContext APIを使用する方が良いと思います。ただ、Reduxはメモ化などパフォーマンスチューニングの部分を色々よしなにやってくれるので、Context APIを使用して自前でパフォーマンスチューニングする手間を省けるのはメリットかもしれません。(バンドルサイズなんかを考えるとハテナかもしれませんが。)
Chakra UIが便利すぎる
提供されているComponentsがとても便利です。今回のCopyボタンの実装も提供されているものを使用するだけでしたし、StackとSpacerを組み合わせることでとても簡単にレイアウトの実装ができました。
以前の個人開発ではstyled-componentsを使用したのですが、レイアウト用のコンポーネントの命名に結構苦戦した（私が慣れていないだけ）ので、そこら辺の心配がないChakra UIを使用することで、機能の面に集中して開発を行うことができました。
最後に
日本には手動でテストを行い、エビデンスとしてスクリーンショットを保存するという慣習のもと業務を行っている企業がまだまだ多くあります。この慣習は来年再来年で無くなるような話ではないと思いますし、私が例に示したような入力チェックの単体テストを任される人はこれからも生まれてくるでしょう。
そのような時に今回私が開発したサービスを利用することで、少しでもその面倒な作業の負担を軽減できればと思います。
改善点などありましたら、以下のIssuesやコメントに書いていただければと思います。
それでは、最後までお読みいただきありがとうございました。
おまけ
締めの挨拶をしてしまいましたが、今回の開発で使用して便利だと思ったツールがあったので紹介したいと思います。
上記のExcalidrawというWebブラウザで動作するドローツールなのですが、シンプルかつ直感的に使用できるので、今回私が機能紹介で使用した画像など簡単な加工を行いたいときに非常に便利だと思ったので、気になる方はぜひ使ってみてください。
以下Excalidrawの参考サイト
↑ Excalidrawの使い方の紹介記事
YouTubeのvideoIDが不正です
実際の使用は上記動画の15:47〜を見ていただければイメージしやすいかと思います。
Discussion