React×Next.js×AMP――この組み合わせを採用した背景
「ホットペッパービューティーコスメ」は、リクルートライフスタイルが運営する、コスメ専用のユーザー投稿型サービスである。2019年3月よりiOSアプリ版をリリース。コスメ口コミサービスとしては後発ながらも、コスメ情報を投稿しながら自分だけのコスメBOXを作ることができるほか、気になるコスメの使用感を写真やテキスト、評価チャートで知ることができる。さらに、年代や肌色、ファッションタイプなど自分のプロフィールに近しい人の投稿やコスメBOXを見ることで、自分に似合うコスメを見つけやすくなる機能を持っていることから、ユーザー数を着実に伸ばしている。そのWeb版が今年2月に公開された。
ホットペッパービューティーコスメWeb版を開発するにあたり、リクルートテクノロジーズでは他社プロダクトでもほぼ事例がない「React×Next.js×AMP」という組み合わせを採用した。
同サービスのプロジェクトを指揮したグループマネジャーの古川氏は、「駅が地下にあったり、地下鉄に乗りながらだったりして検索すると、電波がうまく届かなかったり、電波が届いていても遅い場合もあります。そういった環境でも見えるようにすることが元々の課題でした。つまり初期表示が軽くて、どんな環境でも表示できること。それが第一の条件でした」と明かす。
また、日本固有の状況として、月末に帯域制限などでネットワークが遅くなり使えない状況もあり、オフラインで見られることも条件の1つだった。この2つの条件を満たす技術選定をしていった。まず、活用を決めたのがAMPだった。AMPとは、Googleが推奨しているモバイルページを速く見せることに特化した、 Webページを作るためのWebコンポーネントフレームワークである。
「Webページの表示が遅くなる大きな要因は、不要な JavaScript や CSS が大量に残っていることです。過去に追加したものの不要になり、削除しなかったものが負債のように残っています。AMPはJavaScriptの使用が制限されていたり、CSSのサイズに制限があったりする。つまり余計なコードを書かせないフレームワークになっています。負債が積み重なること防ぐことができると考え、AMPを選びました」（古川氏）
ReactとNext.jsを選んだのは、「僕たちが得意とする技術だったため」と古川氏は話す。また、ReactやNext.jsは同社の他のプロジェクトでもよく使われている技術だったという。「管理しやすいなど、ワークフローが整備されていたことも、ReactとNext.jsを選んだ理由です」（古川氏）
また、可児氏は今回の技術の組み合わせについて、「コスメサイトの検索結果をなるべく上位に表示されるようにすることに加え、リリースのスピードに重きを置いてほしいという要望もありました。早くリリースするために技術選定をまかせてもらったので、得意なReact.jsを選びました」と付け加える。
この技術の組み合わせだったからこそ感じた苦労
だが、ReactとNext.js、AMPの組み合わせによる開発は、ある程度の規模やプロダクションレベルでやられてないチャレンジングな取り組みである。
「開発時の使い方が悪いと固まったり、リロード状態が続くなどしてしまったり……。そもそもAMPを使っている人が少なく、新しいものなので発展途上であったこともあり、OSSを使う上での不具合を数多く踏み、それを1つずつ解決していくことが大変でしたね」と古川氏は振り返る。
OSSの不具合をつぶしていくため、古川氏は直接AMPやNext.jsの開発者に会って交渉活動も行った。プルリクエストを出す背景を理解してもらえるよう、イベント会場などでOSSの開発者などに直接声をかけて、自分たちがOSSをどのように活用しているか、伝えるように声をかけたという。そうすることで、例えばAMPであれば、GitHub上でGoogleの人たちに「こういうところを変更したいのだけど」とかこまごまと相談することができた。
またNext.jsについても同様で、Next.jsの開発メンバーたちに認知してもらえたことで、プルリクエストを出しやすかったという。だが今回の技術の組み合わせは、試した人がほとんどいないため、これまで誰も踏んだことのないバグに何度も直面することがあったそうだ。「そこで諦めないで常に進んでいったことが、今の結果につながりました」（古川氏）
具体的にどんな大変さがあったのか。実際に手を動かした可児氏は、「開発言語としてはJavaScriptではなく、静的型付け言語のTypeScriptを採用しました。例えばスタイルを調整するstyled-componentsを使った時など、この組み合わせならではの不具合が起きます。そういったバグは踏まないと気づけません。コードで直接解決することもあれば、UX上で解決してもらったり、古川さん経由でプルリクエストを出したりして解決しました」と振り返る。
渡邉氏も可児氏同様、この組み合わせならではの不具合の解消に苦労したメンバーの一人である。
「いろいろな技術の組み合わせはありますが、ReactとAMPは開発の相性が良くないと感じています。AMPはWeb Componentsをベースにした技術なので、AMPコンポーネント自体は簡単に使い回せるというメリットがあります。ですが、JavaScriptでカスタマイズすることはできません。一方、ReactはJavaScriptで振る舞いを実装してコンポーネントを作る技術。JavaScript ですべてができないというか、ReactとAMPとで断絶されているような開発体系になる。そこが今回の組み合わせで、一番難しかったところです」（渡邉氏）
