【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

フロントエンドエンジニアはしんどい 今後を生き抜く対策とは?

Web転職する

フロントエンドエンジニアのフリーランスhoshi(@funclur)です。

 

会社員のフロントエンドエンジニア5年、フリーランスのフロントエンドエンジニアを半年した経験から

 

  • フロントエンドって実はしんどい
  • 今後のフロントエンドを生き抜くための対策

 

について書きました。

 

もしフロントエンドエンジニアになりたいと思ってる方は参考になるかと思いますので読み進めください。

 

フロントエンドエンジニアって実はしんどい

 

最近よくフロントエンド仲間で話すのは

 

「フロントエンドしんどくない!?笑」

 

「いつからこんなにしんどくなった?」

 

「もはやバックエンド…」

 

という会話です。

 

ではなぜフロントエンドはしんどいのか理由を挙げていきます。

 

フロントエンドがしんどい理由

 

  • 環境構築の増加
  • JSフレームワークの増加
  • バックエンドがやるようなこともやる

 

一つずつ補足しますが、共通していることはやることが多くなり学習コストが上がっているということです。

 

環境構築の増加

 

環境構築せずに設計実装するフロントエンドエンジニアは今や存在しないと言っても過言ではありません。

 

具体的には以下タスクランナーやフレームワークを使用するのに環境構築が必要になります。

 

  • scss
  • Grunt
  • gulp
  • babel
  • webpack
  • TypeScript
  • Angular.js
  • React.js
  • Vue.js

 

およそ出てきた順番に並べてみました。(多少の違いはあるかと思います。)

 

Gruntはもうなくなってきていますが、他の環境構築は現役かと思います。

 

基本的にフロントエンドエンジニアが覚えるべきはHTML、CSS、JavaScriptの3つなのですが、環境構築は数多くあります。

 

環境構築の何がしんどいかというとバージョンによる違い、Windows、MacのOSの差などによりエラーが出ることがあるということです。

 

これに消耗する人が多いです。

 

現に自分もnodeモジュールのバージョンの差が原因でエラーを吐いてしまいググりまくったり、業務委託先がほぼMacでwindowsの環境構築の知見や整備が用意されておらず数日環境構築に時間がとられたりと大変な思いをしています。

 

Dockerを作ってしまえばどんな環境でも環境構築が容易になりますが、そのDockerの作成はまた別の専門知識が必要なためすぐ作れるものではありません。

 

しかし、フロントエンドの仮想環境構築はフロントエンドでやるべきという風潮もあるため、Dockerもフロントエンドの領域に入ってきています。

 

JSフレームワークの増加

 

JSフレームワークの増加もフロントエンドエンジニアの学習コストを挙げている大きな要因です。

 

しかもフレームワークは3つあり、人によっては2つないしは3つ全部習得してる人もいるでしょう。

 

そのため自分もフリーランスエージェントに

 

「別なフレームワークも今人気があるので習得されることをおすすめします」

 

と煽られる始末です笑

 

そう簡単に言いますが、フレームワーク一つ覚えるのも割と言語一つ覚えるくらいの学習コストはかかるのではないかと思います。

 

Vue.jsがとっつきやすいのは確かです。

 

でも書き方が複数パターンあったり、Vue.jsのフレームワークのNuxt.jsなど実務で使うには深い学習が必要というのが現状です。

 

Nuxt.jsに関してはフレームワークのフレームワークです笑。

 

どういうこと?!となりますよね。

 

そして次の話にもつながりますがフレームワークの登場でこれまでバックエンドの範囲だったものがフロントエンドの領域になっています。

 

かつては…

フロントエンドエンジニア

静的なhtmlテンプレートを用意しバックエンドに丸投げ

バックエンドエンジニア

データベースから検索しHTMLを構築→HTMLを返却

 

 

現在は…

フロントエンドエンジニア

APIを呼び出し返ってきたデータからHTMLを構築

バックエンドエンジニア

APIの作成

 

大まかな例ですが上記の通り、現在ではフロントエンドが担う範囲が多くなっているという現状です。

 

バックエンドがやるようなこともやる

 

最近では上記の他にもバックエンドがやるようなことをフロントエンドがやっていることもあります。

下記がその例です。

 

  • 型付け
  • サーバー側
  • テスト

 

型付け

 

型付けとは変数やオブジェクト、関数などに型を指定しておくことで意図しないエラーを防ぐ狙いがあります。

 

TypeScriptというJSに型をつけられる言語になります。

 

バックエンドエンジニアの方は慣れてらっしゃるかもしれませんが、フロントエンドエンジニアはTypeScriptに慣れるのがなかなか難しいのではないでしょうか。

 

TypeScriptを書ける知り合いのエンジニア2人に聞きましたが、二人とも普通にJSを書くより5倍ほど工数がかかるということでした。。

 

こんな記事もあるくらいです↓

 

サーバー側

 

JSもサーバーを操れるようになりました。

つまりもはやバックエンドというのは本当の話です。

 

それがNode.jsです。

wikipediaには下記のような説明です。

Node.js は、イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境である。

 

ただNode.jsがどの現場でも使われてるかと言えばそうではなさそうです。

 

また、フロントの技術のみでログインやDBを利用できるFirebaseなどのサービスも出てきています。

 

詳細はこちらの記事にアップしています。

プログラミング学習ならUdemyがおすすめ Vue.jsを例に解説

テスト

 

バックエンドでは珍しくないテストですが、フロントエンドにもあります。

 

申し訳ないのですがこれはあまり知見がないので語れないのですが、手法がたくさんあるようです。

  • TestCafe
  • CircleCI
  • E2Eテスト

などがあります。

 

上記ツイートの自分のようにインプットをちょっとでも怠ると「一個も知らんがな」状態に陥ります。

 

その他

 

その他まだまだやることはたくさんあります。

 

  • 大規模でも崩れない破たんしないCSS
  • BEMを初めとする命名記法
  • 後回しにされがちなアクセシビリティ
  • グラフィック系のwebGL、Three.js
  • cssフレームワークを使用することにより実質デザインも担当

 

最後のフロントエンドがデザインも担当、は自分が面接を受けた会社で本当にあった事例です。

フロントエンドがVue.js書きながらVuetifyでデザインという感じでした。

 

さらに、ブラウザや端末の違いによる表示やデザインの調整も結構なコストです。

 

バックエンドの勝又さんも下記のようにツイートしています。

 

 

先述した勉強会に登壇した方が仰ってたのですが、

表示チェックの段階で、後輩に

「IE確認した?」

というのは口癖のように言うということでした。

 

その辺はどこの会社も同じようですね笑

 

今後のフロントエンドを生き抜くための対策

 

ここまでフロントエンドのしんどい実態を赤裸々に紹介してきました。

 

では今後フロントエンドはどうやって消耗しない世界にすればいいのか対策を提案します。

 

  • 興味があるものをやる
  • その環境下での要求にこたえる
  • 直面したらやる

興味があるものをやる

 

一つ目は、興味があるものをやるという原始的なやり方です。

 

原始的ではありますが、この裏には興味のないものはやらないという意味が隠れています。

 

つまり転職の際は、興味がある技術を使ってる会社を狙っていくべきです。

 

  • webGL、Three.jsに興味がある・・・ゲーム系の会社
  • React.jsを勉強している・・・React.jsを使ってる会社

 

その環境下での要求にこたえる

 

実際先述した項目をいっぺんにやらされる現場はありません。

 

(JSフレームワーク3つ、WebGL、Node.js全てやれとかはないです。たぶん笑)

 

そのため今いる環境で要求されることを精一杯やる、というのが基本的なフロントエンドの生き方です。

 

会社に所属していれば、技術はできる人が頭となって選定して採用する流れかと思います。

 

その流れが本格化し始めたら徐々に手を出すという感覚で良いかと思います。

 

その環境によって何が得意か特徴が出てくるものです。

 

直面したらやる

 

ほぼ同じですが直面したらやるというスタンスで問題ありません。

 

もしかしたらいつかやるかもという気持ちで、新しいことに手を出しまくるのは素晴らしいことですがそれでは消耗する人も多いと思います。

 

現に流行らない技術もたくさんありました。

 

流行らない技術を勉強するのは無駄かな自分はと思っています。

 

まとめ:ゆるいエンジニアでいいじゃない

 

以上、フロントエンドエンジニアはしんどい 今後を生き抜く対策とは?ということをテーマに記事を書きました。

 

今後も状況はめまぐるしく変化する可能性は有りますが、若干落ち着いてきたかな?という節は個人的に感じます。

 

エンジニアは誰もが皆1番を目指す必要はありません

 

中の中を目指し、消耗や挫折のしないエンジニアを目指していくスタンスも認められるべきです。

 

また先日の勉強会で登壇された大手凄腕フロントエンジニアの方も技術選定は「長いものにまかれろ精神でやっている」と言っていました。

 

気負いせずそのくらいの気持ちで行きましょう。

【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する フロントエンドエンジニア
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました