Offers を運営している株式会社 overflow の あほむ でございます。
10年越しのWebフロントエンド
最近更新していない 自分のブログ を遡ると「フロントエンド」という語の初出は 2010 年であり、転職のタイミングで自らを「Web フロントエンドエンジニア」と定義したのは 2012 年の頃でした。
それから 10 年、自分語りとして記憶をたぐることの老害仕草たるやですが、今回はそのノリのまま表題の通り Web フロントエンドという職種界隈についての考えを述べてみます。
Webフロントエンドとは一体...
先日、TechFeed Experts Night#4 〜 フロントエンドアーキテクチャを語る でお話しする機会をいただいたので改めて自分の中の Web フロントエンドを言語化してみました。
イベント資料 より抜粋
いくら抽象化しても原則としては全てが HTML で表現される Web であることから JSON 色づけ係ではなく「HTML 生成処理を整える技能」と表現しています。あらゆるライブラリ、フレームワークの関心は、とどのつまり如何に良い感じに HTML を生成するかに終始しています。
そして開発チーム内での職能的なポジションとしては「システムとデザインの境界」であり、なんだかんだ「開発の最終工程」であることから、最終アウトプットの良し悪しにおいてかなりの割合をフロントエンドが負っていると認識しています。
Webフロントエンドが内包する領域の変化
そんな Web フロントエンドですが、この 10 年で関心事が大いに変化しています。クライアントサイドの HTML/CSS/JavaScript/Web API に留まらず次々と隣接領域を併呑しているような印象さえあります。
イベント資料 より抜粋
10 年前は HTML テンプレートに CSS でグラフィックをつけて jQuery で振る舞いを載っける、くらいがフロントエンドエンジニア、ないしマークアップエンジニアへの期待でした。
一方で現代のアーリーアダプター 〜 アーリーマジョリティな Web フロントエンドの関心においてはサーバーサイドの HTML 生成処理を含めた Web アプリケーションとその配信を包括しつつあり、Node.js のエコシステムを中心とした JavaScript の存在感が増しています。
フロントエンドエンジニア ≒ Web アプリケーションエンジニア
エッジなフロントエンドエンジニア像においては、UI コンポーネントの開発はもちろんのこと Next.js のようなフレームワークを通して Web サーバーを管理し、ビルドパイプラインから CI/CD に至り、いっそ CDN などの配信系の設定にも関心が及びます。
プロダクト展開に強く依存しますが、こと Android や iOS のモバイルアプリと Web を同時に展開しているサービスであればこれだけ関心が拡がっても、水平展開されたクライアントサイドにおけるイチ領域として認識すれば違和感もありません。
よってフロントエンドの関心の変遷における今の状況を説明する上でフロントエンドの Web アプリケーションエンジニア化というのが、個人的にはしっくりきています。
フロントエンドとバックエンドの棲み分け
実装技術的に、クライアントサイド:サーバーサイドで区別するのは難しくなりましたが、フロントエンドとバックエンドという棲み分けは依然として続くような気がしています。
Web アプリケーションをつくるためのバックエンドという役割は Next.js などよって一定希薄化が進むでしょうが、GraphQL エンドポイントや API Gateway 以前のサービス群やデータベースの開発はいわゆるバックエンドらしい仕事のままです。価値の提供基盤となるデータベース設計やモデリング、コアなロジックの開発、データの分析と管理 etc バックエンドの関心事もまた変化と拡大をしているものだと認識しています。
デザインエンジニアの出奔
一方で昨今、Web デザイナー → Web フロントエンドエンジニアのようなキャリアを歩まれた方がしばしば持っている UI・デザインとの接点に対する強みがフロントエンドという名前空間の中でやや希薄化している印象です。
弊社ではデザインや UI に強みをもつソフトウェアエンジニアの方に対するスカウト文で次のようなテキストをお送りすることがあります。
弊社ではユーザー体験に関わる課題として「一貫性のある体験をもたらし手触りの良い UI」をコンスタントに生み出し続けられる基盤づくりの必要性が高まっています。デザインシステムに包含されるような UI に関するルールの言語化、汎用的な実装のライブラリ化、DesignOps と DevOps のブリッジなどでデザインとシステムの両方に感度の高い UI 開発者を求めています。
UI に専門性や強みをもっていた人々がデザインエンジニアとして出奔する[1]ことで、Web フロントエンドエンジニアはいよいよ大手をふるってシステム寄りの Web アプリケーションエンジニアとして先鋭化するのかもしれません。
Web フロントエンドの技能軸（スキルラダー）
ここまで Web フロントエンドについて私見を書き散らしましたが、会社の Tech Blog ということなので Offers開発チームのWebフロントエンドはどういう感じなの？ という部分をご紹介する代わりとして、社内のスキルラダーにおける軸をご紹介します。
各技能における箇条書きテキストはいずれも社内のスキルラダーにおいて真ん中あたりの水準感を転載したものです。
Web 開発の技能
- HTML/CSS/JavaScript/Web API ほかチームの技術スタックで設計・実装でき、同様にバグや技術的課題を解消できる
- 不要なコードの重複や複雑化を避け、移植性や一貫性、テスト可能性に優れたインターフェースを設計・実装できる
シンプルに、Web の技術スタックを用いて開発するための技能です。コーディングに伴うミクロ〜マクロな設計力もこの軸に混ぜ合わせています。
UI 開発の技能
- デザインファイルからビジュアルや操作性を UI コンポーネントとして設計・実装できる
- Responsive Web Design や状態遷移、コンテンツ量の変動、実装の効率性を考慮してデザイナーにフィードバックや提案ができる
フロントエンドという UI 開発者としてある意味本分である技能です。実作業としてはコンポーネント開発、コミュニケーションとしてはデザイナーとのコラボレーションを念頭においています。
利用時品質に関わる技能
- 成果物に求められる必要十分な外部品質（パフォーマンス、アクセシビリティ、セキュリティなど）を満たせる
- 観測された定量データ、適切な分析に基づいて実利的なパフォーマンス改善に取り組むことができる
Web フロントエンドの利用時品質を高めるということは、コンテンツや機能という根本的な価値とあわせてポジティブなユーザー体験を最大化するために欠かせない技能です。
コード品質に関わる技能
- Web 開発における各種テスト (ユニットテスト、結合テスト、機能テスト、ホワイトボックステスト、ブラックボックステスト、負荷テスト) を理解し、タスクに合わせたテスト方法の設計とその運用が行える
「コード品質に関わる技能」と「再現性と技術化の技能」は Web フロントエンドに限らないソフトウェアエンジニアのコモンスキルの扱いですがついでに紹介します。
前項がいわゆる外部品質であるのに対して、本項は内部品質について言及しています。
再現性と技術化の技能
- 自分の関わっているプロダクトコードから再利用可能なパーツを自主的に抽出して社内ライブラリ化したり OSS 化したりできる
- 実装や設計の意図を、必要に応じて組織やチームに有用なドキュメントとして構造化・文書化ができる
最後にライブラリを通してプロダクトを開発するという普段発揮している技能を再利用可能な技術に昇華したり、暗黙知を共有知としてアウトプットしたりするための技能です。
この観点が抜けていると極端に言えば「スーパープレイヤー大集合！ ただし技術資産は溜まらない」という状況になりかねません。
明日はどっちだ!?
色々書きましたが、踏まえて今後どうなるのか、どうすべきなのか、みたいな抽象的な私見については過去の引用をもって替えさせていただきます :)
2014 年の予言を 2019 年に掘り起こして
からの 2021 年の前職でのメッセージがあり
現職ドキュメントにおいては
エンジニアリングによる仕事の価値を創り、示すこと
技術のコモディティ化によって「技術を行使できる」という能力のみの価値は相対的に低下し続けています。ソフトウェアエンジニアの需要は高まる一方ですが、その市場の中でも価値の高い人材で居続けるためには「技術を行使した結果、何を成し遂げられる人なのか」という人材としてのテーマ性が重要です。
指向性というものは日々の仕事やキャリアによって磨かれていくため、技術を行使した先でどんな価値を生み出すのかを日常的に意識しながらあらゆる経験を積み上げていく必要があります。
リードやマネージャーの役割をもつ人は、エンジニアリング全般についてあらゆる角度から言語化を試みることで新しい価値を創り、どんなインパクトを与えられるのかを示してください。高度な技術に挑戦する価値、品質を高めることの価値、事業数字に影響を与えることの価値、ユーザーと向き合うことの価値etc メンバーが自分の価値を言語化し、それぞれのテーマを発見できるよう導いてくれることを期待します。
です。
Webフロントエンドという専門性で 自分の提供価値を切り拓きたいあなたはahomuと握手！！
関連記事
-
すべてのデザインエンジニアがフロントエンドに端を発するとは限りません。（念のため） ↩︎
副業転職の Offers 開発チームがお送りするテックブログです。【エンジニア積極採用中】カジュアル面談、副業からのトライアル etc 承っております💪 jobs.overflow.co.jp
Discussion