「AbemaTV」「FRESH! by AbemaTV」を支えるフロントエンドアーキテクチャと導入背景
――お二人が所属されている開発チームの規模や構成を教えてください。
泉水：私が所属しているWeb Initiative Centerは4人で、佐藤もメンバーの一人です。
佐藤：「AbemaTV」のウェブのフロントエンドを専業で実装しているメンバーは6人ですね。僕とか泉水を入れると8人です。その他には、ネイティブエンジニアやサーバサイドエンジニア、デザイナー、ディレクターがいます。全部で30名くらいでしょうか。
無料で楽しめる"インターネットテレビ局"として展開する、新たな動画サービス
――AbemaTVのフロントエンドの構成技術は？
佐藤：使っている主なライブラリとしてはReactで、Fluxを採用しています。最近のトレンドとして支持されているものを中心に構成していて、Reactive Extensionsの「RxJS」や、補助的にImmutable.jsなども使用しています。
「FRESH!」はサーバサイドレンダリングもやっていて、Node.jsサーバを立てて、クライアントサーバ間でReactコンポーネントのJavaScriptを共通実行させる取り組みをしています。「AbemaTV」はサーバサイドはAPIサーバがあるだけで、完全にクライアントサイドだけで構成されたシングルページアプリケーションのアーキテクチャになっています。
「AbemaTV」と「FRESH!」は別々に開発していたので、どちらもReactを使っているしFluxだけど、かたや「FRESH!」はいわゆるIsomorphicアーキテクチャでサーバサイドレンダリングとシングルページアプリケーションの両立に挑戦しており、「AbemaTV」のほうはRxJSをFluxに組み込むチャレンジをしています。
泉水：Reactが流行り始めたのは今年に限った話じゃなく、2～3年ぐらい前から徐々に伸びてきたワードなので、ある程度ナレッジも溜まってきた段階だと思いますが、FRESH!でやっているようなシングルページアプリケーションかつサーバサイドレンダリングという構成は、かなり攻めてるほうかと思います。AbemaTVについてもRxJSをFluxの実装部分に取り入れていますが、珍しいのではないでしょうか。
佐藤：Reactっていう単語は技術者界隈の、特にエッジな人たちの中では以前から知られていましたが、実業務でやったことがあるメンバーがほぼいないチームばかりでした。今のタイミングでチームを作ったら違うとは思うんですけど、その辺で結構不慣れなところはありました。
少なくとも導入を決めたリーダー格のエンジニアはもちろん触っていたし、ある程度感触を得てから採用を決めているという形なんですけども。
泉水：自分の場合は、AbemaTVの改善をする前にSNSサービスの「755」というプロジェクトにいて、シングルページアプリケーションかつサーバサイドレンダリングを実装した経験があったので、初めてではなかったです。
