Slide 1

Slide 1 text

Angular×ionicプロダクトの バージョンアップとの付き合い⽅ ⼀ ノ 瀬 翔 吾 ( 友 利 奈 緒 ) 2021.11.26

Slide 2

Slide 2 text

⾃⼰紹介 atama plus株式会社 Product Engineer ⾃称 CDO (Chief Design System Development Officer) Angular歴 4-5年ぐらい 友利奈緒@rettar5 2 ⼀ ノ 瀬 翔 吾

Slide 3

Slide 3 text

ⓒ 2021 atama plus Inc. ⾃⼰紹介 3 Angular×ionicプロダクトのバージョンアップとの付き合い⽅

Slide 4

Slide 4 text

ⓒ 2021 atama plus Inc. ⾃⼰紹介 4 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ atama plus → 会社名 atama+ →プロダクト名 スライド内で混在しますが 表記ゆれではないです

Slide 5

Slide 5 text

atama plus

Slide 6

Slide 6 text

教育に、⼈に、社会に、 次の可能性を。 教育を新しくすること。それは、社会のまんなかを新しくする こと。私たちは学びのあり⽅を進化させます。 学習を⼀⼈ひとり最適化し、「基礎学⼒」を最短で⾝につける。 そのぶん増える時間で、「社会でいきる⼒」を伸ばす。 それが私たちの⽬指すもの。⾃分の⼈⽣を⽣きる⼈を増やし、 これからの社会をつくっていきます。 M i s s i o n atama plus

Slide 7

Slide 7 text

ⓒ 2021 atama plus Inc. 7 従来の勉強だけではない学びを提供する 基礎学⼒ 社会で いきる⼒

Slide 8

Slide 8 text

ⓒ 2021 atama plus Inc. atama plusのミッション 8 atama plus 「基礎学⼒」の習得 「基礎学⼒」の習得 「社会でいきる⼒」の習得

Slide 9

Slide 9 text

AI教材「atama+」を 全国の塾・予備校にSaaSモデルで提供しています。 atama+は、⼀⼈ひとりの得意、苦⼿、伸び、 つまずき、忘却度などの情報を収集・分析して、 ⼀⼈ひとりに合った「⾃分専⽤カリキュラム」を提供します。 学習をPersonalize「atama+」

Slide 10

Slide 10 text

ⓒ 2021 atama plus Inc. atama plusのプロダクト 10 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ Aurora/S3/CloudFront etc Hug+Zappa AWS Lambda Cloud Functions オンライン模試 / API server contents editor micro service dev tool

Slide 11

Slide 11 text

ⓒ 2021 atama plus Inc. atama plusのプロダクト 11 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ atama plusでは創業(2017年)から Angular×ionicを採⽤

Slide 12

Slide 12 text

ⓒ 2021 atama plus Inc. atama plusのプロダクト 12 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ atama plusでは 3プロダクト 3プラットフォーム 合計9アプリの⾯倒を⾒てる

Slide 13

Slide 13 text

Angularのバージョンアップと atama plus

Slide 14

Slide 14 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 14 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ Angularバージョンアップ追従 こんな感じで進めてた

Slide 15

Slide 15 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 15 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 最近体制が変わって ちょっと進め⽅が変わった

Slide 16

Slide 16 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 16 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 半年前までは EOLドリブン バージョンアップ

Slide 17

Slide 17 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 17 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ いわゆる20%ルールで 有志がやってた

Slide 18

Slide 18 text

ⓒ 2020 atama plus Inc. 18 2017 2018 2019 2020 2021 2022 Angular 4 Angular 5 Angular 6 Angular 7 Angular 8 Angular 9 Angular 10 Angular 11 Angular 12

Slide 19

Slide 19 text

ⓒ 2020 atama plus Inc. 19 2017 2018 2019 2020 2021 2022 Angular 4 Angular 5 Angular 6 Angular 7 Angular 8 Angular 9 Angular 10 Angular 11 Angular 12 2 4 Angular 5 Angular 7 Angular 8 11 9 10

Slide 20

Slide 20 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 20 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 半年前の体制変更で 新しい役割のチームが爆誕

Slide 21

Slide 21 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 21 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ ※PO:プロダクトオーナー、QA:Quality Assurance の略です スクラムマスター デザイナー エンジニア QA PO

Slide 22

Slide 22 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 22 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 開発基盤チーム 開発効率を上げるための開発や 技術中⼼で解ける課題に専念する アプリ開発チームのサブチーム

Slide 23

Slide 23 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 23 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ POで技術的課題の優先度を 判断することが難しく 技術的な課題に取り組むと デザイナーが取り組む仕事が 浮いてしまう

Slide 24

Slide 24 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 24 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ Angularのバージョンアップは 開発基盤チームがリードしてる

Slide 25

Slide 25 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 25 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ この半年で 8→9 9→10 10→11 と1つずつ上げていった

Slide 26

Slide 26 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 26 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 困ったこと

Slide 27

Slide 27 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 27 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ バージョンアップ対応の 期間が⻑いので 起票されたバグが 全部開発基盤チーム担当になる

Slide 28

Slide 28 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 28 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ atama plusでは起票されたバグを 毎朝どのチームが担当するか 割り振り(トリアージ)してる

Slide 29

Slide 29 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 29 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 「このバグはバージョンアップの 影響じゃない?」 という理由で 開発基盤チームに回ってくる

Slide 30

Slide 30 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 30 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ しょうがないので調査して 修正までやったり (ほぼバージョンアップ 関係なかった)

Slide 31

Slide 31 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 31 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 今後こう変えていきたい

Slide 32

Slide 32 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 32 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 負債を溜めない ちゃんとバージョンアップに 追従していく

Slide 33

Slide 33 text

ⓒ 2021 atama plus Inc. Angularのバージョンアップとatama plus 33 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ Angularの最新バージョン ‒ 1に 追従する⽅針なので これからAngular12にあげていきます

Slide 34

Slide 34 text

ionicのバージョンアップと atama plus

Slide 35

Slide 35 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 35 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ ionicのバージョンアップのためだけに プロダクトの新規機能開発を 1ヶ⽉⽌めた

Slide 36

Slide 36 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 36 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ ionic3 → ionic4に上げたときに めちゃくちゃ⼤変ということが 社内で認知されていたので しっかり計画⽴てて バージョンアップすることになった

Slide 37

Slide 37 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 37 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 最初に実装・テストの進め⽅や テスト観点や 作業の並列化など バージョンアップを計画

Slide 38

Slide 38 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 38 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 1アプリだけ先⾏して ionicのバージョンを上げ アプリを起動できる状態にする (リスクの洗い出し)

Slide 39

Slide 39 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 39 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 新規機能開発停⽌の 社内周知

Slide 40

Slide 40 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 40 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 新規機能開発停⽌期間に⼊ってから 残り2アプリの ionicをバージョンを上げ 起動できる状態にする

Slide 41

Slide 41 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 41 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ ありとあらゆる画⾯を バージョンアップ前後で⽐較して スクショをMiroにまとめる スクショ祭りを開催

Slide 42

Slide 42 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 42 Angular×ionicプロダクトのバージョンアップとの付き合い⽅

Slide 43

Slide 43 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 43 Angular×ionicプロダクトのバージョンアップとの付き合い⽅

Slide 44

Slide 44 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 44 Angular×ionicプロダクトのバージョンアップとの付き合い⽅

Slide 45

Slide 45 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 45 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ スクショから要対応な 項⽬をチケット化し、 チームで分担して修正

Slide 46

Slide 46 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 46 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 1ヶ⽉後 新規機能開発停⽌解除 & リリース

Slide 47

Slide 47 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 47 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 今後こう変えていきたい

Slide 48

Slide 48 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 48 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ E2Eの拡充と スクリーンショットでの差分検出

Slide 49

Slide 49 text

ⓒ 2021 atama plus Inc. ionicのバージョンアップとatama plus 49 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ 近々 新規機能開発停⽌ & スクショ祭り 開催予定

Slide 50

Slide 50 text

今⽇のおはなしのまとめ

Slide 51

Slide 51 text

ⓒ 2021 atama plus Inc. 今⽇のおはなしのまとめ 51 Angular×ionicプロダクトのバージョンアップとの付き合い⽅ Angularのバージョンアップを リードするチームがいる ionicのバージョンアップは 新規機能開発を⽌めてる

Slide 52

Slide 52 text

ⓒ 2020 atama plus Inc. 52 @atamaplus_dev

Slide 53

Slide 53 text

© atama plus Inc. atama plusは、Mission driven company. ミッションの実現に向けて、常識にとらわれずに考え、議論し、 互いを尊重しながら楽しむ集団です。 ⼈が全てなので、採⽤にはとてもとてもこだわってきました。 開発チームはもとより、ビジネスチームもコーポレートチームも、 全員で良いプロダクトを創る。 ⼀つの⼤きなチームとして意⾒をぶつけあいながら ⽣徒が熱狂する学びを創っていく。 そんな想いの船に⼀緒に乗って、 新しい教育を創り、社会を変えていく仲間を募集しています。 We are hiring ! 参考リンク 3 分 で わ か る a t a m a p l u s 求 ⼈ ⼀ 覧