今の「フロントエンドエンジニア」に必要なスキル・経験とは？【2021年版】

趣味で作る小規模なWebアプリケーションであれば、一人で全てを作り上げることもあるかもしれません。しかし、業務系アプリケーションからWebサービスまで、開発プロジェクトで構築するようなアプリケーションは、その中身はいくつかの枠組みに分割され、それぞれを担当する開発者がいるのが普通です。
その中でも、ユーザが利用する画面など、アプリケーションの外観に関する「フロントエンド」を担当するのがフロントエンドエンジニアです。
今回は、フロントエンジニアとして活躍していくには、どのようなスキルや知識が必要なのかご紹介します。

【目次】

1. プログラミング言語
2. フレームワーク
3. Webデザイン
4. バックエンドの知識

プログラミング言語

JavaScript

フロントエンジニアとして活躍するために、まず第一に覚えるべきプログラミング言語を挙げるとすれば、ほとんどのエンジニアはJavaScriptを挙げるのではないでしょうか。

Webアプリケーションにおいて、バックエンドで動作するプログラミング言語は、JavaやC#などのコンパイル言語、PHPやPythonなどのインタプリタ言語などがありますが、フロントエンド側で動作する(Webブラウザ上で動作する)プログラミング言語はJavaScriptしかありません。

厳密には、PHPやPythonなどで記述したプログラムをJavaScriptに変換してWebブラウザに解釈させる、というツールもあります。例えば、WordPressなどのCMSで記述したPHP言語は、最終的にJavaScriptに変換されて動作します。

また、JavaScriptを拡張して作られたTypeScriptもフロントエンドで使われるプログラミング言語として有名ですが、こちらもコンパイル後はJavaScriptに変換されて動作します。

しかし、基本的にWebブラウザ上で動作するプログラミング言語はJavaScriptだけである以上、フロントエンドエンジニアとしてやっていくためにはJavaScriptが書けることは必須条件になるでしょう。

フロントエンド側のプログラミング言語としての印象が強いJavaScriptですが、Node.jsを使いバックエンドでJavaScriptを動作させるケースも増えています。

かつては、バックエンドはJavaやPython、フロントエンドはJavaScriptというように、プログラミング言語を使い分けてWebアプリケーションを構築するケースがほとんどでした。

しかし、Node.jsを使うことでバックエンドでもJavaScriptを使うことができるようになったため、フロントエンド使うJavaScriptとあわせ、アプリケーションで使うプログラミング言語を統一することができるようになりました。

JavaScriptがバックエンドでも使えるプログラミング言語になってきているということも、フロントエンドエンジニアが身につけておくべきスキルとして挙げられる理由です。

TypeScript

AltJS(JavaScriptの代替)として注目を集めているプログラミング言語です。JavaScriptを拡張して作られており、コンパイルするとJavaScriptのコードに変換されます。

TypeScriptはJavaScriptと同じ構文やライブラリが使用可能であり、既存のJavaScriptプログラムは全て有効なTypeScriptプログラムとなります。

JavaScript向けフレームワークがTypeScriptで開発されているケースや、元々JavaScript用のフレームワークだったものが、現在はTypeScriptを推奨言語としているケースもあります。

JavaScriptが実行時にデータ型を決める動的型付けであるのに対して、TypeScriptはあらかじめ型を定義する静的型付けとなっています。

JavaScriptは動的型付けであるため、実行するまでエラーの存在に気付きにくく、バグが発生しやすいのに対し、TypeScriptで採用した静的型付けは、コンパイルの段階でデータ型に関するバグの存在に気付けるような仕組みとなっています。

Webブラウザ上で動作するプログラミング言語はJavaScript一択となっておりますが、JavaScriptとほぼ変わらない文法で記述できつつも、バグを発生しにくい型付けを取り入れているTypeScriptは、今後もシェアが広がっていくことが想定されています。

HTML

Webサイト構築の際は、必ず書くことになるであろうマークアップ言語で、静的コンテンツを作成するために使用します。

マイナーチェンジが行われながらも、長らくHTML5が最新版として利用されてきましたが、2021年にはHTML5が廃止され、新たに「HTML Living Standard」が標準規格となりました。

HTML5では、W3C(World Wide Web Consortium)が仕様確定・勧告を行ってきましたが、HTML Living StandardはApple, Mozilla, Operaが設立した「WHATWG」という団体が独自に策定しています。

HTML5とHTML Living Standardでは、現時点では仕様に大きな差異はありません。それでも、

・<A href=””> をクリックした際に、ページ遷移を行いつつ、別のURLにpingを送信するping属性
・<img>の遅延読み込みを行うloading属性

など、日々新たな仕様が追加されています。

しかし、作業草案→勧告候補→勧告案→勧告と、段階を踏んで完成版の仕様を策定していたW3Cと比較して、Web開発者の目線でより現場主義感が強いWHATWGですので、HTML Living Standardを今後どんどんアップデートされていくことが想定されています。

新たな仕様のHTMLは新たな表示方法が可能になりますが、古い仕様のHTMLではレイアウトが崩れたり、新しいWebブラウザではそもそも表示ができない、ということが発生します。

プログラミング言語などと比較すると、やや地味な印象を受けるHTML言語ですが、他の技術同様、最新の情報をキャッチアップするようにしておきたいものです。

CSS

HTMLの標準仕様を策定する団体がW3CからWHATWGに移ったのに対し、CSSは今まで通りW3Cが策定を行っています。

ただし、最新版のCSS3は、一部機能は国際標準として勧告されているものの、全体はまだ勧告されていません。そして、CSS4も草案として出されているものの、こちらもまだ勧告はされていません。

正式に勧告されているのは2011年6月のCSS 2.1です。

全てを勧告されてはいないものの、CSS3については2011年の発表以降、主要なWebブラウザには対応されています。そのため、CSSにおける業界標準はCSS3ということになりそうです。

CSS3では従来のCSSに加え、グラデーション、要素の変形、ボックスレイアウト、ボックス/テキストシャドウ、段組み、アニメーションなどの機能が用意されています。

細かい内容まで把握しておく必要はありませんが、CSSについても最新バージョンでできることは理解しておいた方が良いでしょう。

フレームワーク

フロントエンド側のプログラミング言語はJavaScriptがメインになりますが、今ではJavaScript単体で開発を行うことはほとんどなく、何らかのライブラリやフレームワークを使います。

The State of JavaScript 2020によると、フロントエンドにおけるライブラリ/フレームワークのシェアはReact(利用率80％)、Angular(利用率56％)、Vue.js(利用率49％)がトップ3となっています。
フロントエンドで使われる代表的なライブラリ/フレームワークについて説明していきます。

React

フレームワークと紹介されているケースも良く見かけますが、Reactは厳密にはフレームワークではなくFacebook社が提供しているJavaScriptライブラリです。

アプリケーションの土台が用意されているフレームワークに対して、必要な機能のみをピックアップしてプログラムから呼び出して利用します。Reactの特徴としては、

・仮想DOM(Virtual Document Object Model)により、データが変更された時に適切なコンポーネントだけを効率的に更新してレンダリングすることができる。
・画面の各部分ごとにコンポーネントを分けることでカスタマイズやメンテナンスがしやすい。
・JSX記法により、JavaScript内でHTMLを返却する記述が可能。それによりJavaScriptだけでコンテンツを記述することもできる。
ことが挙げられます。

最近のWebアプリケーションは、SPA(Single Page Application)がトレンドになっています。
ページすべてを毎回読み込む必要がなく、効率的かつ高速で動かすことができるという点がSPAの大きなメリットですが、Reactの仕様がSPAと相性が良い点も、高いシェアを持つ理由のひとつであると言えるでしょう。

Vue.js

基本的に.vueファイル内にHTML、JS、CSSを３つのエリアに分割して記述するため、一般的なWebアプリケーション開発経験者は取り組み易い仕様となっています。

MVC(Model/View/Controller)の派生であるMVVM(Model/View/View Model)パターンを設計基盤として採用しているJavaScriptフレームワークです。

MVVMパターンは、VM(View Model)が、ModelとViewを紐付ける役割を持っており、View Modelで変更されたデータは即座にViewに反映される動作をします。

MVCにおけるコントローラ(Controller)も存在するものの、ユーザからは隠蔽されているため、開発者が意識する必要はありません。

データの値を結びつける仕組みをデータバインディングと呼びますが、ViewとView Modelどちらかで値が書き変われば、値が変化するたびにViewとView Model、両方の値が変更されます。
つまり、双方向のデータバインディングを行うのがVue.jsの特徴のひとつです。

Vue.jsは他のライブラリ/フレームワークと比較するとシェアは低いですが、中国を中心にアジア圏で人気となっています。

Vue.jsはViewまわりの機能に特化しているのが特徴であり、それ以外の機能は自由に任意のライブラリを選択可能です。
あまり大規模なアプリケーションには向かないものの、軽量、簡易さがVue.jsの特徴でありメリットであると言えるでしょう。

Angular

Google社によって開発されているJavaScriptフレームワークであり、現在ではほとんどの場合、AngularといえばAngularJSのことを指します。

Angularの特徴は、ルーティングを含め、Webアプリケーション構築に必要な機能すべてを備えている(フルスタック)ということです。
一つのフレームワーク内ですべての機能が完結しているため、、他のライブラリなどから機能追加を行わなくても、単独で大抵のWebアプリケーション開発ができるようになっています。
Vue.jsと同様に、MVVMパターン、双方向データバインディングを採用していますが、Vue.jsよりも大規模アプリケーション開発向けのフレームワークと言えるでしょう。

フルスタックであるがゆえに、学習コストが最も高く、開発当初からしっかりと設計して進める必要があります。ちょっと試すという使い方には向いていないとも言えます。
半面、堅牢さと厳密さは他のライブラリ/フレームワークと比較するともっとも高くなります。

Webデザイン

Webページのデザインについては、すべてWebデザイナに任せるという企業もあれば、その一部をフロントエンドエンジニアに任せるという企業もあります。

また、開発フェーズの前半はWebデザイナが参画しているものの、開発後半になるとデザインチームはプロジェクトから外れ、デザインの修正はフロントエンドエンジニアが担当することも多々あります。

UIのデザインは上流工程で行われることが多く、プログラム製造フェーズに入るとデザインチームは作業がなくなってしまうため、予算の関係上、開発プロジェクトの最後まで参加しないケースはよくある話です。
もちろん、Webページを最初からデザインしたり、画像を作成したりということをフロントエンドエンジニアが全て担当するということはあまりありません。しかし、IllustratorやPhotoshopなどのグラフィックデザインソフトについては、基本的な操作はできた方がよいでしょう。

バックエンドの知識

フロントエンドからバックエンドまで、すべてを一人の担当者が製造することは、中〜大規模アプリケーションではあり得ません。
基本的にはフロントエンドエンジニアは画面周りを担当することになりますが、それでも実際の開発作業では、バックエンドについての知識が必要とされるシーンも数多くあります。
例えば、Webアプリケーションでは、フロントエンドとバックエンド間でAPIを使ってデータの受け渡しが行われます。
フロントエンドとバックエンドの機能は密接に連携する傾向にあることから、JSONによるデータ受け渡し定義など、バックエンドエンジニアとのコミュニケーションは頻繁に行われます。

また、バックエンドエンジニアとのコミュニケーションをとることだけではなく、JavaやPythonなど、バックエンド向けのプログラミング言語のスキルもあれば、将来的にはバックエンドエンジニアへの道も開けてきます。

Webアプリケーションエンジニアとして長く活躍するためには、フロントエンド・バックエンド両方できることに越したことはありません。
仕事の幅を広げるためにも、バックエンド側のプログラミング言語やフレームワークの知識習得も検討していきましょう。

=================

＞エンジニアへのキャリアに関する記事

国内の注目すべき「VR・AR」ベンチャー企業一覧【厳選20社】
https://www.axc.ne.jp/media/careertips/vr_ar_venture

=================

Webアプリケーションもかつては、フロントエンドとバックエンドを区別せず、ブラウザからのリクエストを受けると処理を実行後、結果を返却するというようなものでした。
しかし、フロントエンド・バックエンドとでアプリケーションを分割し、並行して開発することで効率性を高めるという手法は近年当たり前になってきています。
それにより、従来バックエンド側で対応していた、HTMLレンタリング・セッション管理・ルーティングなどをフロントエンド側で対応するケースが増えてきました。
バックエンドが簡潔になり、再利用性も高まるというメリットがあるため、かつては簡易な処理が多かったフロントエンド側の重要性が増しています。

Web関連技術に限らずIT技術全般に言えることですが、日々に新しい技術が登場しトレンドも入れ替わっています。

キャリアでお悩みの方は、ぜひアクシスコンサルティングにご相談ください。