linotice

linotice

2022.02.07

第11代Webフロントエンド黒帯が語る──私たちはこうして鍛えられ、エキスパートになった

インタビュイーの伊藤と浜田が並んで居座っている様子の写真
ヤフーでは、エンジニアとデザイナーの突出した知識とスキルを持つ優秀な人財を称賛し、新たな活躍の場を提供するために「黒帯制度」を設けています。2021年度第11代の黒帯に任命された黒帯をインタビューする本シリーズ。第2回の本記事では、Webフロントエンド黒帯の伊藤康太と浜田真成に語ってもらいました。

プロフィール

伊藤のプロフィール画像
伊藤 康太
Webフロントエンド 第11代黒帯
CTO室 アプリ統括部 Webフロント技術室
浜田のプロフィール画像
浜田 真成
Webフロントエンド 第11代黒帯
COOメディア統括本部 メディア開発本部 開発9部 開発1 リーダー

全社のWebフロント底上げや新技術の導入を支援

──まずは、入社後にどのような経緯で、Webフロントエンド技術のエキスパートとなり、黒帯に任命されたのかを聞かせてください。

伊藤の顔画像

私がWeb技術にはじめて触れたのは、実はヤフーに入社してからなのです。PHPやJavaScriptから勉強を始めました。最初の配属先では、社内で使うチャットシステムを開発していたのですが、その過程でNode.jsを使うようになり、自分なりにスキルを磨いてきました。
ヤフーのWebフロントエンド開発において、Node.jsは重要な技術です。ヤフーのような大量トラフィックのあるサービス事業者でNode.jsをここまで活用している企業は少ないのではないでしょうか。社内のNode.jsのエキスパートたちがNode.jsについて相談に乗るサポートチームができ、私も情報システムの仕事をしながら、兼務でそのチームにも携わるようになりました。
さらに、社内サポート活動を「Yahoo! JAPAN Tech Blog」に書き、ヤフーのテクノロジーを発表するイベント「Yahoo! JAPAN Tech Conference」にも登壇するようになりました。社外の技術カンファレンスに登壇したりしています。
黒帯エンジニアたちに少しでも近づきたいと思い、3年前に黒帯の面接を受けました。第9代よりWebフロント黒帯の肩書をいただき、いまも継続して黒帯を拝命しています。現在は、CTO室直下のWebフロント技術室で、全社的・横断的なWebフロントエンドの開発やサポートを担当しています。基本的には、社内の技術の底上げや新しい技術の導入を支援する業務が多いですね。

伊藤のトーク中画像
▲CTO室 アプリ統括部 Webフロント技術室 伊藤 康太

「GYAO!」での経験を生かし、Webパフォーマンスの改善へ

浜田の顔画像

もともとはグラフィックデザイナー志望でしたが、途中でWebエンジニアを目指すようになり、Webアプリを自作するようになりました。エンジニアとしては変わり種ですが、デザインの知識が多少なりともあることは、いまでも自分の強みになっていると思います。ヤフー入社後は、一貫してコンシュマー向けのサービス領域に関わっています。
最初に担当したのは、現在も私の主務である動画配信サービス「GYAO!」です。動画配信の根幹技術を学び、ネイティブアプリやWebアプリの開発、さらにバックエンドの技術開発にも関わりました。
iOSアプリの開発ではSwiftという言語に触れたことで、言語仕様のモダンなところにひかれました。その後は、「Yahoo!映画」「Yahoo!テレビ」のサービス刷新などにも関わっています。
サービスを運用する開発ではなく、混沌とした業務要件をひも解いて、0から作り直す業務を多く担当してきました。
こうした経験を経て、次第に自分のエンジニアとしてのテーマが、Webサービス全体のパフォーマンス改善に絞られました。やがてその知見を広く共有したいという思いから、ヤフーの技術カンファレンス「Yahoo! JAPAN Tech Conference」や社内勉強会に登壇するようになりました。

浜田のトーク中画像
▲COOメディア統括本部 メディア開発本部 開発9部 開発1 リーダー 浜田 真成
浜田の顔画像

Webアプリをよりスマホなどのネイティブアプリに近づける技術「PWA(Progressive Web Apps)」にも関心があって、「PWA Night」というカンファレンスで、GYAO!トップページの表示パフォーマンスの改善などをテーマにスピーチしたこともあります。いまでも年に数回は何らかの形で技術イベントに関わっています。
ほかにも「WEB+DB PRESS」という技術誌でStorybook、HeadlessCMSなどの技術を紹介しています。
黒帯になったきっかけは、兼務で所属しているWebフロント技術室で伊藤さんらと一緒に進めたWebパフォーマンスの改善に向けた取り組みを、社内で高く評価してもらったことですね。2020年には私たちのチームが「ヤフースーパースター賞」という社内表彰を受けました。こうした社内・社外での活動が評価されて、黒帯タイトルを拝命できたと考えています。

──Webフロント技術室は、CTO直下のテクノロジー支援部隊。Webフロントエンドのエキスパートが、さまざまな部署から集まり、全社的な取り組みを行っている組織ですね。
なぜ、このチームに加わりたいと思ったのでしょうか。


浜田の顔画像

ヤフーに入ったからには「GYAO!」だけではなくて、いろいろなところで自分の能力を使ってみたいなと思いました。そこで上司に相談して、兼務の形で参加させてもらったのです。

浜田のトーク中画像

ヤフーにおいてNode.jsサポートチームが果たした役割

──伊藤さんは、Node.jsサポートチームではどのような活動をしてきたのでしょうか。

伊藤の顔画像

ヤフーでは米国のYahoo! Inc.からの流れで、国内企業としてはかなり早い段階でNode.jsを使っていました。しかし、それがかなり一企業向けにカスタム化されたもので、純粋なOSSとしてのNode.jsはほとんど使われておらず、ましてやいまのように社内の標準言語ではなかったのですね。
ただ、今後はフロントエンドでのNode.jsの活用が進むだろう、業界の標準になるだろうという観測はありました。そのためにはOSSとしてのNode.jsを採用したほうがいいわけです。また、これからのWebのフロントエンドには様々要因はありますが、PHP+JavaScriptという組み合せより、Node.jsを採用する方がいいという声もありました。
そこで、まずはNode.jsを社内に広げるために、先輩や同期を集めてNode.jsサポートチームを作りました。Node.jsのサポートを行いながら、フロントエンド領域を強化することで、会社の技術全体の底上げにつなげていきたい。それが動機ですね。
フロントエンドをNode.jsで書き替えるプロジェクトが進んでいくなかで、Node.jsサポートチームは、その過程で発生する課題を「どんなことでもいいからどんどん質問してください」と発信しながら、サポートをしてきました。
技術コンバートの研修会の資料を作ったり、ハンズオン形式で知識ゼロからWebアプリを作るところまでをやってみる講習会を開いたり、いろいろチャレンジしました。そうした活動や実際にフロントエンドにとってNode.jsが不可分になってきた時世もあり、現在ではNode.jsがヤフーの標準言語に指定されています。

伊藤のトーク中画像

「大津塾」で学んだすべてを、黒帯として後進に伝えたい

──Node.jsの普及支援活動を始めたのは、伊藤さんがまだ入社3~4年目の頃ですよね。社内の標準言語を変えるという重責を、伊藤さんのような若手社員が担うことができたのはヤフーならではですね。そこまでの成長を促した背景には厳しい特訓があったと聞いています。

伊藤の顔画像

はい。第7代から10代まで4年にわたってネットワーク・セキュリティの黒帯を務め、Node.jsのコミッターとしても活動している、Node.jsの世界では知らない人がいないほどのスペシャリストである大津繁樹さんが、2016年から2018年にかけて主宰した「Node Core API勉強会」に参加したのです。同期の間では通称「大津道場」と呼ばれているのですが、ここでの経験があったからこそ、いまの自分がいると思えるぐらい、それはとてつもなく厳しい(笑)修業の場でした。
全社のNode.jsエンジニアをサポートするからには、サポートチームは全員、Node.jsのコアのコードが読めなければならないというのが大津さんの考え方です。そこで基本となるAPIモジュールを選んで、そのドキュメントやコードを1行ずつ読んでいく輪読会が始まりました。
単に読むだけの輪読会ではありません。「このAPIはこういう挙動をします」という説明だけではなく、そのAPIのサンプルコードを書き、さらにそれをテストするコードも書けないといけない。1行を説明するのに、その何十倍ものコードを書かなくてはならないというものでした。
一番難しかったのは、TLSやcryptoという暗号化モジュールを読んだ時でしたね。大津さんの専門分野であること、さらには大津さん本人が書いたコードなどもあり、本人の目の前でその解説をしなければならない。曖昧なことを言ったら、すぐにダメ出しです。いつも冷や汗をかきながら、たった4行を解読するのに、3カ月かかったこともありました。

浜田のトーク中画像
伊藤の顔画像

ただ一方通行で教えるのではなく、塾生に考えさせ、勉強させる。「一次情報ではないブログの記事を参照するな」「ドキュメントが正解で、次にコードが正解だ。それでも足りなければ、JavaScriptの仕様書そのものを参照すべし」ということを、口酸っぱく言われました。
それで私もソースコードを大量に読む習慣がついたし、技術の幅が広がったと思います。Node.jsだけでなく、httpを実装するとどうなるのかという情報学の基礎もあらためて学ぶことができました
私が黒帯を目指したのも、大津さんの薫陶(くんとう)を受け、優秀なメンバーと一緒にやってきたのだから、自分も黒帯になれるはずだという自負。そして、大津さんに教えていただいたことを、自分の内に留めておくのではなく、今度は自分がほかの人に伝えなければならないという使命感からでした。どこまで大津さんや優秀なメンバーたちに近づけるかはわかりませんが、これからもその努力は続けていきたいですね。

優れたコードを書くには「考え方」が大切

──とても心に響くお話ですね。浜田さんは、自分が技術者として飛躍できたきっかけのようなものはありますか。

浜田の顔画像

入社した頃は、上司からコードレビューで指摘を受けることが多くありました。「こう書いたほうがわかりやすいと思うのに、なんでだろう?」と疑問に思っていました。しかし当時書いたコードを振り返ると、「品質の高さ」が理解できていなかったように思います。簡単に実行できる手続き的な書き方と、抽象化して単純な処理を組み合わせてシンプルに実現することは違う。SOLID原則をはじめ、多くのプログラミング原則の根本が理解できていなかったのです。関数型の考え方を学ぶにつれ、判断する基準がようやく理解できるようになりました。
単にコードの書き方を学ぶだけではなく、原理や原則、設計思想、その根本の考え方を理解するのが大切だということを知りました。黒帯として、ほかの人にもそれを伝えてゆければいいなと思います。

伊藤のトーク中画像

パフォーマンス向上、フロントエンド革新に向けて黒帯ができること

──黒帯としての今後の活動について、抱負を伺います。

浜田の顔画像

黒帯に任命いただいたことで、自分の所属部署や一つのサービスに閉じることなく、全社的に貢献できる役割や機会を与えてもらったと感謝しています。これからはその立場を最大限活用していきたいです。これからは、その立場を生かし、ヤフーの技術向上に貢献できたら良いなと考えています。

伊藤の顔画像

私はこれまでもNode.jsなどを社内でサポートする仕事をしましたが、黒帯をいただいて、これが自分のスペシャリティだということが伝わりやすくなりました。「個人の自主的な活動ではなく、社内の役割としてサポートします」「私は会社の支援を得て、黒帯としてサポートしているのだから、遠慮せずに私の時間を使ってください」といったことが、すごく言いやすくなりましたね。

伊藤のトーク中画像
伊藤の顔画像

Webパフォーマンスの向上については、浜田さんたちと一緒にこれからも取り組んでいきます。3期目の黒帯としては、そろそろ次の世代黒帯候補を育てることを真剣に考えたいと思います。対外的にはブログや書籍などを通して、それを社外のエンジニアを含むコミュニティーのサポートにつなげていけたらと考えています。

浜田の顔画像

私も社内サービスのWebパフォーマンスの改善については、まだまだやらなくてはいけないことがあると思っています。それと同時に、サービス設計を進めるうえでモダンフロントエンドへの理解を深め、ヤフー全体のフロントエンドの革新を進めたいですね。
新しい技術を取り込みやすい環境作りや、そのボトルネックになっている課題を取り除くことに、私のこれまでの経験を生かせたらと思います。また、ヤフーの先進的な取り組みをテックブログや外部のイベントなどで紹介することも継続していきたいと思います。

浜田のトーク中画像

採用情報 公式SNSアカウント

このページの先頭へ