初めてのAstroプロジェクト

ここで学ぶことは...

create astro セットアップウィザードを実行して、新しいAstroプロジェクトを作成する
Astroサーバーを開発（dev）モードで起動する
ブラウザでウェブサイトのライブプレビューを表示する

Astroのセットアップウィザードを起動する

新しいAstroサイトを作成するおすすめの方法は、create astroセットアップウィザードを使用することです。

ターミナルのコマンドラインで、お好みのパッケージマネージャーを使用して次のコマンドを実行します。
- npm
- pnpm
- Yarn
```
# npmで新しいプロジェクトを作成する
npm create astro@latest
```
```
# pnpmで新しいプロジェクトを作成する
pnpm create astro@latest
```
```
# yarnで新しいプロジェクトを作成する
yarn create astro
```
yを入力してcreate-astroをインストールすることを確認します。
プロンプトが「新しいプロジェクトをどこに作成しますか？（Where would you like to create your new project?）」と尋ねるので、新しいプロジェクトのフォルダ名を入力します（たとえば./tutorialなど）。

:::note新しいAstroプロジェクトは、完全に空のフォルダにしか作成できません。まだ存在しないフォルダ名を選択してください！:::
スターターテンプレートの短いリストが表示されます。矢印キー（上下）を使用して「Empty」テンプレートに移動し、リターン（エンター）キーを押して選択を確定します。
プロンプトが「依存関係をインストールしますか？（Would you like to install dependencies?）」と尋ねるので、yを入力します。
プロンプトが「新しいgitリポジトリを初期化しますか？（Would you like to initialize a new git repository?）」と尋ねるので、yを入力します。

インストールウィザードが完了したら、このターミナルはもう不要です。VS Codeを開いて続きの作業をおこないます。

VS Codeでプロジェクトを開く

VS Codeを開きます。フォルダを開くように促されるので、セットアップウィザードで作成したフォルダを選択します。
Astroプロジェクトを初めて開く場合、推奨拡張機能をインストールするかどうかを尋ねる通知が表示されます。クリックして推奨拡張機能を表示し、Astro language support extensionを選択します。これにより、Astroコードのシンタックスハイライトと自動補完が有効化されます。
以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。
```
user@machine:~/tutorial$
```
:::tip[キーボードショートカット]ターミナルの表示と非表示を切り替えるには、Ctrl + J（macOSではCmd ⌘ + J）を使用します。:::

これで、コンピュータのターミナルアプリではなくウィンドウ内のターミナルを使用して、チュートリアルの残りの部分を進められるようになりました。

Astroをdevモードで実行する

作業中にプロジェクトファイルをウェブサイトとしてプレビューするには、Astroを開発（dev）モードで実行する必要があります。

devサーバーを起動する

VS Codeのターミナルに以下のコマンドを入力して、Astroのdevサーバーを起動します。
- npm
- pnpm
- Yarn
```
npm run dev
```
```
pnpm run dev
```
```
yarn run dev
```
Astroがdevモードで実行されていることをターミナル上で確認できるはずです。🚀

ウェブサイトのプレビューを確認する

プロジェクトファイルには、Astroウェブサイトを表示するために必要なすべてのコードが含まれていますが、コードをウェブページとして表示するのはブラウザの役割です。

ターミナルウィンドウのhttp://localhostリンクをクリックして、新しいAstroウェブサイトのライブプレビューを確認します！

（Astroは、ポート4321が使用可能な場合、デフォルトでhttp://localhost:4321を使用します。）

Astroの「Empty Project」スターターウェブサイトは、ブラウザ上では以下のように表示されます。

:::tip[Astroのdevサーバーを使用する]

Astroサーバーがdevモードで実行されている間は、ターミナルウィンドウでコマンドを実行できません。代わりに、このペインにはサイトをプレビューした際のフィードバックが表示されます。

ターミナルでCtrl + Cを入力すれば、いつでもdevサーバーを停止してコマンドプロンプトに戻れます。

作業中にdevサーバーが勝手に停止することがあります。ライブプレビューが機能しなくなった場合は、ターミナルに戻りnpm run devと入力してdevサーバーを再起動してください。:::

チェックリスト

新しいAstroプロジェクトを作成できる。
Astroのdevサーバーを起動できる。

参考

Getting Started with Visual Studio Code 外部サイト — VS Codeのインストール、設定、使用方法についてのビデオチュートリアル

貢献するコミュニティスポンサー