【エンジニア向け】フォーム入力でスキルシートを作れるサービスを作りました。
【エンジニア向け】フォーム入力でスキルシートを作れるサービス【Skime（スキメ）】を作りました。
アプリの概要
入力フォームにそって自分のプロフィールや経歴を入力ができ、ダウンロードボタンを押すとPDF形式でスキルシートがダウンロードできます。
（現在の出力形式はPDFのみ）
（P.S. 2025年2月16日 実際のユースケースを考え、PDF出力は廃止しExcel出力に対応しました。）
実際にダウンロードできるものは以下のような感じ
フリーランスエンジニアの筆者的に、これであれば十分自分も使いたい考えられるテンプレートにしています。
プレビュー機能があるので、できあがるスキルシートを確認しながら記入が可能です。
入力中のデータはlocalStorageに保存してあるので、意図的に消したりブラウザ変えたりしない限りいつでも編集の再開が可能です。
作ろうと思ったきっかけ
アイデア面
結論からいうと
「自分でスキルシートのいい感じのテンプレ探して、スプレッドシートにインポートしてそこでスキルシート作るのめんどくせ〜〜〜〜」
です。
僕はフリーランスエンジニアしてるんですが、案件を探す時、大体スキルシートを提出する必要があります。
エージェントを利用する場合、エージェントによっては向こうからテンプレートを指定されていることもあるんですが、特に指定のないエージェントもあります。
エージェント社Aのテンプレートで作ったスキルシートをエージェント社Bに渡すのはちょっと気が引けたので（マック店内でモス食べるみたいな感覚）
「エージェントBに提出するスキルシート自分で作るかあ」
ってなったのですが、良さげなテンプレ探してスプシにインポートして作成ってちょっとめんどかったんです。そもそもスプレッドシートも扱い慣れてない。
（エンジニアってあんま使う機会ないよね？え？僕だけ？）
履歴書とかはブラウザのフォーム入力で作れちゃうサービスがって就活のときはお世話になってた。
スキルシートでもそういうのあったら僕使うんだけどな。と思って作りました。
シンプルにお勉強のため
開発者として「自分でサービス作って運営していく」みたいなことしたいと思っている。
理想で言えばそれで飯を食えるようになりたい。
だが実務ではフロントエンドだけやっているオレ（当時24歳）にそんな技術力はない。
ので、まずは自分で一つサービスを作れるようになろうと思って作りました。
案件を受注する場合のアピールポイント（ポートフォリオ）としても役に立ってくれそうだしね！
技術スタック
フロントエンド：Next.js / MUI
バックエンド：Django
データベース：PostgreSQL
インフラ：Docker / Vercel / Heroku
その他ツール：Bolt / Cursor / Claude
選定理由は主に下記
- 単純に自分が触ってみたい
- 実際に自分が参画している現場で使用されている技術
- （DjangoやDockerあたりがそうで、キャッチアップのため）
経歴としてはVue,Nuxtでのフロントエンド開発がほとんどなので、「ReactもDjangoもDockerもやったことねえよ！」って感じだったのですが、なんとかやり遂げられました。
次に開発するときは、サービス合わせて適切な技術選定を行えるようになりたいです。
Next.js
最近の開発現場では日本でもVueよりReactの方がフロントエンドに採用されるところが多いのではないでしょうか。
ベースがフロントエンドエンジニアの自分としてはReactの経験もどこかで詰みたかったところなのでとりあえずReactで一番メジャーなフレームワークであるNext.jsを採用しました。
実際のところDjangoでAPIサーバーを作っているので、サーバーアクションなどは使用しませんし、スキルシートの編集周りはCSRにする必要があったのであまりNext.jsの恩恵を得られることができず、React＆ReactRouterでの開発でもよかったのではと後々感じています。
（まあNext.jsは触ってみたかったし、地検を身につけられたので後悔は全くしてないです）
次に開発するときはNext.js単体をフルスタックフレームワークとして活用してみたいです。
MUI
UIライブラリを採用した理由
- デザインに自信がないので、そのまま使用してもとりあえずいい感じのUIを作ることができる。
- 工数削減（正直どれでも良かったが、選定時点で一番人気ありそうなMUIにしました）
便利だったAIツール
Cursor
開発途中でエディタをVSCodeからCursorに切り替えました。
Cursorの開発に慣れてきてからは自分でコードを書くことがめっきり減りました。
個人的にこれからは実装力を磨いていく気はなく
- コードを読んで理解する能力
- 適切な指示ができる能力
を磨いていこうと思っています。
実際に自分がコードをポチポチと書く機会がここ最近10分の１くらいにはなっていると思うので、そこを磨く必要はない気がしてきました。
細かい修正をするにしても自分でコードを書くより、⌘Kやtab推論でほぼ賄えてしまっています。
ただ、AIが生成したコードを自分が理解していないと、AIにぶん投げただけでは解決できない際に詰みますし、ピンポイントに的確な指示も出せないので、コードレビューをするような感覚で自分も理解しながら開発を進めていく必要がありそうです。
Bolt
デザインがペーペーなのですが、TOPページはある程度いい感じにしたかったので、Boltを使用してTOPページを生成しました。（一旦ヒーローセクションのみですが）
Boltは使用する技術を指定することができるみたいで、MUIを指定して生成することができ助かりました。
勝手にshadcn-uiしか対応していないとおもっていましたが、指示してあげれば他のUIライブラリでもいけそうですね。
次にまたアプリを開発することがあれば、UIは全体的にBoltで作っていきたいです（V0も試したいが）
今回はほぼ開発しきったあとにBoltやV0の存在を知ったので、サービス全体ではなくヒーローセクションのみ作成しました。
個人開発をする上での心構えが成長した
最初は個人開発をする動機は以下のような初心者マインドだった
- 技術力向上のため
- ポートフォリオになるため
- 一旦1個のサービスをリリースまで持っていきたい
実際このあたりは達成しているのではないかと思う。
ただ、作成しているうちに
- どうせなら本当に使ってもらえるようなものを作りたい
- 自分自身でも価値があると思えものを作りたい
- マネタイズにつながるようなものをつくりたい
と本心から思うようになってきた。
実際、そのつもりで開発したほうが副次的にさらに実装力が身につくと思うし、良いポートフォリオにもなると思うので、今後そういった心持ちはもって開発していきたい。
「どうせ1個目だから」「ポートフォリオになればいいから」と完全に思っていたら、妥協に妥協を重ね、粗末なものをリリースてしまい、次につながる成長も取りこぼしてしまうと思う。
反省点は色々あるので機会があればまた記事にしたい。
スキルシート作成するときはぜひ使ってみてくださいー！
Discussion