<h2 id="h4fb78f17b3">renovateとは？</h2><p>Gitリポジトリ内のpackage.jsonや、Dockerfile等を監視し、パッケージの最新の更新版があった場合に、依存関係を更新するPRを自動で出してくれるツール。<br>PRをマージすると、対象のブランチは自動で削除してくれる。<br></p><h2 id="h046afd68e1">導入方法</h2><p>Githubの場合、Renovate appをinstallする。<br>その後、有効にするリポジトリを選択する。(全リポジトリを対象にすることも可能)<br>特定のディレクトリのみrenovateの監視を有効にすることも可能。(こちらは設定ファイルから)<br><br>詳細はこちらから。導入自体は非常にあっさりできました。<br><a href="https://docs.renovatebot.com/getting-started/installing-onboarding/" target="_blank" rel="noopener noreferrer">https://docs.renovatebot.com/getting-started/installing-onboarding/</a><br><br>install後、renovateを有効にするためのPRが1件発行されます。<br>このPRにはrenovate.json（renovateの設定ファイル）が含まれています。<br>最初のPRをマージすると、以降は古いパッケージの更新のPRがバンバン飛ぶようになります。<br></p><h2 id="hae6c3fe63b">導入した経緯</h2><p>今回は、renovateをReact個人学習用のリポジトリに導入してみました。<br>導入した背景としては、</p><ol><li>パッケージ更新に対する知見があまりなかった。</li><li>これまで、一度インストールしたパッケージをそのまま放置することが多かった。</li><li>学習用リポジトリということで、最新のライブラリによるキャッチアップを図りたかった。</li></ol><p>上記が主なモチベーションになりました。<br></p><h2 id="hd729b2d743">renovate導入後</h2><p>renovateを有効化すると、リポジトリのissueに<span style="background-color:#f6f8fa">Dependency Dashboardが追加されます。</span><br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/e802f5ae6f8143469577ba182ef27e45/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-09%2020.22.54.png" alt=""><br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/d1177cf486f04a8889639683a83e5042/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-10%208.27.28.png" alt=""><br>更新可能なパッケージが存在する場合、このダッシュボードにチェックボックスと対象パッケージが表示されます。<br><br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/dc92f5a608a64221a9c3631ee9de3132/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-04-10%208.27.07.png" alt=""><br>renovateから送られてくるPRですが、</p><ul><li>更新されるパッケージのrelease note</li><li>変更の概要</li><li>そのバージョンの導入率や信頼性...etc</li></ul><p>上記がPRのメッセージにまとめてあり、マージする上での判断材料が集約されていて、とてもわかりやすかったです。<br>また、導入を初めてまだ数日ですが、頻繁にPRが飛んでくるので、パッケージの更新に関する感度が上がりそうな気がしました。<br></p><h2 id="h28b62bc2c0">今後の課題</h2><ul><li>renovateの設定項目に対する理解。設定項目が柔軟。適宜いい感じに変更していきたい。<ul><li><a href="https://docs.renovatebot.com/configuration-options/" target="_blank" rel="noopener noreferrer">https://docs.renovatebot.com/configuration-options/</a></li><li><a href="https://github.com/cybozu/renovate-config/blob/master/renovate.json" target="_blank" rel="noopener noreferrer">https://github.com/cybozu/renovate-config/blob/master/renovate.json</a> </li><li><a href="https://github.com/hatena/renovate-config" target="_blank" rel="noopener noreferrer">https://github.com/hatena/renovate-config</a></li><li>（cybozu社、はてな社の設定が公開されていたので参考にしたい。）</li></ul></li><li>実サービス（弊ブログアプリでも）運用したい。</li><li>PRのたびに動作確認をしなければならなくなる。CI・テスト自動化である程度簡略化できないか。。？</li></ul><p><br>今後運用しつつ、しっかり知見をためていきたい。</p>

renovate導入してみた。

<p>※本記事は過去に私がQiitaに執筆した記事の移行版になります。<br><a href="https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15" target="_blank" rel="noopener noreferrer">https://qiita.com/koh97222/items/c46d1ef2a63b92bb6c15</a><br></p><h2 id="hc69c85bcf9">背景</h2><p>Dockerのnodeコンテナ内で、create-react-appでReactプロジェクトを作成し、その後にmaterial-uiをインストールしようとしたときに、発生したエラーでした。<br>※調べてみた感じ、npm installで、インストール元のパッケージのバージョンが最新(latest)で、インストールするパッケージの最新バージョンが同等(peer)でなかったときに発生するエラーのようでした。</p><h2 id="hcb9dacb773">結論</h2><p>そのライブラリを<strong>インストールしたい</strong>場合は、npm installのあとに、<strong>--save --legacy-peer-deps</strong>を追加してあげましょう。<br>もしくは、インストール元のプロジェクトの<strong>ダウングレード</strong>を検討しましょう。。</p><h2 id="hd2c91c24e4">経緯</h2><pre><code># material-uiをインストールしようとしたら。。
npm install @material-ui/core
# このようなエラーが発生。。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-app@0.1.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from @material-ui/core@4.11.0
npm ERR! node_modules/@material-ui/core
npm ERR!   @material-ui/core@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.</code></pre><p>上のログを確認すると、reactのバージョンが17.0.1であるのに対し、material-ui/<a style="color:#4aac00" href="mailto:core@4.11.0">core@4.11.0</a>がサポートしているreactのバージョンは16.8.0でした。（＝最新のReactプロジェクトに対応していない。）<br>なので、依存関係を解決できずエラーになって、インストールができないことに。。<br>ここで、npm install のあとに、オプションで、<strong>--save --legacy-peer-deps</strong>を追加しました。<br>すると、インストールが無事に完了します。<br><br>npm installする際に、インストールするライブラリのバージョンが、インストール先のプロジェクトのバージョンに対応していない場合、オプションで、<strong>--legacy-peer-deps</strong>を使うことで、半強制的に？installできるようになるようです。<br>ただ、インストール後に、そのパッケージが期待通りに正しく動くかを、しっかり確認する必要がありそうです。</p><pre><code>npm install --save --legacy-peer-deps @material-ui/core

added 29 packages, removed 2 packages, and audited 1720 packages in 18s

117 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities</code></pre><h2 id="h5fcec0cf90">所感</h2><p>ライブラリを使うときは、そのライブラリの最新版が、どのバージョンと対応しているのか、実装する前にしっかり調べておくべきなんだなー、、と改めて感じました。<br>安直に最新版！はアブナイ。。<br>参考になった記事：<br><a style="color:#4aac00" href="https://github.com/mui-org/material-ui/issues/23306" target="_blank" rel="noopener noreferrer">https://github.com/mui-org/material-ui/issues/23306</a></p>

npm の記事一覧