株式会社SHIFT DAAEテクノロジーグループ 栗山晃 アーキテクチャを把握し、テスト観点の 漏れをなくす

1 アジェンダ アジェンダ 1. 自己紹介 2. 概要 3. GA(Google Analytics)のアーキテクチャ1 4. GA(Google Analytics)のアーキテクチャ2 5. 「GAタグを貼りつけるだけ」のテスト観点 6. 終わりに

2 自己紹介（発表者の紹介） 1.自己紹介 ・名前：栗山 晃 ・役割：DAAEテクノロジーグループ リードエンジニア＆プロジェクトマネージャ ・普段の業務 ⇒ Webシステムの開発 ⇒ テストケースのレビュー ⇒ その他もろもろ 開発エンジニアの観点で、「テスト観点の漏れをなくす」ための考え方をご紹介します。

・「GAタグ(Google Analyticsタグ)」とは？ Google Analyticsが提供するコードをWebサイトに埋め込む（単純に張りつけるだけ）で、 Webサイトに訪れるユーザー数やその動向を把握できるようになるツールです。 3 概要：アーキテクチャを把握し、テスト観点の漏れをなくす 2.概要 「GAタグ(Google Analyticsタグ)を埋め込むだけ」を例に「アーキテクチャからテスト観点の 漏れをなくすための考え方」を説明します 「アーキテクチャを把握し、テスト観点の漏れをなくす」 「コードを単純に張りつけるだけ」なので、間違いようがない。テストの必要性があるのだ ろうか？ いったい何をテストしたらいいのだろうか？

4 GAのアーキテクチャ1：GAの通信の仕組み 3. GAのアーキテクチャ1 GAタグは「ユーザーの情報」を 取得し、「外部のサーバー (Google)」に送信する 悪質なプログラム(マルウェア)と 同じような動き 防止する仕組みがある（CSP: Contents Security Policy) ブラウザ Webサーバー GAタグを含むソースコード (HTML, Javascript) Webサイトにおけるユーザーの動 向などのデータ GAタグ ソースコード（HTML+Javascript) GA(Google)

5 GAのアーキテクチャ2：GAの通信の仕組み + CSP(Contents Security Policy) 4.GAのアーキテクチャ2 GAタグが正常に動作するには、適切 にCSPが設定されている必要がある。 ブラウザ Webサーバー GAタグを含むソースコード (HTML, Javascript) + CSPヘッダー（CSP設定の 指示） Webサイトにおけるユーザーの動 向などのデータ GAタグ ソースコード（HTML+Javascript) GA(Google) CSP設定に従い、 GAタグの通信を 制御 必要なテスト観点 ・CSP設定が適切に設定されていること。 ・GAタグが正常に動作していること ※確認方法例 ChromeのDeveloperツールのコンソール でエラーが出ないことを確認する

6 「GAタグを貼りつけるだけ」のテスト観点 5. 「GAタグを貼りつけるだけ」のテスト観点 GAタグが正常に動作するた めには、CSPに関わる観点を もつことが必要。 そういった観点は、「アーキ テクチャを把握」しないと、 もつことが難しい。 GAタグを貼り つけるだけ 間違いようがな いからテスト不 要 HTMLのソース を見てGAタグが あることを確認 アーキテクチャ を把握 必要なテスト観 点を把握(CSP設 定の観点をもつ)

7 終わりに 6.終わりに 「アーキテクチャを把握し、テスト観点の漏れをなくす」は以上です。 こういった考え方を皆様の担当するシステムにも応用していけると思います。 本発表が、皆様のテスト観点の漏れの防止につながり、より良いプロダクトの開発に繋がれ ば幸いです。 【ご紹介】 SHIFT DAAEテクノロジーグループに興味のある方はこちら https://speakerdeck.com/shiftgroup/32bace1293215fd26da32d547531881d