履歴書ビルダー

概要

クライアントのみで動作する履歴書作成サービス

🌐 公開URL: https://scolor-dev.github.io/rirekisho-builder/

---

背景

最近企業に履歴書を出す機会が増えたが、毎度作り直すのが面倒。 また、既存のサービスはダウンロードが有料であったりで利用ができなかった。 ということで、「自分で作れば自由じゃん」という考えのもと開発を開始。

---

使用技術

• Vite
• React
• tailwindcss
• Zod

選定理由

今回はクライアントで完結させるサービスであったため、様々な処理をクライアント側で実装します。そのため、エコシステムが非常に大きく、 CSR に向いている React を利用。デザインは Tailwindcss を利用することで CSS の書く量を減らしつつ、ユーザーの利用しやすいデザインを提供できるように。また、 Zod を利用しユーザー入力のバリデーションを行い、履歴書生成時のエラーを減らす目的。

---

課題と解決方法

• 型安全なフォーム管理
  課題：ユーザーに正しい入力形式・型で入力してもらわないといけない
  解決：Zodというライブラリを使用し、入力時にバリデーションを行う

• 入力途中データの保持
  課題：履歴書入力は時間がかかるため、ブラウザクラッシュで内容が消えると問題
  解決：LocalStorage自動保存を行い、入力変更時に随時差分を保存する

• 再利用可能なフォームコンポーネント設計
  課題：学歴・職歴・資格欄で同じような入力UIが大量発生
  解決：共通コンポーネント化を行った