背景
フロントエンドの技術成熟に伴い、それぞれのフロントエンドエンジニアがより得意領域、主軸を定めた上で連携性を図るのが望ましい
全ての領域を得意にしていくことが望ましいが、その途中段階にある人にとっては、まずは主軸を定めることが望ましい
いずれかの領域を主軸にするという意味であり、いずれかを「やらない」というわけではない
ガイドラインを策定した（2021/6/28）
変更履歴
FoF, BoF の役割を上書きした（2021/6/30）
FoF
(修正) フロントエンドのコードがバックエンドのコード、サービス、API、その他のアーキテクチャと互換性があることを確認
→ バック・オブ・ザ・フロントエンドエンジニアと協力して、フロントエンドのコードがバックエンドのコード、サービス、API、その他のアーキテクチャと互換性があることを確認
(追加) 視覚的表現をJSやCSSを用いて実装できる（Canvas・WebGL・SVG・画像処理など）
BoF
(修正)フロント・オブ・フロントエンドエンジニアが作成したUIコードを利用して、画面を構成
→ フロント・オブ・フロントエンドエンジニアが作成したUIコードを利用して、画面に必要なデータを取得・加工する
定義
フロント・オブ・ザ・フロントエンドエンジニア（FoF）
バック・オブ・ザ・フロントエンドエンジニア（BoF）
便宜上、エフオーエフ、ビーオーエフと呼ぶ
の２つを定義して、フロントエンドエンジニアはいずれか一つを主軸として定めた上で、他方も習得していく
現段階では人材市場において細分化されて求職などはされていないので、あくまで社内でのチーム編成において連携性を高めるための便宜上の定義とする
注意点としては、FoFエンジニアを目指す！BoFエンジニアを目指す！というキャリアの目標として設定されているわけではないです
キャリアの発展例
FoFから デザインエンジニアの定義
デザインエンジニアの定義 BoFから、サーバーサイドも含めてできるマルチスタックエンジニア
以下の定義については、フロントエンド委員会で随時変更していくものとする
フロント・オブ・ザ・フロントエンドエンジニア（FoF）
定義
HTML、CSS等のプレゼンテーション層やJavaScriptの実装を専門とするエンジニア
役割
ブラウザ、アクセシビリティ、SEO、HTMLを様々な環境に適した体験を作るために、アクセシビリティに重点を置いてセマンティックHTMLを作成
色、タイポグラフィ、レスポンシブ、アニメーションなど、UIのあらゆる視覚的側面に対応し、ウェブ体験における見た目をコントロールするCSSコードを作成
モジュール性、柔軟性、互換性、拡張性に重点を置いて、柔軟性の高いCSSコードを設計
アコーディオンパネルの開閉、モーダルウィンドウを閉じるなどのJavaScriptの実装
PC、モバイル、タブレット、その他のデバイスでUIの確認をするために、ブラウザやデバイス間でテストを行う
パフォーマンスを最適化することで、軽量化、ローディングの高速化などの体験を実現
デザイナーと協力して、ブランディング、デザインビジョン、UXのベストプラクティスが適切にブラウザへ反映
バック・オブ・ザ・フロントエンドエンジニアと協力して、フロントエンドのコードがバックエンドのコード、サービス、API、その他のアーキテクチャと互換性があることを確認
プレゼンテーション用のUIコンポーネントを作成し、他のエンジニアが使用できるように共通化
各UIコンポーネントのために、堅牢で直感的なコンポーネントを作成、文書化し、コンポーネントを使用するエンジニアが必要なものを簡単にプラグイン化
UIコンポーネントのユニットテストを作成し、コンポーネントの外観と機能が適切であることを確認
UIコンポーネントをメンテナンス
視覚的表現をJSやCSSを用いて実装できる（Canvas・WebGL・SVG・画像処理など）
バック・オブ・ザ・フロントエンドエンジニア（BoF）
定義
Webアプリケーションを適切に機能させるために必要なJavaScriptの実装を専門とするエンジニア
役割
CRUD機能などを扱うアプリケーションのビジネスロジックを記述し、アプリケーションのState、ルーティング、キャッシュ、認証/認可などを制御。つまり、バック・オブ・ザ・フロントエンドエンジニアは、アプリケーションが正しく機能するために必要な実装をする
CMSからのコンテンツ取得、操作、表示や、ユーザーがフォーム送信したときにデータをPOSTする
フロント・オブ・フロントエンドエンジニアが作成したUIコードを利用して、画面に必要なデータを取得・加工する
JavaScriptコードのパフォーマンスを最適化することで、データを素早く取得や投稿できるアプリケーションを実現する
アプリケーションが意図された通りに動作することを確認するためのE2E、統合テスト、その他のテストの作成
Node.js、ツールなど、JavaScriptベースのインフラを構築・管理
JavaScriptのモジュールバンドラー、デプロイメントツール、CI/CDなどのDevops関連の管理
フロント・オブ・ザ・フロントエンドエンジニアと協力して、UIコンポーネント・ライブラリに、アプリケーションのStateを構築するために必要なコンポーネント、変数、APIフックが含まれていることを確認
適切な技術インフラを整備し、アプリケーションがJavaScript以外のバックエンドコード(API)と適切に通信できるように実装
