はじめに

今回も今回で、 @simd_nyan 氏が公開されているTwitter在住のD言語くんbotがRTしたツイート各種を見るためのビューアーを更新していきます。

ビューアーは、TypeScript+Reactをベースに、Material-UIを使いつつparcelでバンドルしている構成です。簡単さと安全さで個人的鉄板構成です。

しかし今回は時間不足のため機能追加ができず、今年の分のデータ(URL)が増えただけです。
昨年自動再生機能をつけたので、これでほぼ完成してしまった感があります。（再生速度は切り替えたいかも）

こちらのリンクからご確認ください。

D言語くんツイートビューアー
- https://lempiji.github.io/dman-tweet-viewer/

参考画面

脆弱性対応の作業日記

更新しました！ではちょっと物足りないので、作業日記です。

結構ミニマム構成とはいえ、作成から数年経過しているのでGitHubからセキュリティアラートが飛んできました。
これを3件ほどぽちぽちすると package.json が更新されるので、適宜ビルドとデプロイを流してやれば良くなります。

これに加え、通常は npm outdated で古いバージョンが残っていないか確認したり、 npm audit で脆弱性などの報告がないか追加の確認を行います。

試しに行ってみると色々出るわ出るわということで、この原因となるパッケージを特定して更新していく作業の流れを記録していきます。

まずは `npm outdated`

何はともあれ鉄板コマンドです。

npm outdated コマンドを実行すると、使っているバージョンや最新バージョンなどが表示されます。
脆弱性の有無などで文字の色が変わるようで、特に赤い文字がやばいことから確実に更新対象とする必要があります。

また、これには Wanted という列があり、今使っているバージョンなら最低限これにしろ、といった感じのバージョンが表示されます。これが1つ更新の目安になります。

内容を確認したら、 package.json に記載されたバージョンをこれに更新していきます。
Wantedの列についてはほとんどがパッチバージョン、稀にマイナーバージョンの更新程度なので、この時点では破壊的変更はありません。

書き換えたら npm install でインストールし、再度 npm outdated を実行して問題のあるパッケージが粗方消えることを確認します。

`npm audit`

こちらは脆弱性の有無を確認するコマンドです。

これを実行して何も出なければ終了だったのですが、いかんせん出るわ出るわという感じでした。~~どうせ入力ゼロのアプリならまず安全だろうとか思いつつ~~しっかり対処していきます。

例として1つ抜粋すると、以下のような出力があります。
この時点で、 Severity: high （重大度: 高）とあるので結構まずいですね。

glob-parent  <5.1.2
Severity: high
Regular expression denial of service - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix --force`
Will install parcel@2.0.1, which is a breaking change
node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/chokidar
    @parcel/watcher  <=1.12.1
    Depends on vulnerable versions of chokidar
    node_modules/@parcel/watcher
  fast-glob  <=2.2.7
  Depends on vulnerable versions of glob-parent
  node_modules/fast-glob
    parcel  1.8.0 - 1.12.4
    Depends on vulnerable versions of @parcel/logger
    Depends on vulnerable versions of fast-glob
    Depends on vulnerable versions of node-forge
    node_modules/parcel

npm audit fix --force を実行すれば良さそうですが、このコマンドだと地味に影響範囲が読めないので、その直後にある Will instal parcel@2.0.1, ... を参考にそれだけアップデートしてみます。
package.json のバージョンを書き換えて npm install です。

終わったら npm audit を実行してチェックしてみると、一発でエラーがすべて消えました。元を辿ると parcel が古かったのだとわかります。

というわけでこれで無事に脆弱性の対応は目途が付きました。

Parcelの破壊的変更への対応

今回は1点、モジュールバンドルに使っている parcel のバージョンが 1.12.4 から 2.0.1 になったことで破壊的変更がありました。
メジャーバージョンが上がっているので、これで無事ビルドも通らずエラー祭です。

これについては以下のドキュメントにある script タグに対する type="module" の追加などを行っています。

また、package.json の main にReact+TypeScript向けの .tsx を設定したのがダメになり、無難に index.html を設定するよう書き換えています。
これで無事にビルドも通るようになりました。

終わりに

前日の夜になってから書き始め、無事に深夜のうちに作業を終えることができました。当日朝の公開は担保出来て一安心です。

とはいえ久しくこういう作業やっていなかったので、勝手をすっかり忘れていて時間がかかりました。
作業途中で寝てしまったりしたのですが（正直）、parcelの破壊的変更対応もあってトータル3時間くらいと結構かかった気がします。

というわけでD言語くんのRTしたツイートを眺めるアプリの更新作業記録でした！
脆弱性対応の流れということで1つ参考にしてみてください！