Adways Advent Calendar 2019 8日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2019

永井です。約1年ぶりの登場になります。

以前登場した際には以下の記事を書かせていただきました。

blog.engineer.adways.net

「Renovateというソフトウェアを使ってライブラリのアップデートを半自動化したよ」というお話でした。まだの方はぜひ読んでみて下さい。既に見ていただいた方には飴ちゃんをあげます。

この記事を投稿した日は2019年1月11日なのですが、我々のプロダクトには2018年12月3日 に導入をしておりました。

……そうです、我々のチームのプロダクトに導入が完了してから1年が経過しました。

導入後1年経ったプロダクトにおいて、ライブラリの状態はどうなっているか紹介しようと思います。導入を検討されている方の参考になれば幸いです。

1年前の状態

1年前のライブラリのバージョンはどうだったか、gitの履歴から主要なものをサルベージしてきました。それが以下の一覧です。

• typescript
  • 3.1.6
• react
  • 16.6.1
• @material-ui/core
  • 1.4.3
• @storybook/react
  • 4.0.0-alpha.14

約1年後の現在、ライブラリのバージョンはどうなったのでしょうか、見てみようと思います。

現在の状態

• typescript
  • 3.1.6 →3.7.2
• react
  • 16.6.1 →16.12.0
• @material-ui/core
  • 1.4.3 →4.7.0
• @storybook/react
  • 4.0.0-alpha.14 →5.2.8

あ、上がってるーーーーーーーー、めっちゃ上がってるーーーーーーーーー！！！！！！

……大変取り乱しましたがしっかりアップデートに追従していることが確認できました。@material-ui/coreとか上がり過ぎじゃないですか？大丈夫ですか？

実際に何か変わった？

「実際にアップデートしたことで何か変わったの？」という疑問をお持ちの方もいるかと思いますので、どんな機能が追加されたかを軽くあげてみます。

typescript

どんな機能が追加されたっけ、とリリースノートを追ってみた結果、

• https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/
• https://devblogs.microsoft.com/typescript/announcing-typescript-3-6/
• https://devblogs.microsoft.com/typescript/announcing-typescript-3-5/
• https://devblogs.microsoft.com/typescript/announcing-typescript-3-4/
• https://devblogs.microsoft.com/typescript/announcing-typescript-3-3/
• https://devblogs.microsoft.com/typescript/announcing-typescript-3-2/

となりました。

1年の間に凄く開発が進んでおり、optional chainingの実装がされたりビルド時間短縮の工夫がされたり細かく伝えるとキリがありません。リンクを貼るだけという暴挙に出ております。ごめんなさい。

とりあえず伝えたいことは「めっちゃ色々機能が追加されていた」ことなので、「めっちゃ色々追加されてたのか」と伝わっていればOKです。

react

こちらは16.8で導入されたReact Hooksの存在が大きいでしょうか。

ja.reactjs.org

バグ修正もガンガンされてますね。

Renovateを使ってどうだったか

良かったところ

兎にも角にもライブラリのバージョンアップの手間が激減できたこと が大きいです。（前回の記事参照）

patchレベルのアップデートなら自動で出されたマージリクエスト画面で、マージボタンをポチーとするだけで完了です。所要時間2~3分。

そうで無い場合もビルド及びテストが通っていれば、ほとんど問題はないので、これもポチーとすれば完了です。

これは断言しますが、Renovateが無ければ継続的にアップデートをし続けるのは困難でした。 「React Hooks使いてえー」と言いつつ古いバージョンのReactを使っていたかもしれません。

もうちょっと良く出来そうなところ

今のプロダクトの自動テスト環境は主にjestを用いたものになっており、ビジネスロジックのテストが中心になっています。

なのでmaterial-uiなどの見た目に関するライブラリにおいては、自動テストは通っていても反映してみればデザイン崩れがあった！ということは何度かありました。ブラウザを通じて初めて発覚するものには気づき辛いという問題があります。

これらは人の目でデザイン崩れがあるかどうかを見る必要があり、他と比べて手間がかかるのが現状です。今後はE2Eテストを充実させ、もっとビシバシアップデートさせることが出来れば良いなと思います。

あとpatchレベルは自動でマージしても良いなーと思いました。（ビルドとテストが通ればの話）

気を付けた方が良いところ

自動テストが通ったにも関わらずデザイン崩れがあった事象があったように、自動テストが通る→100%大丈夫という保証は無く、たまに壊れたりするケースがあります。

なので主要なライブラリにおいてはリリースノートを追いかけ、どんな機能が反映されるのかは把握しておいた方が良いと思います。

我々のチームはフロントエンドエンジニアの方々が日々チェックしてくれているので、ガンガンアップデートできているなーという状態です。ありがとうございます。（今更ですが僕はサーバサイドエンジニアです。）

まとめ

​Renovateを導入し、1年経ったので効果があったかどうかを確認して紹介させていただきました。1年も経つと「あって当たり前」の状態になってしまうため、一度こうして振り返ることでありがたみを再確認できたので良かったと思います。

この記事を見て良さそうだと思った方がいらっしゃれば、ぜひ導入をご検討してみてはいかがでしょうか。

次は森脇さんの記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2019/09