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

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

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

について書きました。

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

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

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

「フロントエンドしんどくない！？笑」

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

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

という会話です。

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

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

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

環境構築の増加

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

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

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

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に関してはフレームワークのフレームワークです笑。

どういうこと？！となりますよね。

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

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

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

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

下記がその例です。

型付け

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

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

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

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

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

サーバー側

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

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

それがNode.jsです。

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

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

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

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

テスト

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

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

• TestCafe
• CircleCI
• E2Eテスト

などがあります。

#techplay
モダンフロントエンド勉強会で出てきたモダンワード
どのくらい知ってる？
・formic
・TestCafe
・CircleCI
・スナップショット
・Storybook
・モブプログラミング

フロントエンドだけど

— hoshi@フロントエンドフリーランス (@funclur_01) July 23, 2019

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

その他

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

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

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

面談でした。

AI系の自社開発企業だったのですが
・デザイナーなし 感覚だけどちゃんとしてる
・CSSフレームワークのみ 一切書かない
・バックエンド、フロントエンドほぼみんな横断的にやってる

ってことで、カルチャーショック受けっぱなしでした…

— hoshi@フロントエンドフリーランス (@funclur_01) June 13, 2019

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

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

そういえば僕がiOS/Android/フロントエンドを主戦場にしなかったのは、「細々としたUI変更の指示に巻き込まれたくない」というメインの理由以外に「端末やブラウザごとの表示や挙動の違いに悩まされたくない」というのもありまして、僕の観点だとこれもかなりの人生の無駄という感があるわけですねｗ😅

— 勝又健太@テック系YouTuber (@poly_soft) June 10, 2019

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

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

「IE確認した？」

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

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

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

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

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

興味があるものをやる

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

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

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

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

直面したらやる

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

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

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

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

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

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

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

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

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

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

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