先日、非エンジニアがClaude Codeでアプリ作った件というお題で投稿しました以下のエントリ。本日はこちらの詳細を手順なども含めてお知らせしていこうと思います。
※こちら、Mac環境限定の内容ですのでWindowsユーザの方はご注意ください（Windowsは2025年7月時点で公式には非対応のため）
アプリケーション開発には超ざっくりですが以下の手順があります。
- なんのアプリを開発するか決める
- 開発する環境を整える
- ちゃんと動くかテストする
- 本番環境に移行する
で、実は最初のなんのアプリを開発するか決めるのがめちゃ重要だったりするんですが、今回はここは主眼じゃないのですっ飛ばして、開発環境を整えるを書いていきたいと思います。（今回はお試しとして、お小遣い帳アプリを作ってみることにします）
VsCodeっていうのは、Microsoftが開発した統合開発環境のことです（Integrated Development Environmnetを略してIDEとか呼ばれます）。
以下の記事がとても良くまとまっていますので、こちらを参考にインストールして起動までやっておきましょう（拡張機能は色々ありますが、一旦日本語化だけでOKです）
もちろん、VsCodeじゃなくても、AI機能が最初から入っているCursorやWindsurfでもいいですが、VsCode使っている人がおおいのと、ネット上に参考記事がたくさんでてくるのでおすすめです。
私が新入社員だった20数年前は、メモ帳アプリにベタ書きでコードを書くとかいうプログラミング研修が行われていましたが、アプリ開発にIDEは必須です（まさか今もあるんかなあんな研修・・・？）
VsCodeを起動する前に、開発するアプリの本体やらドキュメントやらいろんなファイルを保存しておくフォルダを決めておいてください。
今回は、便宜上、デスクトップ上にdevelopmentというフォルダを作ります。
VsCodeを起動したらこちらの画面になると思います。
最も左上のアイコンをクリックすると、フォルダーを開くボタンが出てきます。
こちらをクリックして先ほど作成したdevelopmentフォルダを選択してください。
すると以下の画面になると思います。
"Visual Studio Code.app"から"デスクトップ"フォルダ内のファイルにアクセスしようとしています。
→ 許可を押下してください。
このフォルダー内のファイルの作成者を信頼しますか?
→ はい、作成者を信頼しますを押下してください。
これで左上に先ほど選択したフォルダ名が大文字で現れていれば準備OKです。
さて、環境がある程度整ったところで、アプリケーションエンジニアの方であれば、
よっしゃ、コード書いてくぞー
なんですが、私も多分みなさんもコードなんてかけないですよね。
というわけで、ここで自然言語でこんなアプリ作ってちょってお願いしたらコードガリガリ書いて作ってくれる生成AIのClaude Code先生を使えるようにします。
Claude Codeは
「日本語で話しかけるだけで、実際に動くプログラムを作ってくれるAIアシスタント」
なんです。マジ感動。
具体的な手順は以下のとおりです。
1. ターミナルを起動させる（いきなり最初の関門）
ん？ターミナル？なんだそれ？
と思った方、そりゃそーです。今まで一回も使ったことないでしょう。
Windowsでいうとコマンドプロンプトとゆーやつです。それでも知らんという方も多いでしょうな・・・。
簡単にいうと、いつも私達がマウスとポインタ、キーボードでいじっているパソコンをコマンドで操作することができるツールです。
はい、ここで鳥肌たったりアレルギーになりそうになったそこの**あなた！**ちょっとの間だけ我慢しましょう。ここを我慢すれば世界が変わります！
1.Finderを開く
2.アプリケーション → ユーティリティ → ターミナル
または、Spotlight検索（⌘+スペース）で「ターミナル」と入力
するとこんなんが出てくるのでクリックしてください。
すると、あらやだ・・・文字がたくさん書かれたなんだか嫌な予感のする画面が起動します。
こういうの出てくると、非エンジニアの方はすごーく嫌な予感しますよね！
え？なにこれ？文字打てるけど、こわれない？
これ絶対使わないといけない？別の方法ないの？
大丈夫です、パソコンはそんな簡単には壊れないようにできています（20年前とは違いますｗ）
なので、いろいろ勝手に打ち込んでもらってもダイジョブです。大体エラーやら返ってくるだけで何も起こりませんので（アレルギー解消のために、この際テキトーになんでも打ち込んじゃってください）
2. Node.jsをインストールする（よくわかんないけど入れなきゃだめ、ぐらいの理解でOK）
そして次の関門、Node.jsをインストールします。
Node.jsについてはここでは詳しく触れませんが、Claude codeを動かすの必要なツールぐらいの理解でOKです。
詳しく知りたい方はこちらをご覧ください。
おそらくここでめまいがしてきた方、いらっしゃることでしょう。でも大丈夫です。以下に一つ一つわかりやすく手順を書いていきますので、そのまま実行いただければOKです！
- Node.jsのサイトにアクセスして最新版をインストールする
まず https://nodejs.org/ja
にアクセスしてください。
んで、Node.jsをインストールするを何も考えずにクリック！
すると次の画面がいきなり難しそう・・・。
ここで、「あ！インストーラーがあるやん！これダウンロードすればいいやろ！」と飛びつかないでください。
よく見ると、
ARM64アーキテクチャで動作するmacOS用のビルド済みのNode.js「も」利用できます。
ってありますね。これは、PCの計算処理をするとこであるCPUが「ARMって会社が作ってる64ビットのCPUの場合」って意味です。
えー・・・と、多分「？？？？？？」かとおもいます（私もですｗ）。
しかも
も、使えます
なので、なんか怪しい・・・。
ということで、画面上に戻って全然わからなくてもいいので、ここは書いてあることを信じて「クリップボードにコピー」しちゃいましょう！
そして、何も考えずにターミナル画面に戻って「~ %」のあとにペースト！
エラーが出たらその時考える！大丈夫です。こわれたりしませんので。
案の定、私は以下のエラーが出ました。
zsh: command not found: #
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 16631 100 16631 0 0 188k 0 --:--:-- --:--:-- --:--:-- 188k
You may be on a Mac, and need to install the Xcode Command Line Developer Tools.
If so, run `xcode-select --install` and try again. If not, please report this!
おおお、わからん・・・。
こういうとき、1,2年前なら、誰かに聞くとか、ググるとか、やってましたが、今は生成AI先生という強い味方がいます！
早速ChatGPT先生に聞いてみたところ、以下の回答を得ました。
このエラーは、Node.jsのバージョン管理ツールであるnvmに関連する問題ですね。2つの主要な問題が発生しています：
- Xcode Command Line Toolsの不足
まず、以下のコマンドを実行してXcode Command Line Toolsをインストールしてください：
xcode-select --install
これによりポップアップが表示されるので、「インストール」をクリックして完了を待ちます。
おお、ほんとだ。というわけで、何も考えずにインストールをクリック。
20分ほどかかりますが、無事にインストール完了。
忘れてはいけないのが、ChatGPT先生からはもう一つアドバイスを頂いていたこと。
/Users/horiekenichi/.nvm/nvm.shファイルが存在しないようです。以下の手順で確認・修正してください：
nvmがインストールされているか確認：
ls -la ~/.nvm
nvmが存在しない場合、再インストール：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
・・・エラーめいた文言はなさそうだからうまく行ったのかな？
しかし、次のChatGPT先生の指示
シェル設定ファイルを確認・修正：
使用しているシェル（zsh）の設定ファイルを開いて、nvm関連の記述を確認してください：
nano ~/.zshrc
？全く何も書いてない！
というわけで、以下の指示通りにコマンドを実行
以下の行があるか確認し、なければ追加してください：
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
設定を反映：
source ~/.zshrc
そしてなんと！ここでエラー！おいぃぃぃ・・・。
horiekenichi@horiekenichinoMacBook-Pro ~ % source ~/.zshrc
source: no such file or directory: /Users/horiekenichi/.zshrc
うぉぉ・・・普通ならここで心が折れるところですが、「テキトーな日本語ぶん投げるだけで便利なアプリを作りたい」という不純な動機が背中を押し、何も考えずにChatGPT先生にコピペ！（乱暴ｗ）
すると、さすがChatGPT先生・・・お優しい・・・
.zshrcファイルが存在しないようですね。これを解決しましょう。
.zshrcファイルを作成する
まず、.zshrcファイルを作成します：
touch ~/.zshrc
nvmを正しくインストールしましょう：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
このコマンドを実行すると、nvmが自動的に.zshrcファイルに必要な設定を追加してくれます。
source ~/.zshrc
nvmが正しく動作するか確認
nvm --version
horiekenichi@horiekenichinoMacBook-Pro ~ % nvm --version
0.39.0
う、、うごいたぁ！！！！（マジ歓喜）
バージョンが表示されれば成功です。
うぅぅ、無事成功しましたよぉ、ありがとうございますChatGPT先生・・・。
で、更についでにNode.jsのインストール手順まで示してくれてました。
Node.jsをインストール
nvm install node
nvm use node
無事に動きました！
確認
node --version
npm --version
v24.4.0
11.4.2￥
これでようやくNode.jsのインストールが終わりました。
あえて長く書きましたが、ほぼ確実にターミナルコマンドはエラーにぶち当たります。今回ぶち当たらなくても別の機会で必ず。そのときに、思考停止せず、とにかくエラーメッセージ丸投げでいいから生成AIに聞いて、次に進むことが大事だよ、とお伝えしたかった固めです（長くなってごめんなさい）。
さて次はようやくClaude codeのインストールです。
3. Claude Codeをインストールする！
もう今まで色々と準備ができているので、あとは簡単です。
ターミナルに以下のコマンドをコピペするだけです！
npm install -g @anthropic-ai/claude-code
ちょっと時間が経ってなにやら完了したふうなメッセージが出るので、それでインストールは完了です。
事前準備として一回起動しておきましょう。
claude
これだけです。超簡単ですよね。
途中たくさんメッセージが出ますが、全部YesでOKです。最終的に以下の画面になれば成功です！
ただし
Claude codeを使うには有料課金が必要です。おそらく上記のYes押しまくりの途中でAnthropic社のWebサイトに飛ぶと思うので、とりあえずお試しなら月額20ドル（月3000円）で契約しておきましょう。
ちなみに私は、アプリを3つぐらい並行して開発するようになってしまったので、月100ドルプランを契約してしまいましたｗ
さて、ようやく環境設定の長い旅も終わりです。
再びVsCodeを起動しましょう。
左ペインの四角が4つ並んでいるようなアイコン（これがプラグインです）をクリックして、検索窓でClaudeとうつと、色々出てきますが、この画像でいうと上から2つ目のプラグインをインストールして下さい。
画面右上に小さい赤枠で囲っている小さなClaudeマークが出てきたら成功です。
出てこない場合よくあるので、その場合はVsCodeを再起動したり、Claudeプラグインをアンインストールして入れ直したりしていると出てくるようになります。
こちらの小さいClaudeボタンをクリックすると以下の画面になって、自然言語でアプリ開発ができる準備が整いました！
次回は
サルでもわかる！AI利用のアプリ開発 #2 とりあえず作ってみる
です！