Dev

【波乗り】令和のフロントエンドエンドエンジニアの将来性と今後求められるスキルについて

ぺん
ぺん
なあ、最近のフロントエンドってややこしすぎないか?? 実際、ReactとかVue、もしかするとJavaScriptすらよくわからない人大量にいそ
この記事を書いた人
この記事を書いた人
現役のフリーランスフロントエンドエンジニアですが、正直、求められるスキルが多岐に渡りすぎて😅 業界経験のない方にどう説明すればいいのやら😭 正直、僕らですら追いつけていないところも多いです…😔

僕自身、元々はバックエンドとフロントエンドを書くよくいるパターンのWEB系エンジニア@渋谷でした。

最近だとサ○ンサさんの新規事業サイトをWordPressで作成してみたり、S○brandのR○dyとかのECサイトのフロントエンドを開発したりとか、食に関するメディア(マ○ロニ)のフロントエンドを開発したりとか…

自分でも何がなんやら😅

ぺん
ぺん
うーん、そうだな。とりあえず業界カオスマップみたいなの欲しいよな🤔 あとJavaScript使うとか聞いたことはあっても、実際にどんな技術があるかわかってる人は少ない印象😌
この記事を書いた人
この記事を書いた人
なるほどー。🤔ではまず業界の大きい地図を描いてみて、そこからフロントエンドエンジニアとしての将来性とか今後の全体の方向性を考えてみよう。😌

おっと。その前にまずは結論から。

スポンサードサーチ

フロントエンドエンジニアの将来性はある。けど…

この記事を書いた人
この記事を書いた人
将来性はあると思います! けど…
ぺん
ぺん
「けど」ってなんだ? 実際どっちなんだよ😭
この記事を書いた人
この記事を書いた人
初学者とか業界初めての方向けに書いておくと、そもそもフロントエンドエンジニアの切り分けから必要な気がしてます👨‍🔧
ぺん
ぺん
あ、なんかプレゼン資料みたいなの出てきた

【結論】 ○○○な技術スタックを持つフロントエンドエンジニアの将来性はあります

2つのWEBフロントエンド領域について

✔︎ 将来性のあるフロントエンド領域はどっち?


▲よくあるWEB制作フロントエンド技術スタック

▲よくあるWEBサービスのフロントエンド技術スタック

もしかすると知らない技術があるかもですが…少し考えてみてください。

 

✔︎ 答え合わせ


ぺん
ぺん
うーんなんとなく右がカッコ良さそうなアイコン多いな😁w
この記事を書いた人
この記事を書いた人
そうだね、どっちも未だに使われている技術ではある👨‍🔧。 だけど、「将来性」に絞って言うと左は今からあえて頑張ってやる必要はないと思う。

被っている言語はありますが、それはまあほとんど必須なのでもちろんのことです。(HTML, CSS, JavaScript, Sassなど)

WEB制作スタックの問題点

  1. NoCode / LowCodeでほとんど代替されている
  2. 付加価値の大きい仕事ではすでになくなっている(=エンジニアとして単価を狙えない)*
  3. フロントエンドエンジニアとして成長ができない
この記事を書いた人
この記事を書いた人
Twitter界隈で人気の技術スタックですが既に枯れたを通り越して化石みたいな技術ですね😅😅
ぺん
ぺん
技術はよくわからんけど、その「枯れた」とか「化石みたい」な技術だとなんでダメなんだ?🤔
この記事を書いた人
この記事を書いた人
結局は、この技術スタックに埋もれてしまうと「フロントエンドエンジニアとして成長できない」これに尽きます😭😭。

念のため補足しておきますが、WEB制作は稼げます。しかしそれは「自分がフロントエンドエンジニアとしてメインで開発をしない」ことが前提になります。

実際に、僕はWEB制作を会社で一本150万〜で請け負ってディレクション&開発を持った経験があります。1ヶ月で作って150万だったので、個人でやるならどう考えても儲かりますw

しかし、それは自分でWEBディレクターになって、フロントエンドエンジニア/コーダーに外注費を支払って、とかそういった開発以外のビジネスの立ち回りがメインになります。

こちらの方面でのスキルを伸ばすのもいいですが、もっと希少性の高い開発スキルを伸ばしてからでも、WEB制作やディレクションは片手間でできます

ぺん
ぺん
なるほどなー。仮にディレクションやるにしても自分で開発できるなら圧倒的に有利だし

【悲報】WEB制作の技術スタックは将来性なしです😌

この記事を書いた人
この記事を書いた人
😌
ぺん
ぺん
…🤔(マ○ブ風?)

WEB制作やるなら、フロントエンド開発はメインでやらずにWEBディレクターとして案件受注~外注をメインで立ち回るべきですね。

将来性のあるフロントエンド技術スタックは○○○だ

ぺん
ぺん
やっぱりこっちのイケてるアイコンの方が将来性あるか🤔
この記事を書いた人
この記事を書いた人
そうだね。結論としてはこっちのが将来性ある🙌 さて、ここで○○○に入る3文字なんでしょう?
ぺん
ぺん
「えいご」とか?🤣
この記事を書いた人
この記事を書いた人

 

答えはこれだと思います!👨‍🔧🙌

将来性のあるフロントエンド技術スタックはモダンだ

あんまりパッとしない人が多いかもなので深掘りします。

スポンサードサーチ

将来性のあるモダンなフロントエンドとは何か?

フロントエンド開発の歴史をおってみたくもありますが、ひとまずざっくりと「モダンなフロントエンド」とはなんぞや?という話を超特急でやります。

この記事を書いた人
この記事を書いた人
すみません、ひとまず3段階くらいでスーパー雑に見ていきます。話すとあまりに長くなりすぎるのでごめんなさい🙏

古き良きWEBの時代のフロントエンド

この記事を書いた人
この記事を書いた人
この頃は、HTMLとCSSが主役と言っても過言ではないでしょう。CSSを扱うためのBootstrapというライブラリや、Gulp.jsというタスクランナーを使ったSassのビルドなど、HTMLコーディングを楽にする技術が好まれていました。

また、JavaScriptはもっぱらjQeuryもしくはJavaScriptを使っていました。ajaxという非同期通信が世に出て、google mapなどの有名なプロダクトに実装されると、瞬く間に広がりました。

DOMというHTMLマークアップの要素に対して、アニメーションを指定したり、機能を追加していくことで動きのあるページができました。

また、PHPを使ったサーバーサイドとのデータの受け渡し、レンダリングも行いました。WordPressなどのCMSを採用する例も多くありました。

ぺん
ぺん
この頃の問題ってなんだったんだ?
この記事を書いた人
この記事を書いた人
スマホが出てUI/UXの重要性が指摘され始めた頃を境に、jQueryによる要素の操作だけではもはや適切なアニメーション/機能の追加の実装が困難になるプロジェクトもありました。

この頃は、データを持つサーバーサイドとフロントエンドでのデータの受け渡しに大きな問題を抱えていました。

サーバーサイドから渡されるデータによって、フロントエンドは状態を変更したり、UIを変更したりします。しかし、もはやjQueryとajaxやJavaScriptのみでは高度なデータを扱うフロントエンドや複雑なUIを実現するのは厳しい。そんな状況がありました。

そこで、SPA(シングルページアプリケーション)という、JavaScriptでHTMLのレンダリングまでを行う方法が生まれ、そしてjQueryが徐々にフェードアウト。高度なUIの実現、複雑な状態管理、それらを一挙にJavaScriptが担うようになりました。

SPA(シングルページアプリケーション)の時代へ

この記事を書いた人
この記事を書いた人
SPAの登場により、ありとあらゆるフロントエンドのモジュールをwebpackで管理し、そしてHTML, CSSをマークアップしてページを構築するのではなく、JavaScriptによってページを構築できるようになりました
ぺん
ぺん
それって何が嬉しいんだ結局?
この記事を書いた人
この記事を書いた人
従来はHTML, CSSをマークアップすれば、それを動かせるのはjQueryやPHPのみでした。つまり、レンダリングされた後の状態しかいじれませんでした。それが、SPAの登場により、レンダリング前の状態、そしてレンダリングされてからもリアクティブでリアルタイムなUI表現が可能になりました(仮想DOM)

ここでのSPAの登場によって、WEBフロントエンドの常識がHTML/CSSのマークアップから、SPAページをリアクティブ・リアルタイムに作成するための技術志向へ変化し始めます。(そしてそれは今も続いています)

従来は複雑なjQueryやJavaScriptを組む必要があったものが、Vue.jsやReact.jsといった新たなライブラリによって、非常に簡潔に書けるように進化しました。

また、複雑なデータ構造/UIを実現するために「コンポーネント」をベースにした設計・開発の道が開けてきました。コンポーネントとは、ページを作成するためのパーツを適切に割ってしまって、パーツを再利用できるようにするための部品のことです。

ぺん
ぺん
この辺りの技術が、今のフロントエンドエンジニアの仕事になっているんだな〜。
この記事を書いた人
この記事を書いた人
これだけで終わってくれればよかったんだけどね😅 今ではさらに膨らんでしまったよ😭😭

ここから、複雑なUIを実現するならもうJavaScriptでありとあらゆることを実現した方が、開発効率をあげることができるような環境が整ってきました。

Node.jsエコシステムの急拡大、Express.jsの人気、サーバーサイドレンダリングやGraphQL(NoSQL)、Next.jsなどの新しいフレームワーク・ライブラリの登場によって、急速にJavaScriptでできることが増えていきました。

そして今では…

令和時代のモダンなフロントエンド

この記事を書いた人
この記事を書いた人
誰もフロントエンド開発の全体像を捉えられない時代になりましたw😭
ぺん
ぺん
え、こんなに学ぶ必要ある?😭
この記事を書いた人
この記事を書いた人
モダンなフロントエンドを知るためには、ざっくりそれぞれの技術的な概要・採用背景を知っている必要はあるかなーと思います😂😂

最近はTypeScriptの登場による「型」の恩恵が受けられるようになったこと。そしてあらゆるJavaScriptライブラリがTypeScriptベースで開発されるようになったことで、TypeScriptそしてNode.jsを中心として「JavaScriptでWEB開発全てを行う」ことができる環境が整ってきました。

それに拍車をかけたのがFirebaseやAWS AmplifyなどのBaaS(バックエンド・アズ・ア・サービス)の勃興です。

バックエンドが完全に不要になる…ことはなくクラウドを上手く使ったアーキテクチャ設計をする必要が出てきました。

しかし、Next.js(Blitz.js)などのモダンなフレームワークの登場によって、ありとあらゆることがフロントエンドの責務としてまっとうできるようになってきました。

また、SSR(サーバーサイドレンダリング)がSPAの次の形かと思われていた矢先、SSG(スタティックサイトジェネレーション)という静的ページレンダリングの手法が主流になってきそうな雰囲気があります。

ぺん
ぺん
…この辺の話置いてかれてる人多そうだからもうやめとこうw😂
この記事を書いた人
この記事を書いた人
まあそんな感じです😌 とりあえず、最近は月単位で新しい技術が生まれて、その概念をキャッチアップしつつどう実装に組み込むかを考えたりするのもフロントエンドエンジニアの仕事のようですね😅

フロントエンドエンジニアの将来性とは?

ぺん
ぺん
この辺でまとめておくとフロントエンドエンジニアの将来性ってどうなんだ?
この記事を書いた人
この記事を書いた人
あると思います。しかし、その将来性を感じられるのは常に最先端に立って、エッジな技術に手を染め続ける必要があるでしょう。そこは人によっては向き不向きがあると思います。

こんな感じで、「最新のフロントエンド事情がわかる」のであれば最近ではサーバーサイドエンジニアと同じくらいの単価をもらえるのがフロントエンドエンジニアでもあります。

フロントエンドエンジニアの将来性とは、最新の技術の多さにも現れていて、多くのエンジニアの注目の的だと思います。実際フロントエンドを使いこなせてる人はかっこいいしね!

NoCodeツールの利用を真っ先に考えるのもフロントエンドエンジニアで、BaaSの利用を考えて設計・構築したりするのもフロントエンドエンジニアの仕事になっている会社さんもあります。

流行の服をひたすら着ては脱ぎ捨てるように、多種多様な経験をガンガン積んでいきたい。そんな飽き性だけど最新のことは大好きな志向の人にオススメなのがフロントエンドエンジニアです。

【波乗り】最新のエッジな技術に手を染めたフロントエンドエンジニアの将来性はとてつもなくある

実際に、Next.js / Nuxt.jsあたりを使えてFluxベースの状態管理ライブラリの知見もあり、そしてTypeScriptを使った開発ができるならフロントエンドエンジニアでは普通に企業から引っ張りだこなはずです。(逆に、それだけで十分に現時点ではキャッチアップできてると思われます)

フロントエンドエンジニアという仕事は変化が早いだけに、差をつけやすい分野でもあります。

まあ、日々移り変わる技術の波に乗っていく、そんな新しいもの好きで飽き性な方におすすめです。新しい技術にガンガン触れていくので、飽きない仕事だと思います!僕はフロントエンド好きです。

こんな感じです!

何か質問やツッコミなどあればコメントいただければと思います☺️

スポンサードサーチ

参考

この記事を書いた人
この記事を書いた人
この記事の執筆のための参考…というよりも是非見て欲しい物を集めてみました!

Frontend Study #1: 基調講演 – Frontend 領域を再定義する

プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法

ABOUT ME
クスハラ
立命館大卒('18)後、ニート。 その後、webエンジニアとして独立・開業。 留学経験あり。TOEIC960点(大学3年時) 複数のwebサービスのグロースから開発までを担当。楽しく仕事して自由に生きているので、ブロガーとしては世の中の当たり前を疑う視点を提供する記事を書きたい。 ■連絡先 shogo.kusuhara[あっと]gmail.com

コメントはこちら

メールアドレスが公開されることはありません。