ヤフーのフロントエンドと Node.js の関係性

こんにちは。今期から Web フロントエンド領域で黒帯を務めることになりました伊藤（@koh110）です。

普段は情報システム本部に所属しチャットなど内製基盤の開発・運用をしつつ、Node.js 言語サポートチームとしてサーバサイド TypeScript の活用や、SSR（Server Side Rendering）、BFF（Backends For Frontends）のチューニング支援なども行っています。

ヤフーには Node.js と JavaScript の言語サポートチームがあります。Node.js サポートチームは主にバックエンドとして、JavaScript サポートチームはフロントエンドとして、それぞれ JavaScript をサポートしています。

今日は黒帯特集ということで、ヤフーの中で Node.js がどうやって活用されているのかをフロントエンド開発の体制と絡めてお話します。

ヤフーのプラットフォームと Node.js の利用状況

ヤフーでは数年前からプラットフォームのモダン化を行っており、デプロイ先は主に Pivotal 社の提供するPivotal Cloud Foundry (PCF) と、ゼットラボ社が開発する Kubernetes as a Service が選択肢となっています。

他の言語に比べて、日本では Node.js のサーバーサイドの採用事例が多くありません。しかし海外で利用されるプラットフォームではサポートが手厚いこともあり、PCF もその例に漏れず標準で Node.js のビルドパックをサポートしています。

これらの要因から、ヤフー社内ではここ 2,3 年でフロントエンドに近い部分への Node.js 採用事例が多くなってきています。

トップページやニュースなど、ヤフーの中でもで非常に大きな規模のアクセスを Node.js で受けている実例も多くなってきました。これらのアクセス規模に耐えられるということは、他の多くのサービスでも十分に利用できるポテンシャルの証明だと考えています。

参考: ヤフーニュースにおける BFF パフォーマンスチューニング事例

複雑化するフロントエンドの実装手法

JavaScript は文法の互換性が非常に高い言語です。どんなに古いタイミングで書かれた文法でも今の環境で実行できることがほぼ保証されています。

反面、新しい仕様の策定スピードは非常に早く、数年も経過するとモダンな書き方がガラッと変わります。例えばサンプルで var を使った変数定義をしているコードは、検索してみると今でもたくさんヒットします。（明確な理由がなければ新規のアプリケーションコードでは const, let を採用する方がよいでしょう。参考: ES6 時代の Node.js）

このように JavaScript は、何が新しい書き方なのか判断するのに慣れを必要とし、古い書き方と新しい書き方が混ざりやすい言語とも言えるでしょう。

また、AngularJS や React などのフレームワークの流行以後 SPA は当たり前に利用される技術になってきています。

これはシームレスな画面遷移による UX の向上のみならず、画面と API を分離することによりフロントエンドの描画ロジックとバックエンドのビジネスロジックを疎結合にするメリットもあり、開発者にとってもフレンドリーであったため受け入れられやすかったのではないかと考えています。

反面、画面単位で考えればよかった状態は、画面遷移を考慮するようになるなどリッチになった分より複雑になり、アプリケーションの開発難易度は高くなってきました。それらの複雑さを緩和するために Flux やリアクティブなどの概念が導入されたりなどミドルウェアにも進化がおきました。

自分が経験した JavaScript の歴史を軽く振り返ってみても、jQuery を使ってブラウザー間の API の差を吸収していたものが ES6（ES2015）で標準化が進みました。ブラウザーの実装が追いつくまで Babel などのトランスコンパイラを通したり、Angular/React/Vue などを利用するようになるなど、この６年間だけで大きな変化がありました。

トランスコンパイルするためにはコンパイラを動かす必要があります。コンパイラを動かすためには当然設定も必要です。初期では Grunt や Gulp を使いプラグインを使って管理し、今では Webpack を利用して loader の管理をしています。型が欲しいと思ったならば、さらに TypeScript なども視野に入ります。設定ファイルの数はこれらに応じて多くなり、項目も各ファイルごとに検討しなければなりません。

アプリケーション作成の難易度だけではなく、ミドルウェアの進化や開発環境の変化も非常に大きく、フロントエンドがとっつきにくいと言われる一因となっているように感じます。

近年のフロントエンド開発では JavaScript の言語仕様/アプリケーション/フレームワーク/ミドルウェア/ビルド環境など、把握するべき範囲が昔に比べて非常に広くなっています。（これ以外にも CSS in JS などデザイナと協業する部分も多く、デザイン側の知識もある程度は欲しくなってきます）

これだけの変化がこの数年間で起きていて、興味を持って追っていればまだしもバックエンドを主戦場とするエンジニアが片手間に覚えるには非常にコストが高く、手を出すことをためらってしまう気持ちもわかります。

ユーザーにとって最初のタッチポイントであるフロントエンドがこれだけ複雑化している以上、フロントエンドを主軸に戦うエンジニアを育てることは、サービスを育てる上でも非常に重要な判断だと考えています。

ヤフーでもフロントエンド技術は重要な役割を持つと考えていて、サービスのフロントエンド技術をドライブするために専門の全社横断のフロントエンド専任組織が存在します。

サーバーサイドレンダリング（SSR）の導入と Node.js

ブラウザーの進化によって JavaScript の実行速度も飛躍的に向上してはいますが、初期描画に時間がかかってしまう問題はまだ存在しています。もちろんヤフーでもサービスの描画速度は非常に重要視されています。

初期描画の高速化には、やはりサーバーサイドレンダリング（SSR）が有効な手段です。（もちろんそれ以外にも SEO などで SSR が必須な要件もあります）

SSR は理論的にはバックエンドがどんな言語であっても可能ではありますが、Angular/React/Vue などのフレームワークでは Node.js を採用するのが一般的です。

例えば React では react-dom というパッケージで公式に Node.js からサーバーサイドレンダリングを行える関数を提供していますし、Vue では Nuxt.js を利用する事例が増えています。

フロントエンドエンジニアが Node.js を扱うメリット

また、ヤフーでは SSR を行うアプリケーションは Backend For Frontend（BFF）を兼ねることも多く、フロントエンドを触るエンジニアが自由に開発してデプロイできる状態にして、開発速度やデプロイ頻度を向上できるようにサービスを分割しています。最近リニューアルしているシステムの構成では BFF + SSR をする部分に Node.js を採用する事例が多くなってきました。

BFF や SSR で採用する技術として、フロントエンドの技術とコンテキストスイッチのない JavaScript で書ける Node.js を採用するという流れは非常に合理的です。（Universal/Isomorphic といった文脈でフロントエンドとバックエンドコードの共有化に Node.js を採用すると言われることはありますが、経験則ではそこまでコードを共有化できることは稀です。そのため自分は開発のコンテキストスイッチを少なくする、人間の Isomorphic が一番効果が高い点だと感じています）

しかし、Node.js を触る以上サーバーサイドの知識とは無縁ではいられません。

また、Node.js はシングルスレッドでノンブロッキング I/O や低レイヤーの API を多く持つといった特長があります。そのため Node.js で気をつけなければならない特有な点は多く、パフォーマンスチューニングの方法もブラウザーの JavaScript とは異なります。同じ文法とはいえどちらもの知識も身につけながら開発するのは非常にコストが高いのです。

そこで Node.js サポートチームでは、Node.js のパフォーマンスチューニングや計測のサポート、ハンズオンやセミナーを通した知識の強化などをサービス横断で積極的に行っています。

具体的にどのようなサポートを行っているかは Node.js 徹底攻略 ─ ヤフーのノウハウに学ぶ、パフォーマンス劣化やコールバック地獄との戦い方 で詳しくまとめていただいています。

まとめ

ヤフーのフロントエンド開発において Node.js はなくてはならないものになっています。

サポートを行う場合も Node.js だけ知っていればいいという状況ではなく、フロントエンドで利用されるフレームワークやミドルウェアの知識が必要です。今回自分が Web フロントエンドという領域で活動することになったのも、こういった背景があるからだと考えています。

今後もサポートチームや黒帯の活動を通して、社内外関係なくフロントエンド・バックエンドどちらの領域でも戦えるエンジニアを増やすサポートをしていきたい思います。

宣伝

ヤフーは JSConf JP にスポンサーとして参加しています。

記事中でも出てきた社内向けハンズオンをリファインしたものを JSConf JP で公開します！ ご都合のつく方はぜひMINIMUM HANDS-ON NODE.JSセッションにお立ち寄りください。