はじめに

転職活動における企業研究の際、採用資料に記載されている従業員数には業務委託やアルバイトが含まれていることが多く、実際の正社員数が分かりにくいという課題があります。
例えば、従業員150名規模の企業でも、実態は正社員が10名で、その他は業務委託やアルバイトで構成されているケースも少なくありません。

このような情報の非対称性を解消し、求職者の方々がより実態に近い企業規模を把握できる一助となることを目指し、 国が提供する公開データからおおよその正社員数を算出するツール「正社員カウンター」 を開発・リリースしました。
本記事では、このツールの概要と、開発の裏側にある技術についてご紹介します。

正社員カウンターとは？

正社員カウンター

「正社員カウンター」は、企業の採用資料だけでは見えにくい「真の正社員数」を手軽に把握するためのウェブアプリケーションです。多くの企業が発表する従業員数には、正社員だけでなく業務委託やアルバイトの方々も含まれているため、企業の規模感を誤解してしまうことがあります。

そこで、国の公開データを基に、入力された企業のおおよその正社員数を算出する仕組みを構築しました。これにより、求職者の方々がより実態に近い企業情報を得られるようになり、企業研究の精度を高めることを目的としています。

技術スタック

このアプリケーションは、週末の2日間という短期間でリリースしましたが、それを可能にしたのは現代の素晴らしい開発ツールのおかげです。主に以下の技術スタックを採用しました。

• Next.js: Reactフレームワークとして採用し、迅速な開発と高いパフォーマンスを実現しました。特にAPIルート機能（src/app/api以下のroute.tsファイル群）は、バックエンド処理を素早く実装する上で非常に役立ちました。
• TypeScript: 型安全なJavaScriptであるTypeScriptを使用することで、開発中のエラーを未然に防ぎ、コードの品質を向上させています。
• React: UI構築にはReactを使用し、コンポーネント指向のアプローチで効率的に画面を開発しました。
• Vercel: デプロイにはVercelを利用しました。Next.jsとの親和性が非常に高く、git pushをトリガーに自動でビルド＆デプロイが実行されるため、インフラ構築の手間をかけずに開発に集中できました。
• Stripe: 応援（スパチャ）機能のために導入。Payment Linksを利用し、迅速な決済機能の実装を実現しました。
• AIツール (Gemini, Grok, Stitch): UIデザイン、機能実装の補助、ファビコン作成など、開発の様々な場面でAIを活用し、生産性を高めました。

開発プロセス

「週末2日間での開発」と聞くと大変に思われるかもしれませんが、各種ツール、特にAIを積極的に活用することで、非常に効率的に開発を進めることができました。

大まかな流れとしては、ユーザーが会社情報を入力するフォーム（src/components/SearchForm.tsx）を作成し、その情報を受け取って国の公開データに問い合わせるAPIエンドポイント（src/app/api/nenkin/search/route.tsやsrc/app/api/company/number/route.tsなど）を実装するというものです。

特に、src/lib/nenkin-parser.tsでは、取得した政府の生データを解析し、アプリケーションで利用しやすい形式に変換するロジックを記述しています。

テンプレートは下記の自分業務でも使っている、Next.jsのボイラーテンプレートの使用

Dockerさえインストールされていれば爆速でNext.jsの開発環境を構築出来るテンプレートになってます。これで改善をしながら3個くらいアプリ作りました。
Next.jsのボイラーテンプレート

UIデザインとAI活用

UIの初期デザインは、Googleの Stitch を使用してベースを作成しました。次に、そのデザイン案を基に Gemini CLI に対して機能部分の実装を依頼し、コンポーネントの雛形を効率的に生成しました。AIが生成したコードには意図しない挙動やエラーが含まれることもあるため、それらの微調整やデバッグは手動で行い、最終的な品質を担保しました。

また、サイトの顔となるファビコンは、AIチャット（Grok）にデザインコンセプトのアイデアを依頼し、それを基に「Favicon Generator」というWebサービスを利用して各種サイズのファビコン画像を生成しました。

スパチャ機能の実装

本アプリケーションには、開発を応援していただくための「スパチャ（投げ銭）」機能も設けています。

これは Stripe Payment Links を利用して実装しました。実装にあたっては、Stripeの公式ドキュメント「特定商取引法に基づく表記のページを作成して表示する方法」を参考に、必要な法的表記ページを作成しています。Payment Linksを用いることで、サーバーサイドで複雑な決済処理を自前で実装することなく、安全な決済機能を迅速に導入することができました。
※申請がおりずにZennのバッジ機能を介して受け取るようにしました。

これから個人開発を始めるエンジニアの皆さんへ

「個人開発」と聞くと、「難しそう」「時間がかかりそう」「特別なスキルが必要そう」といった印象を抱くかもしれません。しかし、今回の開発経験から言えるのは、その心配はほとんどないということです。

現在の開発環境は、個人開発のハードルを劇的に下げています。

• フレームワークの進化: Next.jsのような高機能なフレームワークは、面倒な設定を不要にし、開発者が本質的なロジックの実装に集中できる環境を提供してくれます。
• TypeScriptの安全性: 型の恩恵により、アプリケーションの規模が大きくなっても安心して開発を進めることができます。
• デプロイの簡易化: Vercelのようなプラットフォームを使えば、数クリック、あるいはgit pushだけで世界中にアプリケーションを公開できます。
• AIのサポート: GeminiやStitchのようなAIツールを活用すれば、コーディングやデザインの時間を大幅に短縮できます。

重要なのは、完璧を目指さず、小さく始めることです。今回開発したツールも、まずは最小限の機能からスタートしました。

少しでも「こんなものがあったら便利かもしれない」というアイデアが浮かんだら、ぜひ気軽に手を動かしてみてください。そのアイデアが、誰かの課題を解決する素晴らしいツールになるかもしれません。そして何より、開発そのものの楽しさを再発見できるはずです。

一歩踏み出せば、個人開発の世界は案外身近で、非常に楽しいものですよ。

最後に

記事に関するコメント等は

🕊：X
👨🏻‍💻：Github
😥：Stackoverflow

でも受け付けています。どこかにはいます。