Yahoo! JAPAN トップページ リニューアルとテストについて #yjbonfire
1K Views
February 07, 20
スライド概要
Bonfire Frontend #5 での登壇発表内容です。
イベントページ URL はこちらです。
https://yj-meetup.connpass.com/event/153825/
Bonfire Frontendは、ヤフー主催の「フロントエンド」にフォーカスした情報共有を定期的に行う勉強会/交流会イベントです。
様々な最新技術の活用方法やデザイナー、バックエンドとの連携など、フロントエンドが抱える課題を共有し、フロントエンドについてを熱く語る会を目指します！
第5回のテーマは「テストと自動化」でした！
「Yahoo! JAPAN トップページ リニューアルとテストについて」というタイトルで、
Yahoo! JAPAN PC トップページのリニューアルとテストについてお話させていただきました。
Yahoo! JAPAN Tech Blog にて、
Yahoo! JAPAN 第4〜6代目 HTML5黒帯岡部 和昌 氏が執筆した
「Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話」がベースになっています。
https://techblog.yahoo.co.jp/entry/20191203785540/
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
Yahoo! JAPAN トップページ リニューアルとテストについて 2020年2⽉5⽇ ヤフー株式会社 ⻄村 宗親 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
⾃⼰紹介 • ⻄村 宗親 (にしむら むねちか) • ヤフー株式会社 2018 年中途採⽤⼊社 • FE と BE を中⼼に 10 年ほどプログラマーやってます Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 2
本⽇の内容 リニューアルされた Yahoo! JAPAN トップページにおける テストの⾃動化についてお話します Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 3
⽬次 • Yahoo! JAPAN トップページ リニューアルについて • テストについて • テスト⾃動化について Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 4
トップページリニューアル 2019年10⽉1⽇ Yahoo! JAPAN トップページ リニューアル Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 5
React・Redux の採⽤ • コンポーネント化が容易である • 社内外的にナレッジが多い Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 6
TypeScript の採⽤ • 静的型付けが可能 • インターフェース共有を楽に⾏える • ⼤規模開発に強いコードを書ける Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 7
SSR の導⼊ • ページ読み込み時の⾼速化が可能 • JS オフユーザでも画⾯表⽰が可能 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 8
razzle の採⽤ • webpack.config を⾃動⽣成してく れるのでビルドが楽になる • ペライチのサイトに Next.js はオー バースペックであるため Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 9
詳しくは Yahoo! JAPAN トップページを Atomic Design と React・Redux・ TypeScript で作り変えたお話 https://techblog.yahoo.co.jp/entry/20191203785540/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 10
テストについて Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
テスト⽅針 • E2E テストより ユニットテストをしっかりやる • UI コンポーネントテストも そろえていく • カバレッジ 100 % は⽬指さない (やり過ぎない程度に⾼めの⽔準を維持する) Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 12
ユニットテストフレームワーク • Jest を採⽤した • razzle test 実⾏ = jest 実⾏ であるため • v25.1.0 が 1/22 にリリースされた Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 13
Jest の特徴 • jsdom 利⽤によりブラウザー不⽤で ⾼速なテストが可能 • スナップショットテストが可能 • test-runner, mock, coverage, assertion の全てがそろっている Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 14
Jest の設定 • 公式ドキュメントが充実しているので 要チェック • razzle test を利⽤すると、 React ⽤の transform が⾃動設定 されるので便利 • ts-jest を利⽤して TypeScript に対応 （Type Checking のため） Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 15
React Component Test • react-testing-library を 利⽤している • enzyme は React Hooks 込みの テストに弱かったため Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 16
React Hooks Test • React Component 内に React Hooks を書くことが多い • React Component の Unit Test で確認できているため react-hooks-testing-library は利⽤し ていない Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 17
Sample Component Test Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 18
スナップショットテストの⼯夫 • Storybook を利⽤しているので Storyshots を利⽤している • コンポーネントテストと Storybook の 両⽅に記述するのは無駄なので • コンポーネントテストは確認したいロ ジックの assertion に集中できる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 19
実際の⾒た⽬の⽐較 • reg-suit により UI 変更の差分を検知している • Storybook を Puppeteer でキャプチャーし ⾃動的に⽐較してくれるので便利 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 20
reg-suit Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 21
reg-suit Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 22
reg-suit • Slide などで差分をより詳細に確認できる Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 23
reg-suit • 予期せぬ変更が検知される場合が あるのが難点 • 時系列によって変わるデータ • 画像ロード遅延 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 24
E2E テスト • jest-puppeteer により 簡易的に実施している • クロスブラウザーチェックは 実機で⼗分可能なので Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 25
テスト⾃動化 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
利⽤しているツール • GitHub Enterprise • Hosted Danger • Screwdriver.cd Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 27
Hosted Danger • Danger をサービスとして利⽤できる • Pull Request（PR）時の確認事項を ⾃動化できる • レビュアーの⾃動アサインや WIP チェック、カバレッジレポートなど に利⽤している Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 28
Screwdriver.cd • Yahoo! Inc. で開発された CD パイプライン⽤の OSS • YAML でパイプラインの記述が可能 • 特定のブランチでのみ実施するジョブ を記述できる柔軟性がある Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 29
CI/CD 概要 #1 GHE へ Pull Request Author Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. GHE 30
CI/CD 概要 #2 Hosted Danger チェック レビュアー⾃動アサイン Reviewer Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. GHE 31
CI/CD 概要 #3 Screwdriver.cd にてタスク実⾏ • ユニットテスト • Storybook ⽣成 • スナップショットテスト • reg-suit Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. GHE Screwdriver.cd 32
CI/CD 概要 #4 merge 後は⾃動的にステージング環境へ deploy される GHE Screwdriver.cd STG 環境 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 33
CI/CD 概要 #5 blue-green deploy 時に E2E テスト実施 Screwdriver.cd 本番環境 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 34
まとめ • React のテストには jest や react-testing-library を⽤いている • Storybook や reg-suit で レンダリング後の⾒た⽬もテストできる • テストも⾃動化も継続が⼤事です Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 35
EOP ご清聴ありがとうございました Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
Appendix Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved.
Tech Blog Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話 著者 第4〜6代⽬ HTML5⿊帯 岡部 和昌 https://techblog.yahoo.co.jp/entry/20191203785540/ Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 38
Yahoo! JAPAN Advent Calender 2019 🎉 Best Author 賞獲得 🎉 🎉 年間 PV 数 1 位 🎉 本編では触れなかった内容をご紹介します Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 39
Atomic Design の導⼊ UIを構成している部品を 「Atoms」 「Molecules」 「Organisms」 と分類して、それらを 「Templates」 「Pages」といった概念 で組み合わせてページを作 り上げる設計・実装の⼿法 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 40
Atomic Design のメリット • 部品が共通化されているので広範囲の 修正が簡単 • 並列作業や分業が⾮常にしやすい • 部品の使い回しが⾮常に楽 Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 41
Atomic Design のデメリット • Atomic Design をそのまま導⼊すると 要件に合わない場合がある • 認識合わせするのにとても時間がかかる • 概念や設計が破綻しないように部品を考 える必要がある Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 42
Atomic Design での⼯夫 • 「Templates」の概念はなくして、 できる限り「Molecules」を減らして いる • ビジュアルデザイナーとの認識合わせ は頻繁に⾏う Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 43
HTML/CSS 周りの刷新 • ページ全体の構造の最適化を⾏った • アクセシビリティーに関しても可能な 限り考慮した • WAI-ARIA 関連を適⽤した Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 44
SVG 画像を基本形式に • ⾼解像度のデバイスで⾒た場合でも アイコンなどが綺麗に表⽰できる • サイズや⾊変更なども⽐較的簡単に ⾏えるので、使い回しがしやすい • ファイルサイズがとても⼩さい （容量が軽い） Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 45
CSS in JS の採⽤ • BEM から CSS in JS へ変更 • class 名を深く考えなくて良い • Atomic Design との相性が良い Copyright (C) 2020 Yahoo Japan Corporation. All Rights Reserved. 46