フロントエンドエンジニアって実際何やってるか、ふわっとしてない？
企業やプロジェクト単位でフロントエンドエンジニアの細かな定義が変わってきますからね。これがフロントエンドエンジニアだ！とは断定できない部分もありますよね。
フロントエンドエンジニアの概要
一般的にはフロントエンドエンジニアとは、WebアプリケーションやWebサイトのフロント（インターフェース）を設計・構築、または保守するエンジニアの総称です。バックエンドエンジニアとの対義語として、フロントエンドという言葉でポジションを表しています。
そもそもフロントエンドというのは、アプリケーションやサイトを利用するユーザーから見て、手前（フロントエンド）部分のUI（ユーザーインターフェース）を指します。
たとえば、ブラウザであれば視覚的に印象に残る体験（UX・ユーザーエクスペリエンス）をアニメーションなどに動きを付けて、ただ単にユーザーに情報を得させるのではなく、経験として楽しみながら商品やプロダクトを認知してもらう仕組みを構築します。
実はこのUXは、意識してネットサーフィンをすると非常によく使われています。最もメジャーな動作方法としてはjQueryのプラグインを使った動きのあるページを作成する、といったところでしょう。
もちろん、UI・UXデザイナーというポジションのデザイナーがいることが多いので、自力でどういった挙動がいいか考案するひつようはほとんどありません。ただ、UI・UXデザイナーに技術的に出来ることと出来ないことを説明した上で、実装方法や改良案、代替案を提言することが必要になってきます。
デザイナーやエンジニアとのコミュニケーションは大事っしょ
実際はデザイナーもHTML+CSS+JavaScriptの三点セットは必需品だと思ってます。話が非常に早くなりますから。まぁそれをまとめるのがディレクターなんですけどね。
コーダーとの絶対的な違い
現状コーダーを名乗っている方は、是非フロントエンドエンジニアを目指してください。
ぶっちゃけ業務内容は重なっている部分が多く、そんなに勉強しなくてもフロントエンドエンジニアにはなれると考えています。HTML+CSS+αのコーディングが出来ているのであれば、あとはJavaScriptとjQuery、React、React Native、Flutter等をかじっておきましょう。
コーダーとフロントエンドエンジニアの決定的な違いは「サーバーやシステムとの連携を頭にきちんと描けているか」という点が１つではないでしょうか。
コーダーは上がってきたデザインをHTMLで形にする立派な仕事です。
しかし、フロントエンドエンジニアはその一歩も二歩も先を読んでコーディングやJavaScriptの実装を行います。フロントエンドエンジニアに必要なスキルでも紹介しますが、実はサーバーの知識も切って離せない世界なのです。
まとめると、コーダーはデザインまでを見て仕事をし、フロントエンドエンジニアはデザインがどのようにシステムに絡むかを必ず察しながらコーディング・プログラミングをすることに決定的な差が生じるのです。
フロントエンドエンジニアに必要なスキル
エンジニアってきつそうなイメージしかないんだよね。毎日毎日勉強しないと付いていけなそう。
フロントエンドエンジニアは純粋なエンジニアとはちょっと違いますかね。そこまで勉強量も多くなくていいので比較的なりやすいし、残業も少なめな職場の方が多いですよ。
フロントエンドエンジニアに必要なスキルは下記の11個に分けられます。
- HTML+CSS+JavaScriptの知識
- Reactなどのフレームワークの知識
- jQueryなどのライブラリの知識
- 【あれば尚可】PHP、JSPなどのサーバーサイド言語の知識
- 【あれば尚可】MySQLなどのデータベース（DB）の知識
- 各種APIの実装スキル
- 【あれば尚可】オブジェクト指向のプログラミングスキル
- 顧客折衝スキル、チームメンバーとのコミュニケーションスキル
- 文章読解能力とアプトプット能力
- きちんとした睡眠が取れる能力
- 英語読解能力
各項目についてさらっと紹介してみましょう。
HTML+CSS+JavaScriptの知識
これは必要最低限のスキルですね。この3点が使えないと話になりません。
JavaScriptに関しては、Object、ループ、prototype、継承……あたりが分かれば何とかなります。自身が無い方はもういちどMDNのドキュメントを見返してみましょう。Objectとループについてはこのサイトでもまとめたので良かったら参考にしてみてください。
Reactなどのフレームワークの知識
意外と多い誤解の1つにフロントエンドエンジニアがWebサイトに特化したフロント技術を専門にしているという勘違いです。
フロントエンドエンジニアはReact Nativeなどのクロスプラットフォームアプリケーションの開発でも必要とされ、アプリのUIの実装も仕事の範疇だということです。
フロントエンドエンジニアは何もサイトに限ったエンジニアではなく、ネイティブアプリケーション（スマホアプリなど）のUIにも携わることがあります。中でもReact NativeはJavaScriptやTypeScriptを用いて、画面上に表示するアイコンやボタン、画像、アニメーションさえも実装します。
WebサイトのフレームワークであるReactでもReact Nativeと似通ったプログラミングが必要になりますので、JavaScriptのフレームワークは最低限押さえておいた方が良いかと考えています。
jQueryなどのライブラリの知識
これも必要最低限の知識ですね。おなじみのjQueryです。
現在では、脱jQueryなんてムーブもあるようですが、まだまだ需要が高く、ほとんどのサイトで利用されているのが分かります。jQueryのメソッドを全部覚える必要は全くありませんが、よく使うものは覚えてしまって、あとは「こんなことが出来るんだな」ということを知っておくと業務がスムーズに運びます。
出来ることを知っておいて、必要になった時にGoogle検索などで情報を得られればそれでOKです。
【あれば尚可】PHP、JSPなどのサーバーサイド言語の知識
なくてもいいです。なくてもいいですが、知っているのと無知なのとでは、周りの評価や眼差しが180度違います。
フロントを実装しつつ、「ここでSubmitするデータの要素たちはサーバー側でどう処理されるのか」を気に掛けることは非常に重要で、このシステムフローを把握しておくことは、後々プロジェクトの責任者を任せられる可能性が高くなり、出世や給与面での厚遇が望めます。
「フロントエンド」＝「フロント末端」の存在でしかないことを覆す絶好の機会です。
自身の収入を上げたい場合には、プロジェクトを俯瞰する目を是非養ってください。
【あれば尚可】MySQLなどのデータベース（DB）の知識
これもサーバーの知識と同じなので割愛しますが、フロントエンドからユーザーが入力したデータがどこに行ってどのように利用されるのかを把握しておきましょう。何事も収入アップのためです。ふふふ。
各種APIの実装スキル
APIの扱いも必須の部類に入ります。
最も簡単な例では、InstagramのAPIを使って簡易ギャラリーを作りたい場合にはInstagram Basic Display APIが必要ですし、もう少し複雑な表示をしたい場合にはInstagram Graph APIを使いこなせないといけませんね。
2022年版のInstagram APIについては下記にまとめたので是非ご一読ください。（結構メンドいです）
ただ、これはWebサイトについての必要技術です。近年話題になっているヘッドレスCMSに関してもAPIに関するスキルが必須になります。ヘッドレスCMSについても別途記事にまとめてありますので、初耳な方は併せてご覧ください。
【あれば尚可】オブジェクト指向のプログラミングスキル
プロジェクトはほとんどの場合チーム単位で分業することが多いです。また、開発後の運用やメンテナンスを自分とは違う別の人が行うこともあります。
誰でも修正が簡単に出来るようにプログラムの作法を最低限守ってプログラミングをする必要があります。
その作法の1つが「オブジェクト指向」のプログラミングになります。
オブジェクト指向という言葉は知っているけど、具体的なイメージが沸かない方は、今一度ご自身で調べてコーディングに反映できるように備えておいてください。「誰でも直せるコードを書く」ことを必ず心に留めてプログラミングをしなくてはなりません。
もし、自分のコードが大丈夫か不安な場合は、周りのチームメンバーにソースレビューを実施してもらうのも手です。
顧客折衝スキル、チームメンバーとのコミュニケーションスキル
言わずもがな。コミュニケーションスキルです。
各所でよく大事だ！と声高に言われますが、実際のところコミュニケーション能力の定義があやふやで何をもってコミュニケーションが上手かどうかを判定すればよいのか言語化しにくいのも現状ですね。
非常にシンプルに考えれば、相手の考えていることを、考えそのまま汲み取って、相手の望む回答や返答を気持ちよく投げかけて上げられればそれでいい気がします。
よく「報連相」が出来ないとか、「報連相」がなってないとか言われることもありますが、そんなの相手の匙加減の問題だと個人的に感じています。「絶対報告しなくてはならないこと」は大体は「やべっ」ってなった時に分かりますし、それを報告する、でいい気がします。
「報連相」で悩んでいるかたは、そんなことで悩むよりもプログラムの勉強を進めた方がはるかに有意義です。（個人の感想です）
文章読解能力とアプトプット能力
結構重要。文章を読んで理解するのって意外と大変で、専門用語なんて特に理解不可能に陥ることありませんかね。
読解能力を高めるには、「日記」が一番有効だと考えています。「日記」といってもノートに書き貯めておくものでもまぁ良いのですが、出来ればブログやTwitterなんかでも良いので、他の人に「今日ここを理解した。ここが理解できなかった」と説明出来るようにしておくと、スキルが格段に上がります。
ブログなどのアプトプットを続けることで、アウトプット自体の精度も上がり、分からなかったことへの理解が数倍早くなります。だまされたと思ってやってみてください。
きちんとした睡眠が取れる能力
これ重要。ちゃんと寝ましょう。是非夜更かしはしないようにしてください。
頭が回らなくなります。たまに、寝るときもプログラムのことを考えちゃう人がいますが、寝てください。何でもそうですが、一旦離れるとさらに良い考え方が出来たりします。気分転換ってやつですね。
寝ないとほんとに不眠症になったり、昼夜逆転したりでいいことゼロです。
実際、筆者も不眠症を体験しましたが、全くの全くの全く仕事が出来なくなります。これはフロントエンドエンジニアだけではなく、すべてのエンジニアに言いたいと思います。寝てください。
英語読解能力
英語は出来た方が良いです。喋れないにしても読み書きは出来るようにしておくとベストです。
海外のドキュメントを読む時に重宝しますし、何よりプログラムは言語です。英語です。英語と数学を混ぜたようなものがプログラミングだと思っています。
今まで英語分からない、という人に何人も会いましたが、皆プログラミングが出来ません。文法が分からないのです……逆に帰国子女と仕事したことがありました。彼は3カ月くらいでPythonをほとんど自力で書いて動かせるようになりました。ほんと驚きました。
英語は侮るなかれ。ググった時にドキュメントを日本語翻訳に変換せず、英語原文で読むクセを付けてみることから始めてみてください。
フロントエンドエンジニアにおすすめの資格
フロントエンドエンジニアに限らず、「基本情報技術者試験」は持っておきたいですね。
履歴書に国家資格として明記できますし、拍が付くのでおすすめです。「応用情報技術者試験」もありますが、少し難易度が高いのでまずは「基本情報技術者試験」から取っておいて損はありません。
実際、筆者も持っていますが、コンピューターに携わる人間は一度勉強しておいた方が良いです。筆者の中では「普通自動車免許」を抜いて「基本情報技術者試験」が取ってて良かった資格ベスト１です。
他にも「CIW JavaScript Specialist（英語）」などもありますが、こちらは英語だけなので英語に自信がある方は取っておいて損はないでしょう。でもまず「基本情報技術者試験」をおすすめします。
フロントエンドエンジニアの年収の相場は？
「求人ボックス 給与ナビ」によると、フロントエンドエンジニアの平均年収は572万円ということです。派遣契約時の平均時給は2,091円と、割と高額な収入が得られます。アルバイトの平均時給は1,201円なので、フロントエンドエンジニアとして働く場合は正社員か派遣契約、もしくは業務委託契約が有効です。
アルバイトでの就業はなるべく避けるようにしましょう。
| 正社員 | 派遣 | アルバイト |
| 572万円 / 年 | 2,091円 / 時 | 1,201円 / 時 |
派遣だと年間いくらが相場になるのでしょうか。
2,091 × 8時間 × 21日 × 12ヶ月、これを計算すると421万円程度の年間収入になりますね。これを考慮するとフロントエンドエンジニアとして働くのは正社員が一番稼げるのかもしれません。
ただし、フロントエンドエンジニアはフリーランスとしても比較的ハードルが低く活躍することが出来るため、一概に正社員がベストということでもありません。
実際、派遣契約とフリーランスを併用することでベースの給与を確保しつつ、正社員以上の年収になることが可能です。好きな働き方に合わせられて正社員以上の給料が得られるなら、個人的にはフリーランス兼派遣・業務委託をおすすめします。
まとめ
実際に働いていて感じたフロントエンドエンジニアについてまとめてみました。リモートワークも出来てコーダーより給料が高いので、この仕事に満足しています。たまにバックエンドの仕事も請けますが、フロントエンドは致命的なシステムエラーを引き起こすことがないので、まだ気楽に出来るかと思います。基本的にJavaScriptを用いるのでそこまでハードルの高い職業でもないので、これからIT業界に入りたい方や、新卒で将来どうなりたいか決まっていない方は選択肢の1つとして是非かんがえてみてくださいね。では、また！
