技術・デザイン

となりの会社とテックトーク

ヤフーとサイバーエージェントでWebフロントエンドをただ語ってみた

今年の5月、サイバーエージェントとヤフーはWebフロントエンドの現場とこれからをつなぐカンファレンス「Inside Frontend」を共催しました。

「Inside Frontend」は2017年より年に1度のペースで開催されているカンファレンスで、スタート時から両社がオーガナイザーとして関わっています。

そのほかにもヤフーが主催する、Webフロントエンドエンジニア向け勉強会の「Bonfire Frontend」とサイバーエージェントが運営するWebフロントエンドエンジニア向けセミナー「Frontrend」をコラボさせた「Frontrend × Bonfire Frontend」を開催するなど、技術を軸に長いお付き合いをさせていただいています。

今日はそんな2社のフロントエンドを牽引する2人のエンジニアに、「Webフロントエンドエンジニア」の過去と未来について、語ってもらいました。

Profile

  • 森本 恭平
    ヤフー株式会社
    フロントエンドエンジニア

    Webサービス会社にて制作業務を経て、2014年ヤフー株式会社に入社。現在は広告管理画面のWebフロントエンド開発を主に、全社のWebフロントエンド技術の取りまとめやデザインシステム構築などに携わっている。著書に、『現場のプロが本気で教える HTML/CSSデザイン講義』(共著)など。

  • 佐藤 歩
    株式会社サイバーエージェント
    CyberAgent Advanced Technology Studio マネージャー / Web ディベロッパー

    2012年入社。ウェブサービスのフロントエンジニアとして、スマホ向けSNSサービスやAbemaTVの開発などに従事。2017年に ヤフー、日本経済新聞社と共同で国内有数の Web フロントエンド系カンファレンスとなる 「Inside Frontend」 を初開催する。以後、これまで全3回の開催ではオーガナイザーとしてイベント運営全般に参画。

ヤフーとサイバーエージェント それぞれが見た隣の会社のWebフロント

Frontrendが満席になるようにWebのフロントエンドコミュニティは活況です。一方、Webはインターネット黎明期からあったプラットフォームでもあります。なぜ今 Webフロントエンドが活況なんでしょうか。

森本氏(以下、敬称略):Webフロントエンドと呼ばれる技術分野はインターネット黎明期からありました。ただ当時はWeb制作会社の業務の延長線上にある認識だったと思います。

Webフロントエンドの勉強会も以前からありましたが、HTMLやCSS, Photoshopなどを含めた「Webデザイン全般」というくくりが多く、今のように「JavaScriptだけのカンファレンス」や「HTMLとCSSだけの勉強会」のような、絞り込んで掘り下げる形式の会が開催されるようになったのは最近な気がします。

佐藤:求められるものがだいぶ変わってきましたよね。2010年ごろはWebデザイナーと呼ばれる人がいち職能としてマークアップを書いていましたし。なにしろ私が2012年にサイバーエージェントに入社した時の職種もマークアップエンジニアでしたから。

森本:私もヤフーに入社時はデザイナーという職種カテゴリーでした。たしかその頃はまだ、専門職としてJavaScriptをやるという考え方も、それが可能な環境もなかったと思います。2015年くらいの時期でも、Webフロントエンドという技術領域はまだしっかり確立されていませんでしたよね。

佐藤:そう思います。Webフロントエンドのイベントを開催している会社自体も少なく、手探りの中、ヤフーさんと日本経済新聞社さんとサイバーエージェントでは、各自でWebフロントエンドのイベントを開催していましたね。そこで知り合った森本さんとそれ以降も親しくさせてもらっています。

―今まで手掛けてきたサービスで、Webフロントエンドについて印象に残っているものはありますか?

森本:ヤフーは4年程前にスマホのトップをリニューアルしました。技術的な背景としてReactを導入して、それまでリストで表示されていたニュースが無限スクロールに変わりました。このリニューアルが完了した時は「頑張ってトレンドに追いついたな」と感慨深かったです。

ヤフーは非常に幅広いお客さまにお使いいただいていることもあり、最新のものを取り入れるというよりは成熟した技術を採用していく傾向があります。技術的には凄い最先端というわけではありませんでしたが、個人的には大きくモダン化できた事例だなと思っています。
そして、このリニューアル以降、他のサービスがReactを採用しやすくなった気がします。

佐藤:技術選定はどういう風に決めていくんですか?

森本:担当者の技術的な趣味という部分はあると思います。いったん趣味で決めて、そこから実際に採用可能なのかをきちんと技術検証した上で、段階的にプロダクトに導入するといった流れです。

佐藤:なるほど、参考になります。サイバーエージェントも趣味で始めるところは同じなのですが、そのまま突っ走ってしまうケースが多いんですよね(笑)。

森本:いやいや、それだけじゃないですよね(笑)。

佐藤:はい、もちろん。大切にしているのは、新しい技術チャレンジという要素を取り入れつつ、その技術を導入することでサービスやユーザーに価値を提供できる点は、常に意識しています。

例えば「FRESH!」(現「FRESH LIVE」)ではクライアントサイドと同じコードでサーバーサイドレンダリングする、いわゆるIsomorphicなアーキテクチャをReactで導入しました。

クライアントとサーバーに同じコードを用いてビューを構成するこの仕組みは2014年~15年当時ではかなりエッジなほうだったと思いますが、初期表示が速い上にSPA(Single Page Application)の特性を活かせるので画面遷移も速いというのが導入した理由でした。

2018年頃に作った「SUPERCHOICE」では、FastlyというCDNベンダーの機能を使って、エッジキャッシュ前提でWebアプリケーションのアーキテクチャを可用性や性能の面で洗練させることを試みたりもしました。

ふりかえるとWebフロント勢の技術的趣味から始まり、サービスのクオリティ向上につなげるカルチャーは昔からあった気がします。なにしろ私が入社した2012年当時も、フルSPAでメディアサービスを作るといったこともやっていたりしていました。

森本:あぁ、それは共感します。私も入社してすぐの頃、恐らくまだSPAのサービスがうちの会社に1つもなかった時に、AngularJSを使ってサービスをSPAにリニューアルしたりしていました。

広告の管理画面リニューアル時にjQueryからReactに切り替えたというものでしたが、実はそれに関しては結構「FRESH!」の影響を受けていまして。本当は同じところまでやりたかったんですが、色々な理由からクライアント側だけReactを導入しました。

佐藤:そうなんですか?どんな大人な判断で踏みとどまったのかは気になりますが、それは嬉しいなぁ(笑)

森本:最近だと全社的にTypeScriptを推し進めていて、プロジェクトに必ずTypeScriptを入れる、またサーバー側のエンジニアにもTypeScriptの使用を推奨していて、両方とも同じ言語で書くようにということを提案してます。僕も佐藤さんと同じで、事業にとってメリットがあるという大前提は守った上で、常に新しい要素を入れるようにしています。

― お互いの会社のWebフロント技術について、どんな印象を抱いていますか?

佐藤:ヤフーさんのWebの技術は「やるべきことを全部ちゃんとやっている」というイメージがあります。社会的責任が大きい事業をされていて、そこに対して真摯に向き合った結果、やるべきことがしっかりアウトプットとしてもできているということは強く感じますね。

以前社内でWebフロントエンドのてこ入れをする時に、キックオフミーティングで「目指すべき存在としてのベンチマークはどこだろう」という雑談をしたのですが「国内なら、まずはやはりヤフーさんだろう」という結論になりました。そういう意味では昔から強く意識していますね。実は背中を追いかけてたんです(笑)。

森本:そういってもらえるとすごく嬉しいです。サイバーエージェントさんの印象ですが、これだけ大きい会社なのにどうしてあんなにチャレンジできるんだろうといつも思っています。うちの場合は標準化されそうな技術等でないとなかなか承認されなかったりするのですが、サイバーエージェントはβ版の技術でもどんどん入れていますよね。

佐藤:私個人としては、β版やα版の技術をリスクをとって導入していく若い人たちを見ると、サイバーエージェントっぽいカルチャーだなぁと背中を押してあげたくなる一方、さすがにチャレンジしすぎだろと口を出したくなる狭間で揺れていたりします(笑)。

1つ言えるのは、事業的な性質の違いもあると思います。抱えているユーザー規模や求められる信頼性による違いから、リスクヘッジの基準点が全然違うところにあるのかなと思います。

マスメディアを目指している「AbemaTV」などは、災害時の情報収集として利用されるシーンもあるため、だいぶ慎重になっています。

「Inside Frontend」が描く職種のグラデーションと、立ち位置の再確認

―ヤフーとサイバーエージェントが共同で開催している「Inside Frontend」について聞かせください。今年で3回目を開催しましたが、回を経るごとにどう変わっていますか?

森本:2017年に「Inside Frontend」の初回を開催した時は、参加者も多くお祭り感がありました。その当時は「フロントエンド」という名を冠した勉強会自体が少なかったんです。

そういう意味ではフロントエンドとして初と言えるような大きい勉強会だったこともあり、だからこそ自分たちはフロントエンドなのかも?と思っている人たちが遊びに来てくれたのかなと思います。

2回目はそれが少し落ち着いて、とりあえず大きいイベントがあるから申し込んでおこうという感じでしたね。3回目は有料になったこともあり、これまで以上に参加者の姿勢が積極的だったように思います。

佐藤:「Inside Frontend」は「Ask Me Anything」みたいな企画があるように、一方的に先生がお話をする場というよりは双方向でコミュニケーションを取りましょうという考え方です。3回目は有料にしたことで特に積極的な人が集まった気がしますね。

Webフロントエンド技術というカテゴリーが広過ぎることもあるのか、改めて振り返ってみるとWeb技術の話はもちろんですが、Webフロントエンドという領域そのものや、業種や職種、働き方について話されることも多かったですね。

理由の1つとしては、「Reactについて」みたいな一般的な技術の話ではなく、ケーススタディとしてなるべく泥臭い現場の話をしてくれとスピーカーにお願いしているということもあるかもしれません。

現場の話をしていると、自然と「僕らWebフロントエンジニアとは」という話になっていくんです。そういうトピックが多いところがイベントとしては珍しくもあり、そこに価値を見出して来てくれている人は結構いるんじゃないかなと思っています。

―参加された方たちの動機としてはどういったものが多かったのですか?

森本:例えばヤフーにはWebフロントエンドという職種はありません。エンジニアとデザイナーという分け方なので。そう考えるとWebフロントエンド領域で仕事をしている人たちが、自分たちは一体何なのかというのを求めているところはあると思います。それで他者の事例を聞いて、ああ、自分たちはWebフロントエンドのエンジニアなんだという。

もう1つは、例えばアプリエンジニアはアプリという区切りが分かりやすいんですが、Webの場合はCSSを綺麗にレイアウトできる人もフロントエンドだし、JavaScriptをゴリゴリかける人もフロントエンドになる。その辺りがはっきり分かれておらず、グラデーションになっていて分かりにくいんですよね。

マークアップやCSSが得意な人も、デザイン系が強い人も、JSに強い人も全て一緒くたにWebフロントエンドと呼ばれていますが、そのグラデーションの中で自分はどこにいるのかというのが見えてくるのも面白いところかと思います。

佐藤:職種のグラデーションというのはわかりやすいですね。そうなんですよね。

森本:だから「Inside Frontend」でも、必ずセッションのどこかはデザイン系の話を中心にするといったことは意図的にやっています。グラデーションがある世界をどうやって1個にパッケージングするのかというバランスは考えていますね。

佐藤:JavaScriptの話だけじゃないぞと。みんなJavaScriptが大好きだから、放っておくとJavaScriptの話ばかりになってしまうので。
 

「脱フレームワーク」の先にある技術の展望

―今後やりたいこと、注力したいことは何かありますか。

佐藤:個人的には「脱フレームワーク」してみたいなというのが1個あります。

というのも、ReactやAngularやVueをフル活用して難しいものを作ろうとするのは、場合によってはTooMuchになることがあると思うんです。例えるなら、郊外に質素な一軒家を建てるつもりが、いつの間にかタワーマンションを建てる構想になっていたという形ではなく、適切な労力の投下量でメディアサービスを量産できるような状態が理想ですよね。

昔はJavaでHTMLテンプレートを書いて、その上にjQueryを載せるのが恐らく適切な労力だったと思います。それはそれで辛さや苦しさもあったからこそWebフロントは進歩したわけですが、ちょっと進歩し過ぎた感もあるんです。

森本:進歩し過ぎている感は確かにありますね。

佐藤:なのでそこを力加減を調整しつつ、ちょうど良いポイントを見つけ出したい。もちろん、技術的なチャレンジを奪い去ってしまうとエンジニアのDeveloper Experienceが下がってしまうので、そこは他の部分で補填する必要がありますが。

例えばReactを抜いたなら、今ならPWA(Progressive Web Apps)などのWeb系の新しい要素技術があるのでそちらをしっかりやるとか。アクセシビリティやパフォーマンスといった品質面を突き詰めてやるとか。

Reactだけが技術チャレンジじゃないよというところと合わせて、適切な形を作っていきたいなというのが自分の中で最近のWebテーマです。

私がそういうことを言うとチームのみんなは「文明を後退させるんですか」と不思議そうな顔をしますが「文明を捨てるわけではなくてエコの時代なんだよ」と言うわけですが。

もちろん難しいですけれどね。現実として今の世代になってくるとReactでSSRでSPA以外の作り方をメンバーが分からないという問題はありますし。それ以前を経験している我々ですら、どうやって作っていたっけっと記憶喪失になっている部分もあるので(笑)。

森本:僕も少し似たようなことを考えています。「フレームワーク周りはもういい」と。ReactがいいのかVueがいいのかみたいな話はもういい。そこではなくそれ以降の話を、まずフレームワークを使って作った後を考えようという話は良くしています。

この数年フレームワークにずっと振り回されてきて、最近ようやく落ち着いてきて新しいものがたくさん出てくるようなこともなくなってきました。だからそれ以外のことをちゃんとやろうというのが今思っていることです。

―サーバーサイドなど他の領域でも脱フレームワークの流れになっているのですか?

佐藤:どうなんでしょう。Webフロントは流れが早かったようにも思いますが、色々なものが一斉に出てきたからこそ、余計にみんなも過剰に関心を示した面はあるかなと思います。

じゃあサーバーサイドのフレームワークの流れが遅いかと言えば、別にそんなことはないと思うんです。言語が多いぶん種類もたくさん出るし。その中で何かしらの流行りはあっても、社内を見ているとサーバーサイドのほうが冷静に受け止めているように思います。

森本:Webフロントは特にこの2、3年が祭りだった感じはします。

佐藤:そうですね、早いというよりにぎやかでしたね。

森本:にぎやか。確かにそうですね。

結局のところ、僕らが最終的に提供するのはDOMなんですが、その辺りが伝わっていないという思いはあります。Reactをどう使うかという話は食い付きが良くても、それがレンダリングされた後のDOMがどうなっているかはあまり注目してくれない。

佐藤:それはありますね。

森本:例えば服を作る人は作る機械だけを見ているわけではなく、布を見たりもしますよね。そういう実際提供されるものを見ない人も増えてしまったと思っています。もう少しDOMを大切にしたいというのは強く思っています。

佐藤:DOMは本質を知るという意味でとても大事ですよね。

Web氷河期、Webお祭り期を経た後に、何がいちばん大切だったのか

―佐藤さんがWIC(※)という組織を立ち上げた時、Web氷河期みたいな時代の後でようやくWebという領域をちゃんとやれるようになったと仰っていたのが3、4年前のことでした。その後にWebがお祭り期だったと考えると、悪くなかったのではないでしょうか。

※:Webフロントエンドを全社で繋ぎたい! ~サイバーエージェントのWeb Initiative Centerとは?~

森本:そうですね、良かったと思います。まず、この数年でエディター周りは非常に発展しました。この数年でJavaScriptを書く環境は大きく変わりましたし、品質という意味でもテストがやりやすくなった。テストが前提でJavaScriptが考えられていたりもしているので、JavaScriptというもの自体がどんどん発展したところはあると思います。

佐藤:2010~2012年よりも前、Webフロントエンド以前の業務アプリケーションの現場ではクライアントサイド開発のノウハウとして、もちろんテスト等もしていただろうし、色々な設計論もすでに持っていたとは思うのですが、他の領域と比べるとWebフロントエンドはその辺りが未成熟な業界でした。
そういう意味ではこの数年のお祭り騒ぎもそうだし、Webアプリケーションというものが見直され始めたあたりの一連の流れで、てんやわんやしながらもだいぶ水準が高まったところはあると思います。

森本:プログラミング言語として追いついたという感じはありますね。

佐藤:「テスト難しいよね」とか「書けないよね」とかほんの数年前まで言っていたのに、最近は案外みんなちゃんと書いている。ああ、この業界も書くようになったなと。

そうやってにぎやかになって追い付いて、良い感じになってきたけれども、その揺り戻しみたいなものが今後あるんじゃないかと勝手に思っているんです。その時にライブラリの話だけしているままだと、先が見えなくなったりすることがあるんじゃないかと。それこそさっきのDOMじゃないけど、本質的なところも大切だと思います。

―Webフロントにおける本質的な部分とはなんでしょうか。

佐藤:サイバーエージェントでは品質です。パフォーマンスやセキュリティ、アクセシビリティといったユーザーに提供する上で備えておかなければならないスペックの部分をきちんと作りましょうという感じです。

あとはデザインなどの領域において、ユーザー体験というところをちゃんと確保できているのか、そういうところにも気を配りましょうと。

森本:作りたいものに注目することは重要ですよね。この数年の自分の反省も含めてですが。「絶対にReactを入れたい」というような恣意的なところがあったなと。

佐藤:私も身に覚えはあります(笑)。

森本:フレームワークに踊らされていたところがあったかなと。アクセシビリティ等、いま佐藤さんが仰ったようなユーザーに提供する価値みたいな部分をいかに上げていくかということをより考えていく必要はあると思います。

佐藤:ユーザーに最終的にどんな体験を届けられるかを考えるのは大事ですよね。それがアクセシビリティなのかデザインなのかレンダリングの速さなのか軸はありますが。

森本:どんなアーキテクチャやフレームワークを導入したとしても、我々は最終的にDOMというかたちでブラウザを通じてユーザーにコンテンツを提供するわけですから、ユーザーが感じる体験を大切にしたいですよね。

佐藤:そうですね。まさしくDOMにはじまりDOMに終わると。

オフィシャルブログを見る

Page Top