Vue.jsエンジニアのスキルシートの書き方｜面談で評価される実績の見せ方

Vue.jsエンジニアのスキルシートは、Vue 2とVue 3、Options APIとComposition APIを期間ごとに分けて書き、各プロジェクトで「画面だけを担当したのか、APIまで触ったのか」をはっきりさせるのが基本です。読み手は「Vue.js経験◯年」の年数より、どの版で、どんな画面を、どこまで任されていたかを見て、案件に合うかを判断します。

この記事では、Vue.jsならではの書き分け方と、プロジェクト欄の記入例を紹介します。スキルシート全体の構成はスキルシートの基本、案件で求められる技術の中身はVue.jsの案件で求められるスキルで扱っているので、ここでは「どう書けば伝わるか」に絞ります。

読み手が最初に探す3つの情報

Vue.jsの案件の担当者がスキルシートを開いて最初に確かめるのは、次の3つです。

1. 版と書き方：Vue 3のComposition APIで書けるか。運用中のVue 2のコードを読めるか
2. 担当の境目：画面だけか、LaravelやRailsなどのAPI側も触れるか
3. Nuxtの有無：サーバー側の描画を扱ったことがあるか

この3つが要約とスキル一覧から読み取れないと、プロジェクト欄を細かく読み込まないと判断できないシートになります。要約の3〜5行の中に、少なくとも「主に使った版」と「担当の境目」は入れておきましょう。

スキル一覧は「版」で行を分ける

Vue.jsのスキル一覧でよく見るのが、「Vue.js：5年」の1行だけの書き方です。これでは、5年のうち何年がVue 3なのかが分かりません。版と書き方で行を分けると、読み手はすぐに案件と照らし合わせられます。

上の表は書き方を示すための例です。年数は実務で使った期間で数え、版が重なる期間（移行中など）は、主に書いていたほうに寄せるか、「移行期間」と注記します。

組み合わせたバックエンドの行には、どこまで触ったかを括弧で添えるのがポイントです。「Laravel」とだけ書くと、読み手はバックエンドの開発もできる人だと受け取ることがあります。仕様をすり合わせただけなら、そのとおりに書きましょう。

担当範囲は「画面の数」ではなく「画面の種類と役割」で書く

Vue.jsの案件は、管理画面や業務アプリのように画面数の多い仕事がよくあります。そのため、担当内容に「画面を30画面実装」と数だけを書く方も少なくありません。数は量の目安にはなりますが、設計にどこまで関わったかは伝わりません。

書き直しの例を見てみます。

• 書き直す前：一覧・詳細・登録画面など30画面を実装
• 書き直した後：検索条件つき一覧、登録フォーム（入力検証つき）、権限で表示を切り替える詳細画面を担当。一覧と検索フォームの共通部品を切り出し、ほかのメンバーが使う形に整えた

書き直した後のほうは、「どんな種類の画面に慣れているか」と「共通部品を設計する立場だったか」が読み取れます。画面の数を書きたい場合は、種類と役割を書いたうえで添える程度にとどめます。

自分で決めたことを1行添える

Vue.jsの面談では、「なぜその部品を切り出したのか」「なぜその状態をストアに置いたのか」と、判断の理由を聞かれることがよくあります。スキルシートにも、判断に関わった点を1行だけ添えておくと、面談でその話から入りやすくなります。

• 「画面ごとに持っていた検索条件をPiniaのストアにまとめ、画面を移っても条件が残るようにした」
• 「APIの呼び出しと読み込み中の状態をcomposableにまとめ、各画面での書き方をそろえた」

移行の案件は「範囲・進め方・残したもの」で書く

Vue 2からVue 3への移行や、VuexからPiniaへの置き換えは、Vue.jsのスキルシートで目を引きやすい経験です。ただ、「Vue 3へ移行」とだけ書くと、全体を計画したのか、割り振られた画面を書き換えただけなのかが分かりません。

移行の経験は、次の3点で書くと伝わります。

「残したもの」は書き漏れやすい項目ですが、移行の判断をした人かどうかがよく表れます。Vue 2のサポート終了の経緯や移行の背景はVue.jsエンジニアがフリーランスになるにはで扱っています。

プロジェクト欄の記入例

ここでは、管理画面の改修とVue 3への移行を担当した場合を想定した記入例を示します。以下はすべて書き方を示すための例で、実在の案件や実績ではありません。業界や規模はぼかして書いています。

期間：20XX年X月〜20XX年X月（1年6か月）
案件概要：小売業向け 社内の受発注管理画面の改修
規模・立場：フロントエンド3名・バックエンド4名（自分はフロントエンドのメンバー、後半はフロントエンドのとりまとめ）
担当工程：画面設計、実装、単体テスト、リリース対応
使用技術：Vue 2（Options API）→ Vue 3（Composition API）、TypeScript、Vuex → Pinia、Vite、Vitest
担当内容：一覧・登録・承認の各画面の改修。Vue 3への移行では、共通部品から先に移し、画面ごとに段階的にリリースした。APIの項目追加はバックエンドと仕様を詰め、実装はバックエンド側が担当
工夫・成果：入力検証の処理をcomposableにまとめ、画面ごとのばらつきを減らした。型チェックをCIで実行するようにし、型の崩れがレビュー前に分かるようにした

この例では、「APIの実装はバックエンド側が担当」と書いています。担当しなかったことを書くのは損に思えるかもしれませんが、面談での食い違いを防ぎ、かえって信頼につながります。

成果物やデモのURLを載せるとき

Vue.jsは画面を作る仕事なので、動くものを見てもらえると伝わりやすい職種です。ただし、載せてよいものは限られます。

• 載せてよいもの：個人で作って公開しているアプリやリポジトリ
• 載せないもの：参画先の検証環境のURL、社内向け画面のスクリーンショット、参画先のリポジトリ

一般に公開されているサービスでも、自分が関わったことを書いてよいかは契約によります。判断の考え方はスキルシートに書いてよいこと・いけないことにまとめています。

個人の成果物を載せる場合は、見た目の作り込みより、コンポーネントの分け方、composableの使い方、テストが読み取れる構成にしておくと、Vue.jsの案件の読み手に伝わります。READMEに「使った版」と「設計で決めたこと」を数行書いておくのもよい方法です。

案件の型ごとに要約を入れ替える

Vue.jsの案件はいくつかの型に分かれます。応募する案件に合わせて、要約の1行目に置く経験を入れ替えましょう。

同じ経歴でも、1行目が変わるだけで読み手の受け取り方は変わります。Reactの案件にも応募する場合は、Reactのスキルシートの書き方も参考になります。TypeScriptの書き方を厚くしたい方はTypeScriptのスキルシートの書き方をご覧ください。

よくある質問

Vue 2の経験が長く、Vue 3は短いのですが、どう書けばよいですか？

期間どおりに分けて書いたうえで、要約で「Vue 2の保守・改修の経験が長く、Vue 3でも開発経験がある」とまとめるとよいでしょう。運用中のVue 2を扱う案件では、長い経験そのものが強みになります。Vue 3の経験が個人の成果物だけの場合は、実務の行とは分けて書きます。

Nuxtの経験は別のプロジェクトとして書くべきですか？

Nuxtを使ったプロジェクトは、使用技術の欄に版とあわせて書けば十分です。そのうえで、サーバー側の描画やデータ取得の方法を自分で決めたのであれば、担当内容に1行添えておくと、Nuxtの案件で読み手の目に留まりやすくなります。

画面のデザインまで担当した場合はどう書きますか？

デザインのデータを自分で作ったのか、デザイナーのデータをもとに足りない状態（読み込み中・エラーなど）を補ったのかで、書き方を分けます。デザインツールを使った経験があれば、スキル一覧の「ツール」の行に入れ、担当内容でどこまで自分で決めたかを書くと伝わります。