1分でわかるフロントエンジニア
どうしよう！フロントエンドエンジニアを採用してほしいって言われたんだけど、Webデザイナーと何が違うの？
Webデザイナーは、デザインをする人だからWebデザイナーとは違うかな。Webデザイナーがデザインしてくれたものを元にユーザーが見る部分（画面）を作る人だよ。
Webサイトの画面を作っている人っていうイメージ？
そうだね。主にHTML、CSS、JavaScriptの言語を使って仕事することが多いかな。
フロントエンドエンジニアがよく使用する言語は3つもあるんだね。
うん。業務内容だけど、企業によっては、デザインもフロントエンドエンジニアの範囲になるから、どこまでを求めているかは聞いておいた方がいいよ！
私の会社は、デザイナーの募集はしていないからもしかしたら一緒なのかもしれない！
最近は、フロントエンドエンジニアの募集でもいろいろ求められるから、要注意だよ。あとは、モバイル対応もできるかどうかだね。
スマホってこと？
うん。最近ではPCよりスマホからアクセスする人が増えてきてるからね。PCとは違った設計やスキルが必要になってくるから、そのスキルも必要なのかかな。
確かモバイルもって言ってた気がするけど、もう1回聞いてくる！ありがと！
フロントエンジニアとは？採用のための予備知識
フロントエンドエンジニアの役割
フロントエンドエンジニアは、ユーザーとの接点（ユーザーが見る・触れる）部分を開発します。見た目をよくするだけではなく、デザイナーが作ったデザインを元にページの作成、SEO対策（検索エンジンで上位表示される対策）、ユーザーが操作しやすいような画面設計もします。
企業によってはフロントエンドエンジニアに任せる範囲が異なり、デザインから担当する場合もあります。
使用する言語はHTML、CSS、JavaScript（言語の詳細は、別の記事で解説します。）がメインです。
フロントエンドエンジニアとはどんな人か
目に見えるものを作るのとデザイナーではないもののデザインセンスも必要になってくるため（デザインもそうですが、ユーザーが操作しやすいように設計するため）、もくもくとコードを書くだけではなくクリエイティブ性がもとめられます。
成果が目に見てわかるものなので、フロントエンドエンジニアのマインド的にも、縁の下の力持ちというよりも成果が実感してわかることを好む人が多いです。
フロントエンドエンジニアの採用にあたって知っておいた方がよいポイント
業務範囲
役割の項目でも少し触れましたが、企業によってフロントエンドエンジニアの担う役割が違ってきています。
どこまでが業務範囲なのか、明確に記載した方が候補者にとってもわかりやすく、またスキルマッチも防げます。
使用するフレームワーク（開発するために必要なものを集めた土台）
ゼロから開発するよりもフレームワークを使用した開発が主流になっています。Vue,js、jQuery、React.jsのフレームワークは覚えておくとよいでしょう。
キャリアパス
フロントエンドエンジニアの仕事内容は広がり続けており、また習得すべき技術も次々と登場しています。企業によって任せる範囲が違うと思いますが、どのキャリアパスが描けるのか提示してあげるとよいと思います。
デザインからコーディングまで幅広くできるフロントエンドエンジニアですので、それぞれの職種を極めるのもキャリアパスの1つでもあると思います。
また、Webページ（システム）開発の全てを網羅しているので、Webディレクターやプロデューサーを目指すこともできます。
フロントエンドエンジニアの候補者によく聞かれる質問
使用しているバージョン
フロントエンドエンジニアが使用している言語やフレームワークは、セキュリティなどの観点から定期的にアップデートします。アップデートすると言語のバージョンが変更になります。例えば、最初に作られたHTMLのバージョンがゼロだとすると、今はHTML5（2021年6月現在）が出ているので、最新のバージョンは５となります。このように0から1、そして5のようにバージョンが新しくなっていきます。
使用している言語が幅広いので、それぞれの使用しているバージョンと最新のバージョンは把握しておく方がよいでしょう。使用しているバージョンが古い場合は、その理由やバージョンアップ予定なのかも現場に聞いておく方がよいと思います。
仕事で関わる人
一般的なWebサイト（システム）が開発される工程は、
サイト設計 → デザイン → コーディング → テスト
になります。
サイト設計には、コンセプトやコンテンツの作成・設計を行います。基本的には、Webディレクターの仕事範囲ですが、技術的に最適な判断ができないWebディレクターは、フロントエンドエンジニアにアドバイスをもらいながら、設計をします。
デザインは、もちろんデザイナーの仕事範囲ですが、ここも同じく技術的な判断ができない場合は、フロントエンドエンジニアにアドバイスをもらいながら設計していきます。
やっとコーディングでは、フロントエンドエンジニアの仕事範囲になりますが、バックエンド側とやり取りするWebサイト（システム）は、バックエンドエンジニアと連携しながらコーディングを進めていきます。
こうして、フロントエンドエンジニアは全ての工程に関わっており、また、様々な職種の人と関わりながら仕事をしています。
フロントエンドエンジニア 豆知識
間違いやすい職種
フロントエンドエンジニアは仕事範囲が広いため、よくWebデザイナー、コーダー、マークアップエンジニアなどと混同されることがあります。
コーダーは、デザインを元にHTMLやCSSを使用して、デザインのままコードにおとしていくのがメインです。
マークアップエンジニアは、コーダーにプラスアルファして、SEO対策などのマーケティング戦略も求められます。
フロントエンドエンジニアは、コーダーもマークアップエンジニアの業務内容も網羅しています。また、JavaScriptやPHPなどを使用して、ユーザーにとってより操作しやすい環境を与えることもしています。
フロントエンジニアとは？ よりよい採用のための業界知識
言語の人気ランキング（主要の言語）
HTML
ホームページの文章と構造を記述する言語です。ブラウザはHTMLを解釈してホームページの表示の仕方を決めます。
CSS
ホームページの装飾を一手に引き受けます。ページに表示されるときのサイズや色などを設定できる言語です。
JavaScript
プログラミング言語であり、ユーザー側のWebブラウザと、Webサイトまたはウェブサービスの相互間のやりとりを、円滑にするために使われています。
ネットでモノを購入する際に住所など入力するフォームが表示されると思います。その部分は、JavaScriptが使用されています。
人気フレームワーク
React.js
2013年にFacebookによって開発されたフレームワークです。JavaScriptのフレームワークになります。
Angular
2010年にGoogleに導入されたフレームワークです。導入後、定期的なアップデートがあり、様々な機能が使用できるようになりました。
Vue.js
元Googleの社員によって開発されたフレームワークです。JavaScriptのフレームワークになります。
フロントエンドエンジニアに必要な知識
言語のスキルだけでなく、Webに関する知識が、フロントエンドエンジニアには必要になってきます。面接で聞いておくとよいポイントだと思うので、チェックしておいてください。
UI,UX
UI（ユーザーインターフェース）は、ユーザーが目で見える情報を言います。Webページであれば、ページそのものがUIになります。UX（ユーザーエクスペリエンス）は、ユーザーの体験を意味しています。ユーザーがWebページを訪れた時にどう感じるかを示すものです。
ユーザーにとって見やすい・使いやすいページを作るために必要な知識になります。
CMS
CMS（コンテンツ マネジメント システム）は、Webページの管理ツールのようなものです。
例えば、ブログページを作成した際に、CMSを使って簡単にブログの追加や更新をすることができるWebの運用ツールといえるものです。
WordPressが一般的なCMSです。仕事でCMSを使用することがある場合は、どのCMSの経験があるか聞いておくとよいでしょう。
SEO
SEO（サーチ エンジン オプティマイゼーション）とは検索エンジン最適化を意味しています。SEO対策をすることによって、YahooやGoogleなどの検索結果で該当のWebページがより表示されるようになります。ユーザーに見つけやすいWebページを作ることによって、様々なユーザーと接点をもつことができます。
