Astroのインストールとセットアップ

create astroCLIコマンドは、新しいAstroプロジェクトをゼロから作成する最速の方法です。このコマンドは、新しいAstroプロジェクトのセットアップに必要なすべてのステップをガイドし、複数の公式スターターテンプレートから選択できるようにします。

また、既存のテーマやスターターテンプレートを使用してプロジェクトを開始できます。

手動でAstroをインストールする場合は、ステップバイステップの手動インストールガイドを参照してください。

前提条件

Node.js - v18.17.1またはv20.3.0以上。（v19はサポート対象外です。）
テキストエディタ - VS Codeと公式のAstro拡張機能を使うことをおすすめします。
ターミナル - Astroにはコマンドラインインターフェース（CLI）を通じてアクセスします。

ブラウザの互換性

Astroはデフォルトで、モダンなJavaScriptをサポートするブラウザをターゲットとしています。詳細については、Viteがサポートするブラウザバージョンのリストを参照してください。

新しいプロジェクトを開始する

CLIウィザードからインストールする

以下のコマンドをターミナルで実行して、インストールウィザードを起動します。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
# npmで新しいプロジェクトを作成 npm create astro@latest
ターミナルウィンドウ
# pnpmで新しいプロジェクトを作成 pnpm create astro@latest
ターミナルウィンドウ
# yarnで新しいプロジェクトを作成 yarn create astro
create astroはマシン上のどこでも実行でき、プロジェクトを開始する前に新しい空のディレクトリを作成する必要はありません。新しいプロジェクトのための空のディレクトリがまだない場合、ウィザードが自動的に作成します。

問題がなければ成功のメッセージが表示され、推奨される次のステップがいくつか続きます。プロジェクトが作成されたら、新しいプロジェクトのディレクトリにcdしてAstroを使い始められます。
CLIウィザードで”Install dependencies?”のステップを飛ばした場合は、依存関係をインストールしてから続行してください。
以上により、Astroの開発サーバーを起動して、プロジェクトのライブプレビューを確認できるようになりました！

テーマやスターターテンプレートを使用する

公式のサンプルや任意のGitHubリポジトリのmainブランチを使用して新しいAstroプロジェクトを開始するには、create astroコマンドに--template引数を渡します。

テーマとスターターのショーケースで、ブログ、ポートフォリオ、ドキュメントサイト、ランディングページなどのテーマを閲覧できます！また、GitHubでその他のスタータープロジェクトを検索することもできます。

以下のコマンドをターミナルで実行します。公式Astroスターターテンプレート名か、使用したいテーマのGitHubユーザー名とリポジトリを指定してください。

# 公式のサンプルを使用して新しいプロジェクトを作成
npm create astro@latest -- --template <example-name>

# GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成
npm create astro@latest -- --template <github-username>/<github-repo>

# 公式のサンプルを使用して新しいプロジェクトを作成
pnpm create astro@latest --template <example-name>

# GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成
pnpm create astro@latest --template <github-username>/<github-repo>

# 公式のサンプルを使用して新しいプロジェクトを作成
yarn create astro --template <example-name>

# GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成
yarn create astro --template <github-username>/<github-repo>

デフォルトでは、このコマンドはテンプレートリポジトリのmainブランチを使用します。異なるブランチ名を使用する場合は、--template引数の一部として<github-username>/<github-repo>#<branch>のように渡します。

CLIウィザードの質問に回答し、指示に従ってください。
以上により、Astroの開発サーバーを起動して、プロジェクトをカスタマイズしながらライブプレビューを確認できるようになりました！

プロジェクトの編集

プロジェクトを編集するには、コードエディタでプロジェクトフォルダを開きます。開発モードで開発サーバーを実行しながら作業すると、コードを編集するたびにサイトの更新を確認できます。

また、TypeScriptの設定や公式Astroエディタ拡張機能のインストールなど、開発環境のカスタマイズも可能です。

Astroの開発サーバーを起動する

Astroには、プロジェクト開発に必要な機能がすべてが備わっている、組み込みの開発サーバーが付属しています。astro dev CLIコマンドを実行するとローカル開発サーバーが起動するため、新しいウェブサイトを最初の段階から動作確認できます。

すべてのスターターテンプレートには、astro devを実行するための設定済みスクリプトが付属しています。プロジェクトディレクトリに移動してから、好みのパッケージマネージャを使用してこのコマンドを実行し、Astro開発サーバーを起動します。

npm run dev

pnpm run dev

yarn run dev

問題がなければ、Astroはhttp://localhost:4321/でプロジェクトを配信します。ブラウザでリンクを開き、新しいサイトを確認してください！

開発モードで作業する

Astroはsrc/ディレクトリ内のファイル変更をリアルタイムで監視し、開発中に変更を加えるとサイトのプレビューを更新します。開発中に変更を加えるたびにサーバーを再起動する必要はありません。開発サーバーが起動しているときにブラウザでサイトを表示すれば、常に最新のバージョンを確認できます。

ブラウザでサイトを表示すると、Astroの開発ツールバーにアクセスできます。開発中にアイランドを検査したり、アクセシビリティの問題を見つけたりするのに役立ちます。

開発サーバーを起動したにもかかわらずプロジェクトをブラウザで開けない場合は、devコマンドを実行したターミナルに戻り、表示されているメッセージを確認してください。エラーの有無や、http://localhost:4321/以外のURLでプロジェクトが配信されているかどうかが表示されているはずです。

開発環境の設定

以下のガイドを参照して、開発環境をカスタマイズしてください。

エディタのセットアップコードエディタをカスタマイズし、Astroの開発体験を向上させたり、新しい機能を利用できるようにします。

開発ツールバー開発ツールバーの便利な機能について学びます。

AstroとTypeScript

AstroはTypeScriptを組み込みでサポートしており、これによりコード内のオブジェクトやコンポーネントの型を定義してランタイムエラーを防ぐことができます。

Astroプロジェクトでは、TypeScriptの恩恵を受けるためにTypeScriptのコードを特別に書く必要はありません。Astroはコンポーネントコードを常にTypeScriptとして扱い、AstroのVSCode拡張機能はそれをもとにできる限り推論し、エディタ内で自動補完、ヒント、エラーを提供します。

AstroでのTypeScriptの使い方や設定についてもっと学ぶ

サイトのビルドとプレビュー

ビルドして作成されるサイトを確認するには、開発サーバーを終了（Ctrl + C）して、ターミナルでパッケージマネージャに応じたビルドコマンドを実行します。

npm run build

pnpm build

yarn run build

Astroは、デフォルトではdist/フォルダにデプロイ可能なサイトをビルドしますが、その進捗状況をターミナルで確認できます。本番環境にデプロイする前に、プロジェクトのビルドエラーがあればそこで通知されます。TypeScriptがstrictまたはstrictestに設定されている場合は、buildスクリプトはプロジェクトの型エラーもチェックします。

ビルドが完了したら、ターミナルで適切なpreviewコマンド（たとえばnpm run preview）を実行しましょう。開発時と同じブラウザのプレビューウィンドウ内で、ローカルでビルドされたサイトを確認できます。

このコマンドは、ビルドコマンドが最後に実行された際のコードをプレビューするという点に注意してください。つまり、サイトがウェブにデプロイされたときの見た目をプレビューするために使用します。ビルド後にコードを変更しても、ビルドコマンドを再度実行しない限り、プレビュー中のサイトには反映されません。

Ctrl + Cを使用してプレビューを終了してから、開発モードで作業するために開発サーバーを再起動するなど、別のターミナルコマンドを実行します。開発モードでは編集するたびにサイトが更新されるため、コード変更のライブプレビューを確認できます。

Astroでのサイト作成時に使用するAstro CLIやターミナルコマンドについてもっと学ぶ。

新しいサイトのデプロイ

多くのコードを追加・変更する前に、新しいサイトをすぐにデプロイしたい場合があります。これにより、最小限の動作するサイトを公開でき、デプロイのトラブルシューティングにかかる余分な時間と労力を節約できます。

次のステップ

完了です！これでAstroでの開発を始める準備が整いました！🥳

続いて以下の内容に進んでみましょう。どの順番で読んでも構いません。あるいはドキュメントを一時的に離れて、新しいAstroプロジェクトのコードベースで遊んでみてもいいかもしれません。問題が発生したときや質問があるときには、いつでもここに戻ってきてください。

Astroの機能を学ぶ

コードベースを理解するプロジェクト構造のガイドでAstroのファイル構造について学ぶ。

コンテンツコレクションを作成する新しいサイトにフロントマターのバリデーションと自動の型安全性を備えたコンテンツを追加する。

ビュートランジションを追加するページ間のシームレスなトランジションとアニメーションを作成する。

アイランドについて学ぶ Astroのアイランドアーキテクチャについて読む。

チュートリアルを進める

完全に機能するAstroブログをゼロから作成する、入門チュートリアルを進めてみましょう。

これは、Astroの仕組みを理解し、またページやレイアウト、コンポーネント、ルーティング、アイランドなどの基本を学ぶのに最適な方法です。また、ウェブ開発の各概念全般について不慣れな人向けのオプションのユニットも含まれており、コンピュータへの必要なアプリケーションのインストールやGitHubアカウントの作成、サイトをデプロイする方法についても案内しています。

手動セットアップ

このガイドでは、新しいAstroプロジェクトを手動でインストールして設定する手順について説明します。

create astro CLIツールを使用したくない場合は、以下のガイドに従って自分でプロジェクトを設定してください。

ディレクトリを作成する

新しいプロジェクトの名前で空のディレクトリを作成し、そのディレクトリに移動します。
ターミナルウィンドウ
```
mkdir my-astro-project
cd my-astro-project
```
新しいディレクトリに移動したら、プロジェクトのpackage.jsonファイルを作成します。これにより、Astroなどのプロジェクトの依存関係を管理します。このファイル形式に不慣れな場合は、以下のコマンドを実行して作成することも可能です。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npm init --yes
ターミナルウィンドウ
pnpm init
ターミナルウィンドウ
yarn init --yes
Astroをインストールする

まず、Astroプロジェクトの依存関係をプロジェクトにインストールします。

Astroはグローバルではなくローカルにインストールする必要があります。npm install -g astroやpnpm add -g astro、yarn add global astroを実行しないようにしてください。
- npm
- pnpm
- Yarn
ターミナルウィンドウ
npm install astro
ターミナルウィンドウ
pnpm add astro
ターミナルウィンドウ
yarn add astro
続いて、package.jsonの「scripts」セクションにあるプレースホルダーを以下の内容に置き換えます。
package.json
```
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  },
```
あとでこのスクリプトを使用してAstroを起動したり、その他のコマンドを実行したりします。

最初のページを作成する

テキストエディタで、ディレクトリ内のsrc/pages/index.astroに新しいファイルを作成します。これがプロジェクトの最初のAstroページになります。

このガイドでは、以下のコードスニペット（---ダッシュを含む）を新しいファイルにコピーして貼り付けます。

---
// Astroにようこそ！この3つのハイフンのコードフェンスの中にあるものは、
// 「コンポーネントのフロントマター」です。ブラウザで実行されることはありません。
console.log('ここはブラウザではなく、ターミナルで実行されます！');
---
<!-- 以下は「コンポーネントテンプレート」です。単なるHTMLですが、
    素晴らしいテンプレートを作成するための魔法が散りばめられています。 -->
<html>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

最初の静的アセットを作成する

public/ディレクトリを作成して静的アセットを保存する必要もあるでしょう。Astroは、常にこれらのアセットをビルド結果に含めるため、コンポーネントテンプレート内から安全に参照できます。

テキストエディタで、ディレクトリ内のpublic/robots.txtに新しいファイルを作成します。robots.txtは、Googleなどの検索ボットにサイトの扱い方を伝えるために、多くのサイトが利用しているシンプルなファイルです。

このガイドでは、以下のコードスニペットを新しいファイルにコピーして貼り付けます。
public/robots.txt
```
# 例: すべてのボットにサイトのスキャンとインデックスを許可します。
# 完全な構文: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /
```
astro.config.mjsを作成する

astro.config.mjsによりAstroを設定します。Astroの設定をおこなわない場合このファイルは不要ですが、今作成しておくと便利です。

プロジェクトのルートにastro.config.mjsを作成し、以下のコードをコピーして貼り付けます。
astro.config.mjs
```
import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({});
```
ReactやSvelteなどのUIフレームワークコンポーネント、またはTailwindやPartytownなど他のツールをプロジェクトで使用する場合は、ここに手動でインテグレーションをインポートして設定することになります。

AstroのAPI設定リファレンスを読み、詳細を確認してください。
TypeScriptサポートを追加する

tsconfig.jsonを使用してTypeScriptを設定します。TypeScriptのコードを書かない場合でも、AstroやVS Codeなどのツールがプロジェクトを理解する方法を知るために、このファイルは重要です。tsconfig.jsonファイルがなければ、エディタ上でのnpmパッケージのインポートなど、一部の機能が完全にはサポートされません。

TypeScriptコードを書く予定がある場合は、Astroのstrictまたはstrictestテンプレートを使用することをおすすめします。3種類の設定用テンプレートはastro/tsconfigs/で確認できます。

プロジェクトのルートにtsconfig.jsonを作成し、以下のコードをコピーして貼り付けます。（base、strict、strictestの3種類のTypeScriptテンプレートを使用できます）
tsconfig.json
```
{
  "extends": "astro/tsconfigs/base"
}
```
AstroのTypeScriptセットアップガイドを読み、詳細を確認してください。
次のステップ

以上の手順に従った場合、プロジェクトディレクトリは以下のようになっているはずです。
- ディレクトリnode_modules/
  - …
- ディレクトリpublic/
  - robots.txt
- ディレクトリsrc/
  - ディレクトリpages/
    index.astro
- astro.config.mjs
- package-lock.json またはyarn.lockやpnpm-lock.yamlなど
- package.json
- tsconfig.json
以上により、Astroの開発サーバーを起動して、プロジェクトのライブプレビューを確認できるようになりました！

貢献する

コミュニティ