ガチの初心者からのバイブコーディング① Claude Codeをインストールしたいがnpmがありません

僕はプロブラミングに憧れがずっとあるのですが、何度か挑戦してみて向いてなさも感じていました。

そんな中、「バイブコーディング」という概念を知りました。

(google翻訳)
私が「バイブコーディング」と呼ぶ新しい種類のコーディングがあります。バイブに完全に身を任せ、指数関数を受け入れ、コードが存在することすら忘れるコーディングです。LLM (例: Cursor Composer w Sonnet) があまりにも優れすぎているため、それが可能になっています。また、私は SuperWhisper を使って Composer と対話するだけなので、キーボードにはほとんど触れません。「サイドバーのパディングを半​​分に減らす」など、最も馬鹿げたことを要求します。探すのが面倒だからです。常に「すべて受け入れる」を選択し、差分はもう読みません。エラー メッセージが表示されたら、コメントなしでコピーして貼り付けるだけです。通常はそれで解決します。コードが私の通常の理解を超えてしまうと、しばらくはじっくり読む必要があります。LLM ではバグを修正できないこともあるので、回避するか、バグがなくなるまでランダムな変更を依頼します。週末の使い捨てプロジェクトとしては悪くありませんが、それでもかなり面白いです。私はプロジェクトや Web アプリを構築していますが、実際にはコーディングをしているわけではありません。ただ何かを見て、何かを言って、何かを実行して、何かをコピーして貼り付けるだけで、ほとんど動作します。

いわゆる「バイブス」でコーディングするって感じでしょうか。

実際にはコーディングをせず、やってほしいことの雰囲気をAIに伝えてコードを書いてもらう感じなのかな。

まあやってみないとわからないと思ってやってみることにしました。Claude Codeというものを使ってやってみようと思っています。

今ネット上でバイブコーディングやClaude Codeについて調べても、(当たり前かもしれないけど)元からちゃんとコーディングの基礎的な知識があるような人の記事しか出てこないので、前提条件が違いすぎて参考にするところまで辿り着けていない感じがしてしまいました。

しかしむしろバイブコーディングは、僕のような「コーディングの知識が無い人がコーディングする」ためのツールであるべきじゃないでしょうか。

というわけで、同じレベルの人の助けになればと思ってここに書いています。本当に初心者なのでわかる人からしたら何の役にも立たない内容だとは思います、、、

「npm」がない

まずインストールからつまづきました。

Claude Codeの使い方の記事を読むと、最初にこう書いてあります

1.ターミナルで次のコマンドを実行します。
npm install -g @anthropic-ai/claude-code
2.プロジェクトディレクトリに移動して実行します
3.claude Anthropic Console アカウントを使用して、1 回限りの OAuth プロセスを完了します。

言われた通りにターミナルを開いて

npm install -g @anthropic-ai/claude-code

と入力すると、、、

zsh: command not found: npm

まず日本語で言ってくれ、と思いますけども流石にこれぐらいの英語は一応わかる。「npm なんてコマンドは見つかりません」と言われています。

Node.jsとnpmをインストールしないといけない

こちらの記事によるとnpmはNode Package Managerの略。Node Package Managerを使うにはNode.jsをインストールしないといけないとのこと。

nodeのwebページからNode.jsをダウンロードしてインストールしてみます。

これは普通にパソコンにアプリケーションをインストールするのと同じようにできました。

続いて先ほどの記事に従ってNode Package Managerをインストールします。これはターミナルでやります。

sudo npm install -g npm

すると

たぶん完了っぽい。これでnpm見つかりません問題は解決したはずです。

もう一回やってみるがエラー

満を持して

npm install -g @anthropic-ai/claude-code

を再実行。すると、、、

npm error code EACCES
npm error syscall open
npm error path /Users/(ユーザー名)/.npm/_cacache/tmp/457858f0
npm error errno EACCES
npm error
npm error Your cache folder contains root-owned files, due to a bug in
npm error previous versions of npm which has since been addressed.
npm error
npm error To permanently fix this problem, please run:
npm error   sudo chown -R 501:20 "/Users/(ユーザー名)/.npm"
npm error Log files were not written due to an error writing to the directory: /Users/apple/.npm/_logs
npm error You can rerun the command with --loglevel=verbose to see the logs in your terminal

めっちゃエラーが出ました、、、

To permanently fix this problem, please run:
sudo chown -R 501:20 "/Users/(ユーザー名)/.npm"

とあるので

sudo chown -R 501:20 "/Users/(ユーザー名)/.npm"

素直に実行。どうにでもなれっ!

スクショし忘れましたがこれも成功。後から調べるとキャッシュフォルダの権限を変更するコマンドのようです。よくわかってないけど。

またエラー

そして再び

npm install -g @anthropic-ai/claude-code

を実行すると、さらに長いエラーが。


npm error code EACCES
npm error syscall mkdir
npm error path /usr/local/lib/node_modules/@anthropic-ai
npm error errno -13
npm error Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@anthropic-ai'
npm error     at async mkdir (node:internal/fs/promises:857:10)
npm error     at async /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:624:20
npm error     at async Promise.allSettled (index 0)
npm error     at async [reifyPackages] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:325:11)
npm error     at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:142:5)
npm error     at async Install.exec (/usr/local/lib/node_modules/npm/lib/commands/install.js:149:5)
npm error     at async Npm.exec (/usr/local/lib/node_modules/npm/lib/npm.js:208:9)
npm error     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:67:5) {
npm error   errno: -13,
npm error   code: 'EACCES',
npm error   syscall: 'mkdir',
npm error   path: '/usr/local/lib/node_modules/@anthropic-ai'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It is likely you do not have the permissions to access this file as the current user
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.
npm error A complete log of this run can be found in: /Users/(ユーザー名)/.npm/_logs/2025-03-23T16_00_08_681Z-debug-0.log
(google翻訳)
操作はオペレーティング システムによって拒否されました。
現在のユーザーとしてこのファイルにアクセスする権限がない可能性があります
権限の問題であると思われる場合は、ファイルとそのディレクトリの権限を再確認するか、コマンドを root/管理者として再度実行してください。

また権限の問題、、、調べると

sudo npm install -g @anthropic-ai/claude-code

でいけそうだったので実行。「sudo」はsuperuser doの意で管理者権限で実行するコマンドみたいですね。そして、とうとういけました。

claude

を実行。

テーマカラーを選ぶ画面を経て、、

welcomeされました!

挫折しそうな匂いがプンプンしますけど引き続きやっていきたい所存ではあります。

次:
ガチの初心者からのバイブコーディング② 40円で簡素サイコロができた回