はじめに

エンジニアの中でも今回はWEBフロントエンドエンジニアとしてより成長するために必要な技術や考え方について話していきます。

WEBフロントエンドエンジニアとは

おそらく多くの人はWEBフロントエンドエンジニアと聞けばHTML、CSS、JavaScriptを使ってWEBサイトを作る人を思い浮かべると思います。この認識は間違ってはいないのですがよりレベルアップするためには捨てなければいけない認識です。
JavaScriptなどのプログラミング言語は手段として利用するだけで本質はバックエンドとエンドユーザーの繋ぎ込みを行うエンジニアというのが正しい認識です。

エンドユーザーという単語はこちらのサイトで説明されています。
エンドユーザーとは　~IT用語辞典e-Words

ここでバックエンドエンジニアについて少しふれておきます。

バックエンドエンジニア

簡単に言うと、DBなどから値をとってきてそれを使いまわしやすい形にしてAPIとして簡単に情報を取得できるようにするエンジニアです。

昔のWEBエンジニアはバックエンドからHTMLをそのまま返すことでフロントエンドの部分も担っていました。しかし、近年ではTwitterやQiita、youtubeなどユーザーのアクションに対して高度な処理を行うことが当たり前になってきました。この高度な処理をするためにはJavaScriptを使用する必要があります。

そうなってきた場合、PHPやGO、pythonを書きながらJavaScriptも書かなければいけません。そうなるとプログラミン言語に関する知見は倍になり、同時進行で2つの言語を扱うという非効率なことすることになります。非効率なうえに非同期でWEBサイトを作ることになります。
ここで起こったのがJavaScriptを扱うエンジニアを別で用意するという分業化です。

こうしてWEBエンジニアはフロントエンドエンジニアとバックエンドエンジニアに分かれて分業するようになりました。

誰のためのフロントエンドエンジニアか

フロントエンドエンジニアは一体何のため、だれのために存在しているのでしょうか？
これに関してはWEBを作る目的が大きく関わってきます。

大まかに分けると以下に分類できると思います。

お金を稼ぐためのWEB
DX目的のWEB
趣味

お金を稼ぐためのWEB　

おそらく最も多い目的ではないでしょうか。

ホームページを作ってネットからの集客を試みる
LPを作って広告を打つ
ポートフォリオ
ブログ

など様々なWEBがありますがこれらはおおかれすくなかれお金を稼ぐためのWEBに分類されます。

もしこういった目的であればフロントエンドエンジニアがいるのはお金を払ってくれる人のためになります。こう聞くと当たり前じゃんと思うかもしれませんが意外と意識できてない人が多いと思います。

自分のコードに納得いかなくてリファクタを繰り返し納期を後ろ目に見積もる
重要度の低いバグを直そうとして時間を食う
完璧にしてからリリースしたい

など、自分のためのエンジニアになっていませんか？飽くまでお金を払ってくれる人のために自分がいるわけです。

それなら適当なコードでもいいのかというとそういうわけではないです。
後にアサインされるであろうエンジニアが技術的負荷を負うことになれば開発工数はかかるし予期せぬバグも起こります。リファクタやコードにこだわるなと言っているのではなく、それによってエンドユーザーに届くのが遅れるというのが問題なわけです。

リリースすれば自分では見つけられなかったバグも報告されてきたりします。また、リファクタ期間をリリース後にすることでリリースが前倒しになるしリファクタしながらバグ修正もまとめて行えるので全体で見た工数は減ります。

DX目的のWEB

お金を稼ぐ以外にもお金を稼ぎやすいようにするためのWEBがあります。

最近話題のDXですね。

DXにも大なり小なり規模があります。

アプリケーションを管理するための管理画面を作る
書類でやっていた仕事をデジタル化する
やることが決まっている仕事をデジタル化する
取引先と簡易的なやり取りをするためのWEB

これらのWEBの場合エンジニアはお金を稼ぐ人のために存在していることになります。
最終的にはお金を稼ぐためのWEBにはなりますがWEBを作るときに考えることが違います。

DXするにあたって必要な要件

DX目的のWEBは存在するだけで工数を削減できるため、機能として要件を満たせないバグでなければバグ修正は後回しにすることが大事です。また、デザインやUXについてもお金を稼ぐためのWEBよりかは優先度は低くなります。最悪デザインなしでHTMLそのままでもいいくらいです。ここでエンジニアとしてある程度出来上がったものをリリースしたいというのはエンジニアのエゴだと思います。

エンジニアが直接DBをいじっていた箇所を管理画面化したり、営業がデータを直接集計できるようにしたりといったDXが目的だとします。その場合WEBが存在することそのものに価値があります。もしバグがあって使えなくなったとしても従来どおりの手順をたどればいいだけでマイナスにはなりえません。

自分の役割を意識しよう

エンジニアとして成長したいのであれば自分の持っている知識を使って他人にどうやっていい影響を与えるかまで考える必要があります。今置かれている環境で自分は何のためにエンジニアをしているか常に意識してみましょう。

javaScriptのフレームワーク

JavaScriptにはたくさんのフレームワークが存在します。
有名なところで行くと

node.js
jQuery
React
Vue
TypeScript
Phaser3

などがあります。

これらはそれぞれ適材適所がありメリットデメリットがありますが今回は説明を省きます。

近年増えてきたSPA(シングルページアプリケーション)

WEBのフロントエンドエンジニアをやっているとReactやVueなどのフレームワークを聞いたことがあると思います。これらはSPAのWEBサイトを作るうえでは必須のフレームワークになります。しかし、内容が難しく挑戦してみたもののあきらめてしまう人は少なくないです。

一方で、近年乱立しているプログラミングスクールではJSのフレームワークとしてjQuery、バックエンドとしてPHPを教えていると思います。これはなぜかというと世の中のWEBエンジニアに求められている仕事内容にかかわってきます。

WEBエンジニアの世の中の需要

現実をいうとスクール出身で経歴を偽らずに正直に仕事をとってこようとした場合ほぼWordPressやホームページ制作、LPの作成といった内容になります。ただ、これが悪いわけではないです。世の中の需要はReactやVueといった高度な技術を必要とする仕事ではなく簡単に作れるWEBサイトのほうが多いと過去にどこかの記事で見たことがあります。ですのでスクールが割と簡単な技術だけを教えているのは理にかなっています。

とはいえ、自社開発の会社でWEBエンジニアをしたかったりベンチャーで働いてみたかったら今はReactやVueといった知識は必要になるので勉強できるのであればしておくことをお勧めします。

UI/UX

エンドユーザーに繋ぎ込む以上UI/UXなしにはWEBフロントエンドエンジニアとは言えません。
そんなのはPMやデザイナーに任せるべきだと思う人がいるかもしれませんが、それぞれの役職にはそれぞれのUI/UXの考え方があると思っていますのでエンジニアとしてのUI/UXを持つべきです。

エンジニアとしてのUI/UX

エンジニア側から提案できるUI/UXとは

技術力によるWEBの表示スピード
コンポーネントの使いまわし易さからくるデザインの変更
アニメーション

などがあげられます。

WEBの表示スピード

JavaScriptのフレームワークでも紹介したSPAといった技術が関わってきます。
SPAにすることで初期表示に少し時間はかかるもの、ページ内遷移に関しては圧倒的なスピードを誇ります。また、近年はデータを取得する前にローディングではなくスケルトンというものを表示する傾向にあります。
UIデザインを改善！スケルトンスクリーンでローディング画面のストレス軽減

こういったUIやUXの改善の仕方があるだけで選定する技術も変わるしコーディング方法も変わってきます。

WEBフロントエンジニアの役割を意識する

WEBサイトを誰のために作っているかというともちろんエンドユーザーのためです。そこでエンドユーザーにより体験をしてもらうのがUXでより見やすくするのがUIです。すなわち、たとえフロントエンドエンジニアだとしてもUI/UXを軽く見ず、プログラミングの技術向上と同時にレベルを上げていくことがより市場価値の高いWEBフロントエンドエンジニアになることに大切だと考えます。

まとめ

いろいろと思想を紹介してきましたが総じて言えるのは技術は大切だがそれよりも自分の仕事のしている意味を考えることだと思います。私自身まだまだ知らないことや意識しないといけないことがたくさんあります。現状に満足せずにより高みを目指していきましょう！！