macbook.jpg
Apr 19, 2019

フロントエンドのお仕事図鑑

Webフロントエンドエンジニア2年生になりました。

この1年で本当に多種多様なフロントエンドエンジニアの方たちとお話する機会をいただき、その度に「フロントエンドの領域って様々な役割があるなー」と思わされる毎日です。

一方で、「フロントエンド開発」という単語が形骸化してきている感覚も抱いており、具体的には

  • 「フロントエンドチームに入社してみたけれどスキルミスマッチで苦しんでいる」
  • 「フロントエンドの業務に対してビジネス側や採用側の理解が得られない」

という話を目にする事も少なくありません。

今回はこれまで自分が出会ってきたり仕事でこなしてきたフロントエンド領域の業務について改めて整理する事で、

  • 非フロントエンドエンジニアの方に少しでも興味を持ってもらう
  • より実態に即したジョブロール細分化に向けた議論の下地を提供する
  • フロントエンドエンジニア自身が得手不得手を踏まえたキャリア選択をできるよう、サンプル事例を提供する

という3つの目的を達成できると嬉しいなと思います。

免責事項:

  • 本記事で扱う「フロントエンドエンジニア」とはWebフロントエンドエンジニアを指します
  • 筆者の主観と偏見が多分に満ちています
  • 考慮漏れ・タイポ等に関するツッコミははてブかTwitterまでお願いします。
  • フロントエンドネタなのでお決まりの「無駄に複雑」「徒労」「本末転倒」みたいなコメントがつくと思いますがそのへんはスルー

フロントエンドの主な業務範囲と責務

UI/UXマークアップ:

  • HTML, CSS, WebFont等を駆使してWebサービスの見た目を作るお仕事です
  • 画面全体の設計を意識し、破綻しないコードをスピーディーに実装するスキルが求められます
  • 現代では直接HTMLやCSSを記述する機会は少なくVirtual DOMやCSS Preprocessorを駆使することがほとんどです
  • CSS Modules, Scoped CSS, Styled Component, EmotionなどJSと密に結びつくマークアップ手法もメジャーになってきました
  • Machine Readableな実装にする事も大切で、アクセシビリティ・SEOなどメタ的な知識も求められます
  • jQueryがまだまだ現役な現場も多いです

UI/UXエンジニアリング:

  • よりエンジニアリングスキルが求められる業務範囲という事で上記と分けました
  • React, Vue.js, Angular JS等のUIフレームワークを駆使したリッチなSingle Page Application(もしくは部分的SPA)の表層レイヤーが主戦場となります
  • JavaScriptのパッケージマネージャーやES6、Browser APIs、Bundle Tools等に対する理解が必須になってきます
  • HTMLという見た目よりもそれを組み立てるJSコードと向き合う時間が増えるため、コード品質への意識も大事なポイントです。Prettier, ESLint, StylelintなどのLinter & Formatterも基礎教養と言えるでしょう
  • デザイン性だけでなく再利用性やメンテナンス性が優れたUIコンポーネント開発は、決して一朝一夕には身につかない高度な専門スキルです

フロントエンドアーキテクト:

  • Redux, Vuex, MobX, ngrx等を駆使してクライアントバックエンドを設計するお仕事です
  • UIを構成するオンメモリストアのState設計、イベントフロー規約、ミドルウェア選択等をリードして最適なデータフローを追求するスキルが求められます
  • GraphQLのschema管理とかもこの辺？
  • 最近はこのレイヤーでもClean Architecture的な設計手法を目にする機会が増えました
  • 口で説明するのは簡単ですが、個人的には一番深いドメイン知識と業務経験が求められる領域だと思っています
  • 機能要件だけでなくメンバーのスキルセットや時流を鑑みて、保守性の高いアプリケーションをスピーディーに構築できるか否かはこの分野の人間のスキルにかかっています
  • 語れば語るほどマサカリが飛んできそうなのでこのくらいに

Static Site Generation:

  • あえてこのカテゴリを分ける必要はないかもしれませんが一応触れておきます
  • 会社ページやライブラリドキュメント等、複雑なユーザーアクションが発生しないアプリケーションを書き出すお仕事です
  • Hugo, Next, Nuxt, GatsBy, Vue Pressのようなフレームワークと密に関わってきます
  • あまり関わる事がないので詳しくないのですが、この分野においても一定のドメイン知識が求められたり、職人芸的なチューニングを行う人がいたりという話は聞きます

Frontend Dev Ops:

  • フロントエンドの開発体験(最近はDXと呼ぶらしい)を改善するお仕事
  • CI/CDパイプラインの構築、ログ・アナリティクス向けの基盤構築、タスクランナーによる業務の自動化、monorepo構成のアプリケーションの管理等が該当します
  • 鍛え上げたWebpack筋をフル活用するお仕事です
  • この分野に精通するメンバーが1人でもいると、目に見えてチーム全体の生産性が向上するなというのが分かります
  • エンジニアとしての怠惰さを追求するストイックなお仕事です

BaaSエンジニアリング:

  • FirebaseなどBackend as a Service系のサービスを活用するお仕事です
  • カバー範囲としては広くなりますが、Firebase Authによる認証基盤導入、Firestore or RTDBによるオンラインDB設計および管理、Cloud FunctionsによるServerless アプリケーションやバッチJobの作成、Cloud Messagingによる通知基盤構築、その他Storage系サービスの管理などを行います
  • ゴリゴリのバックエンド知識は必要ありませんが、しばしばFirebase担当を割り当てられたエンジニアがこれら全てを(四苦八苦しながら)習得し、フルスタックへの道を爆進していくのを見かけます
  • PWAへのPush通知系BaaSとしてはOne Signalを利用しているところも多いです。マーケターだけでなくフロントエンドエンジニアが運用を担当している現場をよく見かけます

Server Side Node.js:

  • バックエンドアプリケーションをフロントエンドエンジニアが実装するケースです
  • Express, Koa, Hapi, Microなどのフレームワークが用いられます
  • 通常のバックエンドアプリケーションと同じくRedisのような揮発性の高いストレージを利用したセッション管理、RDBMSでのデータ管理、認証ルーティング、リクエストBodyバリデーション、アクセスロギング等を行います
  • アーキテクチャにはシンプルなMVCが採用されているケースが多い印象。最近はこちらもClean Architectureを意識したものを見かけるようになってきました
  • クライアントサイドアプリケーションとは異なり単一ファイルにバンドリングする必要はありませんが、TypeScript, Coffee Script等のAltJSで記述する際にはビルドフローを考慮する必要があります
  • 大量のアクセスが流入するホストサーバー上で動作するため、NginxやApacheについての知識も必須です
  • GAEなどを利用している場合はともかく、Container単位のデプロイパイプラインを構築している現場ではDockerが必須知識となります

BFF(Backend For Frontend):

  • 複数のバックエンドサービスからのAPIアグリゲーション、SPAのServer Side Rendering等を行うサーバーアプリケーションを構築するお仕事です
  • Microservicesの文脈で登場した概念であるため、上記のNode.jsアプリケーションとは分けました。
  • JavaScriptでの実装が多いですが、バックエンドの都合によってはGoなどで記述される場合もあります。
  • 通信プロトコルとしてHTTPの他に、gRPCやThriftといったRPC通信にも精通する必要があるでしょう。
  • RPC言語のUniversal Schema(Thrift IDL, Protocol Buffer, etc...)から型定義を自動生成するケースも多いため、必然的にTypeScriptやFlowなどが選定されるケースが多いです
  • APIの仕様を策定する際には、各バックエンドサービス担当者との膨大なやり取りが発生するため、コミュニケーションスキルも求められることとなります
  • バックエンド領域や業務ドメインへの深い理解も当然必要です
  • 通常のSPA開発だとバックエンドが定義したAPIをそのまま利用する現場も多いかもしれませんが、BFF開発はMicroservices群の中からフロントエンドというドメインを選定・集約していく仕事であるため、ドメインアーキテクトとしてのスキルと経験が求められます
  • バックエンドエンジニアが普段当たり前にやってる事をやるといったイメージに近いです

テストエンジニアリング:

  • 「人間が動作確認をする」という概念をブチ壊していくお仕事
  • Jest, Mocha, AVA等のテストフレームワークの上に各種のテスト基盤を構築していきます
  • テストを行うカテゴリはUnit Test, Integration Test, E2E Test, DOM Snapshot Test, Visual Regression Testなどなど多岐に渡ります
  • 上にあげたものが現在のスタンダードではありますが、これらで担保できない課題を見つけたら率先して道を切り開き、新しいテスト手法を構築していく事こそがテストエンジニアリングの本質な気がします。
  • テストの書きやすさという観点も戦場になる領域なので、Dev Opsと似通う点も多いでしょう
  • 私事ではありますが、前職のFOLIOという会社での一番の経験はこのテストエンジニアリングの最前線を学べた事でした。(記事執筆時点では絶賛募集中っぽいです)

モバイルアプリケーション開発:

  • Web技術を用いてiOS/Android向けのクロスプラットフォームアプリケーションを開発するお仕事
  • React Native, Iconinc, Monaca, Native Scriptなどのフレームワークを用いることが多いかと思います
  • Web以外のプラットフォームで提供する都合上、これまでに上げたスキルに加えてNative APIへの理解も求められます
  • 上述のフレームワーク向けライブラリでカバーできない機能要件については自らObjective C, Swift, Kotlin, Javaを記述する機会も少なくありません
  • Publish先もApp StoreやGoogle Play Storeとなるため、それらに向けたビルド方法や公開方法のプラクティスも習得する必要があります
  • CI/CDパイプラインもモバイルアプリ向けに特化したものを利用するケースが多くなります

デスクトップアプリケーション開発:

  • Electronを用いてデスクトップアプリケーションを作るお仕事です
  • 自分の周りではあまりこの分野の案件は多く内容に思えます
  • 正直全然知見がない...
  • ホストマシンへのファイルアクセス等も行うため、OSレイヤーへの理解が求められたりするかも

インフラエンジニアリング:

  • デプロイしたアプリケーションを安定して可動させるお仕事です
  • SREチームが無い会社ではフロントエンドチームへのこの辺の負荷は必然的に高くなります
  • アプリケーションをデプロイする先の環境構築や、リリース後の監視業務をフロントエンドエンジニアが担う現場も多いです
  • Datadog, Kibana, Redash等を活用できるスキルがあるに越したことはありません
  • Microservicesの文脈でいうと分散トレーシング等の知識が自然と必要になりますね
  • Kubernetes環境をゼロから構築する機会はほとんどありませんが、Workloadの管理やPod, Deployment, Resource Limit等の設定についてはMicroservicesの一翼を担う以上フロントエンドの責務も一定量発生することでしょう
  • PM2を利用したゼロダウンタイムデプロイといったアプリケーション層の作業だけではなく、GAEのTraffic Splittingを利用したCanary Releaseの設定なんかもできるフロントエンドエンジニアは重宝されます

パフォーマンスエンジニアリング

  • 最近目にすることが増えてきた職種
  • サーバー負荷やユーザー体験を考慮したキャッシュ戦略、CDN利用等がこのカテゴリのカバー範囲になるかと思います
  • ブラウザの最新APIやService Workerの仕様を追いかけ、バンドルサイズを削減するためにビルドツールの設定と戦う機会も増えてきていますね
  • 数年後にはPWAだけでなくWebWorkerなんかも必須知識になるんじゃないかなと予想しています
  • Speed Indexの相対的変化を検知するための合成モニタリングやLighthouseのscore checkも一般的になってきました
  • プロダクトのリリース後もモニタリングツールの活用やパフォーマンスバジェットの策定を含めて責任が求められるお仕事です

その他:

  • Web Assemblyが本職の人っているのかな？
  • Three.jsを使ってGPUをイジメながらグラフィカルでリッチなUIを作るお仕事もあります

個人のふりかえり:

つらつらと書いてみましたが実は自分自身のスキルを棚卸しする意図もありまして、一旦書き出したものを眺めながら改めて自分の強みと今後の課題について考えてみました。

現場で働いてみた実感としては、

  • フロントエンドアーキテクト
  • Frontend Dev Ops
  • BaaSエンジニアリング
  • BFF

あたりが今現在の強みであり、Advancedくらいの名乗りはできるのかなと思います。

逆に今後伸ばしていかなきゃいけない(もしくは伸ばしたい)課題領域としては、

  • UI/UXエンジニアリング
  • テストエンジニアリング
  • インフラエンジニアリング

だと認識しています。 引き出しを増やすことは今あるスキルに良い客観性をもたらしてくれるため、今後も様々な分野を学んでいきたいです。

最後に:

唐突ですが、先日株式会社FOLIOを退職し、フリーランスとして独立しました。普通っぽい記事の皮を被った退職エントリです。

夏頃まではテックリードおよびアーキテクトとしてNuxtのリニューアル案件を担当させていただいていますが、その後の予定は未定です。

ちなみにバックエンドも普通に書きますし、スポットでのコンサルや勉強会もお受けしています。

上記の強み + 持ち前の学習速度 + 視野の広さで価値を発揮したいなと思っているので、マッチする会社さんがあれば是非お仕事しましょう！

欲しいものリストは貼りません。

参考:

追記

エッジエンジニアリング

  • 職種として確立するには至っていませんが、fly.ioのようなエッジコンピューティングも最近盛り上がってきました。
  • ここ数年、Node.jsで書かれたBFFが担っていたSSRの責務をCDN Edge上でNode.jsを動かすことでそちらに移譲しようという考え方です。
  • セッション情報を持たない(ユーザー情報に依存しない)HTMLのみをSSRしてキャッシュし、クライアントサイドのAPIコールでユーザー情報を注入する思想はApp Shellモデルなどを代表に徐々に浸透しつつあるかとは思いますが、今後はその辺りのノウハウを持ったエンジニアが重宝されるのではないでしょうか
  • 個人的には、BFFがSSRの責務から解放される事でAPIアグリゲーションのみに集中できるようになり、言語選択の幅も広がりそうで楽しみです
Copyright © 2020 Shin Ando