性能も手に入れ、開発効率も上がった
だがこのような試行錯誤する苦労も最初の1～2カ月で、その後は当初のスケジュール通りに開発プロジェクトは進行した。「AMPは良くも悪くも余計なことが書けないというAMPのルールに従う必要があります。最初はやりにくい部分も多かったが、慣れてくると使いやすかった。性能も手に入り、開発効率も上がりました」と古川氏は話す。
また渡邉氏はAMPを採用した効果として、「アクセシビリティやSEOについても最初から考慮されているコンポーネントになっていることも大きい」とも付け加える。目的とした通り、Webサービスの品質が担保され、開発効率が上がっただけではない。ホットペッパービューティーコスメは、当初の目標としていたMAU（Monthly Active Users：月あたりのアクティブユーザー数）を大幅に達成しているという。
「6月のMAUは140～150％達成しています。もちろん、私たちの技術によるところだけではありませんが、AMP活用により表示速度が他のサービスよりも早いことも貢献していると思います。数字的にも良い結果が出ているのでうれしいですね」（可児氏）
ホットペッパービューティーコスメでのチャレンジは続く
リリースされて終わりではない。「ホットペッパービューティーコスメの中でもいろいろチャレンジングな取り組みをしています」と古川氏は言う。十分、高速化は果たせているとはいえ、パフォーマンス改善にも常にチャレンジしている。
「例えばCDNを変える話も上がっています。またコスメのサービスと直接関係するわけではありませんが、AMPの新しい機能であるAMPストーリーも試しています。面白いものを作っていきたいので」（古川氏）
可児氏は「プロダクトの保守性を上げることに取り組んでいきたい」と話す。同サービスではOSSのライブラリをたくさん使っている。それらOSSの更新をすべて追っていくのはなかなか難しい。
「Storybookをうまく使っていきたいですね。ライブラリの更新を追従して更新するだけではなく、ビジュアルリグレッションテストツールを入れ、見た目の変化を自動で確認できるようにする。デグレーションを起こさないようにシステムで担保できるようにしています」（可児氏）
渡邉氏は「フロントエンドはライブラリがひっきりなしに更新されていきます。その都度確認できないのでRenovateというツールを使って自動化しています。システマチックに開発内部での生産性を上げるような新しい取り組みにたくさんチャレンジしています」と続ける。
個人的に注目している技術、挑戦したい技術は？
最後に個人的に注目している技術、挑戦したい技術についても聞いてみた。
「Fastly、Cloudflareなど、さまざまなCDNサービスが登場しています。CDNはWebページの高速化に、今では不可欠なサービスです。フロントエンドではログインできたり、個々のユーザーで違うページが見えたりなど、キャッシュと相性が悪い機能がありますが、最近のCDNでは工夫によってサービスに適用することができそうです。CDNを活用して、ユーザーにとってさらに高速で快適なサービスを作っていきたいです」（渡邉氏）
「Trusted Web Activityという技術に個人的に関心があります。これはProgressive Web App（PWA）のサイトをGoogle Playにアプリとして登録できる技術です。Webページもリッチにできるようになってきたので、それをそのままAndroidでサービスとしてリリースすることができれば面白いですね」（可児氏）
「Googleは今年5月28日に検索ランキングの指標をCore Web Vitalsと既存のシグナルと組み合わせると発表しました。僕はChrome Advisory Boardメンバーの1人として、Core Web Vitalsという指標を推しています。同指標には読み込み時間やインタラクティブ性、ページ・コンテンツの視覚安定性といった3つのUX指標で構成されています。この指標はこれからのキーポイントになっていくはずなので、いち早く当社が提供するプロダクトに反映していきたいですね」（古川氏）
React×Next.js×AMPという、これまでほぼ誰も試したことのない技術により開発されたホットペッパービューティーコスメのWeb版。高速表示という快適なユーザー体験の実現の背景には、不具合を諦めることなく丹念につぶしていく泥臭い取り組みがあった。また技術への理解にばらつきのある開発メンバーでも開発品質を担保できるよう、ペアプログラミングやモブプログラミングも採用した。「この技術を使ったから、できたわけではない」とくぎを刺すことも忘れなかった。
