2017年4月28日(金)に開催された、サイバーエージェント主催のWeb フロントエンド技術に関する勉強会「Frontrend Vol.9」

実は同イベントは開催7回目で一度終焉を迎え、約2年ぶりとなる2016年12月に第8回目として再開した経緯がありました。

 

今回はWeb Initiative Center テックリードの佐藤と新卒4年目の菅原にインタビュー。なぜ約2年ぶりに開催することになったのかそのきっかけや社内のフロントエンドエンジニアの位置づけの移り変わり、最近積極的に進めている対外的な取り組みについて、話を聞きました。

 

ahomu

佐藤 歩
技術本部Web Initiative Centerテックリード 兼 インターネットテレビ局「AbemaTV」Webフロントエンドエンジニア。2012年サイバーエージェント中途入社。
スマートフォン向けSNSサービスにてフロントエンド開発を担当した後、ニュースメディアのブラウザ版・Android版アプリの立ち上げに携わる。その後映像配信プラットフォーム「FRESH!」立ち上げを経て、AbemaTVに出向。横断的にWebプロダクトの品質を向上させ、チャレンジしやすい環境を推進すべく、2016年4月に「Web Initiative Center」を設立しテックリードに。

 

 

suga

菅原 良太
「Ameba」プラットフォーム Webフロントエンドエンジニア。2014年サイバーエージェント新卒入社。入社後はグループ会社でニュースメディアの立ち上げ、運用を担当したのち、2015年4月より現職。

 

 

 

 

 

長期的にWebのチャンスはまだまだあると思っている

 

――はじめに社内でのフロントエンドエンジニアの位置づけがどのように移り変わっていったのか、教えてください


佐藤:私がサイバーエージェントに入社した2012年頃は、世の中的にはHTML5やCSS3が登場してきて、ブラウザでリッチなものがこれからどんどん出てくるぞというタイミングでした。それまで一般的だったマークアップエンジニアから、JavaScriptも書けて手広く開発できるフロントエンドエンジニアに注目が移ってきたころですね。

 

サイバーエージェントもまさにブラウザ戦略を推し進めて、大量のコミュニティサービスを作っていた時代だったので、フロントエンドエンジニアも社内に多く、私たちにとっては良い時代でした(笑)

その頃提供していたコミュニティサービスはいわゆるガワネイティブというもので、カメラ機能や写真のフィルター機能だけネイティブアプリで提供し、その他はWebViewを用いていました。ソーシャルゲームもブラウザでの展開が圧倒的でしたね。これが2013,4年くらいまで続いていたのですが、その後フルネイティブの時代が訪れます。

 

Webブラウザでは当時実現できなかったリッチな機能が搭載されたフルネイティブアプリの開発が社内でも進められました。そのため、ネイティブアプリエンジニアの採用が強化されたのもこのタイミングです。フロントエンドからネイティブに転向した人も多くいたので、フロントエンドエンジニアが急激に少なくなりました。Webの新規サービスが少なくなったこともあって、既存サービスの運用が多く技術的なチャレンジが下火になっていましたね。

 

 

 

――直近のフロントエンドエンジニアの位置づけはどうですか?


佐藤:そうですね、人数も少ないですし依然として厳しい状況は続いていると思います。若手メンバーも多くはありません。

ただ、Web標準技術の発展やブラウザの進化によって、ネイティブアプリでなければできないということは解決されつつあるので、長期的に見てWebのチャンスはまだまだあると思っています。

 

 

ahomu2

 

 

――そういった中で2016年4月からWeb Initiative Centerを設立されましたね


佐藤:サイバーエージェントのWebプロダクト品質を横断的に向上できるように、またWeb技術を使ったチャレンジがしやすい環境をつくれるよう推進組織としてつくりました。

メンバーは私含め9名で、専任は1人だけ。メンバーは相互に連携しながらWebの品質向上に関する取り組みや、技術的なチャレンジを各現場で進めています。あとイベント運営などの盛り上げもですね。専任メンバーも各メディアサービスでパフォーマンスやアクセシビリティの改善が必要なところにスポットでジョインし、Web品質向上をファシリテートするような形で動いています。

 

 

 

 

――勉強会などの対外的な取り組みの移り変わりについても教えてください


佐藤:2012年頃からサイバーエージェント主催のフロントエンドエンジニア向け勉強会「Frontrend」を開催しています。

Vol.9を先日開催したのですが、そもそもの成り立ちは入社直後の2012年当時、社内のフロントエンドエンジニアで知見をもっと発信していこうという話になったこと。

不定期に開催していたのですが、発信する新しい話題が切れてきたタイミングで、2015年2月に「FRONTREND CONFERENCE THE FINAL」ということで一度区切りをつけました。一番の要因はやはり継続的な運営が大変になってきたことですね。

 

ただ昨年Web Initiative Centerが設立されたり、映像配信プラットフォーム「FRESH!」インターネットテレビ局「AbemaTV」といったWebの大規模プロダクトが出てきたこともあり、会社としても再度Web技術について訴求するべきだし、優秀なフロントエンドエンジニアに改めて興味をもってもらう必要が出てきたんです。

 

そういうわけで2016年12月にVol.8としてFrontrendを約2年ぶりに再開しました。まずは1年を目標に不定期で運営できればと思っています。好評いただけるようであれば、2年くらい続けられたら良いなと思いますね。

 

sugaahomu

 

菅原:2013年当時まだ私は内定者だったのですが、Frontrendには一参加者として参加していました。

2016年12月のVol.8から運営に携わっていますが、まさか運営することになるとは思わなかったです(笑)
運営に関わるきっかけは、Web Initiative Centerの青年部的な組織に佐藤から呼ばれまして、組織としてのブランディング活動やイベント運営をぜひ若手中心に推進してほしいと言われたこと。

Vol.9からは佐藤に登壇者への依頼をしてもらった以外は、基本的に若手中心で進めました。

 

日本経済新聞社、ヤフー株式会社と合同で2017年2月に開催した「Inside Frontend」の運営でばたばたしていたこともあって、Vol.9の開催は前回から4か月後の2017年4月末になりました。

個人的にもHTML周辺分野の話を聞きたいなと思っていたので、そういった登壇者のラインナップになりました。定員100名に対して、約180名の方々が募集してくださり嬉しかったです。開催後のアンケートを見ても参加者のみなさんから好評をいただけて嬉しく思います。

 

▼参加者にご協力いただいたアンケートの一部

- イケイケJSではなくこういう基礎から固める系はどんどんやってほしいですね

- マークアップはおそろかになりがちだったので、啓蒙する機会になりました。ありがとうございました。

- マークアップの基本の考え方を、改めて頭にたたきこめた。よかったです。

- 普段cssばかり書いててhtmlの知識がとまっていたので勉強になりました

 

佐藤:会場の都合上前回よりも定員を減らさざるを得なかったけど、HTMLっていう今のJavaScript偏重なトレンドとはかなり距離があるテーマのわりに、みなさんに満足いただけて良かったよね。普段できているつもりのHTMLでも深く掘り下げるとやはり色々な発見や気付きがあるみたいで、アンケートの反応もそういう声が多かった。

 

菅原:最近勉強会を運営していて思うのはテーマで人の集まり方が異なること。HTMLもフロントエンドのベースなので、そういった意味でアクセシビリティについても登壇してもらいました。アクセシビリティはトレンドになってきているので、毎回こうしたトレンド軸で開催していくのは面白いですよね。

 

佐藤:HTMLやアクセシビリティって昔から啓蒙している方々がいたけど、ようやく認知が広がったと思っていて。個人的にはもっとトレンドというか一般化してほしいですけどね。

 

 

 

 

個人、コミュニティ、企業の三者全てにとって有意義なカンファレンスを開催したくて

 

菅原:Frontrendは、フロントエンドエンジニアじゃなくてデザイナーの方々も多く申し込んでくださっているのが嬉しいですね。広義でフロントエンドに関わる人、ということでもっと増えたらと思っています。

 

私自身、就活していたときはデザイナー職だったのですが、内定者として当時内定者だけのプロジェクトにジョインしたときにフロントエンドエンジニアが誰もいない中で「来週このメディアサービスをリリースするから」と言われて(笑)まだ全然できていなかったのでどうしようと思ったのですが、そこからフロントエンドの開発も自分でやらないと間に合わないということで、勉強しながら開発を進めていきました。

始めたばかりの頃は右も左も分からない状況だったので、当時は開催が活発だったFrontrendに参加することで、まずは何を身に付けるべきで何を勉強すれば良いのかという道筋が学べました。

Frontrendがきっかけで何を学ぶべきか分かり、そこから自分で勉強して広げていくことができたので同じような境遇にいる人達のためにも、またこうやって復活しないかなと思っていたんです。

 

suga2

 

 

――先ほどお話に出た「Inside Frontend」についてはどのような経緯で開催に至ったのですか?


佐藤:Frontrendをお休みしている間に日本経済新聞社主催の「Frontend Meetup Tokyo」ヤフー株式会社主催の「SCRIPTY」といったイベントが開催されていて、フロントエンドに力をいれている企業がまだまだあるなと感じました。そこでぜひそれら企業のみなさんと共同で大きなカンファレンスができないかと思っていたんです。

日本で大きなフロントエンドカンファレンスはまだ数が少なくて、個人、コミュニティ、企業の三者全てにとって有意義なカンファレンスが主催できればと考えました。カンファレンスへの参加を通して個人が力をつけることができ、その結果コミュニティ全体も活性化するし、企業としても採用やブランディング目的を隠す必要のないモデルにできたら、と。

 

▼「Inside Frontend」イベント趣旨

・個人のリアルなノウハウの共有、情報交換
・コミュニティの活性化
・企業のブランディングやリクルーティング


個人やコミュニティの間に生まれる、より密度の高いコミュニケーションを促進し、国内の業界水準を高める一助になることを目的とします。そのために Inside では、個別具体性の高いケーススタディや、これからの Web に関する深い議論の呼び水になるような問題提起を中心的なテーマとします。

企業は自らのブランディングや人材のリクルーティングなどを目的としつつ、Web 系コミュニティとの関わり方を互いに創造できるカンファレンスを目指します。営利、非営利を問わず、関係者の合意の元であらゆるコミュニケーションの可能性を模索します。

 

登壇者の方々には、Web技術やライブラリに関するベーシックな話はせずに、ものすごく最先端かもしくは泥臭いケーススタディの話をしてほしいとお伝えしました。特にケーススタディに重きを置きたかったんです。

また、セッションとセッションの間にAMA(Ask Me Anything)ブースを設けました。ブースでの質疑応答や議論を通して、参加者同士の交流を図る目的です。結果、個々のケーススタディに対してつっこんだ議論に発展させることができたと思います。

 

 

菅原:約300名規模のカンファレンスの運営は初めてでしたが、会場の熱量がすごかったですね。フロントエンドに関心のある人たちがこんなに集まるんだと驚きました。

InsideFrontendの運営は、サイバーエージェントサイドに関しては佐藤中心に進めていたのですが、運営ノウハウは先日のFrontrendにも活用させてもらいました。

 

 

佐藤:Vol.8から2回運営に入ってくれたので、もうほとんどノウハウは分かったんじゃないかな。特にVol.9なんて基本ポイ投げでお任せしてしまったし(笑)

最初はどれくらいの温度感でやってくれる分からなかったのですが、気付いたら主体性を持ってもりもり進めてくれていたので助かりました。あえてもっと求めるとすれば、Vol.10はぜひ企画からお願いしたいですね。

 

sugaahomu2

 

菅原:社内の知見を共有する場にもなるので、また知見が集まってきたころにやれたらと思っています。今一番聞きたいのは、先日ブログがバズった「FRESH!」のWebパフォーマンス改善について。私が担当している「Ameba」プラットフォームで今後やっていきたいと思っていることにも関連しているので、非常に興味がありますね。

 

 

佐藤:Vol.10は8月か9月くらいにやれたらいいね。

どんどんエンジニアが多くなってきて「FRESH!」の事例もブログで知ったくらいなので、勉強会が社内共有の場としてもワークすれば嬉しいです。

 

 

 

 

――社内でもっとこういう取り組みを行いたいという展望はありますか?


菅原:個人的には、社外よりまず社内のコミュニティですね。メディア事業の開発に携わるフロントエンドエンジニアが集まっているSlackチャンネルがあるのですが、その中でもっと気軽に飲みに誘えるような関係性が作れれば良いなと思っています。

勉強会だけでなく、ふらっと飲みに行って、そこでちょろっとでも仕事の情報交換ができれば、と。

 

 

佐藤:案外他プロジェクトのエンジニアに会う機会って少ないよね。

 

 

菅原:そうなんですよね、かといって無理やり会わされるのも違うし、いいかんじで誘い合えるようなゆるいコミュニティができたら嬉しいです。

 

 

佐藤:Web Initiative Centerでも昨年2016年は各サービスの品質改善と社内外のコミュニティ活動をもっと活発にやっていこう、という点をビジョンに入れていました。

たとえば、キャリア採用のメンバーが入社した際には少し多めに10-15名くらいの歓迎会を開催して、帰るときまでに全員と話すように席替えをしたりとか。横のつながりは大切ですよね。

社内のフロントエンドエンジニアの中から半期で勝手にMVPを決めようかとか、もっと様々なプロジェクトを超えてつながりをつくる機会があればと思っています。関係性の構築についてはまだまだやれることがあると思っているし、ずっと継続的にやり続けるしかないですね。

 

あとは社内の勉強会がもっと自然発生的に開催できるといいなと。気軽に、勉強会やりましょうよっていう声があちこち出てくると嬉しいです。いつも同じ人が提案することも多いと思いますが、誰かが言い出した結果勉強会したいっていうフォロワーがたくさんついてくれば、誰が言い出したかって関係ないですしね。

 

 

sugaahomu3

 

 

菅原:社内の勉強会でいうと、プロジェクト単位では活発にやっている印象があります。

 

 

佐藤:AbemaTVは毎週水曜日に勉強会やってたりしたよね。ただチーム内で閉じるのはもったいないかなという思いがあって、もっとチームを横断した活動が多くなると良いな、と。チームメンバーとは毎日顔合わせてますしね(笑)

人を集めること自体が億劫になってはいけないですし、気軽に勉強会を開催できる手段が多いほうが良い。チームを横断して集まって、あえてどんどん無駄な話をしていきたいです。

 

 

菅原:たしかに普段やっている業務だけだと一辺倒になってしまうので、それ以外の領域について知る機会は大切だと思います。

 

 

 

 

――最後に、今後サイバーエージェントからどのようにフロントエンドコミュニティを盛り上げていきたいか教えてください


佐藤:イベントに協賛したり、対外的な勉強会を開催するのは既定路線で、技術的なノウハウをもっとオープンにしていきたいと考えています。

さきほどInside Frontendの際にケーススタディにこだわったというお話をしましたが、現場の事例が個別具体性が高かったとしてもどんどん出していきたいと思っていて。それら事例を通して、数あるWeb系企業の中でもWeb技術にコミットするならサイバーエージェントが一番、と思っていただけるような位置付けにしていきたいです。

たとえば、なぜサイバーエージェントでアクセシビリティの取り組みができるかというと、それが評価される土壌が整っているからです。アメブロのシステム改善についても、普通ではなかなか事業判断が難しいんじゃないかと思うんですよね。

そういった意味でWebをやりたいならサイバーエージェントが一番得だというのを名実共に実現していきたいですね。

 

 

菅原:私も、サイバーエージェントに入ればWebに真摯に向き合える、Webでおもしろいことができるんだという社外的な魅力をもっと伝えられればと思います。

そのためにはまずはサイバーエージェントにいるからWebで楽しいことができているんだという環境を強化していきたいと考えています。