フロントエンドエンジニアとは、Web制作の現場でどのような役割を担っているのでしょうか。混同されがちなマークアップエンジニアとの違いは？
この記事では、フロントエンドエンジニアの仕事内容や必要な言語・ツールなどを紹介していきます。
- フロントエンドエンジニアとは？
- コーダー／マークアップエンジニア／フロントエンドエンジニアの違い
- フロントエンドエンジニアの年収
- 必須の3言語
- 開発ツール
- 開発以外で求められる知識
- フロントエンドエンジニアに向いている人
フロントエンドエンジニアとは？
フロントエンドエンジニアは幅広い技術・知識を持つサイト制作のエキスパートです。
サイトでやりたいことを実現するための最適な技術やサイト構造を考え、時には技術的な面からデザイナーやディレクターをフォローしながら制作を行います。
ブラウザでWebサイトを見たり操作したりと、ユーザーが直接触れる部分をフロントエンドといいます。
フロントエンドに対してバックエンドという部分があります。バックエンドは、ユーザーからは見えない、裏で動いているシステム部分を指します。
フロントエンドエンジニアについて知るには、コーダーやマークアップエンジニアとの違いを知る必要があります。まずはその違いを説明していきます。
コーダー／マークアップエンジニア／フロントエンドエンジニアの違い
フロントエンドエンジニアという職種が生まれるまで、HTMLやCSSでサイトを構築する職業はコーダーもしくはマークアップエンジニアと呼ばれていました。
これらの職業に明確な定義はありませんが、それぞれ少しニュアンスが異なります。
コーダー
HTMLやCSSといったプログラミング言語でコーディングを行い、デザイナーの作成したイメージ画像やデザイン案をWeb上で再現します。
マークアップエンジニア
コーダーの上位職種に位置づけられます。
単にHTMLやCSSを組むのではなく、適切な構造化、SEO、リッチなコンテンツの作成など、よりコーディングのスキルが高い職業です。
フロントエンドエンジニア
マークアップエンジニアのさらに上位職種になります。
コーディングに加え、APIを利用したWebサービスの構築やCMSでのサイト制作や機能拡張など、業務は多岐に渡ります。Webサイトだけでなくアプリケーションの開発を行ったり、大規模プロジェクト現場で業務の効率化・高速化を図る役割を担ったりすることもあります。
フロントエンドエンジニアの年収
クリーク･アンド・リバー社で取り扱っているフロントエンドエンジニア求人の年収帯は350～700万円程度です。
さらにハイクラスな求人だと年収1000万円を超えることもあり、経験とスキルによって年収の大きく変わる職種です。企画・設計など上流工程に関するスキルがあったり、マネジメント職に就いたりすると年収が高くなりやすいです。
必須の3言語
フロントエンドエンジニアが主に使用する言語は以下の3つです。
- HTML
- CSS
- JavaScript
順番に紹介していきます。
HTML
Webサイトの土台となるマークアップ言語です。
単にWebサイトを表示させるだけでなく、ソースコードの保守性やSEOの知識が求められます。
CSS
Webサイトを装飾するための言語です。
現在多くのサイトで使用されているCSS3は、複雑なアニメーションまで表現できます。
昨今のWebサイトはレイアウトやアニメーションなどが複雑化し、CSSのソースコードが膨大かつ難解になってしまう場合が増えています。
大規模なサイトでは、CSSをより簡素化して見通しの良いソースコードにする必要があります。
この問題を解決するのが、CSSプリプロセッサです。
現在多く利用されているCSSプリプロセッサがSassです。SassはSCSSというCSSに似た書き方ができ、導入しやすいのが特徴です。CSSにない機能として変数の利用、入れ子、コードの使い回しなどができ、とても便利です。
SassなどのCSSプリプロセッサは、後述する「タスクランナー」というツールを使って、CSSに変換（コンパイル）されます。
JavaScript
フロントエンド開発にはJavaScriptが必須になります。
従来のJavaScriptはHTMLを動的に書きかえたり、アニメーションやスライドショーを作ったりするために利用されてきました。
最近ではJavaScriptの利用範囲が広がっています。ブラウザ上で動くだけでなく、サーバーサイドで動くNode.jsというJavaScript環境もあります。
Webサイト以外でも、アプリケーション開発にJavaScriptが利用されることもあります。
JavaScriptのサンプルコードはこちら！
また、最近の開発現場では、JavaScriptだけをそのまま使うことは少なくなりました。関数などの機能をまとめたライブラリや、枠組みを提供するフレームワークを利用する場合がほとんどです。
以下、特によく利用されているJavaScriptのライブラリとフレームワークをいくつか紹介します。
jQuery
JavaScriptのライブラリで、アニメーションの実装やHTMLへのアクセス（DOM操作）が容易な点から、多数のWebサイトで利用されてきました。多くのJavaScript入門者が、まず初めに使用するライブラリですね。
しかし、機能がどんどん追加された結果、JavaScriptのみを使うよりも動作が非常に遅くなっています。そのため、現在では脱jQueryの動きが進んでいます。
このグラフは「jQuery」の検索ピーク時を100として、各ワードの相対的な検索ボリュームの推移を表しています。
jQueryの検索ボリュームは年々下がり、後述するReactとAngularの比率が高まっています。
React.js
Facebookが開発しているJavaScriptのライブラリです。HTMLへのアクセス（DOM操作）に特化しており、HTMLのような記述ができます。
VirtualDOMという機構を持ち、変更があった部分の差分だけを更新することができます。
現在、最も注目されているライブラリの一つで、多くのアプリケーション開発現場で利用されています。
AngularJS
Googleが開発しているフレームワークです。アプリケーションを作るのに必要な機能を網羅しています。
HTMLに直接処理を埋め込むことができます。
設計や実装の枠組みが提供されることでコードが短くなり、効率的な開発が行えるようになります。
基本的に使用する言語はHTML、CSS、JavaScriptがメインですが、現場によってはPHPを使うこともあります。
開発ツール
フロントエンドエンジニアの仕事は、HTMLやCSS、JavaScriptを書くことだけではありません。開発をできる限り効率化するのも、業務の一つです。
開発を効率化するためのツールは数多くありますが、特によく利用されているものを紹介します。
タスクランナー
タスクランナーとは、CSSやJavaScriptに関するタスクを自動化するツールです。タスク自動化ツールとも呼ばれます。
最も多く使われているのが、GulpとGruntです。
複数のCSS・JavaScriptファイルを一つにまとめたり、ファイルを圧縮したり、SassからCSSにコンパイルしたりと、多くのタスクを自動化することができます。
導入と習得の手間はありますが、一度慣れてしまえば業務を大幅に効率化できます。
バージョン管理システムGit
バージョン管理システムとは、ファイルのソースコードの変更履歴を管理する仕組みです。
ファイルのソースコードを変更したが、前の状態に戻したいときに便利です。
最も多くの現場で利用されているのがGitです。
Gitを使うと、複数人のチームでソースコードを編集するプロジェクトでも、変更箇所が衝突したときの対応がしやすくなります。
今ではエンジニアだけでなく、デザイナーやライターなど幅広い職種で利用されています。
開発以外で求められる知識
開発以外でフロントエンドエンジニアがカバーしておいた方がいい内容をピックアップして紹介します。
UI/UXデザイン
UIは「User Interface（ユーザー・インターフェース）」の略称で、テキストや画像、ボタンなどのユーザーが目にする外観のことです。
UXは「User Experience（ユーザー・エクスペリエンス）」の略称で、Webサイトやアプリケーションを通じて得られる体験のことです。
例えば美しいフォントできれいな画像が配置（UI）されていたとしても、ボタンの位置が悪かったり動作が重かったりするとユーザーは使いづらいと感じる（UX）ことがあるかもしれません。
ユーザーがじかに接する画面をリッチ且つ使いやすく仕上げ、より良いユーザー体験を与えるにはフロントエンドの技術も不可欠になります。
マルチデバイス
WebサイトはPCだけでなく、スマートフォンやタブレットなどでも閲覧されます。今や、スマートフォンでの閲覧が大半を占めています。
どのデバイスから閲覧してもきれいなレイアウトで表示させる技術が、フロントエンドエンジニアには求められます。
また、デバイスごとにブラウザの種類がいくつもあり、定期的にバージョンアップされます。
各ブラウザやバージョンごとの違いを知っておかなくてはいけません。
フォント
Web上できれいに文字を表示させるには、フォントの知識が必須となります。
デバイスやOS、ブラウザによってフォントの見え方や使い方が異なるため、その違いを把握しなくてはいけません。
フロントエンドエンジニアに向いている人
フロントエンドエンジニアに向いている人の特徴は変化を好み、常に知識をアップデートできることです。
ブラウザや端末の種類が増えているフロントエンドに求められる技術は変化のスピードが速く、知識やスキルがすぐに古くなってしまいます。
普段から情報収集とインプットに努め、対応力を高めておく必要があるといえるでしょう。
Web技術の発展にともない、フロントエンドの可能性は無限に広がっているといえます。学習コストは決して低くないですが、時代の先端を行く有能なフロントエンドエンジニアは常に求められる人材になれます。
クリーク･アンド･リバー社では、コーダーやマークアップエンジニアからフロントエンドエンジニアとしてステップアップしたい方のご転職をサポートしています。履歴書・職務経歴書・ポートフォリオの添削やアドバイス・模擬面接の実施など、様々なサポートを提供しております。
