Astroを自動CLIでインストール

Astroをインストールする準備はできましたか？自動または手動セットアップガイドにしたがって開始してください。

• Node.js - v16.12.0 またはそれ以上。
• テキストエディタ - VS Codeと公式Astro拡張機能を推奨します。
• ターミナル - Astroは、コマンドラインインターフェイス（CLI）からアクセスします。

create-astro は、新しいAstroプロジェクトをゼロから始めるもっとも速い方法です。新しいAstroプロジェクトをセットアップするためのすべてのステップを案内してくれます。いくつかの異なるスターターテンプレートから選んだり、 --template 引数を使用して独自のテンプレートを使用できます。

ターミナルで以下のコマンドを実行すると、便利なインストールウィザード、create-Astroが起動します。

# npmで新しいプロジェクトを作成する
npm create astro@latest

# pnpmで新しいプロジェクトを作成する
pnpm create astro@latest

# yarnで新しいプロジェクトを作成する
yarn create astro

create-astroはどのディレクトリでも実行でき、始める前にプロジェクト用の新しい空のディレクトリを作成する必要はありません。新しいプロジェクト用の空のディレクトリがまだなければ、ウィザードが自動的に作成します。

すべてがうまくいけば、「Ready for liftoff!」というメッセージの後に、いくつかの推奨する「Next steps」が表示されるはずです。新しいプロジェクトディレクトリにcdで移動し、Astroの使用を開始します。

もしcreate-astroウィザードでnpm installのステップをスキップした場合は、続行する前に依存関係をインストールしてください。

Astroには、プロジェクト開発に必要なものをすべて備えた開発サーバーが内蔵されています。astro devコマンドを実行すると、ローカルの開発サーバーが起動し、新しいウェブサイトが実際に動作しているところを初めて見られるようになります。

すべてのスターターテンプレートには、あなたに代わってastro devを実行するスクリプトがあらかじめ設定されています。お好みのパッケージマネージャーでこのコマンドを実行し、Astro開発サーバを起動します。

npm run dev

pnpm run dev

yarn run dev

うまくいけば、Astroはhttp://localhost:3000でプロジェクトの開発サーバーを起動します！

Astroは src/ ディレクトリのファイル変更を自動検出するので、開発中に変更を加えてもサーバーを再起動する必要はありません。

ブラウザでプロジェクトを開けない場合は、devコマンドを実行したターミナルに戻って、エラーが発生したか、またはプロジェクトが上記のリンク先とは異なるURLで提供されていないか確認してください。

成功です！これでAstroを使った開発を始める準備ができました！🥳

ここでは、次に調べることをおすすめするいくつかのトピックを紹介します。どのような順番で読んでもかまいません。また、このドキュメントを少し離れて、新しいAstroプロジェクトのコードベースで遊びながら、問題にぶつかったり、質問があったりしたときに、ドキュメントに戻ってくることもできます。

📚 フレームワークを追加：インテグレーションガイドで、npx astro addを使用してReact、Svelte、Tailwindなどをサポートし、Astroを拡張する方法を学びます。

📚 サイトをデプロイ：デプロイガイドで、Astroプロジェクトをビルドしてウェブにデプロイする方法を学びましょう。

📚 コードベースを理解：Astroのディレクトリ構造については、ディレクトリ構造ガイドで詳しく説明します。