Webが日常に溶け込んだ新時代で、Webフロントエンドのキャリアの未来を考えてみる

── Webフロントエンドは技術トレンドの変化が激しい印象です。お二人がサイバーエージェントで働く中で、最近の動向についてどう感じていますか？

野口：まずユーザーの変化として「Webだということを意識せずにWebサービスを利用している層」が増えてきたと感じます。

特に若い人の中には、気になる商品のチェックはWeb検索だけでなく、InstagramやTikTokでフォローしている人が使っているアイテムを重視する傾向にあるそうです。フィードで目に止まったコンテンツから、気になるショップのアイテムを見に行く際、実はアプリの中でWebブラウザを開いているのですが、スマホが日常に溶け込んだ生活の中で「WebブラウザでWebページを見ている」という感覚はなくなってきていますよね。
スマホの普及でWebサービスがより身近に浸透したからこそ、Webブラウザを使っているという意識が希薄になり、日常における便利なサービスを使っているという認識に変化してきたと考えています。

原：「Webと意識しないくらい日常に溶け込んでいる」というケースは増えているかもしれませんね。我々の開発業務においても、例えば「Figma」は、Webブラウザに表示されたWebページを操作しているという感覚では使っていません。それくらい、制作ツールとしての完成度が高く、エディタやグラフィックなどのデスクトップアプリケーションと並んで、日常の業務に溶け込んでいると言えます。

── 「Webブラウザ上で動作するWebページの実装」というWebフロントエンドの役割はどう変わっていきそうですか？

野口：私は「ABEMA」のWebフロントエンド開発に携わっていますが、視聴デバイスの拡大によって、コンテンツの視聴形態も多様化していると実感します。例えば「ABEMA」で「FIFA ワールドカップ カタール 2022」の全64試合を生中継しましたが、スマホやタブレット・PCだけではなく、テレビで「ABEMA」の中継を観たというユーザーは24%を占めていたそうです。

「ABEMA」はさまざまな機種のテレビに対応していますが、それらにはソニーのBRAVIA®のようにAndroid OSを搭載しているテレビだけでなく、東芝のREGZAやPanasonicのビエラのように「IPTV」という規格に対応していてWeb技術を使ってアプリを作ることができるテレビもあります。

インターネットに繋がったテレビは今後ますます普及することが予測されているので、今後はブラウザ以外でWeb技術を使ったアプリを開発するケースが増えてくるはずです。

── そんな時代の中、Webフロントエンドで活躍しようとしている学生や若手エンジニアに、どんな意識の変化が起きているのでしょうか？

原：近年はNext.jsやReact、Vue.jsなどのフレームワークやライブラリの学習から入る方が増えています。その後、必要に応じてHTML・CSSについて学んでいくという流れです。

HTMLからシンプルなページを作っていた我々の世代からすると面白いなと思います。これだけ開発環境が充実している時代なので、その方が効率が良いのは理解できます。

野口：カバーする技術領域の変遷も変わってきていますよね。Webフロントエンドという職種が確立する前は、RubyやPHPを活用してサーバーサイドでWebページのViewを返し、JavaScriptを使ってWebページの動きを作るというように、サーバー側とフロント側の両方を触ってWebアプリケーションを作るやり方がスタンダードでした。

その後、Backbone.jsやAngularJSなどの登場でMVCをフロントエンドで完結できるようになり、JavaScriptが担当する領域が増えたことで、独立した職種としてWebフロントエンドが確立されました。

また、Node.jsに代表されるようなサーバーサイドのJavaScript実行環境が整い、ReactやVue.jsを使って配信する HTML をサーバーで動的に構築する Server Side Rendering (SSR) を行えるようになったことで、更にリッチなユーザー体験を提供できるようになりました。同時に、Content Delivery Network (CDN) や Service Worker を活用したキャッシュ戦略の重要性も増したことで、Webフロントエンジニアがカバーする技術的範囲が広がってきていると思います。

原：たしかに技術範囲は広がってますね。作り方に関しても今はコンポーネント指向が浸透していますよね。大きいものを一気に作るのではなく、個々のコンポーネントやサービスを組み合わせていくような開発方法が増えています。

── Webフロントエンドエンジニアは今後どういうキャリアプランを立てればいいのでしょうか。

野口：範囲が広がってきた一方で、WebブラウザでUIを実現するという分野で、まだまだ深掘りできるところはあります。パフォーマンス、アクセシビリティ、リライアビリティなどのアプリケーションの品質向上や、ユーザーテストやデータ分析を通じたユーザー体験の向上など、直接ユーザーに接するフロントエンドだからこそ追究できる領域は多々あります。

また、ビルドやテスト、CI/CDといった開発体験と開発生産性の改善に関して深掘りしていく Frontend Ops と呼ばれる方向もあります。

いずれにせよ、Webフロントエンジニアの守備範囲が広がっているからこそ、特定の分野で専門性を発揮する必要性があるかもしれません。

原：フレームワークが品質をある程度担保してくれるので、自分が得意なことを突き詰めやすくなっていますよね。パフォーマンスが好きならパフォーマンスを、UIが好きならUIを突き詰められるというように。ライブラリやフレームワークそのものの改善を突き詰めていく道もあります。

── フレームワークの活用が前提な時代で、どのような視点やスタンスで得意分野を伸ばしていけば良いのでしょうか？

野口：プロダクトに特化したUXやパフォーマンスの最適化をする際「ユーザーにとって最適な状態とは何か？」の仮説を立て、かつそれを実装して解決に導ける技術力が求められると思います。まさに汎用的なフレームワークで代替できない、エンジニアとしての腕の見せどころだと思います。

原：例えば「Ameba News」や「ABEMA  TIMES」のようなニュースサイトの場合、トップページや記事一覧ページよりも記事ページのアクセスが飛びぬけているので、特有のプロダクト課題が生じてきます。ニュース系といっても、各プロダクトごとの回遊性の違いもあれば、記事の内容次第で特定記事にアクセスが集中するような構造もあります。

上記のサービスに対して、例えばReactを導入したとして、内包するプロダクト課題を解決するために、どう開発すれば良いのか？をフレームワークは教えてくれません。

野口：フレームワークによってスピーディにサービスを開発できる時代だからこそ「フレームワークを導入すれば大丈夫」とはいかないのが現状ですよね。

まさに「ABEMA」でも同じで、Webブラウザで動画を再生するのは一見簡単に思えるけれど、実は非常に難しいことなんですね。Webブラウザによって対応している動画の種類が違ったり、DRM（デジタル著作権管理）を適用する必要があるのにブラウザによってDRMの対応状況が違ったり。外部ディスプレイに繋ぐと再生できなくなるなんてこともあります。

また「ABEMA」には将棋のような長時間の番組があります。番組を何時間も再生し続けた時の安定性もブラウザによって違うので、それらをいかに制御していくのか、試行錯誤しながら探っていくのはサービスをやっていて難しさを感じるところです。

だからこそ、Webフロントエンジニアの腕の見せどころなんですよね。

── 採用や発信でもおもしろい取り組みをしていますね。

原：2022年12月に「PWA Night CONFERENCE 2022」（※注2）というイベントの基調講演に登壇しました。「未来が読みにくく変化が前提の職業なので、リスクを分散しつつ変化し続けよう。それを楽しもう。」というような話をしました。

※注2：PWAは「Progressive Web App」の略。WebサイトやWebアプリをネイティブアプリのように使えるようにする仕組みのこと