個人開発 / Webアプリケーション

Rekilier

フリーランスエンジニア向けに、経歴情報を一元管理し、応募先ごとに職務経歴書を作り分けられるWebアプリ。A4プレビューとPDF・DOCX出力に対応しています。

この制作物は個人開発です。クライアント案件や実業務での改善実績ではありません。

Rekilierの公開画面。左に経歴データの編集エリア、右にA4の職務経歴書プレビューが並ぶ（架空のサンプルデータ） — 公開アプリの画面。架空のサンプルデータを表示しています（左：編集エリア、右：A4プレビュー）。

Rekilierのスマートフォン表示（編集タブ）。架空のサンプルデータ — スマートフォンでの表示（編集タブとプレビュータブ）。架空のサンプルデータです。

Rekilierのスマートフォン表示（プレビュータブ）。架空のサンプルデータ — スマートフォンでの表示（編集タブとプレビュータブ）。架空のサンプルデータです。

課題・制作の目的

職務経歴書は、応募先ごとに載せる案件や強調する内容を変えたくなる一方、WordやPDFを直接編集すると、案件情報を何度も入力・修正することになります。経歴を構造化データとして一元管理し、応募先別の書類を切り替えながら、同じデータからDOCXとPDFを出力できる仕組みを作りました。

担当範囲

個人開発（画面・データ構造・書類出力の設計と実装）

技術スタック

Next.js 16
React 19
TypeScript
Tailwind CSS
shadcn/ui
Zod
docx（DOCX出力）
Playwright（PDF出力・E2E）
dnd-kit（並べ替え）
Vitest

実装内容

経歴情報を構造化データ（JSON）として管理し、Zodで検証します。入力内容は約0.5秒後にブラウザのLocalStorageへ自動保存され、JSONでの書き出し・読み込みもできます。同じ経歴データと書類の設定から、画面のプレビュー、DOCX（docxライブラリ）、PDF（Playwright＋Chromium）を生成します。

経歴データ（マスター）と応募先別の提出書類を分けて管理。載せる案件・強調する案件・順序・職務要約や自己PRを書類ごとに設定
編集エリアとA4プレビューを並べた2ペイン画面。スマートフォンでは編集とプレビューをタブで切り替え、テンプレートは「標準」「コンパクト」
案件の追加・複製・削除・並べ替え（ドラッグ＆ドロップ・ボタン・キーボード）と、要確認フラグ
入力内容のブラウザ自動保存と、JSONによるバックアップ・復元（旧形式のデータは自動で移行）
同じデータからDOCX・PDFを生成するAPI（Next.js Route Handler）と、入力のZod検証
ユニットテスト（Vitest）とE2Eテスト（Playwright）。編集・保存・出力・スマートフォン表示・アクセシビリティを検証

確認できる成果

経歴の入力、応募先別の書類の編集、A4プレビュー、DOCX・PDF出力までを一つのWebアプリとして実装しています。画面は、架空のサンプルデータで確認できます。

確認対象は、以下の公開アプリと記載した実装範囲です。2026年10月11日に、公開アプリで架空のサンプルデータからPDF（A4・4ページ）とDOCXを出力できることを確認しました。これは特定のサンプルデータでの確認であり、すべての入力内容での動作を保証するものではありません。利用者数や作成時間の短縮などの測定値は掲載していません。公開状況によって、利用できない場合があります。

公開アプリを開く ↗

開発の設計ノート

機能を動かすだけでなく、経歴データ・画面・出力形式をどうつなぐかを考えました。以下は、実際のコードと仕様で確認できる設計・実装の紹介です。

経歴を構造化データで一元管理する

WordやPDFを直接編集せず、経歴をJSONの構造化データとして持ちます。応募先別の書類は、このマスターに対する表示・強調・順序・書類専用の文章の設定として保存し、書類の操作でマスターは変わりません。

同じデータからプレビュー・DOCX・PDFを作る

経歴データと書類の設定から、見出し・段落・表などのブロックを作り、そこからプレビュー用のHTML、PDF、DOCXを生成します。PDFはプレビューと同じHTML・CSSをChromiumで印刷し、DOCXはWordの見出しスタイル・表・ページ番号として出力します。

保存データを守り、形式の変更に備える

入力はブラウザに自動保存し、JSONで書き出し・読み込みができます。読み込み時は内容を検証し、問題があれば現在のデータを変更しません。データ形式にはバージョンを持たせ、古い形式の保存データも自動で移行します。

出力APIを濫用から守る

DOCX・PDFを生成するAPIには、入力サイズ・呼び出し回数・PDFの同時生成数の上限を設けています（2026年10月11日に確認したソース上の値は、入力サイズ5MB、同じ相手から1分あたり60回、PDFの同時生成3件。公開環境でこれらの境界値まで動作することは確認しておらず、ホスティング側の制限は別にあります）。入力はZodで検証し、レスポンスにはセキュリティヘッダーを付け、本番ではCSPも付けています。

現在の検証範囲・制約

個人開発のWebアプリです。利用者数・利用実績・作成時間の短縮などの測定値は掲載していません。
経歴データはブラウザ（LocalStorage）に保存します。ログイン、サーバー側へのデータ保存、複数ユーザーでの共有には対応していません。ブラウザのデータを消去すると保存内容も消えるため、JSONでの書き出しによるバックアップを前提にしています。
DOCX・PDFは、入力内容をサーバーのAPIに送って生成します。サーバーには保存しない設計です。出力の確認は特定のサンプルデータで行ったもので、大きなデータなど、すべての入力での動作は保証していません。
プレビューの改ページ位置は目安で、最終的な見え方はPDF・DOCXで確認する設計です。

同様の開発を相談する

必要な機能や現在の課題をお知らせください。

開発を相談する