CodeZine(コードジン)

特集ページ一覧

快適なUXの裏には泥臭さがあった? 新サービス開発に「React×Next.js×AMP」採用のワケ

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/09/23 11:00

 2020年2月27日、「ホットペッパービューティーコスメ」のWeb版が公開された。リクルートテクノロジーズが同サービスを開発するにあたり採用したのは、ReactとNext.jsと最新版のAMP(Accelerated Mobile Pages)である。この結果、ページの内容が表示されるまで0.2秒、画像が出るまで0.8秒、解析用のJavaScript等を含めた全てのリソースがダウンロードされるまでの時間は1.2秒以内を達成した。リクルートテクノロジーズが、これらの組み合わせを採用した背景、および開発における苦労や工夫した点などについて、同サービス開発に従事したエンジニアリング室 アプリケーションソリューショングループ グループマネジャーの古川陽介氏、メンバーの可児潤也氏、渡邉礁太郎氏に話を聞いた。

目次

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とで断絶されているような開発体系になる。そこが今回の組み合わせで、一番難しかったところです」(渡邉氏)

株式会社リクルートテクノロジーズ エンジニアリング室 アプリケーションソリューショングループ 渡邉礁太郎氏
株式会社リクルートテクノロジーズ エンジニアリング室 アプリケーションソリューショングループ 渡邉礁太郎氏

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 中村 仁美(ナカムラ ヒトミ)

     大阪府出身。教育大学卒。大学時代は臨床心理学を専攻。大手化学メーカー、日経BP社、ITに特化したコンテンツサービス&プロモーション会社を経て、2002年、フリーランス編集&ライターとして独立。現在はIT、キャリアというテーマを中心に活動中。IT記者会所属。趣味は読書、ドライブ、城探訪(日本の城)。...

  • 鍋島 英莉(編集部)(ナベシマ エリ)

    2019年8月に翔泳社へ入社し、CodeZine編集部に配属。同志社大学文学部文化史学科卒。

バックナンバー

連載:開発現場インタビュー

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5