環境構築 / Learch

Astro の環境構築

はじめに

Astro プロジェクトを始めるための第一歩は、開発環境を設定することです。このセクションでは、Node.js のインストールから Astro プロジェクトの初期セットアップ、必要な開発ツールのインストールまでを一歩一歩説明します。

Node.js のインストール

Astro を使用するには、Node.js がシステムにインストールされている必要があります。

Node.js のダウンロード: Node.js の公式ウェブサイトにアクセスし、推奨されるバージョンをダウンロードしてください。
インストールの確認: インストールが成功したかどうかを確認するために、ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します。
```
node --version
npm --version
```
これらのコマンドは、それぞれ Node.js と npm（Node.js のパッケージマネージャ）のバージョンを表示します。

Astro プロジェクトのセットアップ

Node.js がインストールされたら、次は Astro プロジェクトの作成です。

新しい Astro プロジェクトの作成: ターミナルまたはコマンドプロンプトで以下のコマンドを実行します。
```
npm init astro
```
このコマンドは、新しい Astro プロジェクトをセットアップするためのウィザードを開始します。
プロジェクト設定: ウィザードがいくつかの質問をします。例えば、プロジェクトの名前や、どのフロントエンドフレームワークを使用するか（React、Vue など）などです。必要に応じて選択してください。
依存関係のインストール: プロジェクトのセットアップが完了したら、プロジェクトディレクトリに移動し、以下のコマンドを実行して必要な依存関係をインストールします。
```
cd your-project-name
npm install
```

開発環境の構築

プロジェクトのセットアップが完了したら、開発を始める準備が整いました。

開発サーバーの起動: 開発中にプロジェクトを簡単に確認できるように、Astro はローカル開発サーバーを提供しています。以下のコマンドで起動します。
```
npm run dev
```
これで、ブラウザを開き、表示された URL（通常は http://localhost:3000）にアクセスすると、プロジェクトを見ることができます。
エディタの設定: Astro のコードを編集するためには、テキストエディタが必要です。Visual Studio Code（VS Code）などのエディタを使用し、Astro のためのプラグインや拡張機能をインストールすると、開発体験が向上します。

Astroコンポーネント