フロントエンドエンジニアとは、その定義とスキルセットについて考えていること
「フロントエンドエンジニア」である。ここでは、「WEB 制作における」という前提をつける。
今、WEB 制作の業界内で、これほど定義が曖昧で共通認識が危うく、いったい何なんだこいつらはと思われている肩書が他にあるだろうか。（ごめん言い過ぎた。）
まず納得がいかないのは、「フロントエンドエンジニアとはJavaScript がめちゃくちゃ書ける人」とか「最新のこんなツールやあんなライブラリが使える人」みたいな考え方が多い点だ。
そういう人は普通にプログラマと呼べばいいと思う。ただ最近、こういう認識は徐々に減ってきているとも感じる。
ともあれフロントエンドのエンジニアという定義を新たに設けるからには、マークアップエンジニアでもHTML コーダーでもプログラマでもエンジニアでもない、新たなスキルセットがあり、その上でジョブ・ディスクリプションを作りたい。結局のところ採用に使いたいので。
そう思っていて、現時点で私が考えていることを、まとめておく。
目次
フロントエンドってどこなの
フロントエンドエンジニアというからには、フロントエンドのエンジニアなんだと思う。すごい安直。でも、そうでなければ納得がいかない。
そしてWEB におけるフロントエンドを考える時、自然と「バックエンド」という単語が頭に浮かぶ。バックエンドとは、業界内では「サーバサイド」と殆ど同義語で、フロントエンドとバックエンドは対義だ。
Wikipedia 様で「フロントエンド」を調べると、冒頭にこんな解説がある。
フロントエンドは各種入力をユーザーから収集し、バックエンドが使える仕様に合うようにそれを加工する。
ー Wikipedia「フロントエンド」より引用
ほうほう。「各種入力」を「ユーザーから収集」し「加工する」とな。
WEB 制作における「入力」とは？多くの人がフォームのinput 要素を想像するのではないか。それを「収集」するとは、入力してくださいとユーザーに促し、入力しやすい状態を整える一連の行為、とでも言うか。「加工」は簡単だ、例えば全角数字を半角数字に変更してからsubmit する工程のことを指すのだろう。
フォームに例えると分かりやすいからそうしただけで、よく考えると入力を収集し加工するための仕組み作りは意識 or 無意識に関わらず、WEB 制作の工程において無数に存在する。
それは「ブラウザに表示されている何か」が、常に担っている役割だ。
要するにこの、「ブラウザに表示されている何か」がフロントエンドエンジニアの仕事場だと思っている。ざっくりだけど、何だか今はこれが個人的にしっくりくる。勿論ブラウザの手前にはユーザーがいて、まさに入力を行おうとしている。
マークアップエンジニアの守備範囲が「マークアップ」であるのに対し、フロントエンドエンジニアの守備範囲は「フロントエンド」全体だ。これは膨大に広い。
エンジニアって何なの
エンジニアとは何たるかについては色んな所に議論があって手に負えない感じがする。ただ、よく記憶に残っているtoggeter まとめがあって、
エンジニアは「技術者」ではない - Togetterまとめ
https://togetter.com/li/915192
こういうやつなんだけど、要するに「ただ手を動かす」のではなく、「工学という専門知識を用いて」「現状を改善する・課題を解決する」のがエンジニアであるという定義には個人的に納得できる。
工場を設計し直す、というのがまさにそれで、生産ラインの課題を追求し改善策を実施して効率を上げ、結果的に大きく利幅を増やすことができる人間だ。
これをWEB のフロントエンドに例えると、とあるWEB アプリケーションのフロントエンド側のアーキテクチャがクソでレンダリング速度が遅いから、基本的な仕様とかライブラリ選定から見直して実装し直す、そんな場面が浮かぶ。
あと、金沢工業大学が学生のために用意しているサイトの中に分かりやすい表があって、これもエンジニアとそうでないものを定義する参考になる。
技術者と技能者｜技術者の仕事を探そう
http://www2.kanazawa-it.ac.jp/intreng/engineer/data/about_engineer.html
ただ正直、エンジニアを厳密に上記URL の表1 の技術者Ⅰと定義してしまうと、そんな奴が国内に何人いるのか、という話になるような気がする。まあ技術者Ⅱまで含んでも良いんじゃないの。結局のところ採用に使いたいので。
フロントエンドエンジニアって、こういう人達
ということで雑にまとめると、「ブラウザに表示されている何か」に関わる課題に対し、専門的な知見を用いて「現状を改善・課題を解決できる」人のことをフロントエンドエンジニアと呼ぶことにする。
HTML とかJavaScript とかプリプロセッサとかタスクランナーとかそういうのは直接的には関係ないと思う。それは単に課題解決のために今の時点では必要な知識であるだけで、数年後には必要なくなっているかもしれないからだ。
とりあえず例として、こういうことがWEB のフロントエンドエンジニアの仕事になり得ると思う。
- 表示速度アップのための現状分析・改善策の立案
- クローラビリティを上げるためのSEO 内部施策の立案
- 優れたUI・UX を実現するための「View」の設計・実装とライブラリ選定など
- 運用効率を上げるためのディレクトリ設計・コーディングルールの策定
- プロダクトの品質と開発効率を上げるためのアーキテクチャ設計への参加
- 制作チームの作業効率アップのための環境設計
みたいな感じ。
前述の話、恐らくこれらは技術者Ⅱの仕事である気もするんだけど、現実問題として技術者Ⅰが必要とされる現場なんて本当に限られていて、少なくとも今の自分は必要としていないので飛ばすことにする。
いくら最新のライブラリやフレームワークを知っていて扱えようが、それをいかに課題解決に結びつけることができるか、果ては利益に繋がるかを示すことができなければエンジニアとは呼べないと思う。もっとも、実際に利益に繋げるのは別の人の仕事だけど。
フロントエンドエンジニアに必要なスキルとは
さて、このような仕事をこなすために必要なスキル、というところで初めてHTML とかJavaScript とかいう話になってくる。まあ現状は主流がHTML＋CSS＋JS なので。
ただしそれは当然「React が使える」とか具体的な話ではなくて、前述の表にもあった通り、より「抽象的な」表現になるのだ。
- サーバ＆クライアントモデルや通信プロトコル・DNS 等、WWW を構成するものに対する全般的な知識と理解
- レンダリングの仕組み・DOM 等、ブラウザに対する知識と理解
- WEB 標準・HTML・CSS 、特にアクセシビリティ・セマンティクス・カスケーディングに対する知識と実装経験
- クローラーと検索エンジンの仕組みに対する知識と理解
- プログラミング、特にスクリプト言語に対する知識と実装経験
- フロントエンドに関わる様々なライブラリ・フレームワークを用いた実装経験
- WEB API に対する知識と実装経験
- プリプロセッサ・ソースコード管理など制作効率化に対する知見
とりあえず、こんなところだろうか。
もう少し挙げたい項目はあるんだけど、あまりにも範囲が広くなりそうだし、これらがOK なら敢えて挙げる必要が無い気もする。
5・6・7 辺りがマークアップエンジニアとの違いになってくる気がする。
しかし前述の通り、これらはあくまで専門的なスキルであって、これらを用いて示してもらいたい成果があるという話だ。こういったスキルを備えていても具体的な改善案が出せない人というのもいるし、それが利益に繋がらなければ多くの企業では価値が無いと見なされてしまう。
よって現実的には上記1.～8. に加えて、
- 問題解決の基礎理解と実施の経験
- いわゆるコミュニケーション能力
が、フロントエンドエンジニアにも不可欠であるというか、ここが欠けていては仕事にならないはずだ。
フロントエンドエンジニアの立ち位置
結局のところフロントエンドエンジニアとはマークアップエンジニアの上位版という理解でも良いような気がしていて、マークアップもフロントエンドの一部には違いなく、ただフロントエンドはマークアップよりも一気に扱う範囲が馬鹿デカくなるというだけだった。
そこの差はとても大きいと思うので、現実にはマークアップエンジニアと呼べる人は多くともフロントエンドエンジニアと呼べる人は少なくて、一般的な規模の制作会社に一人や多くても二人ぐらいの話だと思う。
なので自然とHTML コーダーやマークアップエンジニアをフォロワーとして従える形になり、プログラマが言うところのテックリード的な役割をWEB 制作の現場で担っていることが多いはず。
ただし本当にテックリード的な役割をこなすなら、もっと別のスキルが必要になってくるので混同はできない。
…という風に、私はフロントエンドエンジニアについて考えています。
私はフリーランスだった頃に初めてフロントエンドエンジニアという呼び名を聞くようになったんだけど、その時はテクニカルディレクターとか適当な肩書を名乗っていて、その実やっていることはフロントエンドエンジニアのようなものだったな、と改めて思う。
まあWEB が好きな人達が行き着くことが多い職業という感じ。
