Slide 1

Slide 1 text

SET活動のすすめ Mercari Frontend SET @urahiroshi (Hiroshi Urayama)

Slide 2

Slide 2 text

このスライドの趣旨 - MercariのFrontendチームにはSET(Software Engineer in Test)というロールのエ ンジニアがいる - SETは、チームの生産性向上・品質向上のための取り組みを行なっている(≒カイ ゼン活動) - SETの活動を紹介し、このような活動を取り入れる仕組みを作ることを提案する

Slide 3

Slide 3 text

Mercari Frontend SETがやっていること - (今日は話しません)開発環境の構築、本番環境へのフィードバック - 開発環境の運用・トラブルシューティング - ビルド・デプロイ処理の修正 - フロントエンドチームの生産性向上・品質向上への取り組み - CI・開発プロセスの改善 - 外部ツールの導入・検証 - テスト・リファクタリング

Slide 4

Slide 4 text

CI・開発プロセスの改善 - CircleCI - CIのセットアップ - Lint, テスト, ビルド処理(gulp, webpack, tsc, etc...)の確認など - 自動化されていないテストを許さない - ビルド処理がエラーにならないことを確認する - CIの高速化 - キャッシュを使う - ジョブの並列化 - 最適なDockerイメージの選択(gitなどのインストール時間を省く ) - CIのジョブ追加 - pushごとにstorybookをデプロイする - (for application) developブランチにマージされたら開発環境にデプロイする - (for package) masterブランチにマージされたら npm private registryにpublishする - (ブログも書いています : https://tech.mercari.com/entry/2018/08/20/104435)

Slide 5

Slide 5 text

CI・開発プロセスの改善 - GitHubの設定 - Protected branch設定 - 開発プロセスに適した設定を行う - CI通らないとマージ不可、特定のメンバーしかマージ不可、レビュー必須にするなど - Issue, PullRequestテンプレートの作成 - Slack連携 - Issue, Pull Requestの通知

Slide 6

Slide 6 text

CI・開発プロセスの改善 - CIで使うnpm package作成 - Slack投稿するツール - storybookのデプロイ用にファイルをアップロードするツール - npm publishしてgit tagつけるツール

Slide 7

Slide 7 text

外部ツールの導入・検証 - Sentry - エラートラッキングツール - エンドユーザーのブラウザ上で発生したエラー情報の収集、管理 - Codecov - CIでのユニットテストカバレッジを収集・可視化するツール - 対象のディレクトリのカバレッジが下がったら Pull RequestをNGとするなど - Renovate - npm packageの自動更新ツール。 package更新用のPull Requestを作成してくれる - 運用ルール(どういう時にPull Requestをマージするかなど )も定めて開発に組み込む

Slide 8

Slide 8 text

テスト・リファクタリング - ユニットテストのセットアップ - テストがないプロジェクトでも、空のテストを作って CIで動かす - ユニットテストカバレッジの目標設定 (Codecov) - 自動E2Eテストの検討 - ユニットテストでカバーしきれない箇所、手動テストで毎回確認するような箇所の E2Eテスト化を検 討 - ユニットテストに比べて環境構築や実装コストも高いので注意 - リファクタリング - コードのリファクタリング - 不要コードの削除 - Node.jsやパッケージのバージョンアップ - どう検証するかを含めて考える

Slide 9

Slide 9 text

SET活動をするには - 「機能に対する実装やバグ修正を行わない」という制約をつけるだけ - SETというロールがなくても、個人やチームで意識的にこのような日を作っても良い のでは - 例) - (チームで) 週ごとにSET担当をローテーションする - (チームで) 月に1回は特定の日は機能に対する実装やバグ修正を行わない日にする - (個人で) 金曜日はSET活動に時間を費やす

Slide 10

Slide 10 text

SET活動のメリット - エンジニア自身のメリット - 視点を変えることで、これまでとは異なるアプローチの解決策を考えるようになる - 例) バグが出た時に、バグを修正することだけでなく、バグを事前に検出する方法について考 えるなど - 新しいスキルセットが身につく - スケジュール駆動開発で傷ついた心を浄化する - 組織的なメリット - 開発・運用プロセスの改善は、組織の強みになる - 開発プロセスの問題をすくい上げられる - 問題に気づいた人=対応する人ではない - 問題に気づいた時に、その対処について相談できるメンバーがいる => やるしかない!!!

Slide 11

Slide 11 text

宣伝 2018 10/04 (木) Mercari Tech Conf 2018やります! https://techconf.mercari.com/

Slide 12

Slide 12 text

Thank you!