コンポーネントライブラリとして作る、ポータブルなデータ分析 / make data analysis portable as a component library

データ分析β（社内通称: moana）は STORES の各プロダクトのデータを一元収集・分析し、オーナーさんに提供するプラットフォームです。 一方でこのデータを各プロダクトの管理画面上にも表示したいというニーズが高まっています。 そのために、データの取得と UI の表示をまるごと提供するウィジェット風のものを、コンポーネントライブラリのようにパッケージングしようとしています。

クロスフレームワークを実現するためのリアルタイム試行錯誤の様子をお伝えします。 様々な会社が集まった経緯のある STORES ならではの特色を感じていただければと思います。

Transcript

1. コンポーネントライブラリとして作 る、ポータブルなデータ分析 
 原田陽紗子

2. 原田 陽紗子
 フリーランス 
 フロントエンドエンジニア 
 (STORESとの取引6年目)
 自己紹介
 Hisako Harada
 2
3. Background
 • デザイン科 
 認知心理学系研究室出身 
 • 視覚と認知 
 自己紹介
 3
4. ↓書籍販売中 ↓ https://tttttahiti.stores.jp PR
5. STORES との関わり 
 ネットショップ・レジ 
 ↓
 データ分析 β（直近１年） 
 自己紹介
 5
6. 「新しい」 
 とは？

7. 「新しい」とは？
 ① 今までにはなかったさまだ。初めてだ。「 ―・い発 明」「―・い経験」 
 ② 従来のものとは違っている。旧来のやり方を改め ている。「 ―・い企画」「 ―・い考え方」 
 ③ できたばかりだ。できてからあまり日時が過ぎてい ない。「―・い洋服」「 ―・い法律」 
 ④ なまものが取れたばかりで，生き生きとしている。 新鮮だ。「 ―・い野菜」「 ―・い魚」
 7 出典: スーパー大辞林

8. 「新しい」とは？
 ① 今までにはなかったさまだ。初めてだ。「 ―・い発 明」「―・い経験」 
 ② 従来のものとは違っている。旧来のやり方を改め ている。「 ―・い企画」「 ―・い考え方」 
 ③ できたばかりだ。できてからあまり日時が過ぎてい ない。「―・い洋服」「 ―・い法律」 
 ④ なまものが取れたばかりで，生き生きとしている。 新鮮だ。「 ―・い野菜」「 ―・い魚」
 8 出典: スーパー大辞林

9. 「新しい」とは？
 ① 今までにはなかったさまだ。初めてだ。「 ―・い発 明」「―・い経験」 
 ② 従来のものとは違っている。旧来のやり方を改め ている。「 ―・い企画」「 ―・い考え方」 
 ③ できたばかりだ。できてからあまり日時が過ぎてい ない。「―・い洋服」「 ―・い法律」 
 ④ なまものが取れたばかりで，生き生きとしている。 新鮮だ。「 ―・い野菜」「 ―・い魚」
 9 出典: スーパー大辞林

10. 「新しい」とは？
 ① 今までにはなかったさまだ。初めてだ。「 ―・い発 明」「―・い経験」 
 ② 従来のものとは違っている。旧来のやり方を改め ている。「 ―・い企画」「 ―・い考え方」 
 ③ できたばかりだ。できてからあまり日時が過ぎてい ない。「―・い洋服」「 ―・い法律」 
 ④ なまものが取れたばかりで，生き生きとしている。 新鮮だ。「 ―・い野菜」「 ―・い魚」
 10 出典: スーパー大辞林

11. 「新しい」とは？
 ① 今までにはなかったさまだ。初めてだ。「 ―・い発 明」「―・い経験」 
 ② 従来のものとは違っている。旧来のやり方を改め ている。「 ―・い企画」「 ―・い考え方」 
 ③ できたばかりだ。できてからあまり日時が過ぎてい ない。「―・い洋服」「 ―・い法律」 
 ④ なまものが取れたばかりで，生き生きとしている。 新鮮だ。「 ―・い野菜」「 ―・い魚」
 11 出典: スーパー大辞林

12. 「新しい」とは？
 ① 今までにはなかったさまだ。初めてだ。「 ―・い発 明」「―・い経験」 
 ② 従来のものとは違っている。旧来のやり方を改め ている。「 ―・い企画」「 ―・い考え方」 
 ③ できたばかりだ。できてからあまり日時が過ぎてい ない。「―・い洋服」「 ―・い法律」 
 ④ なまものが取れたばかりで，生き生きとしている。 新鮮だ。「 ―・い野菜」「 ―・い魚」
 12 出典: スーパー大辞林

13. ブリコラージュ 
 「新しい」とは？
 「寄せ集めて自分で作る」 
 「取繕い」 
 設計⇔ブリコラージュ 
 Bricolage
 13
14. 巨人の肩の上に立つ矮人 
 「新しい」とは？
 僕らの営みは先人の 
 発見の上にある 
 14
15. M&Aを繰り返しできた 
 「STORES」

16. 「STORES」の事情とデータ分析 β
 「今月の売上をまとめて見る」 
 16 1. 各プロダクトごとのオーダーをCSV 形式でダウンロード
 2. Excel でフォーマットを整える
 3. 関数で計算

17. 「STORES」の事情とデータ分析 β
 データ分析 β（社内通称 moana）登 場！
 17 各プロダクトの売上やアクセスなどの データを一元集計・GUI上で表現

18. 「STORES」の事情とデータ分析 β
 18
19. 「STORES」の事情とデータ分析 β
 ページとしてのデータ分析機能 
 ↓
 データ分析の中央集権 
 （セマンティックレイヤー等） 
 19 ※データベースへのアクセスやビジネスロジック等を 内包し提供する仕組みのこと

20. 「STORES」の事情とデータ分析 β
 20 データ分析βで表示して いる内容をこっちのダッ シュボードにも
 表示したい
 ネットショップ
 レジ
 予約
 ブランドアプリ

21. コンポーネントベースの UI 開発に混ぜて使える 「ミニ データ分析 β」
 　を作りたい！ 

22. 「ミニデータ分析β」を作りたい
 使い方のイメージ 
 22 • 任意のパッケージマネージャでイン ストール
 • jsx や SFC 内で import

23. 「ミニデータ分析β」を作りたい
 + 要件
 23 • STORES プロダクト群のどの環境で も同じ見た目・数字 
 • API 通信からブラウザでの UI 描画 までを内部で完結 

24. portable moana PJ
 始めましたが ……
 「ミニデータ分析β」を作りたい
 24 絶賛試行錯誤中！
25. 根本の課題 
 「クロスフレームワーク」 

26. ネット
 ショップ
 ・
 レジ
 ブランド
 アプリ
 予約
 データ分析β
 
 
 
 
 根本の課題「クロスフレームワーク」 
 26 系
 系

27. 根本の課題「クロスフレームワーク」 
 • React / Vue 2種類を作る 
 • iframe
 • Web Components
 27
28. 根本の課題「クロスフレームワーク」 
 28 API
 ネットショップ 
 レジ
 ブランドアプリ 
 予約
 データ分析 β
 Request
 Response
 Install
 portable-moana
 React
 portable-moana
 Vue
 Install

29. React / Vue 2種類作る
 根本の課題「クロスフレームワーク」 
 • Pros
 ◦ 各フレームワークごとに適切なものを 提供できる 
 29
30. React / Vue 2種類作る
 根本の課題「クロスフレームワーク」 
 • Cons
 ◦ フレームワーク依存 
 ◦ 工数2倍
 ◦ 細かい違いが出がち 
 30
31. 根本の課題「クロスフレームワーク」 
 31 portable-moana
 widget
 API
 ネットショップ 
 レジ
 ブランドアプリ 
 予約
 データ分析 β
 Request
 Response
 embed
 これ
 一個！
 <iframe />
32. iframe
 根本の課題「クロスフレームワーク」 
 • Pros
 ◦ フレームワーク依存ない 
 ◦ 枯れてて想像が付きやすい 
 32
33. iframe
 根本の課題「クロスフレームワーク」 
 • Cons
 ◦ 数並べると重くなりそう 
 ◦ クロスドメイン間での問題起きそう 
 33
34. 根本の課題「クロスフレームワーク」 
 34 portable-moana
 Web Components
 API
 ネットショップ 
 レジ
 ブランドアプリ 
 予約
 データ分析 β
 Request
 Response
 Install
 これ
 一個！

35. Web Components
 根本の課題「クロスフレームワーク」 
 • Pros
 ◦ フレームワーク依存ない 
 ◦ もっともらしい Web 標準技術
 35
36. Web Components
 根本の課題「クロスフレームワーク」 
 • Cons
 ◦ 事例が少ない 
 36
37. 不確定要素は多いが 
 希望はあるのでは！？ 
 根本の課題「クロスフレームワーク」 
 portable-moana
 Web Components
 オレはやるぜ 
 オレはやるぜ 
 そうかやるのか 
 やるならやらねば 

38. 調査

39. 調査
 39 React のサポート状況に不安が……

40. 調査
 40 https://engineering.mercari.com/en/blog/entry/20221207-web-design-system-migr ating-web-components-to-react/ メルカリさんの
 Web Components から React へ
 作り直している事例

41. 調査
 • 使用者とメンテナの同時不足 
 • SSR むずい
 • Web Components 自体の技術的制限 
 41
42. （調査時点で不穏だけど） 
 とりあえず
43. Web Components
 表示テスト in
 データ分析 β

44. やってみよう Take.1
 • SSR できないのを実体験 
 ◦ 特にデータ分析 β は App Router なので一 筋縄じゃいかなそう 
 • ていうか Web Components で今出して るグラフとか再現できんの？ 
 44 怪しい
 雲行き

45. やってみよう Take.1 からのどうしよう
 45 Cookpad さんの
 React を Web Components で包んで Rails で使っている事例
 https://techlife.cookpad.com/entry/2022/12/29/090000
46. ブランドアプリ 
 portable-moana
 web-components
 やってみよう Take.1 からのどうしよう
 46 wrap
 portable-moana
 react
 予約
 データ分析 β
 直接
 install
 ネットショップ 
 レジ
 包んだ方をinstall

47. やってみよう Take.1 からのどうしよう
 • React 版コンポーネントライブラリ 
 ◦ こっちが主体 
 • Web Components 版
 ◦ React 版を包んでレンダリングする層 
 47
48. （うまくいくかわからないけど） 
 とりあえず
49. まず React の
 コンポーネントライブラリ 
 を作ります！ 

50. まず React のコンポーネントライブラリを作る 
 50 ※β版として一部事業者にのみ提供 
 独立した4個の
 コンポーネントで 
 構成されている 

51. ブランドアプリ 
 portable-moana
 web-components
 まず React のコンポーネントライブラリを作る 
 51 wrap
 portable-moana
 react
 予約
 データ分析 β
 直接
 install
 ネットショップ 
 レジ
 包んだ方をinstall
 成功！

52. 次に
 Web Components
 で包みます！ 

53. import { createRoot } from "react-dom/client"; import { MoanaSampleButton as SampleButton } from "@heyinc/portable-moana-react"; import sanitize from "@heyinc/portable-moana-react/dist/assets/sanitize.css?inline"; import styles from "@heyinc/portable-moana-react/dist/assets/index.css?inline"; import { LitElement } from "lit"; import { customElement } from "lit/decorators.js"; @customElement("moana-sample-button") export class MoanaSampleButton extends LitElement { connectedCallback() { const domNode = document.createElement("div"); const shadow = this.attachShadow({ mode: "closed" }); shadow.appendChild(domNode); const sanitizeSheet = new CSSStyleSheet(); sanitizeSheet.replaceSync(sanitize); const styleSheet = new CSSStyleSheet(); styleSheet.replaceSync(styles); shadow.adoptedStyleSheets = [sanitizeSheet, styleSheet]; const root = createRoot(domNode); const label = this.getAttribute("label") || "ボタン"; root.render(<SampleButton label={label}></SampleButton>); } } declare global { interface HTMLElementTagNameMap { "moana-sample-button": MoanaSampleButton; } } 

54. React コンポーネントライブラリを Web Components で包む
 1. shadowDOMを作る
 2. CSS を inline で読み込んで adoptedStyleSheets で shadowDOM にくっつける 
 3. react-dom でレンダリング 
 54
55. React コンポーネントライブラリを Web Components で包む
 55
56. ブランドアプリ 
 portable-moana
 web-components
 React コンポーネントライブラリを Web Components で包む
 56 wrap
 portable-moana
 react
 予約
 データ分析 β
 直接
 install
 ネットショップ 
 レジ
 包んだ方をinstall
 作った！

57. これを
 Nuxt で
 使ってみます！ 

58. Web Components ライブラリを Nuxt で使う

59. ブランドアプリ 
 portable-moana
 web-components
 Web Components ライブラリを Nuxt で使う
 59 wrap
 portable-moana
 react
 予約
 データ分析 β
 直接
 install
 ネットショップ 
 レジ
 包んだ方をinstall
 難あり

60. 仮説
 Web Components ライブラリを Nuxt で使う
 • SSR: true のときのみ発生 
 ◦ @lit-labs/ssr では HTMLElement はエミュレートさ れてないから 
 60 Nuxt で SSR してるプ ロダクトないし 
 保留でいっか〜 

61. 770.00kB?! 

62. 巨大な react-dom を bundle したから？ 
 クソデカ bundle size

63. クソデカ bundle size
 • react-dom を bundle せず依存関係にす る
 ◦ 使用側で react-dom のバージョン管理 が必要になる 
 • 軽量な Preact で置き換えられないか？ 
 63
64. • Preact
 ◦ 各種 React API と 互換性のある軽量 ライブラリ 
 クソデカ bundle size

65. 65 react-dom 無
react-dom 込
Preact 込
 47.94kB
 770.00kB
 57.56kB
 92.5% 減！！
 クソデカ bundle size

66. クソデカ bundle size
 66 ブラウザで動かないけど……

67. 仮説
 クソデカ bundle size
 • ビルド済みライブラリ内部の React 部分までは alias が貼れてない 
 ◦ 多少なりともハックが必要そう 
 
 67
68. クソデカ bundle size
 • react-dom を bundle せず依存関係にす る
 ◦ 使用側で react-dom のバージョン管理 が必要になる 
 • 軽量な preact で置き換えられないか？ 
 68 難あり
 こっちで行く 

69. これまで
 69 ブラウザで動か ない
 課題
 クロス
 フレーム
 ワーク 課題
 Web Components 
 やろう React と
 相性悪い React 版と Web Components ラップ版
 作ろう
 bundle size 
 がでかすぎる 課題
 Preact でレンダ リングしよ う 課題に次ぐ課題 
 取繕いに次ぐ取繕い 
 課題

70. 何を作っているのか？ 
 70 ウィジェット？
 コンポーネント？
 マイクロサービス？
 色んな概念の ブリコラージュ かも

71. 「新しい」ものを作るには 
 とりあえずやってみる 
 失敗しまくる 
 意外なものが使えるかも？ 
 でも目的は見失わないように！ 
 71 俺達の戦いは 
 これからだ!!!