Upgrade to Pro — share decks privately, control downloads, hide ads and more …

これから先も戦えるサードパーティスクリプト

nichimu
February 09, 2023

 これから先も戦えるサードパーティスクリプト

nichimu

February 09, 2023
Tweet

More Decks by nichimu

Other Decks in Technology

Transcript

  1.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  1
    これから先も戦える
    サードパーティスクリプト
    — 1/10に軽量化・柔軟な拡張性・互換性の担保 —
    株式会社 プレイド
    西村 優汰

    View full-size slide

  2.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  2
    本日の内容
    本日の内容
    ● 2015 年リリース以来初となる計測タグも含めたサードパーティスクリプトの全刷新
    ● どんなところが課題だったのか
    ● 課題に対して、この先戦っていくためにどう解決したのか

    View full-size slide

  3.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  | 
    本日のテーマ
    計測タグとは
    移行のきっかけ
    サイズ軽量化
    プラグイン化
    計測タグの拡張性
    まとめ
    話すこと
    󰗔
    これから先も戦える
    サードパーティスクリプト

    View full-size slide

  4.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  | 
    KARTEについて
    一人一人に合わせた
    顧客体験を提供
    Webサイトの訪問者の行動を
    顧客ごとにリアルタイムに解析
    CX(顧客体験)プラットフォーム

    View full-size slide

  5.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  5
    計測タグとは
    Website

    (計測タグ)
    JavaScript
    実行
    解析
    サーバー
    {
    "event_name": "view",
    "keys": {
    "api_key": "xxxxxx",
    "user_id": "user_B",
    },
    "page": "https://plaid.co.jp/",
    ...
    }
    JavaScript
    (3rd Party Script)

    View full-size slide

  6.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  6
    計測タグとは
    Website

    (計測タグ)
    JavaScript
    実行
    解析
    サーバー
    {
    "event_name": "view",
    "keys": {
    "api_key": "xxxxxx",
    "user_id": "user_B",
    },
    "page": "https://plaid.co.jp/",
    ...
    }
    今回話す対象
    JavaScript
    (3rd Party Script)

    View full-size slide

  7.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  7
    計測タグとは
    計測タグの主な責務
    • 3rd Party Script を呼び出し、実行する
    3rd Party Script の主な責務
    • エンドユーザーの状態に応じた event data をサーバーに送信する
    • サーバーから返却された action (例えばポップアップなど) の描画

    View full-size slide

  8.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  | 
    本日のテーマ
    計測タグとは
    移行のきっかけ
    サイズ軽量化
    プラグイン化
    計測タグの拡張性
    まとめ
    話すこと
    󰗔
    これから先も戦える
    サードパーティスクリプト

    View full-size slide

  9.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  9
    移行のきっかけ
    旧計測タグと 3rd Party Script の構成
    JavaScript
    (全プロジェクト共通)
    Website
    (Project A)
    CDN
    Website
    (Project B)
    Website
    (Project C)

    View full-size slide

  10.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  10
    移行のきっかけ
    旧計測タグと 3rd Party Script の課題 ①
    ● 3rd Party Script サイズの肥大化
    ○ 一部の Project にしか必要のない機能が存在
    ○ ブラウザの進化などにより不必要なコードの増加
    ○ サイトパフォーマンスの重要性 (Core Web Vitals )
    ● 3rd Party Script 上で動く KARTE プロダクトの増加
    ○ 当初、プロダクトは1つのみ
    ○ Plugin として動かす仕組みがない
    ● 計測タグ自体の拡張性の制限
    ○ 新規機能の開発に制限あり (後述)

    View full-size slide

  11.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  11
    移行のきっかけ
    旧計測タグと 3rd Party Script の課題 ②
    ● 3rd Party Script サイズの肥大化
    ○ 一部の Project にしか必要のない機能が存在
    ○ ブラウザの進化などにより不必要なコードの増加
    ○ サイトパフォーマンスの重要性 (Core Web Vitals )
    ● 3rd Party Script 上で動く KARTE プロダクトの増加
    ○ 当初、プロダクトは1つのみ
    ○ Plugin として動かす仕組みがない
    ● 計測タグ自体の拡張性の制限
    ○ 新規機能の開発に制限あり (後述)

    View full-size slide

  12.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  12
    移行のきっかけ
    旧計測タグと 3rd Party Script の課題 ③
    ● 3rd Party Script サイズの肥大化
    ○ 一部の Project にしか必要のない機能が存在
    ○ ブラウザの進化などにより不必要なコードの増加
    ○ サイトパフォーマンスの重要性 (Core Web Vitals )
    ● 3rd Party Script 上で動く KARTE プロダクトの増加
    ○ 当初、プロダクトは1つのみ
    ○ Plugin として動かす仕組みがない
    ● 計測タグ自体の拡張性の制限
    ○ 新規機能の開発に制限あり (後述)

    View full-size slide

  13.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  13
    移行のきっかけ
    新計測タグと 3rd Party Script で目指したこと
    ● スクリプトサイズの軽量化
    ● プロダクトのプラグイン化
    ● 計測タグ自体の拡張性
    ● 3rd Party Script サイズの肥大化
    ○ 一部の Project にしか必要のない機能が存在
    ○ ブラウザの進化などにより不必要なコードの増加
    ○ サイトパフォーマンスの重要性 (Core Web Vitals )
    ● 3rd Party Script 上で動く KARTE プロダクトの増加
    ○ 当初、プロダクトは1つのみ
    ○ Plugin として動かす仕組みがない
    ● 計測タグ自体の拡張性の制限
    ○ 新規機能の開発に制限あり (後述)

    View full-size slide

  14.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  | 
    本日のテーマ
    計測タグとは
    移行のきっかけ
    サイズ軽量化
    プラグイン化
    計測タグの拡張性
    まとめ
    話すこと
    󰗔
    これから先も戦える
    サードパーティスクリプト

    View full-size slide

  15.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  15
    スクリプトサイズ
    軽量化
    どれくらいスクリプトサイズを軽量化したのか
    307 kb
    25 kb
    新 3rd Party Script (最小設定かつgzip圧縮前)
    旧 3rd Party Script (gzip圧縮前)
    軽量化により「ダウンロード時間の改善」「CPU時間の改善」

    View full-size slide

  16.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  16
    スクリプトサイズ
    軽量化
    軽量化するために行ったこと
    ● Project ごとに JavaScript を作成
    ○ 全部入りの機能を分解して、Projectごとに機能を取捨選択できるように
    (後ほど詳しく説明)
    ● Treeshaking や Dead Code Elimination を意識した開発
    ○ 詳しくは弊社社員の別発表資料にて
    「バンドル最適化マニアクス at tsconf 」
    (https://speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf)
    ● Internet Explorer 対応をしない決定をした

    View full-size slide

  17.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  17
    スクリプトサイズ
    軽量化
    軽量化するために行ったこと
    ● Project ごとに JavaScript を作成
    ○ 全部入りの機能を分解して、Projectごとに機能を取捨選択できるように
    (後ほど詳しく説明)
    ● Treeshaking や Dead Code Elimination を意識した開発
    ○ 詳しくは弊社社員の別発表資料にて
    「バンドル最適化マニアクス at tsconf 」
    (https://speakerdeck.com/mizchi/bandoruzui-shi-hua-maniakusu-at-tfconf)
    ● Internet Explorer 対応をしない決定をした

    View full-size slide

  18.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  18
    スクリプトサイズ
    軽量化
    新計測タグと 3rd Party Script の構成
    JavaScript (Project A)
    Website
    (Project A)
    CDN
    Website
    (Project B)
    Website
    (Project C)
    JavaScript (Project B)
    JavaScript (Project C)
    Website
    (Project A)
    CDN
    Website
    (Project B)
    Website
    (Project C)
    JavaScript
    (全 Project 共通)

    View full-size slide

  19.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  19
    スクリプトサイズ
    軽量化
    Project ごとの bundle の仕組み
    JavaScript (Project A)
    Website
    (Project A)
    CDN
    Website
    (Project B)
    Website
    (Project C)
    JavaScript (Project B)
    JavaScript (Project C)
    JavaScrip
    t
    (共通)
    JSON
    Config
    (Project A)
    JSON
    Config
    (Project B)
    JSON
    Config
    (Project C)
    bundle
    bundle
    bundle
    Server

    View full-size slide

  20.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  20
    スクリプトサイズ
    軽量化
    どのように機能を取捨選択しているか
    rollup などで bundle
    terser で最適化
    以下の 2つのコードを想定
    ● entry.js
    ● features.js

    View full-size slide

  21.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  21
    スクリプトサイズ
    軽量化
    ProjectごとにJavaScriptを用意するデメリット
    JavaScript 本体の更新時に
    全 Project の数だけJavaScript を生成し直す必要
    1. デプロイ時間が長くなる
    → bundle の手法を最適化していくしかない... (rollup から esbuild で新しく作り直し試験中)
    → bundle をせず、Project ごとの config をそのまま文字列置換 (Projectごとの最適化はできない)
    【bundle speed (50file)】rollup: 14276.82 msec, esbuild: 8.80 msec, 文字列置換: 0.17 msec
    2. CDN の Invalidation の制限がある
    → CDN の cache 時間を 1 min と短めに設定

    View full-size slide

  22.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  22
    スクリプトサイズ
    軽量化
    ProjectごとにJavaScriptを用意するデメリット
    JavaScript 本体の更新時に
    全 Project の数だけJavaScript を生成し直す必要
    1. デプロイ時間が長くなる
    → bundle の手法を最適化していくしかない... (rollup から esbuild で新しく作り直し試験中)
    → bundle をせず、Project ごとの config をそのまま文字列置換 (Projectごとの最適化はできない)
    【bundle speed (50file)】rollup: 14276.82 msec, esbuild: 8.80 msec, 文字列置換: 0.17 msec
    2. CDN の Invalidation の制限がある
    → CDN の cache 時間を 1 min と短めに設定

    View full-size slide

  23.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  | 
    本日のテーマ
    計測タグとは
    移行のきっかけ
    サイズ軽量化
    プラグイン化
    計測タグの拡張性
    まとめ
    話すこと
    󰗔
    これから先も戦える
    サードパーティスクリプト

    View full-size slide

  24.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  24
    他プロダクトの
    プラグイン化
    会社のフェーズの変化
    リリース当初 (2015年)
    3rd Party Script
    プロダクト A
    ポップアップ
    現在
    様々なプロダクトを 3rd Party Script 上で動かす統一的な仕組みがなかった
    3rd Party Script
    プロダクト A
    ポップアップ
    プロダクト C
    チャット
    プロダクト B
    FAQ

    View full-size slide

  25.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  25
    他プロダクトの
    プラグイン化
    プラグイン化の要件
    ● Project によって 必要なプロダクトが違う
    ● 3rd Party Script 本体とは別で開発される
    ● 3rd Party Script 本体から情報を渡す必要
    ● プラグイン間のデータのやり取り
    ○ プラグインが起動している保証なし

    View full-size slide

  26.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  26
    他プロダクトの
    プラグイン化
    プラグイン化の実装
    ● Project によって 必要なプロダクトが違う
    → Project ごとに JavaScript を生成 (前述なので省略)
    ● 3rd Party Script 本体とは別で開発される
    ● 3rd Party Script 本体から情報を渡す必要
    ● プラグイン間のデータのやり取り
    ○ プラグインが起動している保証なし
    シンプルに!
    ● dynamic import のみで解決
    ● シンプルな interface 規約
    Pub/Subの仕組み

    View full-size slide

  27.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  27
    他プロダクトの
    プラグイン化
    シンプルなインターフェース
    計測タグ本体の呼び出し元
    他プロダクトのインターフェース

    View full-size slide

  28.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  28
    他プロダクトの
    プラグイン化
    プラグイン間のデータのやり取り
    ● Pub/Sub の仕組みを採用
    ● Plugin は様々な Topic の
    Publisher, Subscriber を担う
    ● Plugin 起動前の message も
    受け取ることが可能
    Topic A
    [msgA, msgC]
    Plugin A
    Plugin B
    Plugin C
    Publish “msgA”
    Publish “msgC”
    Subscribe TopicA
    [msgA, msgB]

    View full-size slide

  29.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  | 
    本日のテーマ
    計測タグとは
    移行のきっかけ
    サイズ軽量化
    プラグイン化
    計測タグの拡張性
    まとめ
    話すこと
    󰗔
    これから先も戦える
    サードパーティスクリプト

    View full-size slide

  30.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  30
    計測タグの拡張性
    旧計測タグの拡張性の課題
    旧計測タグのイベントトラッキング関数
    ● 旧計測タグの場合、 tracker object に track method を事前に宣言する必要あり
    ● track 以外の method を新しく使おうとすると、事前宣言用の script を書き換える必要あり
    → method 足すたびにお客様によるスクリプトタグの置き換えが必要
    新しい method を容易に開発できない
    事前宣言用の疑似スクリプト
    delete の method を足そうとすると

    View full-size slide

  31.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  31
    計測タグの拡張性
    計測タグ自体の拡張性の改善
    新計測タグのイベントトラッキング関数
    ● tracker object に function を生やす (第一引数が method 名)
    ● method 名の定義は 3rd Party Script 内部で定義
    お客様のタグ変更なく容易にmethod を追加可能
    事前宣言用の疑似スクリプト

    View full-size slide

  32.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  32
    計測タグの拡張性
    計測タグ変更によるデメリット
    ● 計測タグ移行時に全てのイベントトラッキング関数を置き換える必要
    ○ 関数の数としては多く負担になる
    互換用のスクリプトタグを作成
    旧計測タグのインターフェースを新計測タグの上に実装

    View full-size slide

  33.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  | 
    本日のテーマ
    計測タグとは
    移行のきっかけ
    サイズ軽量化
    プラグイン化
    計測タグの拡張性
    まとめ
    話すこと
    󰗔
    これから先も戦える
    サードパーティスクリプト

    View full-size slide

  34.   |  © PLAID Inc. 2023.02.09  |  Developers Summit 2023  |  34
    まとめ
    まとめ
    ● 以下の点を主に考えながら、計測タグと3rd Party Scriptを全刷新
    ○ スクリプトサイズの軽量化
    ■ Project ごとに使う機能だけ bundle
    ○ 他プロダクトのプラグイン化
    ■ シンプルに! データのやり取りは Pub/Sub で
    ○ 計測タグ自体の拡張性
    ■ method 名の定義を事前宣言 script 内でしない
    ● これからの課題
    ○ Project ごとの JavaScript の bundle 速度の向上
    ○ スクリプトサイズを小さく保っていく仕組みや文化
    ○ 3rd Party Script 上にのる Product をガンガン開発

    View full-size slide