はじめに
今回はフロントエンドエンジニアの市場価値の決まり方について解説します。
この記事を読めば、どんなスキルや経験が評価されるのかがわかります。
キャリア計画を立てる際の参考になれば幸いです。
必須：月収25万
ここで紹介するのは「できないとそもそもフロントエンドエンジニアになれない」という項目です。
実務経験が浅いうちはこれを証明するためのポートフォリオが必要です。
Html, CSS, JavaScriptで開発ができる
Html, CSS, JavaScriptが使用できるようになると、一応画面で簡単なホームページを表示できるようになります。
具体的には世間にある一般的なLPやホームページを模写できるレベルを目指しましょう。
下記のようなサイトを模写できるレベルで十分です。
フレームワーク（vue, React）で開発ができる
フレームワークを利用すれば、UI/UXが向上し、コードの管理も楽になります。
ユーザーにも開発者にも利益が大きいため、最近の開発では主流です。
フレームワークを利用して、データを取得し画面に表示するアプリを作れるレベルを目指しましょう。
例えば楽天トラベルのAPIを使用して、旅館を検索するようなアプリを自作してみましょう。
初級：月収50万
ここで紹介する項目は月収50万のエンジニアに求められる要素です。
１年間の実務経験
１年間の実務経験を獲得するとエンジニアの市場価値は大きく上がります。
その前に挫折してしまう人が大勢いるからです。
linterやformatterの使用経験
具体例はesllintとprettierが有名です。
これらを導入することで、コードのDRY原則を守ることができます。
「コードの改行やセミコロンの位置を揃える」「スペルミスがあれば教えてくれる」などです。
gitを利用したチーム開発の経験
gitを使用すればチームで、同じコードを管理するのがとても楽になります。
「チーム開発」の経験があるかないかが大きなポイントです。
チームメイトと作業を分担し、話し合い、そのコードをgitで管理した経験が評価されます。
バックエンドやデザインの知見
実務ではバックエンドエンジニアやデザイナーと相談する機会があります。
会議で話が通じ、意見が言える程度の知見は必要です。
ポートフォリオがあれば知見を示すのに十分です。
モジュールバンドラーの知見
具体例はNext.js, webpack, viteなどが有名です。
リプレイスや新規開発の際に「どれに移行するか？」と議題に上がることがあります。
自分なりの意見を言える知見があると評価されます。
中級：月収65万
ここで紹介する項目は月収65万のエンジニアに求められる要素です。
２年間の実務経験
2年間の実務経験があると新人という見方はされにくくなります。
高単価な案件も獲得しやすくなります。
TypeScriptの経験
タイプスクリプトを使用すれば、アプリのバグなどを画面に表示する前に気づくことができます。
保守性や可読性が向上し、開発環境が向上することが大きなメリットです。
パフォーマンス改善の経験
画面の表示速度などが遅い時にそれを改善した経験が評価されます。
具体例はChromeのディベロッパーツールで原因を調査し、APIの設計を変更した経験などです。
テスト経験
具体例はJestやcypressを使用した経験です。
テストがかければ、画面を開いてボタンを押さないと気づけないバグも自動で検出してくれることがあります。
上級：月収80万
ここで紹介する項目は月収80万のエンジニアに求められる要素です。
3年間の実務経験
3年間の実務経験があると1人前と見てくれる会社が多いです。
3年以降は実務経験そのものが評価される機会は減り、「何をやってきたか？」が大きな評価対象となります。
要件定義の経験
要件定義とは相手の要望を、具体的な解決策に落とし込んでいく作業のことです。
【具体例：画面表示が遅い解決策】
A：「スプラッシュアイコンで体感速度向上」の提案をする
B：「APIの軽量化」の提案をする
C：「不要コードのリファクタリング」の提案をする
設計の経験
設計とは定義された要件をドキュメントに落とし込むことです
【具体例：画面表示が遅い解決策】
A：スプラッシュアイコンのラフデザインをパワポで作成
B：軽量化されたAPIの設計書をドキュメントで作成
C：コードのリファクタリングの方針をドキュメントで作成
技術選定の経験
開発を行う際にどのライブラリを使うかなどを選定した経験のことです
【具体例：日付ライブラリは何を使うか？】
→最も有名なmomment.jsはメンテナンスが終了しているので、他のライブラリを調査
→簡単に移行できることが理由でdayjsを検討
→dayjsではサマータイムに対応できないのでluxonに決定
リーダー経験
チームでのリーダーを務めた経験です。
【具体例】
・バックログでのタスクの割り振り、スケジュール管理
・GitHubでPRのレビュー
・新人教育
任意
ここで紹介する項目は、フロントエンドエンジニアの単価に大きく反映しません。
会社によっては評価は上がりますが、学習の優先順位は低いです。
余裕と興味があればこちらの習得も検討してみてください。
ストーリーブックの経験
開発したコンポーネントを手軽にデザイナーに共有できます。
意外と面接で聞かれることが多いです。
UIフレームワークの経験
具体例はMUIやvuetifyなどの使用経験です。
どれか一つでも使ったことがあれば十分です。
デザインツールの経験
具体例はPhotoshopやIllustratorの使用経験です。
色やサイズを取得し、マークアップできると評価されます。
バックエンド開発の経験
具体例はphpやrubyなどを使用した、バックエンド開発の経験です。
ポートフォリオがあれば、実務経験がなくても評価してもらえます。
CI/CDツールの経験
具体例はCircleCIやGitHubActionsなどです。
gitでプッシュした際に自動でテスト、デプロイを行う技術です。
インフラエンジニアの担当領域ですが、知見があれば評価しれくれる会社は多いです。
Docker上での作業経験
PC上にそのアプリ専用の開発環境を構築する技術です。
インフラエンジニアの担当領域ですが、知見があれば評価しれくれる会社は多いです。
まとめ
フロントエンドエンジニアが評価されるポイントは大きく分けて三つです。
・実務経験の長さ
・技術力の広さと深さ
・上流工程から下流工程までの経験の広さ
補足
