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

WordPressでは「レンタルサーバー上の管理画面」にブラウザからログインして記事を書き、公開ボタンを押すのが一般的でした。

一方で、Astroのような最新の静的サイトジェネレーターを扱う場合、「自分のパソコン（ローカル環境）で記事を書き、自動でサーバーへ反映させる」という仕組みを採用します。そのために必要となるのが以下の2つのツールです。

「メモ帳やWordで書くのと何が違うの？」と思われるかもしれませんが、VS Codeを使うことで、記事の執筆、デザインの修正、さらにはターミナル（黒い画面）での自動反映コマンドまでをすべて1つの画面内で完結できるようになります。

【ステップ1】Node.jsのインストールと動作確認

Node.js（ノード・ジェイエス）は、本来ブラウザ上で動くJavaScriptを、パソコン上で動かせるようにする実行環境です。Astroでサイトを構築したりプレビューを表示したりするために必須となります。

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

1. ブラウザで Node.js 公式サイト にアクセスします。
2. 画面に表示される2つのダウンロードボタンのうち、必ず「LTS（推奨版）」 をクリックします。
   ※「最新版」は実験的な機能が含まれており、プラグイン等の互換性エラーが起きやすいため、安定して動作する「LTS」を選んでください。
3. Windows用のインストーラー（.msi ファイル）がダウンロードされます。

2. インストーラーを実行する

ダウンロードしたファイルをダブルクリックして起動します。

1. セットアップ画面が表示されたら 「Next」 をクリックします。
2. 利用規約が表示されるので、「I accept the terms in the License Agreement」 にチェックを入れて 「Next」 をクリックします。
3. インストール先のフォルダは変更せず、そのまま 「Next」 をクリックします。
4. カスタムセットアップの画面も、標準のままで問題ないため 「Next」 をクリックします。
5. 「Tools for Native Modules」という追加ツールの確認画面が出た場合は、チェックを入れずに 「Next」 をクリックしてください（一般的なブログ運営では不要です）。
6. 最後に 「Install」 をクリックし、インストールの完了画面が出たら 「Finish」 をクリックします。

3. コマンドプロンプトでインストールを確認する

正常にパソコンへ導入されたかを、Windowsの「コマンドプロンプト」を使って確認します。

1. キーボードの Windowsキー を押し、そのまま cmd と入力して Enter キーを押します（黒い画面が開きます）。
2. 以下のコマンドを入力して Enter キーを押します。

   node -v

   確認： v20.18.0 のように、バージョン番号が表示されればNode.jsの導入は成功です。
3. 続けて、パッケージ管理ツールのバージョンも確認します。

   npm -v

   確認： 10.8.2 などの数字が表示されれば完了です。黒い画面は右上の「×」ボタンで閉じて構いません。

【ステップ2】VS Codeのインストールと日本語化

次に、記事執筆とサイト編集の拠点となる「Visual Studio Code（VS Code）」を導入します。Microsoftが無料で提供している、世界中で最も使われているコードエディタです。

1. VS Codeをダウンロードしてインストールする

1. Visual Studio Code 公式サイト にアクセスします。
2. 青い 「Download for Windows」 ボタンをクリックしてインストーラーをダウンロードします。
3. ダウンロードした実行ファイル（.exe）をダブルクリックして開きます。
4. 利用規約に「同意する」を選び、「次へ」を進めます。
5. 「追加タスクの選択」画面での重要ポイント：
   以下の項目にチェックを入れておくと、今後の作業が格段にスムーズになります。
   • 「エクスプローラーのファイル コンテキスト メニューに [Code で開く] アクションを追加する」
   • 「エクスプローラーのディレクトリ コンテキスト メニューに [Code で開く] アクションを追加する」
6. そのまま「次へ」進み、「インストール」をクリックして完了させます。

2. 表示言語を「日本語」に変更する

初期状態のVS Codeは英語表記になっているため、日本語拡張機能を入れます。

1. VS Codeを起動します。
2. 画面の左端にあるアクティビティバーから、「Extensions（拡張機能）」 アイコン（四角形が4つ組み合わさったマーク）をクリックします。
3. 上部の検索バーに Japanese と入力します。
4. 一番上に表示される 「Japanese Language Pack for Visual Studio Code」（Microsoft公式）の右側にある 「Install」 ボタンをクリックします。
5. インストール完了後、画面右下に「Change Language and Restart」という青いボタンが表示されるのでクリックします。
6. VS Codeが自動で再起動し、メニューや設定がすべて日本語に切り替わります。

3. ブログ運営に入れておきたいおすすめ拡張機能

必須ではありませんが、最初に入れておくと執筆や編集の効率が劇的に上がるプラグインです。日本語化と同じ「拡張機能」タブから名前を検索して「インストール」を押すだけで使えます。

• Astro： Astro独自のコード（.astro ファイル）に色がつき、構文エラーも教えてくれます。
• Prettier - Code formatter： 保存時に崩れたインデント（文字のズレ）を自動で綺麗に整列してくれます。

【実録トラブル対策】VS Codeが開かない・動かないときの対処法

設定を進めていると、「アイコンをクリックしてもVS Codeが開かない」「キーボードの保存ショートカットが効かない」といったトラブルに直面することがあります。焦らずに以下の対処を試してください。

1. タスクマネージャーでバックグラウンドプロセスを終了する

画面上には見えていなくても、裏で固まったVS Codeが残っていると新しく起動できません。

1. キーボードで Ctrl + Shift + Esc を同時に押して「タスクマネージャー」を開きます。
2. 一覧から 「Visual Studio Code」（または Code.exe）を探します。
3. 右クリックして 「タスクの終了」 をクリックします（複数ある場合はすべて終了）。
4. 再度デスクトップやスタートメニューからVS Codeを開きます。

2. コマンドプロンプトから直接プロジェクトを開く

ショートカットから反応がない場合、作業フォルダから直接起動コマンドを打つのが最も確実です。

1. キーボードの Windowsキー を押し、cmd と入力してコマンドプロンプトを開きます。
2. ブログの作業フォルダに移動した状態で、以下の半角文字を入力して Enter を押します。

   code .

   ※「code」と「.（ドット）」の間に必ず半角スペースを入れてください。
3. 現在のフォルダが読み込まれた状態でVS Codeが起動します。

3. Ctrl + S で保存できないときの対処法

キーボードの Ctrl + S を押してもファイルが保存されない（ファイル名の横にある丸マーク ● が消えない）場合は、文字の入力エリアにカーソルが当たっていないことが原因です。

• エディタ内の黒いテキスト部分を一度左クリックしてから、再度 Ctrl + S を押します。
• それでも反応しない場合は、画面左上のメニュー 「ファイル（File）」＞「保存（Save）」 をマウスで直接クリックしてください。丸マークが × に変われば正常に保存完了しています。