サーバレスのページ一覧
なぜ「自動」テストしたいのか？
オンボーディングの観点
テストコードが仕様書になる
関数やクラスの期待値がわかりやすい
チームメンバーに対して「自動テストがPassしたら影響についてはOKです」という依頼
の...
なぜ「自動」テストしたいのか？
変更可能性の観点
「ソフト」ウェアなので変更可能であることをキープし続けなければならない
『Clean Architecture』の受け売り
なぜ？
機能追加・仕様変更に耐える必要があるか...
自動テストに費やすコスト・メンテナンスが辛い？
自動テストに費やすコスト・メンテナンスが辛い？
効率化・合理化のため自動テスト基盤であるはずが、逆に現場を苦しめてしまう懸念も無視
できない
テストを書く...
テストピラミッドで考える
テストピラミッドで考える
『初めての自動テスト』Jonathan Rasmusson、玉川 紘子、オライリージャパン
「1章 テストのピラミッド」
新しいテストを追加するときには、まずユニットテス...
テストピラミッドで考える
UI？統合？ユニット？
『初めての自動テスト』内では明確な定義が言及されています
ただ、実際の案件ではブレがち
今回はGoogleのTest Sizesを参考に基準を考える
Size
定義
Small DBを...
バックエンドのテスト
Smallテスト
Domain層
最も依存が少ない→最もSmallテストが容易な層
UseCase層
InfrastructureをDIしているため、スタブやモックに差し替えてのSmallテストが可
能
まずはDomain/UseCaseを集...
フロントエンドのテスト
Reactアプリケーションにレイヤードアーキテクチャを適
用すべきか？
フロントエンドアプリケーションは発表者自身まだ手探りな部分がある・・・
https://twitter.com/Nkzn/status/12201...
フロントエンドのテスト
アーキテクチャ（現時点の考え）
アプリケーションがReactと密結合になっても良い？
『Clean Architecture 達人に学ぶソフトウェアの構造と設計』Robert C. Martin、角征典、高
木正弘、ド...
フロントエンドのテスト
特定のライブラリと密結合する決断もアリ？
世界一わかりやすいClean Architecture - nuits.jp blog
具体的には、次のような「上位レベルの決断」の上であれば問題ないと考えています。
そ...
フロントエンドのテスト
ライブラリ・フレームワークと密結合することのトレードオフは十分認
識した上で・・・
React（そしてHooks）の世界観に乗ってしまった方が良いというスタンスになった
Reactそのものはこ...
フロントエンドのテスト
ただし、Reactの3rdライブラリには注意を払う
状態管理、コンポーネント集、ルーティング、CSS in JS・・・
破壊的変更があったりトレンドの移り変わりでメンテが終了するものも多い
これ...
フロントエンドのテスト
ところで: Next.jsは？
（まだ実案件投入したことはないのですが）Next.js Wayに乗るのも超アリだと思います！
AWSにホスティングする場合、決定版的選択肢が定まらないように見えるのがや...
フロントエンドのテスト
話を戻して・・・
テスト方針（現時点の考え）
バックエンドから受け取った情報を描画することがメイン、込み入ったロジックが少ないフ
ロントエンドアプリケーションの場合
=> Playwrigh...
フロントエンドのテスト
その他のテスト:
Utilityやただの関数として切り出しやすい処理はSmallテストする
Date インスタンスのフォーマット
バックエンドAPIから受け取った配列のフィルタ処理
Playwright スナップ...
フロントエンドのテスト
（今回の前提において）フロントエンドのテストは逆ピラミッドに寄りやすいと感じる
不安定
低速
⾼コスト
[Medium]
UI (API
)
モック
[Small]
Utility
などの関数
安定
⾼速
低コスト...
アプリケーション全体のテスト
Largeテスト（自動）
本物のAWSにデプロイしたアプリケーション全体をテストする
UIを操作し、期待する要素が存在することをアサーションする
バックエンドLargeテストと被る観点も...
アプリケーション全体のテスト
Largeテスト（手動）
人間のユーザ視点で確認することの価値
網羅的に実施したくなるが、
ここまでの自動テストの土台があること
手動テストは実施に最も人員・時間を要すること
を...
まとめ
フロントエンド
無理にレイヤードアーキテクチャを採用しない
基本的にReact Wayに乗る
3rdライブラリは栄枯盛衰が激しいので注意
追従・乗り換え戦略は必ず持っておく
Playwright+MSWを用いたMediumテスト...
まとめ
全部合体したピラミッドがこちら
不安定
低速
⾼コスト
[Large]
UI (
)
⼿動
[Large] UI (
⾃動)
[Large] Backend API (AWS)
[Medium] Frontend UI
[Medium]
Backend UseCase+Domain+Infrastructure...
今後の課題
今後の課題
（とはいってもやはり）フロントエンドのSmallテストを厚くしたい
(自分の) JavaScript のユニットテストの書き方
IaCのテスト
CDK素人がCDKのテスト方法について考えたのでまとめてみた |...
参考
参考
『初めての自動テスト』Jonathan Rasmusson、玉川 紘子、オライリージャパン、2017
『Clean Architecture 達人に学ぶソフトウェアの構造と設計』Robert C. Martin、角征
典、高木正弘、ドワンゴ、2018...
参考
CIで実行しないスナップショットテストがすごく便利
Naoya ItoさんはTwitterを使っています: 「フロントを React Hooks で、 urql や Recoil
を使って状態管理。一方、ヘビーな業務を処理するバックエンドの...
参考
『ドメイン駆動設計入門』成瀬 允宣、翔泳社、2020
little-hands/ddd-q-and-a: DDD質問箱 回答記録
使用ライブラリのバージョン管理 — 仕事ですぐに使えるTypeScript ドキュメント
世界一わかりやすいClean Ar...
まとめ
● CCoE（Cloud Center of Excellence）は ”クラウド活用推進組織 ”
○ 「企業内でクラウドを活用・推進していくための仕組みを整え、広めるための専門組織」
● Visional の CCoE は、全社プロダクトの非機能要...