【2024年版】フロントエンドに求められるミドルレベルのエンジニアと達成する為にすべきこととは

はじめに

経験年数を数年積んでくると、大体の実装はできるようになったけど、この先何を目指すべきなんだろう？と迷子になってしまうことがないでしょうか。
今回は私と同じような迷える子羊に「ジュニアレベルを卒業してミドルレベルのエンジニア」を目指す際に意識すべきことや、具体的に何をやっていけばいいのかをまとめてみました。

これは自分のための記事であると同時に、同じようにミドル層、ひいてはシニアレベルのエンジニアを目指す方にも刺さる内容になっているかと思います。
今、自分がどのようにキャリアアップしていくべきなのか、どのような道筋でスキルを磨いていけばいいのか。そんなふうに悩んでいる方は是非読んでみてください。

今同じくキャリアに悩むフロントエンドエンジニアの方の道標になれば幸いです。

※内容はフロントエンジニアが対象になりますが、バックエンドの方もなにか通じるものがある…かもしれません。

ジュニアレベルのエンジニアについては下記記事で詳しくは解説していますので、気になる方は是非読んで見て下さい！

逆算したキャリア戦略の必要性

そもそも何故、キャリア戦略が必要なのかについてお話しします。
結論からお話しすると、時間は有限だからです。

おそらく、何も意識せずとも普通に開発経験を積んでいれば、未経験からでも4~5年でミドルレベルを脱することは可能でしょう。
しかし、何も考えずにただただコードを打ち続けるのはつまらない。
どうせエンジニアになったのであれば、論理的に自分のキャリアを組み立て、逆算して努力を積み重ねる。そのプロセスが必要であると私は思います。
そうすることで、自分の理想とするエンジニア像への最短の道へ辿り着くはずです。

そして何より、目標を明確にすることで「今自分は何をすればいいのか」が明確になります。
この記事を読み終わる頃には、自分がフロントエンジニアとして足りないスキルと既に会得したスキルが明確になります。

明確に慣れば後は簡単で、自分に足りないと思うスキルを身につけていくだけになります。

ざっくり定義

ではキャリア戦略の必要性が理解できたところで、それぞれのレベルのざっくりとした定義を考えてみましょう。

●ジュニア

• リファレンス等を参照して不具合の調査ができる。（英語のドキュメントを含む）
• （単体）テストやデバッグに関して、考え方や手法を理解して活用できる。
• JestやTesting Libraryを用いてテストを行うことができる。
• APIの仕様を理解して、バックエンドとのデータの受け渡しを行うことができる。
• JavaScript の仕様に精通している。または、JavaScript を利用したプログラミングに関する高度な知識があり、それを十分活用できる。
  例）mapメソッドやfilterメソッド、if文、コールバック関数、三項演算子、スプレッド構文などを理解した上で、それを十分活用できる。
• React や Vue について基礎的な知識に関して十分理解しており、周辺技術と組み合わせて不自由なくアプリケーションの開発ができる。
• ReactであればContextやRedux、VueであればVuexなどの状態管理ライブラリの仕様を理解し、それを十分活用できる。
• TypeScriptについて基礎的な知識に関して十分理解しており、仕様書通りに開発を行うことができる。
• レスポンシブ対応のアプリケーション開発ができる。
• CSSの仕様に精通している。または、クロスブラウザ対応に関する深い知識があり、それを十分活用できる。
• UIコンポーネントライブラリを使用して、仕様書通りのコーディングができる。
• git/GitHub の仕組みを理解して適切に利用できる。
• storybookの仕様を理解し、それを元にコンポーネント開発を行うことができる。
• シンプルで他人が読みやすく理解しやすいコーディングができる
• 非同期通信の仕様を理解し、それを十分活用することができる。

●ミドル

• 複数のプロジェクト経験がある
• 他部署やPMと協働して仕様の策定ができる
• 工数の見積もりを正確に出すことができる
• パフォーマンスを意識した実装ができる
• 他メンバーの可読性・拡張性を考慮したコードが書ける
• 効果的なリファクタリングを行うことができる
• 大きいタスクを分割してジュニアに指示を出すことができる
• ジュニアの質問に的確に答えることができ、コードレビューなどを通して指導することができる
• 環境構築や技術選定が行える
• バグの発見や、詳細なレビューが出来る
• テストの策定やスケジューリングが出来る

●シニア

• 経験豊富で、より大きなプロジェクトを牽引出来る
• ミドルクラスの条件に加え、経験に基づく深い洞察力でより複雑で重大な問題を解決することが出来る。

ジュニアレベルとは

ここでは、「Googleは友達」というレベルから始まります。リファレンスを読んで、不具合の調査ができるようになります。英語のドキュメントにも恐れず立ち向かいます。単体テストやデバッグの技術も身に付けます。ReactやVueでアプリケーションを開発する力も必要です。さらに、TypeScriptやCSSの仕様にも精通していることが望まれます。つまり、多くのことを知っているが、まだまだ修行が必要、というレベルです。

ジュニアの方がチームメンバーにいる時に留意することとしては下記が挙げられます。

• バグのあるコードを生成する可能性が高いため、コードレビューでのコードの品質を担保することが重要
• ベストプラクティスや最新のテクノロジーの概念を知らない、または経験がない
• ミドルレベル以上のエンジニアよりも実装に時間がかかってしまう
• 顧客と連絡を取ったり、要件を定義するにはまだ難しい

ミドルレベルとは

では本題のミドルレベルのエンジニアに求められることも詳細に考えてみましょう。

複数のプロジェクト経験がある

ジュニアとミドルの一番大きな違いは経験であることは言うまでもありませんね。
複数のプロジェクトを経験することで、そのプロジェクトにあった技術選定であったり、現場によってのベストプラクティスを学ぶことができます。

他部署やPMと協働して仕様の策定ができる

ジュニアレベルであればPMなどが要件定義してチケット化してくれたものが降ってくるはずなので、自分で要件や仕様を決めることはなかったかもしれませんが、ミドルになるとそうもいきません。
まだ決まっていない仕様について、PMや他部署、あるいはお客様と直接やりとりすることもあるでしょう。
その仕様を伺った上で要件に落とし込み、実装していくことが求められてくるでしょう。

工数の見積もりを正確に出すことができる

これも非常に重要ですね。PMからすると「いつまでにこのタスクを完了することが出来るのか」は非常に重要なポイントです。根幹の実装であれば、他のタスクへの影響やスケジュールも考えないといけないため、正確な工数を出す必要がある訳ですね。

とあるPMが言っていたのですが、「多少バッファを取ってでもこの人に頼めば、正確な日数で成果物が上がってくると思える人がいると本当にやりやすい」と言っていました。
そのくらい正確に工数を見積もるということはプロジェクトを円滑に進める上で大切であるということですね。

パフォーマンスを意識した実装ができる

ミドルレベルのエンジニアとしての責任の一つは、チーム全体の効率性を向上させることです。これには、他のメンバーが理解しやすい、メンテナンスが容易なコードを書くことが含まれます。つまり、可読性と拡張性が重要になってきます。たとえば、関数や変数の命名には一貫性を持たせ、コードの構造をシンプルに保ち、再利用可能なコンポーネントやモジュールを設計することが挙げられます。

効果的なリファクタリングを行うことができる

プロジェクトが進むにつれて、初期の設計に基づいていたコードが現状に合わなくなることがあります。ミドルレベルのエンジニアは、コードの品質を維持しつつ、効率的なリファクタリングを行う能力が求められます。これには、コードの構造を改善し、パフォーマンスを向上させ、拡張や保守が容易な状態にすることが含まれます。

大きいタスクを分割してジュニアに指示を出すことができる

大きなプロジェクトでは、タスクを適切に分割し、チームメンバーに割り振ることが重要です。ミドルレベルのエンジニアは、ジュニアメンバーに適切な指示を出し、彼らが成長できるようなタスクを与えることができるべきです。これにより、チーム全体の生産性が向上し、ジュニアメンバーのスキルアップも促されます。

ジュニアの質問に的確に答えることができ、コードレビューなどを通して指導することができる

ミドルレベルのエンジニアは、ジュニアメンバーの疑問に対して的確に答え、指導する役割も担います。コードレビューは、特に重要な指導方法の一つであり、これを通じてジュニアメンバーの技術力向上に貢献します。

環境構築や技術選定が行える

プロジェクトの初期段階での環境構築や技術選定は、プロジェクトの成功に大きく影響します。ミドルレベルのエンジニアは、プロジェクトの要件に基づいて最適な技術スタックを選択し、開発環境を構築する能力が求められます。

バグの発見や、詳細なレビューが出来る

コードのバグを見つけ、修正することは、品質の高いソフトウェアを提供するために不可欠です。ミドルレベルのエンジニアは、バグを効率的に特定し、修正する能力に加えて、他のメンバーのコードを詳細にレビューし、改善点を指摘することができる必要があります。

結論

以上の点を踏まえると、ミドルレベルのエンジニアは単に技術的なスキルだけでなく、チームワーク、リーダーシップ、プロジェクト管理のスキルも必要とされます。ジュニアレベルを卒業し、ミドルレベルへの移行は、技術的な成長だけでなく、全体的なプロフェッショナルとしての成長を意味します。

では実際問題、どうすればいいのでしょうか？
ジュニアレベルであればとにかく手を動かしてスキルを身につけていく印象でしたが、ミドルになると手を動かしていればいいと言うものでもないでしょう。
またジュニアと違って一人では経験しにくいと言うもの難しい点でしょう。
結論はから言うと、先ほど細分化した箇条書きリストを一つずつ実務の中で意識しながら自分のものにするがいちばんの近道かなと思います。

これらの箇条書きリストを見て、あなたはどれだけの項目が自分には出来て、どれだけの項目が自分にはまだ足りないなと思ったでしょうか？
この記事を書きながら、私自身にもこれはできると言えるけど、この項目はまだ難しいな…とか、これ勉強したことはあるけど実際にやれと言われてできるか怪しい…。
そういったものが可視化されました。

その可視化された情報をもとに、あとは自分に足りないスキルを一つ一つ習得していくだけになります。

じゃあ具体的にどうすればええの？

では次は具体的にどうすればいいのかを考えていきましょう。
箇条書きしたものでもいいのですが、やや抽象的です。

各ポイントを深掘りして、実務でどのように応用できるかを考えてみます。

①他部署やPMと協働して仕様の策定ができる

ミドルレベルのエンジニアは、ただのコーダーではありません。プロジェクトの要件定義や仕様策定にも関わる必要があります。これを実現するためには、プロジェクトマネージメントの基礎知識を身につけ、コミュニケーション能力を磨くことが大切です。具体的には、PMとのミーティングで積極的に意見を出し、ミーティングでの存在感を放つことから始めましょう。

②工数の見積もりを正確に出すことができる

工数見積もりの正確性は、プロジェクト管理の要です。これを学ぶためには、過去のプロジェクトでの自分の作業時間を振り返り、それを基に今後の見積もりを行う練習が重要です。また、プロジェクト管理ツールを活用して、タスクごとの時間を記録する習慣を付けることで徐々に正確な工数が感覚的に分かるようになるでしょう。どんどん自分の勘を磨いていきましょう！

③パフォーマンスを意識した実装ができる

パフォーマンスを意識した実装を行うためには、最新の技術トレンドやパフォーマンス最適化に関する知識を常にアップデートする必要があります。
所謂パフォーマンスチューニングをしないといけない場面にも出くわすことがあるでしょう。あるいは最初からパフォーマンスを意識してコードを書くことも非常に重要です。
下記記事は千本ノック的に様々な方法でパフォーマンスチューニングを紹介してくれています。

そもそもパフォーマンスチューニングってなんぞやという方は下記記事も参考になるかもしれません。

書籍であればWebフロントエンド ハイパフォーマンス チューニング辺りがおすすめです。

④他メンバーの可読性・拡張性を考慮したコードが書ける

可読性の高いコードを書くことは、エンジニアにとってのエチケットのようなものです。コードの構造を整理し、命名規則を守り、他の人も理解しやすいコードを書くことが重要です。これには、拡張性や保守性も考慮しながら、コンポーネントを設計するスキルも含まれます。

定番ですが書籍なら「良いコード／悪いコードで学ぶ設計入門―保守しやすい　成長し続けるコードの書き方」は全エンジニア必読でしょう。

⑤大きいタスクを分割してジュニアに指示を出すことができる

大きなタスクを効果的に分割し、ジュニアメンバーに指示を出すためには、プロジェクト管理のスキルが求められます。タスク管理ツールの活用、プロジェクト計画の立案、チームマネジメントに関する本やセミナーなどが参考になります。また、実際のプロジェクトでリーダーシップを発揮し、経験を積むことも大切です。

⑥ジュニアの質問に的確に答えることができ、コードレビューなどを通して指導することができる

ミドルレベルのエンジニアにとって、ジュニアメンバーへの適切な指導は重要な役割です。ジュニアの質問に的確に答える能力は、メンタリング技術と深い技術知識の両方を要求します。コードレビューでは、単にエラーを指摘するだけでなく、なぜそのエラーが生じたのか、どのように改善できるのかを説明することが大切です。また、ジュニアメンバーには、問題解決のアプローチや考え方を教え、自ら学ぶ力を身につけさせることも目指すべきです。

また、ジュニアレベルの新人エンジニアをレビューでボコボコにして明日から来なくなってしまった・・・なんてことになったら元も子もありません。
どうしても指摘＝怒られていると感じてしまうこともあるため、レビューでの指摘や言い回しなどは十分に注意する必要があるでしょう。
下記記事を読んでからレビューすることをお勧めします。

⑦環境構築や技術選定が行える

ミドルレベルのエンジニアは、プロジェクトの要件に基づいて適切な技術選定ができる能力が求められます。これには、使用するフレームワーク、ライブラリ、ツールの選択や、開発環境の設定が含まれます。技術選定はプロジェクトの成功に大きな影響を及ぼすため、現在の技術トレンド、プロジェクトの特性、チームのスキルセットなどを考慮する必要があります。また、効率的な環境構築は、開発プロセスのスムーズな進行に不可欠です。

小規模〜中規模案件であればミドルクラスのエンジニアにも技術選定を任せられる機会もあるでしょう。
実際に私も過去に2回ほど任せてもらえる機会がありました。
後から変更することは非常に難しいため、慎重にプロジェクトの要件に沿ってベストな選択をする必要があります。思わぬところで障壁が生じることもあるでしょうが、そこも含めて経験だと思います。

もし技術選定を任せてもらえる機会があれば積極的に手を挙げて自分の血肉としていきましょう！

その後のキャリア形成

ようやくミドルレベルの説明が終わったところで
本題とは少しずれてしまいますがミドルレベルのその後のキャリアについても少し考えてみたいと思います。
参考記事「Web系フロントエンド開発エンジニアのキャリア戦略」によると、大きく分けて３つの道へ分岐することができるそうです。

①フロントスペシャリスト

フロントがシニアに近いレベルで、フロントの実装力が突出して高いタイプ。簡単なプロジェクトではなく、複雑、困難なフロントエンドプロジェクトの実装を腕っ節で突破していく。フロントで高いバリューを発揮する代わりに、バック、インフラには深入りしない。

②フロントリード

フロントがミドル以上で、フロントのインフラ、アーキテクト、技術選定、開発、運用、テスト戦略まで一人称で対応できること。高いフロント実装レベルが必要な点でスペシャリストに近いところがあるが、他のバックエンド/インフラのリーダーと議論をしながら働くので、フロントだけでなく、バックとインフラ含めた幅広いエンジニアリングの基礎が必要。

③ミドルフルスタック

フロント＋1分野以上でミドルレベル以上あり、残り1分野についてもジュニアレベル以上。各分野で設計、開発、運用まで幅広く対応できる基礎力が必要。これまでのロールと違って、フルスタックではフロントエンド自体の能力はMaxで40％くらいまで程度しか評価されないので、生き残るにはバック/インフラどっちも手を動かせる必要がある。

要約すると、「フロントのみに振り切って突出させる」か「少しバックとインフラに知識のあるフロントエンジニア」か「すべてのレベルがミドル以上のフルスタックエンジニア」の３種類があるということですね。

個人的には、すべての領域に知見があった方が企業からも重宝されやすい点や、個人開発する際に一人で完結できる点などからミドルフルスタックを目指していきたいな、と思っております。
みなさんはどんなエンジニアになりたいでしょうか？？

終わりに

ここまで、フロントエンドエンジニアのミドルレベルに求められるスキルについて深掘りして見ていきましたがいかがだったでしょうか？
正直、ジュニアははっきりとわかりやすいのですが、ミドルやシニアはどこからがミドルでどこからシニアなん？と曖昧な部分も多いと思います。そもそも人によって感じ方は様々でしょう。
これらの内容はすべて、他の方の記事や実際の現場を見た上で必要とされている技術を私なりに示したものになります。

そういえばAIも台頭してきているので、「どのようにAIを活用して作業効率を高められるか」というのも求められそうですね。

少しでも、この先のキャリアに悩むエンジニアさんの力になれたら嬉しいです。

参考