[環境構築][Mac][GatsbyJS]画像サイズ変換モジュールsharpのインストールエラー対策

半年ぶりに`GatsbyJS`を使ってブログをローカルで確認しようとしたところ、`gatsby develop`を実行したところで大量のエラーが発生してしまいました。

対策として、`libvips`のインストールと`GatsbyJS`およびスターターキットで採用しているパッケージのアップデートを行うことで、エラーなく`gatsby develop`を実行し、ブラウザから`localhost:8000`にアクセスできるようになりました。

対策に至るまでの過程で苦労したので、手順を残しておきます。

## 対策手順
1. `sharp`モジュールのために必要な`libvips`を`brew install vips`でインストール
2. （エラーが出て止まってしまったら`brew doctor`で対策コマンドを確認して実行し、再度`brew install vips`）
3. `npm outdated`でアップデートが必要なバージョンを確認し`package.json`の各パッケージのバージョンを書き換える
4. `npm update`でアップデートする
5. （必要に応じて`npm uninstall gatsby-cli -g`と`npm install gatsby-cli -g`で`gatsby-cli`を最新版にアップデートしてから再度`npm update`を実行する）

当初は大量のエラーが出てくるので面食らいましたが、結局は`libvips`のインストールと`package.json`の書き換えによる`GatsbyJS`および各パッケージのアップデートを行うことで正常に動作できるようになりました。

ちなみに`npm outdated`を実行すると以下のようにバージョンを表示してくれます。

```ruby
$ npm outdated
Package                          Current   Wanted   Latest  Location
gatsby-plugin-manifest           MISSING   2.2.29   2.2.29  gatsby-starter-blog
gatsby-image                      2.0.40   2.2.33   2.2.33  gatsby-starter-blog
gatsby-plugin-feed                 2.1.1   2.3.21   2.3.21  gatsby-starter-blog
gatsby-plugin-google-analytics    2.0.18   2.1.28   2.1.28  gatsby-starter-blog
gatsby-plugin-offline             2.0.25   2.2.10   3.0.22  gatsby-starter-blog
gatsby-plugin-react-helmet        3.0.12   3.1.15   3.1.15  gatsby-starter-blog
gatsby-plugin-sharp               2.0.35    2.3.2    2.3.2  gatsby-starter-blog
gatsby-plugin-typography          2.2.13   2.3.17   2.3.17  gatsby-starter-blog
gatsby-remark-copy-linked-files   2.0.12   2.1.30   2.1.30  gatsby-starter-blog
gatsby-remark-images               2.0.6    2.0.6   3.1.32  gatsby-starter-blog
gatsby-remark-prismjs              3.2.8   3.3.23   3.3.23  gatsby-starter-blog
gatsby-remark-responsive-iframe    2.1.1   2.2.27   2.2.27  gatsby-starter-blog
gatsby-remark-smartypants          2.0.9   2.1.16   2.1.16  gatsby-starter-blog
gatsby-source-filesystem          2.0.32   2.1.38   2.1.38  gatsby-starter-blog
gatsby-transformer-remark         2.3.12   2.6.37   2.6.37  gatsby-starter-blog
gatsby-transformer-sharp          2.1.18    2.3.5    2.3.5  gatsby-starter-blog
prettier                          1.17.0   1.19.1   1.19.1  gatsby-starter-blog
prismjs                           1.16.0   1.17.1   1.17.1  gatsby-starter-blog
react                             16.8.6  16.12.0  16.12.0  gatsby-starter-blog
react-dom                         16.8.6  16.12.0  16.12.0  gatsby-starter-blog
react-helmet                       5.2.0    5.2.1    5.2.1  gatsby-starter-blog
typeface-montserrat               0.0.54   0.0.54   0.0.75  gatsby-starter-blog
```

## 原因について
`libvips`がインストールされていなかったこと（もしくはバージョンが古かったこと）と、`sharp`モジュールが要求するバージョンと`GatsbyJS`および各パッケージのバージョンの不一致によるビルドエラーが原因だったようです。

- [Upgrade for Minor or Patch Releases](https://www.gatsbyjs.org/docs/upgrade-gatsby-and-dependencies/)

`libvips`のインストールのあとは、上記の`GatsbyJS`公式を見て、そのまま実行するだけでした。

## 所感
環境構築関連の対策は振り返ればあっけない内容ですが、対策を行っている間は暗中模索の状態で不安や苛立ちが募ってしまいます。些細なことではありますが、こういった対策記事を積み重ねていこうと思います。

## 参考サイト
- [Installation - sharp](http://sharp.pixelplumbing.com/en/stable/install/)
- [libvips](https://libvips.github.io/libvips/install.html)
- [Homebrewがコケた時の対処法](https://qiita.com/yshishido/items/0cd7ce9346e67a8908ed)
- [Changelog - sharp](https://sharp.pixelplumbing.com/en/stable/changelog/)
- [Gatsby メモ](https://qiita.com/superyusuke/items/d3378dc83d6e5edfee8e)
- [gatsby - npm](https://www.npmjs.com/package/gatsby)
- [Upgrade for Minor or Patch Releases](https://www.gatsbyjs.org/docs/upgrade-gatsby-and-dependencies/)