Slide 1

Slide 1 text

8年前のNode.jsを動かして分かった、 npm install の裏側 Keisuke Ikeda @ike̲keichan 2026.10.12 フロントエンドカンファレンス関西2026

Slide 2

Slide 2 text

自己紹介 Keisuke Ikeda ・東京と関西(大阪&京都)の2拠点生活中 ・Maybe Software Engineer ・テックコミュニティに積極参加 - TSKaigi 2025,2026 / フロカン関西 2025,2026 / ReactTokyoフェス 2026 スタッフ - TSKaigi 2025,2026 登壇 / フロカン関西 2026登壇 - 他にもテックイベントに学生時代から多数参加 ・フロカン2018,2019、フロカン福岡2018,2019が私のconference origin @ike̲keichan 02/27

Slide 3

Slide 3 text

全ての始まり みなさん、 8年前のNode.js触ったことありますか? @ike̲keichan 03/27

Slide 4

Slide 4 text

全ての始まり 全ての始まり @ike̲keichan 04/27

Slide 5

Slide 5 text

全ての始まり 序章 ・昔々、あるところに「Vue.jsを3系にして欲しい」という依頼があったそうな… ・参画したエンジニアは当時の比較的新しいMacBookを受け取り、 さっそく環境構築にとりかかるが、Node.jsのインストールでエラーが発生… @ike̲keichan 05/27

Slide 6

Slide 6 text

全ての始まり Node.jsのインストール時のエラー ・原因はアーキテクチャの不一致(x86 → ARM) - 古いNode.jsには Apple Silicon(arm64)向けのバイナリが存在しない - 対応は Node.js 16 から ・まあ、Rosetta経由でインストールすればいけるやろ @ike̲keichan 06/27

Slide 7

Slide 7 text

全ての始まり そんな訳ないよね @ike̲keichan 07/27

Slide 8

Slide 8 text

全ての始まり npm installでエラー・警告多発 ・8年ぶりに叩き起こされたnpmパッケージからの目覚めのご挨拶 ・危険なバイナリや長年の利用を感謝する文字の数々… @ike̲keichan 08/27

Slide 9

Slide 9 text

エラーと向き合う エラーと向き合う @ike̲keichan 09/27

Slide 10

Slide 10 text

エラーと向き合う エラー① Python ・Node.jsの話なのにPythonのエラーが出現 ・新しいPythonではなく、古いPythonを求められる… @ike̲keichan 10/27

Slide 11

Slide 11 text

エラーと向き合う エラー② Xcode ・なぜか、C/C++ のビルドに必要な xcodebuild コマンドを求められる… ・古いXcodeが必要になり、ダウングレードで対応 - 古いNode.jsに含まれるソフトウェアがXcodeの新しいバージョンを想定していないため @ike̲keichan 11/27

Slide 12

Slide 12 text

エラーと向き合う エラー③ C++ ・なぜか、C++ の古い標準ライブラリ libstdc++ を求められる… ・新しいMacでは後継の標準ライブラリ libc++ が搭載(互換性がない) @ike̲keichan 12/27

Slide 13

Slide 13 text

エラーと向き合う Node.jsの話なのになぜ 別の言語のエラーが?? @ike̲keichan 13/27

Slide 14

Slide 14 text

エラーと向き合う npm installの裏側 ・パッケージはJS以外の言語で書かれているものもある。 ・パッケージをインストールするためのツールはJS以外の言語製もある。 ・そのため、npm installの際にMac内蔵のツールを利用する。 @ike̲keichan 14/27

Slide 15

Slide 15 text

エラーと向き合う npm installの実行は 多くの巨人の肩に乗った結果 食事前後に手を合わせる🙏 のと同じように、 実行の度に手を合わせて🙏 もバチは当たらない… @ike̲keichan 15/27

Slide 16

Slide 16 text

エラーと向き合う 結局、どう対応したのか? @ike̲keichan 16/27

Slide 17

Slide 17 text

エラーと向き合う ⚠禁断の1行⚠ ・書き換えたのは、Node.js 6 の「どの macOS 向けにビルドするか」設定 - 10.7 のまま → Clang が古い libstdc++ を探しに行って失敗 - 13.4 に変更 → Clang が今の Mac にある libc++ を使うようになりビルド成功 ・諸事情があり強行しましたがやったらダメです。 @ike̲keichan 17/27

Slide 18

Slide 18 text

エラーと向き合う インストールできた! npm runで起動だ!! @ike̲keichan 18/27

Slide 19

Slide 19 text

エラーと向き合う できなかった… ヒント:lockファイル @ike̲keichan 19/27

Slide 20

Slide 20 text

エラーと向き合う できなかった ・古いNode.js(npm 1.x~4.x)は lock ファイルを自動生成しない。 ・サブ依存が保てず、崩壊… ・例えば、当時のNode.jsが知らない構文(object spread)がサブ依存パッケージに 混入し、実行できなくなる。 @ike̲keichan 20/27

Slide 21

Slide 21 text

エラーと向き合う そのあとは大変でした…(ry @ike̲keichan 21/27

Slide 22

Slide 22 text

どう対応すべきか? どう対応すべきか? @ike̲keichan 22/27

Slide 23

Slide 23 text

どう対応すべきか? 選択肢は大きく2つ ・Dockerで当時の環境を再現し、環境構築 ・変更を気にせず、諸々のバージョンアップデート 当時は諸事情によりどちらもできず、禁断の1行で対応… @ike̲keichan 23/27

Slide 24

Slide 24 text

最後に 次にnpm installを実行するときは 裏で動いている巨人たちのことを、 ちょっとだけでも思い出してください @ike̲keichan 24/27

Slide 25

Slide 25 text

参考文献 ソースコード ・Node.js v6.11.4: common.gypi(MACOSX̲DEPLOYMENT̲TARGET) https://github.com/nodejs/node/blob/v6.11.4/common.gypi#L368 ・node-gyp 3.4.0: lib/con gure.js(python2 の要求) https://github.com/nodejs/node/blob/v6.11.4/deps/npm/node̲modules/node-gyp/lib/ con gure.js#L30 ・gyp: xcode̲emulation.py(Xcode バージョンの判定) https://github.com/nodejs/node/blob/v6.11.4/deps/npm/node̲modules/node-gyp/gyp/ pylib/gyp/xcode̲emulation.py#L1265 25/27 fi fi @ike̲keichan

Slide 26

Slide 26 text

参考文献 公式ドキュメント・リリースノート(1/2) ・Node.js「Node v6.11.4 (LTS)」, Node.js Blog, 2017年, https://nodejs.org/en/blog/release/v6.11.4 ・Node.js「Node v16.0.0 (Current)」, Node.js Blog, 2021年, https://nodejs.org/en/blog/release/v16.0.0 ・npm「v5.0.0」, GitHub Releases, 2017年, https://github.com/npm/npm/releases/tag/v5.0.0 @ike̲keichan 26/27

Slide 27

Slide 27 text

参考文献 公式ドキュメント・リリースノート(2/2) ・Apple「Xcode 10 Release Notes」, Apple Developer Documentation, 2018年, https://developer.apple.com/documentation/xcode-release-notes/xcode-10-releasenotes ・Apple「About the Rosetta Translation Environment」, Apple Developer Documentation, https://developer.apple.com/documentation/apple-silicon/about-the-rosettatranslation-environment @ike̲keichan 27/27