脱WordPressの一歩目！Astroを動かすためのVS Code・Node.jsインストール＆初期設定完全解説

「WordPressのサーバー代を0円にしたい」「表示速度が圧倒的に速いAstroでブログを作ってみたい」と思っても、最初のハードルになるのが手元のパソコン（Windows等）への開発環境の準備です。

WordPressならレンタルサーバーの管理画面からボタン1つでインストールできましたが、AstroのようなモダンなWebサイト構築では、自分のパソコンの中に「サイトを組み立てる工場」を作るところからスタートします。

とはいえ、必要なツールは「Node.js（ノード・ジェイエス）」と「VS Code（ブイエス・コード）」のたった2つだけです。どちらも完全無料で、15分もあれば導入できます。

この記事では、プログラミング未経験の個人ブロガーでも迷わず進められるよう、インストール手順から最初につまずきやすいエラーの回避法までをステップバイステップで解説します。

なぜブログ運営に「Node.js」と「VS Code」が必要なのか？

手順に入る前に、「そもそもこの2つのソフトは何をするものなのか？」を簡単にイメージしておきましょう。

• Node.js ＝ サイトを組み立てる「エンジン（裏方の工場）」
  あなたが書いた記事データやデザインテンプレートを読み込み、ブラウザで高速に表示できるWebページ（HTMLファイル）へと自動変換（ビルド）してくれるプログラム実行環境です。
• VS Code ＝ 記事を書いたり指示を出したりする「作業机（コックピット）」
  Microsoftが無料で提供している世界標準のエディタです。記事の執筆、設定ファイルの編集、そしてサイトを公開するためのコマンド入力まで、すべての作業をこのソフト1つで完結できます。

たとえるなら、「VS Codeという快適な作業机の上で記事を書き、Node.jsというエンジンを動かしてWebサイトを完成させる」という役割分担になっています。

【手順1】Node.js（推奨版・LTS）のインストールと確認

まずは裏方のエンジンとなる「Node.js」をパソコンにインストールします。

1. 公式サイトから「LTS（推奨版）」をダウンロードする

1. Node.js 公式サイト にアクセスします。
2. トップページにダウンロードボタンが表示されますが、必ず「LTS（推奨版 / Long Term Support）」と書かれている方を選んでダウンロードしてください（※「最新版 / Current」は動作が不安定な場合があるため、Astroの運用では常にLTS版を使います）。
3. ダウンロードしたインストーラー（.msi ファイル等）をダブルクリックして起動します。
4. 画面の指示に従って「Next」を押し進めます。途中でチェックボックス等が出てきても、基本的には初期設定のまま進めて最後に「Install」＞「Finish」を押せば完了です。

2. 正しくインストールされたか確認する

インストールが終わったら、パソコンがNode.jsを正しく認識しているか確認します。

1. Windowsのスタートボタン横の検索窓に cmd と入力し、「コマンドプロンプト」（またはPowerShell）を開きます。
2. 以下のコマンドを入力してEnterキーを押します。

node -v

画面に v22.x.x や v20.x.x のようにバージョン番号が表示されれば、Node.jsの導入は大成功です！続けて以下のコマンドも打ってみましょう。

npm -v

こちらも数字（10.x.x 等）が表示されれば、Astroをインストールするためのパッケージ管理ツール（npm）も同時に準備完了しています。

【手順2】VS Codeのインストールと「日本語化」設定

次に、メインの作業画面となる「Visual Studio Code（VS Code）」を導入します。

1. VS Code本体のインストール

1. Visual Studio Code 公式サイト にアクセスし、インストーラーをダウンロードします。
2. ダウンロードしたファイルを実行し、利用規約に同意して「次へ」を進めます。
3. 「追加タスクの選択」画面では、「エクスプローラーのディレクトリコンテキストメニューに［Codeで開く］アクションを追加する」や「PATHへの追加」にチェックを入れておくと、後からフォルダを開く際に非常に便利です。

2. 拡張機能でメニューを「日本語化」する

インストール直後のVS Codeはメニューがすべて英語になっているため、最初に日本語化パックを入れておきましょう。

1. VS Codeを起動し、画面左端のアイコンが並んでいるバーから「四角形が4つ並んだアイコン（Extensions / 拡張機能）」をクリックします（ショートカット：Ctrl + Shift + X）。
2. 上部の検索窓に Japanese と入力します。
3. 一番上に出てくる地球儀マークの 「Japanese Language Pack for Visual Studio Code」（Microsoft公式）を選び、青い 「Install」 ボタンを押します。
4. 数秒後に画面右下へ「Change Language and Restart」というボタンが表示されたらクリックします。VS Codeが再起動し、すべてのメニューが綺麗な日本語に切り替わります。

【手順3】最初につまずきやすい2つのトラブルと解決策

Windows環境で初めてVS CodeとNode.jsを使う際、よく遭遇する2つのトラブルと対処法を先回りして共有します。

① VS Codeのターミナルで「スクリプトの実行が無効になっているため…」という赤いエラーが出る場合

VS Code内のターミナル（Ctrl + @）で npm コマンドを打った際、Windowsの初期セキュリティ制限（PowerShellの実行ポリシー）によって赤い文字でエラーが出ることがあります。

• 解決策：VS Codeのターミナルで以下のコマンドを1行貼り付けてEnterを押してください。これで現在のユーザーに対してスクリプト実行が許可され、エラーが出なくなります。

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

② Node.jsを入れたのに「'node' は、内部コマンドまたは外部コマンドとして認識されていません」と出る場合

VS Codeを起動したままの状態でNode.jsをインストールした場合、VS Code側がまだ新しい設定（環境変数PATH）を読み込めていないことがあります。

• 解決策：一度VS Codeを「×」ボタンで完全に閉じ、もう一度起動し直してから node -v を試してみてください。それでも直らない場合は、パソコン自体を一度再起動すると確実に認識されます。

まとめ：土台は完成！次はAstroサイトを作って自動公開しよう

お疲れさまでした！これで、あなたのパソコンの中に「Node.js」と「VS Code」という、モダンなWebメディアを運営するための最強の工房が整いました。

ここまでの準備ができれば、いよいよAstroのブログ本体を作成し、GitHubとCloudflare Pagesを繋いで「サーバー代0円の自動公開システム」を動かすステップに進めます。続けて以下の記事を見ながら、最初のサイト公開まで一気に進めてみましょう！

🚀 次のステップへ進む

• 【次の記事】サーバー代0円で爆速運用！VS Codeの3コマンドで実現するAstro×Cloudflare Pages自動公開ガイド →
• 【全体像】WordPressを卒業したい個人へ！Astro×Cloudflareで始める「維持費0円・爆速ブログ」構築ロードマップ