npmパッケージのアップデート

仕事が忙しいと、趣味の侘しい開発環境は長らく放置で、世界もNodeもドンチャカ進んでいく。
その間、GitHubのディペンダボットからたくさんのお便りをいただいた。

GitHub security alert digest

彼もしくは彼女は、なんでハニカム構造を尊ぶがごとし見た目で愛らしいハニカム面しているんでしょうか。

「はにかむ」は漢字だと「含羞む」

ハニカム面ヅラなのか含羞はにかんだお顔なのか、よくわからないが
何度もお便りをいただいているうちに「共感羞恥」顔にも見えてくる。

はいはい、そのうちやります。の度がすぎて、アイコンに人格を付与する妄想に入った。
やるならやらねば。

ただし、この記事の主題は、npmでパッケージ個別アップデートをする方法の備忘録で
ハニカム氏については、対処法や使い方、いくらでも良記事があるはずなので、他をご参考いただくとして。

わたくしの備忘録としては、

手動とオートメーションを混ぜるな危険

いくら良記事があって、（お任せでやってみようかなぁ）と楽しげな誘惑に駆られても

あとで焦れったくなって手動に切り替えるくらいなら、最初から手動でコツコツやれ。
ローカルとリモートで同時進行すると、その気紛れは、あとでgit pushに同期拒否される。
この自己反省のみ。

要はあっちゃこっちゃ、同時にやるな。（特に頭にパーテンションのない桐山零タイプは）

まずは完了形

そこそこ我慢ごろというか安定かつ警鐘なしになった画面が上。

作業前が記事のフィーチャー画像にした↓なので
どれほど健闘したかというより・・・どんだけ放置してきたという話である。

まぁいいんだ。制作費を稼げるサイトが先なのでね。
ここは学習能力の無さを、暇な時に振り返って痛感するための別荘ともいえる。

npm outdated

前提として、node.js , Gatsby.js , Gatsby CLI , は適宜アップデートしたあと

プロジェクトフォルダでNodeパッケージマネージャに、時代遅れになっているものを訊く。
Current / Wanted / Latest がわかりやすい表になっており、

Wanted 以上に達しているバージョンはイエロー文字
未満バージョンが「問題あり」としてオレンジ文字
最新バージョンLatest以上のパッケージは載らない

差し替え対象は、オレンジ文字の行数だけある。先は長い。

npm install --save-dev

量が多すぎたので！
作業用のメモ帳的なアプリに、npm install --save-dev + 半角スペースを
だだーっとコピペしまくって、オレンジ文字の中で目につくパッケージから上書きインストールしていきました。

npm install --save-dev sass

update ではなく --save-dev を使う。

今回のお題目として、まともにセキュリティ脆弱性を排除した安定版の開発環境にもっていくこと、 package.json の dependencies 対処でディペンダボットに泣き止んでいただくこと。

npm update では package.json の更新をしないので dependencies 対処として、
update ではなく --save-dev を使い1つ1つ地道に潰していったんですが。

npm-check-updates を使う。

という便利な方法があるらしい。

再びもってきた現状の最終形。

package.json に記載された semver のルールに従うため、^ つきの記載だとメジャーバージョンのアップデートまでは行ってくれない。 ・・・によって、残されたもの。

^（キャレット）つきの記載は互換性のあるバージョンということで、

@mdx-js/react    2.3.0    2.3.0   3.1.0
gh-pages         3.2.3    3.2.3   6.3.0

mdx-js は、2.3.0 から 3.1.0 へ
gh-pages は、3.から6.へ
reactは、18.から19.へ
メジャーバージョンアップができなかった結果。

数あるパッケージをまとめてメジャーバージョンアップするには、npm-check-updatesが良い。とわかったところで、参考記事をリンクしておく。

今回はある意味、Contentful周辺の除外が目的だったのもあり、それこそ1行ずつ確実に消したり上書きする作業を目視したかった、時間かけたい系「鈍行」気分だったのですが、次回npm-check-updates知見を活かしたいと思います。

ところで、今時「鈍行」なんて単語通じるのか・・・と思いググると、現代語では「各停」「各駅停車」だそうで。

おぉ、そうまさに「各駅停車」でいちいちホームを眺めて運行確認したかったため、表現は合ってた。

そんなわけで、Contentfulからすっかり足を洗うリモデル完了。
外観テーマを先に手掛け、あとからpackage.json書き換え込みのNodeパッケージ改め。

ContentfulのRich-textエディターもWPのブロックエディターも、よく出来てはいるけど、所詮HTML書けるやつのMarkdownの楽さ、速さには適わない。

余談ですが、わたくしのMarkdownはかなりインチキで（笑）

Markdownで空白行を複数挿むとか、この無骨モノには（なにその繊細な話・・・）だけど

<span style="display: block;margin-bottom: 3em;"></span>

と、これブロックエディターの「スペース」ブロックで思いついた。
3emの値を変えれば、100行の空白も造作なく作れる、空白おきには便利。

WPの場合は透明なdivをデフォルトで100px挿入するブロック、あれはまるで今時のスペーサーGIF

必要な要件は今も昔もたいして変わらんのねー。て事でMarkdownも半分はHTMLで書いている。
通常のMarkdownエディタのプレビューに直タグは表現されないけど、VS Code使いにはEmmetが速度の鍵。

Notion

も、やたらと便利なタスク管理、くらいな気でライトユーザーでいましたが、今回コード転記に使っていて、（これ、つまりMarkdownだな）と気づき、いちいち「コードを挿入」するのが面倒で、 ```記号（アクサンクラーブ3つ）打った時点で、ちゃんと「コードを埋め込む」マウス操作と同じく、スニペット枠の中にいました。

ハニカムちゃんの話題からだいぶ遠かったところで、終わり。