フロントエンドエンジニアとは？HTMLコーダーとの違いや役割

ここ数年でフロントエンドエンジニアという言葉を聞くことが多くなったと感じますが、フロントエンドエンジニアの定義は会社によって異なるものです。 ただ多くの場合、「JavaScriptやHTML5/CSS3、PHPといったプログラム言語など、高度なWeb制作スキルを持った人」を指しており、それらのスキルを活かしてWebサイトを構築する仕事内容がほとんどです。（アプリ制作会社の場合アプリ開発のフロントエンド部分を担当するエンジニアを指すこともあります。） 当コラムではフロントエンドエンジニアとは「Web制作においてHTML/CSSはもとより、それに関連するJavaScriptや各種API、WebGLやキャンバスなどWebサイトを表示するうえで必要となるさまざまな技術・知識を持ち、それらを取捨選択できる人」と定義します。 そのうえで、フロントエンドエンジニアとしてWeb制作の現場で働く際に必要となる、または知っておきたい知識を紹介していきます。 数多くのWeb制作を経験した著者が、実際のWeb制作で必要だった技術、これは知っておくべきだと感じた知識など、あくまでも現場感覚を大事にした事項を紹介していきます。

技術の発展とフロントエンドエンジニアが生まれた背景

フロントエンドエンジニアという職種が生まれたのには、Web制作に関わる新たな技術が次々に登場したことと、HTMLコーダーの業務範囲が深く関わります。 下記で紹介している図は、HTMLコーダーが行う業務の変貌です。これを見ると、HTMLコーダーという職種が対応しなければいけない業務が格段に多くなっているのがわかるかと思います。HTMLコーダーが行う業務拡大イメージを見る従来のHTMLコーダーは(1)～(2)が作業範囲でした。 (3)からはプログラムの知識も必要なCMSも登場。以降(4)～(8)もこれまでの延長でHTMLコーダーが担当するケースもありました。しかし、これはいわゆる「オペレーター」としてのHTMLコーダーの作業範囲から外れてしまいます。 このまま「HTMLコーダー」という名称だと、すべてのHTMLコーダーが先にあげたような業務をできるものと誤解が生じてしまうため、明確な切り分けが必要になったのです。 では、すべてWebプログラマーの作業範囲にできないのかという話が出てきますが、(4)～(8)はHTML/CSSと密接な関係性があり、深くブラウザの知識も持っていなければいけません。この点において、WebプログラマーはHTMLコーダーほどの知識はなく最適ではありません。 そこで、生まれたのがフロントエンドエンジニアです。 今までのHTMLコーダーの業務も範囲に入れながら、CMS構築、JavaScriptを使った制作もできる高度な技術を持った人を「フロントエンドエンジニア」と位置づけることで、HTMLコーダーとの明確な線引きを行い、現場での混乱を回避できるようになりました。 ここで「明確な線引き」と書きましたが、次からは具体的な例を元に、HTMLコーダーとの違いを紹介していきます。

「HTMLコーダー」と「フロントエンドエンジニア」の違い

一般的に言うHTMLコーダーは、デザイナーが仕上げた「絵」をインターネット（Webブラウザ）上で表現するために、HTMLとCSSで「再現する」人のことを指し、いわゆるオペレーターのような位置づけとなります。 それに対しフロントエンドエンジニアは、サイトを制作するうえで最適な技術・構造は何かを考え、ときにはデザイナーやディレクターの相談役となり、「やりたいことを実現する」ための技術的なフォローや制作を行います。 特に近年のWeb制作環境は大きく変わってきており、HTML/CSSだけで作られた動きのないサイトから、CMSを使った管理の手軽さ、JavaScriptを使ってよりユーザーの目を引きつけるインターフェイスなどがトレンドとなっています。 これらの変化は、ユーザーに楽しさや利便性をもたらし、クライアントにとっては「こんな表現・動きはできないか？」という選択肢を多く与えています。 しかし、逆の意味で言えば、できることが増えた分、何が最適で、どの手法を採用すればよいかの判断がしにくくなったとも言えます。 これは制作者にとっても同じことが言え、クライアントの要求に対し、どの技術・表現方法が最適かを選択しなければいけません。また、要求に応えるだけでなく、自ら最適な方法を提案しなければいけない場合もあります。 つまりこれまでのように、デザインをWeb上で再現するコーディングスキルだけでは対応できない案件が増えているということです。 そして、それをフォローするために生まれてきたのが、フロントエンドエンジニアという職種なのです。

コーディングスキル以外で必要なもの

フロントエンドエンジニアには、従来のHTMLコーダーの持つコーディングスキル以外にも、さまざまな知識が求められることは理解いただけたと思います。 特に、HTML5・CSS・CMS・JavaSciptに関する知識は、昨今のWeb制作においては必須とも言えるものです。それらのなかで、フロントエンドエンジニアとして特に理解しておくべきポイントを簡単にまとめてみました。

HTML5の場合

HTML5で注目するポイントは、タグではなくAPIです。もちろんタグも重要ですが、これは今までのHTMLの延長線のため、HTMLコーダーでもすぐに覚えられると思います。 フロントエンドエンジニアとしては、HTML5 APIを覚え、今までできなかったことの実現や、HTML5を使うことで今までよりよいものにするような対応が望まれます。 代表的な例をあげるなら、HTML5 APIを使うことでローカルファイルへのアクセスができたり、ドラッグ＆ドロップがネイティブに実装できたりすることがあげられます。 このように、従来のHTMLでは難しい（できない）ことも、HTML5 APIによって容易に実現できるようになります。フロントエンドエンジニアとしては、そのことを理解し、取り入れ、提案できるようになることが求められます。

CSSの場合

CSSにおいては、HTMLコーダーとフロントエンドエンジニアの技術的な垣根はありません。しかし、JavaScriptでHTML要素を動かしたり、表示・非表示にしたりする操作の場合、CSSでカバーする範囲とJavaScriptでカバーする範囲を判断し設計しなくてはいけません。 また、CSS3をサポートしたブラウザのシェアも広がっているため、どのCSS3プロパティがどのブラウザでサポートされているのか、ベンダープレフィックスは必要かなどを判断するための知識が必要です。 続きはこちらからご覧いただけます。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓http://html-coding.co.jp/knowhow/about_coder/front-end-engineer/