〜skeleton loadingの導入とライブラリ比較〜 React Nativeで Facebookのようなロード画面を実装する

自己紹介 れん ／ Ren Okimoto ・株式会社BeatFit ・RNでフロントエンドエンジニアしてます ・新卒1年目 ・関西出身 ・甘党です。

BeatFitについて ・音声フィットネスのアプリ ・リリース3年目 ・創業からReact Nativeを採用 ・backend は Ruby on Rails ・GraphQLへ移行中

新機能：みんなの広場 ・アプリ内のユーザー同士が関われるSNS／掲示板 ・コミュニティ機能の活性により、 　データ量が指数関数的に増大し、 　パフォーマンスが低下した。

・ローディング時間が長い ・ページのキャッシュが残るため、 　一瞬だけ別ページが表示されてしまう パフォーマンス低下による2つの問題

Skeleton Loading 導入事例 Facebook、YouTube、Twitter UberEats、メルカリ、LINEなど。 特徴 シルエットを映すことで 体感の待ち時間を短縮できる

3 つの Skeleton ライブラリ ① react-content-loader （star : 11k、最終更新：6日前） ② react-native-skeleton-placeholder （star : 280、最終更新：25日前） ③ rn-placeholder（star : 1.8k、最終更新：8ヶ月前）

react-content-loader ・最もStar 数が多く、活発なメンテナンス。 ・FacebookやInstagramのexampleとして設定されている ・こちらを最初に選定したが、問題が浮上。

ViewBox Style で、全体の座標位置を指定。 1. 再利用性が低い 2. Android, IOS のOS 間の差異が大きい 3. コードの可読性が悪い CSS の設定に問題

導入：react-native-skeleton-placeholder ・Viewでstyleの実装が可能

つまずいたこと 最新版の react-native-skeleton-placeholder がビルドに失敗。 → ライブラリの依存関係が原因であった。 同様の issue が立っていてたため、 githubで報告し、社内ではパッチを作って対処した。

1）ホーム画面から「みんなの広場」の投稿一覧 2）投稿一覧画面から、投稿の詳細画面 ※ページのキャッシュ問題を解決するために、　 　　 useEffectのクリーンアップ関数でstore のdata を空にする 処理をしています。 2箇所に skeleton loadingを実装

まとめ ・Skeleton Loading の導入によって UX が改善された。 ・ページのキャッシュ問題が解決できた。 ・ライブラリーは複数存在したが、CSS の実装のしやすさから、 　　 react-native-skeleton-placeholder を選定した。

ご清聴 ありがとうございました