Pairsのスマートフォン向けWeb版をフルスクラッチリニューアルしました

この記事は eureka Advent Calendar 2019 14日目の記事です。
13日目はAPI Team Headの高橋によるAPIチーム2019年のあゆみでした。

こんにちは！Pairs JP Web Teamの竹内です :)

Pairsのスマートフォン向けWeb版（以下Pairs SP Web版）のリニューアルを今年の10月にリリース致しました

この記事では、リニューアルについて開発者の一人である竹内が裏話も交えながら綴って行きたいと思います。

※また今回の話は日本版Pairsのみでの話しであり、台湾・韓国版は対象外ですので予めご了承ください。

Pairs SP Web版について

PairsではiOS版・Android版とは別に、インストール不要でブラウザからそのまま利用できるWeb版を提供しております。

Pairs Web版はPC向けのものとスマートフォン（SP）向けのもので別れていますが、今回のリニューアルではこの中のSP向けのアプリが対象となりました。

Pairs Web版はこちらから利用できますので、良ければ記事を読む前に一度お試しください。

https://www.pairs.lv

フルスクラッチへ踏み切った動機

リニューアル前のPairs SP Web版

このフルスクラッチリニューアルをするに至った理由として、大きく以下の３つがありました

1. AngularJSのサポート終了

フルスクラッチ前のPairs SP Web版はAngularJSをベースとして作られていました。

周知の通り、AngularJSは2018年7月のリリースを最後に開発が終了し2021年7月までのLong Term Support期間となっています。

Long Term Support終了までには必ずAngularJSからの脱却が必要だったため、このタイミングで移行を決意することとなりました。

2. 技術的負債の返済

AngularJSベースだったPairs Web版は、弊社でまだSPAの開発についての知見が浅かった頃に作られました。

そのためTypeScriptを使用しているものの多くの部分がany型で書かれていたり、アーキテクチャが不明確で実装箇所によってちぐはぐな作りになっていたり、またその状態で何年も機能追加や改修が続けられたためにフルスクラッチに着手した頃には開発コストが非常に高いコードになっていました。

この状態を脱することで開発持続性を高める事も目的の一つでした。

3. パフォーマンス改善

Pairs Web版にあった課題の一つとして、度重なる機能追加から来るバンドルサイズの肥大化でロード時間が長いなどのパフォーマンスの低さがありました。

パフォーマンスが低くアプリの応答が遅いとアプリの利用を諦めてしまう要因となってリテンションレートが落ちてしまう恐れがあり、フルスクラッチによってパフォーマンスを改善するというのも目的の一つでした。

また、Pairs Web版ではより快適にPairsを使用していただくためにネイティブアプリへの導線を設けているため、パフォーマンス向上によるリテンションレートの増加によってネイティブアプリへの導線を強化させると言った目的もありました。

そしてリニューアルが終わった今、最終的にどんな形となったのか順を追って紹介していきます。

リニューアルで何が変わったのか

リニューアルによって変化した技術スタックたち

今回のリニューアルによってPairs SP Web版のコードベースを一から刷新し、より使いやすく、またより早くアップデートを行えるよう改良しました。

特に変化があった点としては以下の３つになります。

1. パフォーマンスの向上

コードベースの刷新により、ページの読み込み速度や操作時の滑らかさなどのパフォーマンスが大きく改善されました。
具体的には以下の改善を行っています。

• Code Splitting & Lazy Loadによる読み込みファイルサイズの最小化
• Server Side Renderingによる視覚的なレンダリング時間の高速化
• ServiceWorkerによるpre-cache & pre-fetch

また、ハイパフォーマンスを維持するためにPerformance Budgetの設置とSpeedCurveによる監視を行っています。

2. UIのリニューアル

アプリケーション全体に渡って見直され、より使いやすいデザインに生まれ変わりました。

またこのタイミングで、開発高速化やコミュニケーションコストの最小化のために弊社内で運用が始まったデザインシステムに準拠したUIが導入されました。

弊社のデザインシステムについては西宮が書いたこちらの記事をご覧ください

Pairsのデザインシステムを運用してみて。デザイナー視点のツール編🛠 - eureka design

3. 新アーキテクチャ+新技術スタックの採用

ちぐはぐになってしまった旧Pairs Web版の反省を踏まえて、アプリケーション全体のアーキテクチャを明確に定めた上でアーキテクチャに準拠した開発の助けになるようなドキュメントを整えました。

また、フレームワークの寿命がそのままプロダクトの寿命となってしまい開発持続性が担保できない状態を避けるために、役割毎に小さなライブラリを一つずつ利用する技術スタックを採用しました。

他にも多数のライブラリを利用しておりますが、採用したライブラリは以下のようなものでした。

• React
• Redux
• redux-thunk
• reselect
• Babel
• TypeScript
• Express
• Emotion
• etc…

最後に、Pairs Web版の今後の展望について触れていきます。

これからのPairs Web版について

リニューアル後のPairs SP Web版

今後もPairs Web版を快適に使えるようにアップデートを重ねて行くつもりですが、まずは他のWeb版への展開を進めようとしています。

厳密には以下のWeb版への拡大を進めています。

• Pairs PC Web版
• iOS・Android版PairsのWebViewページ（決済画面や問い合わせ画面など）
• 台湾・韓国版PairsのWeb版

iOS版・Android版のアプリも提供中のPairsですが、端末にアプリをインストールする手間なく手軽に使えるWeb版でも、アプリと同様の使い勝手・UIを目指してがんばっています。

またGoogleによるProgressive Web Appの提唱や、Trusted Web Activityの登場などWeb版は今後更に新しい役割をもつ可能性を秘めていると個人としては考えており、来年は更にWeb版を飛躍させていければなと思います。

最後に、Webチームでは共にこの新しくなったPairs Web版を開発して行ける仲間を募集しております。
ぜひこちらからご応募ください！

「Pairs」のWebアプリをすべてお任せ！フロントエンドエンジニア募集