1.
https://www.monotaro.com/
モノタロウECプラットフォーム
を支える開発運用
モダナイゼーションの取り組み
株式会社MonotaRO 金谷敦志
1

2.
https://www.monotaro.com/2019.07.02
自己紹介 - 金谷敦志
○ モノタロウのサイト開発に従事
○ フロントエンド、DevOpsの領域が
中心
○ PyCon JP 2015 LT
2016セッション登壇
2

3.
https://www.monotaro.com/2019.07.02
このセッションでお伝えしたいこと
● モノタロウは課題を技術で解決するテック系の会社
● 15年以上の自社開発における課題と理想の形の
ギャップを見極めモダナイゼーションに取り組み中
● 関西の会社だが東京でもエンジニアを募集中
○ オフィスは赤坂
3

4.
https://www.monotaro.com/2019.07.02 4

5.
https://www.monotaro.com/2019.07.02 5
本社

6.
https://www.monotaro.com/2019.07.02 6
本社

7.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
モノタロウについて
7

8.
について
8
● 事業者向けに提供する間接資材の通信販売会社
● 年間売上1,053億円の売上 (2018年)
○ 前年比24.0%↑
■ 2019年売上計画1,305億円
○ 9年連続20%↑の成長率 (2009年~)※
※ https://pdf.irpocket.com/C3064/g9xd/i8RW/uNIX.pdf no.7
システムは主にPython

9.
● 多種多様のデータを保持
● どの部門・社員もリアルタイムでデータ活用
9
データドリブンのモノタロウ
商品販売企画部門 データマーケティング部門 IT部門 物流部門 管理部門
カスタマー
サポート部門
新商品採用/開発
商品情報管理
WEB/ データ活用・推進 基幹システム
インフラ
コールセンター
大企業営業
アカウントサービス
入出荷 経理
人事
財務
広報
商品
サプライヤ
商品実績
WebLog
顧客データ
商品
プロモーション
各システムのメ
トリクス
特定のお客様に
関する情報
WMS 売上

10.
● tech blog
● SlideShare
● 社内勉強会
10
テック系のモノタロウ

11.
https://www.monotaro.com/2019.07.02
● 通販サイト
○ 事業者向け
○ 個人向け
○ 無人店舗
● 大企業システム連携
etc
● 基幹システム
11
15年以上自社開発しているモノタロウ
商
品
管
理
受
注
管
理
在
庫
管
理
顧
客
管
理
出
荷
管
理
財
務
管
理

12.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
15年以上自社開発している
モノタロウが抱える課題
12

13.
https://www.monotaro.com/2019.07.02
開発における課題
ひとことで言うとレガシー!!
● 複雑なシステム構成
● 独自実装フレームワーク/ライブラリ
● 多めのコピペ
● 自動化されたテストがない
● 開発した人しか分からない
13

14.
https://www.monotaro.com/2019.07.02
運用における課題
● 成長速度に合わせたスケールに対する不安
14

15.
https://www.monotaro.com/2019.07.02
更なる成長の準備が必要
今のECプラットフォームのまま拡大は難しい
● 5,000億円の売上を支えたい
● ビジネスを支える人やインフラもスケールしたい
● より大規模なデータ活用したい
15

16.
https://www.monotaro.com/2019.07.02
● メリットを極力増やし、デメリットを極力減らしたい
16
新しいプラットフォームを作ることが解決?
メリット デメリット
新しいプラットフォームに移行 技術的負債の返済による生産性の向上
さらなるスケールアウト対応
ビッグリライトは一般的には失敗す
る
● 古い設計を捨てられる？
● 本当に理解しやすくなる？
既存のプラットフォームを改善 漸進的に進めることができる バグったときのビジネスインパクト大
思い切った変更が難しい

17.
https://www.monotaro.com/2019.07.02
引き続き事業を継続発展させながら下記に挑む
● 現行ECプラットフォームのリファクターによる
ポータビリティアップ
● 並行して新ECプラットフォームを作成、検証
● ポータビリティの上がった現行版を新版にリビルド
17
ECプラットフォームのモダナイゼーション

18.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
既存ECプラットフォームのリファクター
18

19.
https://www.monotaro.com/2019.07.02
● レガシーシステムの特長
○ 利用技術の老朽化
○ システムの肥大化複雑化
○ ブラックボックス化
● モダナイゼーションで実施すること
○ 自動化されたテストで機能を保護
○ 積極的なリファクタリングでポータビリティの向上
○ 今後のビジネス要件に合う技術に移行
19
レガシーシステムとモダナイゼーション

20.
https://www.monotaro.com/2019.07.02
既存ECプラットフォームのリファクター
20
課題 理想の状態 実現方法
自動化されたテストがない
コピペの多いコード
自動化されたテストで保護
リファクタリングがしやすい
ユニットテストと受け入れテスト
の自動化
独自フレームワーク依存 業務ロジックのポータビリティ向上 クリーンアーキテクチャ化
(ダイジェスト版)
ログ収集・集計に時間がかかる
複数サーバーをまたぐリクエスト
の追跡が難しい
ログが一箇所に集まっている
鮮度の高いデータを高速検索できる
ログ同士の関連付けがある
BigQueryによるログ基盤
クラウドやオンプレのサーバー監
視が大変
監視の一元化 Datadogによるワンストップ監
視
(詳細はブースにて)
アプリケーションエラー対応が進
まない
エラー状況の見える化
優先度を付けた対応
Sentryによるエラー状況監視
(詳細はブースにて)

21.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
ユニットテストと受け入れテストの
自動化
21

22.
https://www.monotaro.com/2019.07.02
● 課題
○ 自動化されたテストがない
■ ユニットテストの仕組みがない
■ 壊れるのが怖いから壊さないように振る舞う
■ コピペの多いコード
● 理想の状態
○ 自動化されたテストで保護
○ リファクタリングがしやすい 22
既存ECプラットフォーム開発の課題と理想

23.
https://www.monotaro.com/2019.07.02
まずはサービスを壊していないかチェックする
受け入れテストを最初にトライ
23
自動化されたテストの選択
要件定義
基本設計
詳細設計
実装
受け入れテスト
結合テスト
単体テスト
コードレビュー

24.
https://www.monotaro.com/2019.07.02
● 自動化されたリリースに組み込む
● 過去のツラみをどう乗り越えるか？
○ 受け入れテストの保守が大変
○ Geb + Spockは続かなかった経験
24
受け入れテスト自動化

25.
https://www.monotaro.com/2019.07.02
● 受け入れテストやRPA用
● キーワードでテストを書く
○ DB接続
○ HTTPリクエスト実行
○ WebDriver連携
● Python製
○ 利用だけならPython
コードは不要
25
Robot Framework

26.
https://www.monotaro.com/2019.07.02 26
テストコード例
*** Test Cases ***
バイク部品検索で適合車種からパーツを検索する
[Tags] main
ブラウザを開いてトップページに遷移する
バイク部品検索ページに遷移する
バイク部品検索ページが表示されること
適合車種を選択し検索ボタンをクリックする
バイク部品の検索結果ページが表示されること
*** Keywords ***
ブラウザを開いてトップページに遷移する
create webDriver Chrome chrome_options=(option)
go to ${B2B_TOP_URL}
シナリオ作成のルールを整備し、テストの保守性を高める
● シナリオ側のキーワードは日本語
● 操作は「〜する」、検証は「〜されること」で識別
● シナリオと画面固有の操作を分離 (Page Object Pattern)
テストシナリオ 画面固有の操作
*** Keywords ***
バイク部品検索ページが表示されること
page should contain element css=(CSSセレクタ使用)

27.
https://www.monotaro.com/2019.07.02
● Jenkinsのリリースジョブ実行結果から見れる
● スクリーンショット付きで失敗が分かる
27
レポート例

28.
https://www.monotaro.com/2019.07.02
● ポカミス的な不具合は早い段階で検出
● シナリオが順調に増殖
○ サイト変更がシナリオに影響しにくい
○ PCサイトに加えスマホサイトも
○ ABテストの両パターン確認にも
● RPAとして使う人が出現
○ テスト注文の自動キャンセル
28
保守しやすい仕組みを作った結果

29.
https://www.monotaro.com/2019.07.02
● リファクタリングするにはまだ怖い
○ 複数の条件網羅まではできていない
○ コードを修正するたびに動かすには重い
自動化されたテストの恩恵は伝わった
ユニットテストも始めた
29
一定の成果は出たが不満も出始めた

30.
https://www.monotaro.com/2019.07.02
● Gitリポジトリにプッシュするたびに
● ブランチ単位でユニットテスト実行
● 結果がプルリクエスト画面で分かる
という当たり前の世界にようやくなった
30
ユニットテストの自動化

31.
https://www.monotaro.com/2019.07.02 31
ユニットテストが普通の世界になるまで
課題 解消方法
独自フレームワーク上のコードでユニットテスト
が書けるのか不明
独自フレームワークでのテスト方法確立
ユニットテストを困難にするレガシーなライブラリ置
換
ローカルWindowsでユニットテストが動かない Windowsでのテストを諦めコンテナ利用
ユニットテストを開発フローに組み込めるか 自動化されたユニットテストとカバレッジレポート
ポータビリティを上げるユニットテスト利用方法の説
明
慣れる期間を設ける前提で組み込む方向で合意
開発メンバーがユニットテストを書けるか
(開発メンバー数38名)
ユニットテストの書き方資料整備
社内版TDD Boot Campの開催
コードフリーズ期間にテスト拡充祭りの開催
ユニットテストを教えられる人を育成してスケールア
ウト

32.
https://www.monotaro.com/2019.07.02
● 記録用の1日1回テスト実行結果
● 直近3ヶ月間のテストケース数
○ 390 → 1040 (2.6倍)
○ パラメタライズドテストの
有効活用
● 2分以内で全テスト完了
○ スローテスト問題まだない
○ 多めのモック成分が効いた
32
ユニットテストが普通の世界になった結果
3ヶ月間

33.
https://www.monotaro.com/2019.07.02
● 自動化されたテストで保護
○ ユニットテストと受け入れテストの普及で実現
● リファクタリングがしやすい状態
○ リファクタリングが行われ始める
○ テスト駆動開発はまだ難しそうだが少しずつ実施
33
理想の状態にどれだけ近づいたか

34.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
クリーンアーキテクチャ化
34

35.
https://www.monotaro.com/2019.07.02
● 大規模フロントエンドの
クリーンアーキテクチャ化
今日はダイジェスト版
詳細は下記スライド参照！
https://www.slideshare.net/monotaro-itd-pr/ss-150331504/monotaro-itd-pr/ss-150331504
35
弊社の若手エンジニアが発表

36.
https://www.monotaro.com/2019.07.02
● 青の層に独自フレームワーク
● 緑はフレームワーク用アダプター
● 赤、黄色に業務ロジック
● 直接依存は外から内のみ
36
ダイジェスト
アダプターを差し替えることで独自フレーム
ワーク依存脱却とポータビリティアップに目処
https://blog.cleancoder.com/uncle-bob/2012/
08/13/the-clean-architecture.html

37.
ソースコード (Before)
○ 約3,000行
○ 約10ファイル
■ プロダクト
37
ダイジェスト
ソースコード (After)
○ 約15,000行
○ 約300ファイル
■ 約150ファイル
● プロダクト
■ 約150ファイル
● テスト
● インターフェースとテストでコード激増
● テスタビリティ、ポータビリティもアップ

38.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
BigQueryによるログ基盤
38

39.
https://www.monotaro.com/2019.07.02
● 課題
○ 複数サーバーのログ収集・集計に時間がかかる
■ ある日のログ: 1億4300万行、16GB(圧縮時)
○ 複数サーバーをまたぐリクエストの追跡が難しい
● 理想の状態
○ ログが一箇所に集まっている
○ 鮮度の高いデータを高速検索できる
○ ログ同士の関連付けがある
39
アプリケーションログ収集の課題と理想

40.
https://www.monotaro.com/2019.07.02
● ログ基盤の基本的な流れ
○ FluentdでログをS3等にアップロード
○ AWS/GCPのマネージドサービスでログ加工
○ BigQueryにログ保存
● BigQueryの圧倒的なスケーラビリティで
リアルタイムに各種ログ検索ができる
○ データ分析基盤で実証済み
40
ログ基盤の構築

41.
https://www.monotaro.com/2019.07.02
● ユニークなリクエストIDで横断検索
○ AkamaiでリクエストIDを発行
○ upstreamへのリクエスト時に同一IDを渡す
○ BigQueryにリクエストIDも保存
41
サーバー間のログの関連付け
リクエストID: AABBCC...
リクエストID: AABBCC...リクエストID: AABBCC...

42.
https://www.monotaro.com/2019.07.02
● セッションIDで関連付ける
○ Google AnalyticsのBigQueryエクスポート機能
○ ログ基盤のログ
42
Google Analyticsとの関連付け

43.
https://www.monotaro.com/2019.07.02 43
ログ基盤構成図 概要
● 各種ログが最終的に
BigQueryに集約
● 関連付けを利用した
横断検索

44.
https://www.monotaro.com/2019.07.02
ログ基盤を使った調査事例
● エンジニアの開発用途
○ モダナイゼーション作業の新旧比較
○ 遅いリクエストがどのサーバーで遅かったか
○ 使われていないAPI調査
● コールセンターからの問合せ対応
○ お客様からご報告いただいた不具合を
再現するための行動履歴調査
44

45.
https://www.monotaro.com/2019.07.02
理想の状態にどれだけ近づいたか
● ログが一箇所に集まっている
● 鮮度の高いデータを高速検索できる
○ Google Analyticsエクスポートは1日1〜数回
● ログ同士の関連付けがある
複数のログを関連付けて検索できることが
さらなる顧客体験向上に繋がる
45

46.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
新しいECプラットフォームへの移行
46

47.
https://www.monotaro.com/2019.07.02
既存ECプラットフォームのモダナイゼーション
● 既存プラットフォーム改善の結果
○ 保守性アップ
○ 運用性アップ
○ ポータビリティアップ
● (総じて)防御力が高まった状態で
新プラットフォームへの移行準備
47

48.
https://www.monotaro.com/2019.07.02
新ECプラットフォームの話
● 扱うデータの多様化、大容量化
● APIの多様化
● クライアントの多様化
に対応しつつ…
● レガシーシステムからの脱却
● システム間の疎結合
48

49.
https://www.monotaro.com/2019.07.02 49
新ECプラットフォーム アーキテクチャ

50.
https://www.monotaro.com/2019.07.02
● GCPベース
● リアルタイムデータ基盤
○ すべての業務をデータドリブンに
詳しくはGoogle Cloud Next ’19 in Tokyoの
セッションをチェック!!
https://cloud.withgoogle.com/next/tokyo/sessions?session=D2-1-S07
50
新ECプラットフォーム ポイント

51.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
まとめ
51

52.
https://www.monotaro.com/2019.07.02
まとめ
リアルタイムデータ基盤を中心とした
売上5,000億円を支える
新ECプラットフォーム構想に向けて、
15年以上の自社開発における課題と
理想の形のギャップを見極めた
モダナイゼーションに取り組み中
52

53.
https://www.monotaro.com/2019.07.02 https://www.monotaro.com/
告知
53

54.
急成長するモノタロウと一緒に働いてみませんか？
● 自社開発・自社運用で、全社/全業務でITを駆使する
テクノロジー企業です
● 本社は関西ですが、東京も開発の中心になるべく幅広い
職種を募集しています
○ ITエンジニア、データサイエンティスト、デジタル
マーケター、プロダクトマネージャー
○ 東京(赤坂)のチームは年内に10名以上。絶賛急成長中
● 詳しくは https://recruit.monotaro.com/
54

55.
https://www.monotaro.com/ 55