はじめに
こんにちは、Juna1013です。
つい昨日からSpotifyを使い始め、その綺麗なUIが気に入り始めていました。そこで技術スタックが気になったため、調べてみることにしました。
Wappalyzerとは？
Wappalyzerとは技術スタック判定ツールです。Webサイト上で診断ができる他、GoogleChromeなどのブラウザ拡張機能も配布されています。
他にもNode.jsのモジュールも公開されており、自前のアプリケーションに組み込むことも可能です。
調査結果
以下がWappalyzerを用いた技術スタックの調査結果になります。
フロントエンド
React
UI構築のためのJSライブラリです。コンポーネント指向でUIを構築し、仮想DOMを利用して高速なレンダリングを可能にします。特にSPAの開発に適しています。
React Router(6)
Reactアプリケーションで複数のページやビューを管理するためのライブラリです。SPAにおいてURLの変更に応じてコンポーネントを表示させ、スムーズなページ遷移を実現します。
Redux
状態管理ライブラリです。コンポーネントの親子関係に関わらずデータにアクセスできます。また、Redux自体は独立しているため、Reactなしでも使用可能です。
styled-components(5.3.10)
React向けにつくられたCSS-in-JSライブラリの1つで、コンポーネントベースでスタイルを記述・管理できます。スタイルの重複や競合を防ぎやすく、コンポーネントのプロパティを使用してスタイルを動的に変更することも可能です。
Goober
軽量なCSS-in-JSライブラリです。.cssファイルを使用せずにJSファイル内でスタイルを定義し、コンポーネントに適用することができます。また、1KB未満と言う小さいサイズでありながら、styled-componentsと似たAPIを提供し、高いパフォーマンスを持ちます。
core-js(3.42.0)
オープンソースのJSライブラリで、古いブラウザでもJSの最新機能を使えるようにするための標準的なポリフィルを提供します。
PWA
Webプラットフォーム技術を使用して構築されたアプリでありながら、プラットフォーム専用のネイティブアプリのような使い勝手を提供する技術です。Webサイトのように単一のコードベースから複数のプラットフォームやデバイスで動作し、オンラインアクセス・プッシュ通知・ホーム画面への追加などが可能です。
バックエンド・インフラ
Envoy
ネットワークトラフィックを効率的に管理し、分散システムを構築するための高性能なオープンソースエッジ / サービスプロキシです。サービス間のネットワーク制御をライブラリではなくネットワークプロキシとして提供することで、各サービスはEnvoyを経由して相互に接続します。この特徴はマイクロサービスアーキテクチャにおいて有用です。
Varnish
HTTPリバースプロキシキャッシュです。頻繁にリクエストされるWebページをキャッシュすることで、HTTP配信を高速化します。ユーザーからのリクエストがあった際に、キャッシュ内にページがあれば直接コンテンツを提供することで、オリジンサーバーへのリクエストを減らし、ページのロード時間を大幅に短縮します。HTTPに特化して設計されています。
Sportify Web API
Spotifyが提供しているプログラミング用のWeb APIです。このAPIを利用することによって、Spotifyのサービスやデータにアクセスし、独自のアプリケーションに様々な機能を組み込むことができます。
開発・運用
Sentry
アプリケーションのパフォーマンス監視とエラートラッキングを行うためのプラットフォームです。リアルタイムでアプリケーションのエラー検出や分析を行い、問題の改修をサポートします。
GetFeedback
顧客からのフィードバックを収集・分析し、顧客体験（CX）向上に役立てるためのツールです。
セキュリティ
HSTS
RFC6797で定義される、WebサイトがWebブラウザにHTTPSでのアクセスを強制的に指示する技術です。中間者攻撃を防ぎ、セキュリティを強化します。1度HSTSポリシーが設定されると、ブラウザはそのサイトへのアクセスを常にHTTPSで行うようになります。
reCAPTCHA
Googleが提供する、Webサイトをスパムや不正なアクセスから保護するためのサービスです。アカウントの乗っ取りを検出して保護し、クレデンシャルスタッフフィング攻撃や偽アカウントの作成をブロックします。多くの場合、ユーザーの明示的な操作なしに不正なbotを識別し排除します。
マーケティング
Google Tag Manage
Webサイトやモバイルアプリにタグ（トラッキングコードやマーケティングタグなど）を簡単に設定・実装できるタグ管理システムです。使いやすいウェブインターフェースを通じて、タグのデプロイの最適化、設定エラーのトラブルシューティング、デプロイ済みのタグの変更を効率的に行うことができます。
Google Analytics (GA4)
Googleが提供する次世代のWebサイト・アプリ解析ツールです。Webサイトとアプリを横断したユーザーの行動を統合的に分析できるほか、機械学習を活用した高度な分析や、取得できるデータの種類の増加（動画再生回数、スクロール深度など）が特徴です。
Contentsquare
Webサイトやアプリ上のユーザー行動を可視化し、顧客体験向上に向けた改善ポイントを導き出す分析プラットフォームです。ヒートマップやセッションリプレイなどの豊富な分析機能に加え、AIがユーザー行動を自動で要約・分析し、異常の検知や改善インパクトの大きい箇所を特定します。A/Bテスト機能も備えています。
Snap Pixel
Snapchat広告の効果を測定するためのピクセル（トラッキングコード）です。Webサイトに設置することで、Snapchat広告から流入したユーザーの行動（購入、登録など）を追跡し、広告キャンペーンの効果を詳細に分析できます。
DoubleClick Floodlight
Googleの広告プラットフォーム（旧DoubleClick）におけるコンバージョン測定に使用されるタグです。ユーザーがGoogleまたはその他のプラットフォームで提供された広告を閲覧またはクリックした後に、Webサイトで特定の行動（購入完了など）を行ったかを把握するために使用されます。
Twitter Ads (X広告)
Twitter（現X）のタイムラインや検索結果に広告を掲載できるサービスです。ユーザーの興味・関心、ツイートや検索に用いるキーワードなど、多彩なターゲティングで広告を配信し、特定のオーディエンスにリーチすることが可能です。
Microsoft Advertising
Microsoft社が提供する運用型の広告プラットフォームで、検索連動型広告とディスプレイ広告の両方を配信できます。Microsoftの広告ネットワーク（Bing検索結果、Microsoft Audience Networkなど）に広告を配信し、Google広告とは異なるオーディエンスにリーチする機会を提供します。
テスト
Google Optimize
ウェブサイトの最適化のためのA/Bテストや多変量テストができるツールです。ブラウザ上でテスト設定が可能であり、サイト修正作業なしにテストを実施できます。これにより、デザインやコンテンツの変更がユーザー行動にどのような影響を与えるかを検証し、最適化を進めることができます。
その他
Open Graph (OGP)
WebページのURLがX（旧Twitter）やFacebookなどのSNSに投稿されたときに、「タイトル」「画像」「説明文」などの補足情報を適切に表示するための仕組み（プロトコル）ですSNS上でのコンテンツ共有時に、魅力的な表示を促し、クリック率の向上に貢献します。
HTTP/2
WWWでデータをやり取りする方法の取り決め（プロトコル）であるHTTPの第2世代バージョンです。HTTP/1.1と比較して、多重化、ヘッダ圧縮、サーバープッシュなどの機能により、ウェブページのロード時間を高速化し、より効率的な通信を実現します。
OneTrust
クッキー同意管理ソリューションを提供するアメリカ発のベンダーです。タグによるCookie取得の制御を行い、ユーザーの同意/非同意を管理するツールとして、特にGDPRやCCPAなどのプライバシー規制へのコンプライアンス対応を支援します。
おわりに
動作の高速化やマーケティングに力を入れていることが分かりました。技術スタックを見ればそのアプリが何を重視しているのかがよく分かりますね。
参考
Discussion