入口で早くも躓きました。自己紹介動画をRemotion(Reactで動画を作れるライブラリ)で作ってみようと思い立って環境を整え始めたら、Remotionにたどり着く前の時点で丸ごとハマってしまいました。今日はその顛末です。
npmを叩いたらいきなりクラッシュした
最初の一歩で転びました。まずはnpm init -yから、というごく普通の一歩目のはずだったんですが、ターミナルにTypeError: args.at is not a functionという見慣れないエラーが出て、npmコマンド自体が起動すらしませんでした。特に何か特殊なことをしたわけでもなく、本当にただnpm --versionを叩いただけでこの状態だったので、最初は何が起きているのか見当もつきませんでした。
原因はNodeのバージョンだった
犯人はNodeでした。Claudeと相談しながらエラーが出ている場所を追ってみると、npm内部のコードがargs.at(...)という書き方をしている箇所で落ちていました。Array.prototype.atはES2022で追加された比較的新しいメソッドで、Node.jsだとv16.6以降でようやく使えるようになった機能です。手元の環境を確認したら、nvmのデフォルトがv16.3.0という、ちょうどそのラインより手前の微妙に古いバージョンに固定されていました。npm自体は新しいバージョンが入っていたのに、実行しているNodeが古すぎて、npmが使っている構文にNode側がついていけていなかった、というオチです。
検索は空振りでした。ちなみにこのエラーメッセージでそのまま検索しても、npm自体のバグ報告や、直接関係のないライブラリの不具合報告ばかりがヒットして、なかなか「Node側のバージョンが古いだけ」という単純な原因にはたどり着けませんでした。エラーメッセージの発生箇所(npmのソースコード)までClaudeと一緒に開いてargs.at(...)という一文を見つけたのが、結果的に一番の近道でした。
デフォルトを切り替えても直らなかった
解決はまだ早かったです。原因が分かったのでnvm alias defaultで新しいバージョン(v22.14.0)に切り替えて解決したつもりだったんですが、新しいターミナルを開くとまた同じエラーが再発しました。調べてみると、この環境はnvmだけでなくnodenvも同時にインストールされていて、シェルの起動時にどちらのバイナリを先にPATHへ通すかで競合が起きていました。nvmの設定を直しても、nodenvのshimや別のバイナリが先にPATHで見つかってしまい、結局古いNodeが呼ばれ続けていたわけです。
複数のバージョン管理ツールを併用していると、こういう「片方だけ直したつもりが、もう片方に上書きされる」的な事故が起きやすいんだなと、身をもって実感しました。
結局どう対処したか
力技で片付けました。バージョン管理ツール同士の競合をきれいに解消するのは今回は見送って、実用重視で「使いたいバージョンのbinディレクトリを、コマンドの直前で明示的にPATHの先頭に足す」というやり方に切り替えました。
export PATH="$HOME/.nvm/versions/node/v22.14.0/bin:$PATH"効果はてきめんでした。これを実行してからnpmやnpxを叩けば、PATHの解決順に関係なく確実に狙ったバージョンが使われます。根本解決ではなく力技ですが、複数のバージョン管理ツールがどう干渉し合っているかを一つ一つ検証するよりは、今すぐ動く状態を作る方を優先しました。
普段PHP/WordPressしか触らない身としては新鮮だった
畑違いの新鮮さでした。普段の実務はPHPとWordPressが中心で、Node系のツールチェーンにガッツリ触るのは久しぶりでした。WP-CLIやMAMPの環境トラブルは体感的に「またか」という感じで対処できるんですが、nvmやnodenvといったバージョン管理ツールが複数絡む状況は勝手が違って、原因を切り分ける手順を一から組み立て直す必要がありました。使い慣れた言語圏から一歩出るだけで、トラブルシューティングの引き出しも入れ替える必要があるんだな、というのを久々に思い出させられました。
地味に時間を溶かした
時間泥棒はここでした。正直、Remotion自体の使い方を調べるよりも、この前段階の環境トラブルの方に時間を取られました。「動画を作る」というゴールから見るとかなり寄り道だったんですが、原因を追ううちにPATHの解決順序やシェルの初期化まわりの理解が深まったので、無駄ではなかったかなとは思います。
肝心のRemotionはどうだったか
本題は意外と順調でした。この寄り道を挟みつつも、環境さえ整えばRemotionそのものはかなり素直に動いてくれました。React感覚でコンポーネントを組んで、その通りに動画がレンダリングされる体験は、普段HTML/CSSでアイキャッチ画像を作っているのと地続きの感覚で扱えて、思ったよりすんなり馴染みました。この辺りはまた改めて別の記事で書こうと思っています。
まとめ
教訓はこうです。npmやnodeコマンドがいきなり動かなくなったときは、コマンド自体のバグを疑う前に、まずnode --versionで実際に使われているバージョンを確認するのが早道です。特に複数のバージョン管理ツールを併用している環境では、設定を変えたつもりのバージョンと、実際にPATH経由で呼ばれているバージョンがズレていることがあるので、思い込みで進めずに一度立ち止まって確認する癖をつけておきたいところです。
この記事が参考になったら、応援クリックをお願いします
