フロントエンドエンジニアに求められるもの多すぎ問題
背景
postd.cc という記事がちょっと前にありました。
github.com Roadmap to becoming a web developer in 2018って最近のWeb技術のまとめみたいなもんもよく引き合いに出されます。
このまとめの中にフロントエンドのものありますが、これはフロントエンド技術自体のロードマップです。
これらの技術すべてに精通していればいいのかと言われるとそんな必要は全く無くて。
でも現場によって実際 フロントエンドエンジニアに求められているものはそれ以外にもたくさんあるんですよね。
会社によってマジでJavascriptプログラミングしかやらない人も、マークアップする人、デザインを作ってそれをCSSに落とす人、本当に一口にフロントエンドエンジニアと言っても幅広すぎ。
担当範囲が広すぎるフロントエンドエンジニアに関していろんな会社が募集してると思うんですが、具体的にどういうスキルが求められてるのかと、逆にこういうのやりませんってのはっきりしてくれると選定する際に参考になるかな〜と、そのためのスキルの一覧表みたいなのを作りたいと思ってこの記事を書いています。
それと、私自身はもう会社やめちゃってヒモみたいな感じなんですが、上司もいなければ目標面談とかもなく、今自分がどこにいてどこに向かっているのか相談出来る人がいないので迷子になってます。（マジで前職は信頼出来る上司がいて良かったな〜泣）
そのためスキルの棚卸しをして「あれが足りてない、これを次やりたい」っての考えるたたき台となるようなものを作りたいと考えています。
ということでですね、世のWEBフロントエンドエンジニアと呼ばれる人たちが現場で求められているスキルだと思われるものをガガガッと以下に書き出してみました。たくさんあります。
もちろん一個一個説明したらそれだけで１記事書けてしまいますので、ここでは詳細は書いてません。
これもまた深度がどれだけかってのがまた現場によって変わるから○✕では判断が難しいので、
- 知らない
- 知ってる
- 触ったことある
- そこそこ動かせる
- ゼロから構築出来る
とかで通信簿的にしてみたら、わりと判断材料になるのかな〜と思ってます。（○✕で書けるようなレベルに表の方をドリルダウンしてもいいですね）
また、それぞれが個々に具体的にどういったスキルなのか説明も必要だとは思いますが、それはまた今度。
スキル通信簿
マークアップ
CSS
- 目的のデザインの再現力
- レスポンシブ対応やデバイス毎の差異吸収（Gridとか）
- CSS設計に関わるマークアップスキル
- 設計全般(BEMなどの大規模サイトでも破綻しないルールづくり
- SASS、POSTCSSなどのaltCSS
Javascriptプログラミング
- プログラミング基礎力
- Dom操作のあれこれ
- Ajaxや、jQuery等のライブラリを使える
- Javascriptそのものに対する知識（イベント伝播とかECMAScript)
デザイン・アニメーションまわり
html・css・js複合的内容
- アクセシビリティ
- サイト高速化についてのあれこれ
Javascriptその他
- npmまわり(yarn)
- ビルドツールやタスクランナー(Webpack, gulp)
- altJS (Typescriptとか)
- canvasの扱い（create.jsなど）
- webGL(three.js)
- PWAとそれに付随するあれこれ
SPAフレームワークあれこれ
- フレームワーク・ライブラリ熟練度(React,Angular,Vue)
- 状態管理(Redux,RxJS,Vuex)
- テスト(Jest,Mocha,Jasmine)
- プロトタイピング(Storybook)
- 結局担当するネイティブアプリ実装：ReactNative等
なんだかんだやることになるフロントエンドに付随するサーバーサイド周り
まとめ
これら全部を求められているような現場は多分存在しなくて、広いんだけど「フロントエンドエンジニアを名乗るからには全部やってなきゃ」なんてことは全然ありません。現場によっては概ねやりたい事だけやれるとこもあります。
自分から首突っ込んでいったらホント色々やれるので、飽き性の人にはおすすめな職業ですよ！（まぁ〜これはエンジニア全部か）
「私こういうのもやってますし、結構やってるとこ聞きます」「これとこれは一緒なのでは？」「今時WebComponentsやってないのは小学生までだよね〜キャハハ」みたいな意見はバシバシ 私のtwitter宛に投げつけていただければと思います。
以上です。世のエンジニアの皆様ご意見ください。