初めてのAstroプロジェクト

ここで学ぶことは…

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

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

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

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

新しいAstroプロジェクトは、完全に空のフォルダにしか作成できません。まだ存在しないフォルダ名を選択してください！
スターターテンプレートの短いリストが表示されます。矢印キー（上下）を使用して「Empty」テンプレートに移動し、リターン（エンター）キーを押して選択を確定します。
プロンプトがTypeScriptを使用する予定かどうか尋ねるので、nを入力します。
プロンプトが「依存関係をインストールしますか？（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コードのシンタックスハイライトと自動補完が有効化されます。
以下のようにターミナルとコマンドプロンプトが表示されていることを確認します。
Terminal window
```
user@machine:~/tutorial$
```
ターミナルの表示と非表示を切り替えるには、Ctrl + J（macOSではCmd ⌘ + J）を使用します。

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

Astroをdevモードで実行する

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

devサーバーを起動する

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

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

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

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

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

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