UIを実装するフロントエンジニアに必要なスキル：目次

• フロントエンジニアという言葉が出て来た背景
• フロントエンジニアの仕事
• フロントエンジニアに必要なスキル

フロントエンジニアという言葉が出て来た背景

フロントエンジニアという職種は、一昔前はひとくくりにコーダーと呼ばれていました。コーダーはデザイナーが作ったデザインをHTMLやCSS、そしてjavascriptを使い忠実的、かつ汎用的に組み立てていくのが仕事でした。

最近になってフロントエンジニアという言葉が出て来たのは、スマートフォンの出現とフェイスブックやアマゾンなど巨大なWEBサービス会社をはじめとした、世界のエンジニアたちがAPIやライブラリの情報をオープンにしはじめたことが理由のひとつです。この動きは2006年のWEB2.0の流れから少しずつ始まりました。

フロントエンジニアの仕事

フロントエンジニアが使う主なスキルはHTMLとCSS、そしてjavascriptです。会社によってはサーバーサイドのNode.jsやPHP、そしてSQLなど深いレイヤー部分（よりサーバーに近い場面での仕事）も求められることがあります。

目的に沿ったUI（ユーザーインターフェイス）を考え設計する

ディレクター・デザイナーと目的を共有して、どのようなUI（ユーザーインターフェイス）を実装したらいいか考え、実現の為の手法を摸索します。例えばスマートフォンのような小さな画面により多くの情報を見るには、どのような機能や動作が効果的か？を考えます。

デザインを忠実かつ汎用的に再現する

デザイナーが作ったページデザインを忠実かつ汎用的に再現します。制作に普段携わらない方にも、「忠実に再現」はイメージしやすいと思いますが、「汎用的に再現」がイメージしにくいかと思います。

汎用的に再現とは、例えば数千ページ、数万ページあるホームページを、思い思いに各人がコーディングしていくとたちまち破綻してしまいます。コードをきちんとパーツ（モジュール）化するように設計し、ディレクター、デザイナーと共有することもフロントエンジニアの非常に重要な仕事です。

DB（データベース）から情報を受け取る（渡す）

WEBサービスの中にはAPIという仕組みを使い、自社の情報やスキルを外部に開放していることがあります。このAPIサービスを利用して、開発効率を上げたり、自社では収集し得ない情報を受け取りページに反映させることで、ユーザーにとってホームページの価値を一気に向上させることができます。

また、自社のDBからデータを受け取り表示させたり、ユーザーから情報を受け取りサーバーへ渡したりすることもします。

検索エンジンを考慮したHTMLを記述する

検索エンジンには大きく分けて内部施策と外部施策があります。このうちの内部施策、つまりのGoogleなどの検索エンジンと相性がいいHTMLの記述方法を理解していることも求められます。

フロントエンジニアに求められる主な仕事は以上の４点ですが、広範囲に及ぶ専門スキルが必要なため、人により得意分野が違います。

フロントエンジニアに必要なスキル

フロントエンジニアが最低限押さえておきたいスキルはHTMLとCSS、javascriptです。

HTMLについて

フロントエンジニアが扱うスキルのひとつ「HTMLとHTML5」ホームページリニューアルの際によく聞く言葉かと思います。違いは何？と疑問に思われる方もいるかもしれませんが、HTMLとHTML5は実は同じものを指します。HTML4系がバージョンアップしたものがHTML5です。HTML4の時は一般的にHTMLと呼んでいました。

CSSについて

CSSとCSS3、ホームページリニューアルの際によく聞く言葉かと思います。違いは何？と疑問に思われる方もいるかもしれませんがこちらもまた同じものを指します。CSS2系がバージョンアップしたものがCSS3です。CSS2の時は一般的にCSSと呼んでいました。

javascript

UI（ユーザーインターフェイス）に動きをつけるのがjavascriptの役割です。また、DB(データベース)から情報を受け取る、渡す処理もjavascriptを使って実現します。

javascriptには便利なライブラリ（プログラムの素材集）がいくつかあります。中でも有名なのがjqueryです。

※本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。