20
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】QAエンジニア、テスターを救うファイルダウンロードアプリを作りました【React/Typecript/Python】

Last updated at Posted at 2025-09-21

qiita_banner_1200x630.png

こんな悩みありませんでした?

  • QAでアップロード機能をテストしたいんだけど、ファイルを用意するのが面倒くさい...
  • ファイル転送テストのために軽くて適当なファイルがすぐに欲しい
  • ファイルサイズ変換ツールは見つけたけど、使い方がヨクワカラナイ...
  • テスターとして良いテスト材料が欲しい

そんな悩みを解決できるアプリケーションを開発しました

image.png

アプリケーションはこちら

機能は1つで超シンプル

欲しいファイル形式をクリックし、好きなサイズを選択します

Videotogif.gif

様々なファイル形式のファイルサイズをすぐにダウンロードできます。
従来の一時的なテストのためだけに初めてのツールやよく分からない生成方法に悩まされる必要はもうありません。

1~100MBの範囲で各+=0.1MBでのファイルサイズまでご用意しております。

使用場面・用途

主にQAやテスターの方のために開発しました

  • 画像アップロード機能の境界値・同値テスト
    • 画像以外にも動画やPDF、テキストファイルなどでのテスト
  • メールにおけるファイル転送テスト

が一番のユースケースになります

作るに至った背景

私自身QAとして
テスト設計・自動化・手動検証を行う中で
画像アップロード機能のテストをする際に

特定サイズのファイルが欲しい!

という場面が度々ありました。
その都度「サイズ変換ツール」や「ライブラリ」を使っていましたが、

  • 使い方が分かりにくい
  • 調査が面倒
  • AI生成できなくもないが、時間がかかるし生成失敗もある
    という感じで非常に億劫な作業が嫌でした

この体験から

  • 時々の面倒をなくしたい
  • 同じ課題で困っている人を助けたい

という思いが強いモチベーションになり
誰かの時間を数時間短縮できるなら!!
と思い開発に至った次第です

アプリケーションの構成

構成図

image.png

使用した技術

  • フロント
    • :React(Cloudflare Pagesで配信)
  • バックエンド
    • :Cloudflare Workers(TypeScript)
  • データベース
    • :Cloudflare D1(ダウンロード情報管理)
  • ストレージ
    • :Cloudflare R2(ファイル格納・配信)
  • 生成
    • :Python/Bash(サイズ別のファイル生成)
  • 配信
    • :Cloudflare Pages(CDN前段、静的UI)

cloudflare様様です(笑)

作って気づいたこと

個人開発はいいことだらけ

  • 技術力がつく
    • 個人開発をするにあたって必要な技術が自分にとって未知の分あることは往々にしてある
    • それらを学習しながら進めることでインプットでは得られない経験が得られ、技術力が身につく実感が非常にあります
  • ポートフォリオになる
    • そのまんまですね
    • もちろんユーザや、誰かの問題解決のための開発を大前提意識するといいとは思いますが、たとえそれが普及せずともポートフォリオにはなりますのでこれといった損はないですね
  • ユーザ視点を意識できるようになる
    • これが個人的で得られる一番のメリットかもしれません
    • 誰の悩みを解決するのか?どう届けるか?UIは?自分だったら使うか?といったことを能動的に意識しながら進められるのが個人開発であり、新しい視点で物事に取り組めるきっかけになるかと思います

ただデメリットもある

  • やりきれない
    • 意外と多くの人がこのやりきれないというところを心配し、個人開発をしない気がしています
    • 自分に技術力があって解決したい人のの悩みもあるという状態があったとするとどうでしょう?おそらく皆様「それなら個人開発するよ」と答えると思います
    • それすなわち自分の実力不足
    • メンターやプログラミングスクールに通い、質問できる環境があったうえで取り組んだりするのもgoodです
  • 時間がかかる
    • 先ほどと少し被りますが、開発内容によってはすぐ終わるものもありますが、技術的に良くわからなくて時間がかかるケースもあります
    • 期限を決める、MVPを作る等の自分なりの工夫がないとズルズルと日が過ぎてやりきれないことになったら本末転倒です

最初にデザインツールを使うと良いかも?

今回自分は頭の中にあるデザインを紙に書いて
それをAIと壁打ちしながらUIに関しては進めました

が、開発途中でUI修正が結構入って
「もっと事前に固めておけばよかった」
と度々感じました

figmaなどのデザインツールでもAI機能があるので
ある程度のUIイメージが固まったうえで開発を進めることをお勧めします

(CLIのAIやcursor等を使えばこのぐらいのアプリケーションのUIは一瞬で整うと思いますが
今回は勉強がてら自分で取り組んだ感じです)

最後に

ユーザとのインタラクティブな動作は非常に少ないですが、
「必要なサイズのファイルをすぐ入手できる」一点に特化しています。

少し補足ですがテストする際には境界値テストという手法があります。
例外と正常の近似値あたりでテストするという手法です。
このアプリケーションで
各ファイル形式の300種類のサイズを用意しているのはそのためです。

用途が限定的ではあるかと思いますがQA・テスト作業をする方々にとっては非常に多くの時間を削減できるものかと思います

拡散いただけますと幸いです🙇!!

最後に少し宣伝

以下私が所属しているコミュニティのJISOUです
このアプリケーションもJISOUに入っていなければ作れなかったものです
経験者専門と打ってはいますが、自分は

  • 学生インターンで少しの経験しかない
  • ていうかフロントはガチで未経験だった

という状態から、
簡素ではあるもののこのアプリケーションを作れるぐらいにはなります

他のメンバーの個人開発では

  • しっかりとユーザとインタラクティブでCRUDも豊富なアプリケーションを作る人
  • コミュニティ用ツールを作る人
  • ていうかみんなCICDぐらいできる

という感じで皆さん熱量が高く
非常に学習に良いコミュニティです

▼▼▼よかったら見てみてください!!▼▼▼

JISOUのメンバー募集中!

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか?

興味のある方は、ぜひホームページからお気軽にご連絡ください!
▼▼▼

image.png

20
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?