Webが日常に溶け込んだ新時代で、Webフロントエンドのキャリアの未来を考えてみる
Profile
-
原 一成 (ハラ カズナリ)
サイバーエージェント所属のテックリード、Web Developer。Amebaに関連する機能開発や設計、開発環境構築、アクセシビリティ、パフォーマンス面からの品質向上やデザインシステムの構築の傍ら、サイバーエージェントのDeveloper ExpertsとしてWebアプリケーションの発展に従事している。 -
野口 直寛 (ノグチ タダヒロ)
株式会社AbemaTV所属の Web エンジニア。Web Browser チームのプロダクト責任者・テックリードとして、アプリケーション全体の設計に携わりながら、信頼性、パフォーマンス、開発生産性の向上に力を入れている。また、Muddy Web や Web Speed Hackathon などの技術イベントの主催メンバーも務めている。
Webを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ブラウザでの動作を前提にしていたプログラムが、様々なデバイスやシーンでも動くようになってきましたよね。エッジコンピューティングはその事例です。
VRゴーグル等で楽しむメタバースでも、Webブラウザが3D空間上の一部として開きますよね。Webコンテンツの閲覧は、デスクトップやモバイルで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フロントエンドエンジニアは今後どういうキャリアプランを立てればいいのでしょうか。
野口:範囲が広がってきた一方で、WebブラウザでUIを実現するという分野で、まだまだ深掘りできるところはあります。パフォーマンス、アクセシビリティ、リライアビリティなどのアプリケーションの品質向上や、ユーザーテストやデータ分析を通じたユーザー体験の向上など、直接ユーザーに接するフロントエンドだからこそ追究できる領域は多々あります。
また、ビルドやテスト、CI/CDといった開発体験と開発生産性の改善に関して深掘りしていく Frontend Ops と呼ばれる方向もあります。
いずれにせよ、Webフロントエンジニアの守備範囲が広がっているからこそ、特定の分野で専門性を発揮する必要性があるかもしれません。
原:フレームワークが品質をある程度担保してくれるので、自分が得意なことを突き詰めやすくなっていますよね。パフォーマンスが好きならパフォーマンスを、UIが好きならUIを突き詰められるというように。ライブラリやフレームワークそのものの改善を突き詰めていく道もあります。
── フレームワークの活用が前提な時代で、どのような視点やスタンスで得意分野を伸ばしていけば良いのでしょうか?
野口:プロダクトに特化したUXやパフォーマンスの最適化をする際「ユーザーにとって最適な状態とは何か?」の仮説を立て、かつそれを実装して解決に導ける技術力が求められると思います。まさに汎用的なフレームワークで代替できない、エンジニアとしての腕の見せどころだと思います。
原:例えば「Ameba News」や「ABEMA TIMES」のようなニュースサイトの場合、トップページや記事一覧ページよりも記事ページのアクセスが飛びぬけているので、特有のプロダクト課題が生じてきます。ニュース系といっても、各プロダクトごとの回遊性の違いもあれば、記事の内容次第で特定記事にアクセスが集中するような構造もあります。
上記のサービスに対して、例えばReactを導入したとして、内包するプロダクト課題を解決するために、どう開発すれば良いのか?をフレームワークは教えてくれません。
野口:フレームワークによってスピーディにサービスを開発できる時代だからこそ「フレームワークを導入すれば大丈夫」とはいかないのが現状ですよね。
まさに「ABEMA」でも同じで、Webブラウザで動画を再生するのは一見簡単に思えるけれど、実は非常に難しいことなんですね。Webブラウザによって対応している動画の種類が違ったり、DRM(デジタル著作権管理)を適用する必要があるのにブラウザによってDRMの対応状況が違ったり。外部ディスプレイに繋ぐと再生できなくなるなんてこともあります。
また「ABEMA」には将棋のような長時間の番組があります。番組を何時間も再生し続けた時の安定性もブラウザによって違うので、それらをいかに制御していくのか、試行錯誤しながら探っていくのはサービスをやっていて難しさを感じるところです。
だからこそ、Webフロントエンジニアの腕の見せどころなんですよね。
ポッドキャストとWeb系ハッカソン
── 採用や発信でもおもしろい取り組みをしていますね。
原:2022年12月に「PWA Night CONFERENCE 2022」(※注2)というイベントの基調講演に登壇しました。「未来が読みにくく変化が前提の職業なので、リスクを分散しつつ変化し続けよう。それを楽しもう。」というような話をしました。
※注2:PWAは「Progressive Web App」の略。WebサイトやWebアプリをネイティブアプリのように使えるようにする仕組みのこと
── 野口:サイバーエージェントのWebフロントの対外的な技術発信については、Muddy Webという勉強会を開催しています。
それと並行して、もっと気軽にテーマを決めて雑談するような場として「Muddy Web Podcast」というPodcastも始めました。「サイバーエージェントのエンジニアはプロダクトの課題に対して、こんなふうに向き合っています」という話をしているので、身近に感じてもらえると嬉しいです。
原:課題に対して実際にどのように向き合っているのかをのぞける機会は貴重ですよね。カフェや居酒屋で技術絡みの雑談をしているような空気感が出せるといいかもしれないですね。カジュアルにラジオ感覚で聞いてほしい番組ですね。
野口:また「Web Speed Hackathon」という、「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」のイベントを開催しています。ISUCONのWebフロントエンド版というイメージです。次回の開催は2023年3月を予定していまして、connpassから参加登録できます。
もともとは学生向けの採用イベントとしてリモートで実施し、好評を博したので社内向けや一般向けイベントとしても開催するようになりました。今回は学生向けと一般向けを同時に開催したり、初めてオフラインの会場を設けるなど新たな試みにも挑戦しています。
先ほどお話しした Muddy Web Podcast の #2 では「これまでの作問者たちが語る!Web Speed Hackathonの舞台裏」と題してイベント開催の裏話をしているので、こちらもぜひ聴いてみていただきたいです。
また、#1ではサービス開始から数年経ったプロダクトのリリースフローについて、#3ではABEMAの試合データ機能で培ったWebView開発ノウハウについてお話ししています。こちらもぜひお聴きください。
オフィシャルブログを見る
記事ランキング
-
1
若手の成長は「抜擢」から。若手抜擢をシステム化する「強化指定社員セレクショ...
若手の成長は「抜擢」から。若手抜擢をシステム化する「強化指定社員セレクション会議」とは
若手の成長は「抜擢」から。若手抜擢をシステム化する「強化指...
-
2
XR研究所が追求する「社会がスマホの次にシフトする世界」ービジネスの種を育...
XR研究所が追求する「社会がスマホの次にシフトする世界」ービジネスの種を育てる秘密基地にー
XR研究所が追求する「社会がスマホの次にシフトする世界」ー...
-
3
「Abema Towers(アベマタワーズ)」へのアクセス・入館方法
「Abema Towers(アベマタワーズ)」へのアクセス・入館方法
「Abema Towers(アベマタワーズ)」へのアクセス・...
-
4
AIの発展をサイバーエージェントの競争力とするために
AIの発展をサイバーエージェントの競争力とするために
AIの発展をサイバーエージェントの競争力とするために
XR研究所が追求する「社会がスマホの次にシフトする世界」ービジネスの種を育てる秘密基地にー
当社には、特定の分野に抜きん出た知識とスキルを持ち、第一人者として実績を上げているエンジニアを選出する「Developer Experts制度」があります。その次世代版である「Next Experts」として選出したエンジニアは、各専門領域において培った知見をサイバーエージェントグループ全体に還元すべく、技術力の向上に努めています。
2018年に新卒入社し、数々のXR関連(※)のプロジェクトに関わり、現在はXR研究所の所長を務める岩崎は、Mixed Reality領域のNext Expertsも担当しています。XR研究所のミッションに「サイバーエージェント全体にXR技術を啓蒙し、新たな事業の種を育てる」を掲げる岩崎に、サイバーエージェントにおけるXR領域の現在地と、次世代の技術に対するチャレンジについて聞いてみました。
※ XR(extended reality、cross reality)は、現実世界と仮想世界を組み合わせ、新しい体験を実現する技術の総称です。AR(拡張現実)、MR(複合現実)、VR(仮想現実)などの先端技術を総称します。