VSCode初心者がAstroでブログを立ち上げるまでにハマった話（Node.jsインストールからプロジェクト作成まで）

このブログ自体、Astroで作っています。今回は実際に自分がゼロから環境を作ったときの手順をつまずいた部分も含めてそのまま書いておこうと思います。Astroの特徴や魅力などは以前の記事を参照してください。結論から言うと、最初の一歩目からいきなり詰まりました。VSCodeのターミナルでコマンドを打ったら、見たことのないエラーが出てきたのです。

1. プロジェクトを作る場所に移動する

まず、プロジェクトを作りたいフォルダに移動します。今回は C:\Users\username\astro というフォルダを作業場所にしました。VSCodeのターミナルを開いて、以下を入力します。

cd C:\Users\username\astro

ここで最初のつまずきが起きました。VSCodeを初めて開いたとき、ターミナルの種類がデフォルトで「PowerShell」になっていたのですが、そのままコマンドを打つと「このシステムではスクリプトの実行が無効になっているため…」という趣旨のエラーが出て、何も実行できませんでした。原因はPowerShellの実行ポリシーの制限なのですが、正直、初めて見たときは何を言っているのか分かりませんでした。調べれば回避コマンドもあるようですが、毎回調べるのも面倒だったので、結局ターミナルの種類を「コマンドプロンプト（cmd）」に変更することにしました。こちらの方が余計な設定を気にせず動くので、初心者にはこちらの方が楽だと思います。

VSCodeのターミナル画面の右上にある「＋」ボタンの横の「∨（下矢印）」をクリックし、「Command Prompt」を選択すると切り替えられます。

2. Node.jsをインストールする

Astroを動かすにはNode.jsが必要です。以下の公式サイトからインストーラーをダウンロードします。

https://nodejs.org/ja/download

インストーラーが開いたら、基本的にすべて「次へ」でデフォルトのまま進めて問題ありません。インストールが終わったら、念のため一度PCを再起動してからVSCodeを開き直しました。再起動せずに進めて、コマンドが認識されないというトラブルを見たことがあったので、ここは面倒でも再起動しておくのが無難です。

インストールできているか確認するには、先ほどのコマンドプロンプトで以下を入力します。

node -v

バージョン番号（例：v20.x.x のような表示）が出てくれば成功です。何も表示されない、または「'node' は、内部コマンドまたは外部コマンド...」というエラーが出る場合は、インストールがうまくいっていないか、再起動が必要な状態です。

3. Astroプロジェクトを作成する

ここまで来たら、いよいよAstroのプロジェクトを作成します。まず、作業フォルダの中で以下を実行しました。

npm install

続けて、Astroの作成コマンドを実行します。

npm create astro@latest

実行すると、いくつか質問が表示されます。自分が選んだ選択肢はこちらです。

• Where should we create your new project? → プロジェクトのフォルダ名を入力（例：lp-pay）
• How would you like to start your new project? → A basic, helpful starter projectを選択。Empty（中身が空っぽの状態）という選択肢もありましたが、src/pages/index.astroやsrc/components/など、最低限のフォルダとサンプルファイルが最初から入っている方を選びました
• Install dependencies? → Yes（npm installを自動で実行してくれます）
• Initialize a new git repository? → Yes（Gitで管理するため）
• TypeScript? → Strictを選択

4. できあがったフォルダ構成を見てみる

プロジェクトができると、VSCodeのエクスプローラーに以下のようなフォルダ構成が表示されます。最初に見たときは何がどこにあるのか全く分からなかったので、自分が理解した範囲で簡単にまとめておきます。

• dist：ビルド（デプロイ）したときに自動生成されるフォルダ。自分で直接編集するものではないので、最初は空か、存在しなくても問題ありません
• node_modules：npm installでダウンロードされたライブラリ一式。中身を直接触ることはまずありません
• public：画像などの静的ファイルを置く場所。このブログの記事画像も、public/imagesにまとめて保存しています
• src/components：ヘッダーやフッター、お問い合わせフォームなど、使い回すパーツを置く場所
• src/data：ブログ記事のデータなど、コンテンツそのものを管理するファイルを置く場所
• src/layouts：ページ全体の共通レイアウトを定義する場所
• src/pages：実際のページ（URL）に対応するファイルを置く場所。src/pages/blogの中に、このブログの記事一覧ページと記事詳細ページがあります

正直、最初はこれだけのフォルダを見て「どこを触ればいいのか」全く分かりませんでした。今振り返ると、まず触るべきはsrc/pagesとsrc/componentsだけで、それ以外は最初のうちは触らなくても困らない、というのが実感です。