フロントエンドで学んだことをデータ分析で使ってみた話

はじめに

五十嵐大地 2020年 Webフロントで新卒入社. Ameba Pickチームで約2年勤務. 機能開発・DX改善・データ整備に携わる. 2023年よりSEO周りの分析と開発に従事. https://github.com/Dai7Igarashi

五十嵐大地 2020年 Webフロントで新卒入社. Ameba Pickチームで約2年勤務. 機能開発・DX改善・データ整備に携わる. 2023年よりSEO周りの分析と開発に従事. https://github.com/Dai7Igarashi 本日は、メンテナンス性を意識した
データ整備についてお話しします

あらすじ

1.背景 2. 設計 3. 実装 4. 振り返り

1. 背景

投稿数商品名 imp数 CV数ブロガー報酬額投稿UU アフィリエイトサービスで追いたい指標は様々

投稿数商品名 imp数 CV数ブロガー報酬額投稿UU 様々なモニタリングをしたい！アフィリエイトサービスで追いたい指標は様々

既存でモニタリング環境はあるにはあった💹

クエリクエリクエリクエリクエリ

クエリクエリクエリクエリクエリ需要に応じて分析ツールは様々。そしてクエリの保管場所も様々😇

そして... 開発仕様変更指標変化分析

メンテナンスが追いつかず破綻したクエリが続出ということで

クエリを一元管理することに💪

2. 設計

設計方針・GitHubで情報を完結できる状態・継続的にメンテナンスできる状態・仕様や指標の変更で破綻しにくい状態

・GitHubで情報を完結できる状態 Why ・1箇所で管理することで管理コストを減らしたい How ・READMEの充実・拡張可能なアーキテクチャ

・継続的にメンテナンスできる状態 Why ・属人化を排除したい How ・学習コストの削減 ┣ 型情報の充実 ┗ 知名度の高いアーキテクチャ

・仕様や指標の変更で破綻しにくい状態 Why ・修正不要、または即修正できる状態にしたい How ・SQLの一元管理・再利用性・テストコードの追加

要件・Google Sheetsへスケジュール書込み・BigQueryを直接叩けるようにSQL単体も存在

・ベースはNode.js → GASを使うから・yarn workspaceによるモノレポ → 拡張可能なアーキテクチャ・TypeScript導入 → 型情報の充実
・こだわりのフォルダ構成 → SQLの一元管理や再利用性・Jest導入 → テストコードの追加設計確定版

3. 実装

ディレクトリTOP

ディレクトリTOP SQLの一元管理

【Point】・atomic designの要領で責務分離し再利用性を高める・SQLとtsファイルを同階層に置き修正漏れを防ぐ・クエリは直接 or プログラムいずれでの利用も可能

【Point】・分析の最終出力クエリはtamplates層で管理する

ディレクトリTOP クエリで呼び出す定数の共通利用

【Point】・基本的にGASで呼び出すクエリの定数なのでtsファイル・定数の変更が抽出に影響するものは、ここでテストコードを追加

ディレクトリTOP 拡張可能なアーキテクチャ

【Point】・同一のクエリを使い回して様々なプログラムを組める

GASフォルダ構成【Point】・ts-loaderとgas-webpack-pluginでGASをtsで書く・claspを用いてCLIからデプロイ

GASフォルダ構成【Point】・src以下は全てtsファイルで型が充実・utilsとかはテストコードが充実

おまけ: package.jsonはこんな感じ

4. 振り返り

データ系の実装や運用は突貫工事で放置されがち。だからこそメンテナンス性が重要。

クエリを中心として・拡張の容易性・型情報の充実・高い再利用性・テストコードをキーワードにメンテナンス性向上を図った💪

これから本格利用されるので効果を追いますご清聴ありがとうございました🙇

フロントエンドで学んだことをデータ分析で使ってみた話

フロントエンドで学んだことをデータ分析で使ってみた話

Other Decks in Programming

Featured

Transcript