import { CardGrid, FileTree, LinkCard, Steps } from '@astrojs/starlight/components'; import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import ReadMore from '/components/ReadMore.astro';

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

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

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

:::tip[オンラインでプレビュー] ブラウザでAstroを試してみたいですか？astro.newにアクセスすれば、ブラウザを離れることなく、スターターテンプレートを確認して新しいAstroプロジェクトを作成できます。 :::

前提条件

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

ブラウザの互換性

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

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

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

<PackageManagerTabs> <Fragment slot="npm"> ```shell # npmで新しいプロジェクトを作成 npm create astro@latest ``` </Fragment> <Fragment slot="pnpm"> ```shell # pnpmで新しいプロジェクトを作成 pnpm create astro@latest ``` </Fragment> <Fragment slot="yarn"> ```shell # yarnで新しいプロジェクトを作成 yarn create astro ``` </Fragment> </PackageManagerTabs> `create astro`はマシン上のどこでも実行でき、プロジェクトを開始する前に新しい空のディレクトリを作成する必要はありません。新しいプロジェクトのための空のディレクトリがまだない場合、ウィザードが自動的に作成します。 問題がなければ成功のメッセージが表示され、推奨される次のステップがいくつか続きます。プロジェクトが作成されたら、新しいプロジェクトのディレクトリに`cd`してAstroを使い始められます。

2. CLIウィザードで"Install dependencies?"のステップを飛ばした場合は、依存関係をインストールしてから続行してください。

  1. 以上により、Astroの開発サーバーを起動して、プロジェクトのライブプレビューを確認できるようになりました！

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

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

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

    GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成

    npm create astro@latest -- --template /

    </Fragment> <Fragment slot="pnpm"> ```shell # 公式のサンプルを使用して新しいプロジェクトを作成 pnpm create astro@latest --template <example-name> # GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成 pnpm create astro@latest --template <github-username>/<github-repo>

    GitHubリポジトリのmainブランチを使用して新しいプロジェクトを作成

    yarn create astro --template /

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

  2. CLIウィザードの質問に回答し、指示に従ってください。

  3. 以上により、Astroの開発サーバーを起動して、プロジェクトをカスタマイズしながらライブプレビューを確認できるようになりました！

プロジェクトの編集

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

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

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

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

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

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

開発モードで作業する

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

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

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

開発環境の設定

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

AstroとTypeScript

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

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

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

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

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

<PackageManagerTabs> <Fragment slot="npm"> ```shell npm run build ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm build ``` </Fragment> <Fragment slot="yarn"> ```shell yarn run build ``` </Fragment> </PackageManagerTabs>

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

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

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

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

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

新しいサイトのデプロイ

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

次のステップ

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

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

Astroの機能を学ぶ

チュートリアルを進める

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

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

手動セットアップ

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

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

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

2. Astroをインストールする

まず、Astroプロジェクトの依存関係をプロジェクトにインストールします。 :::note[Important] Astroはグローバルではなくローカルにインストールする必要があります。`npm install -g astro`や`pnpm add -g astro`、`yarn add global astro`を実行しないようにしてください。 ::: <PackageManagerTabs> <Fragment slot="npm"> ```shell npm install astro ``` </Fragment> <Fragment slot="pnpm"> ```shell pnpm add astro ``` </Fragment> <Fragment slot="yarn"> ```shell yarn add astro ``` </Fragment> </PackageManagerTabs> 続いて、`package.json`の「scripts」セクションにあるプレースホルダーを以下の内容に置き換えます。 ```json title="package.json" del={2} ins={3-6} "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "astro dev", "start": "astro dev", "build": "astro build", "preview": "astro preview" }, ``` あとでこのスクリプトを使用してAstroを起動したり、その他のコマンドを実行したりします。

3. 最初のページを作成する

テキストエディタで、ディレクトリ内の`src/pages/index.astro`に新しいファイルを作成します。これがプロジェクトの最初のAstroページになります。 このガイドでは、以下のコードスニペット（`---`ダッシュを含む）を新しいファイルにコピーして貼り付けます。 ```astro title="src/pages/index.astro" --- // Astroにようこそ！この3つのハイフンのコードフェンスの中にあるものは、 // 「コンポーネントのフロントマター」です。ブラウザで実行されることはありません。 console.log('ここはブラウザではなく、ターミナルで実行されます！'); --- <!-- 以下は「コンポーネントテンプレート」です。単なるHTMLですが、 素晴らしいテンプレートを作成するための魔法が散りばめられています。 --> <html> <body> <h1>Hello, World!</h1> </body> </html> <style> h1 { color: orange; } </style> ```

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

`public/`ディレクトリを作成して静的アセットを保存する必要もあるでしょう。Astroは、常にこれらのアセットをビルド結果に含めるため、コンポーネントテンプレート内から安全に参照できます。 テキストエディタで、ディレクトリ内の`public/robots.txt`に新しいファイルを作成します。`robots.txt`は、Googleなどの検索ボットにサイトの扱い方を伝えるために、多くのサイトが利用しているシンプルなファイルです。 このガイドでは、以下のコードスニペットを新しいファイルにコピーして貼り付けます。 ```diff title="public/robots.txt" # 例: すべてのボットにサイトのスキャンとインデックスを許可します。 # 完全な構文: https://developers.google.com/search/docs/advanced/robots/create-robots-txt User-agent: * Allow: / ```

5. astro.config.mjsを作成する

`astro.config.mjs`によりAstroを設定します。Astroの設定をおこなわない場合このファイルは不要ですが、今作成しておくと便利です。 プロジェクトのルートに`astro.config.mjs`を作成し、以下のコードをコピーして貼り付けます。 ```js title="astro.config.mjs" import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({}); ``` ReactやSvelteなどの[UIフレームワークコンポーネント](/ja/guides/framework-components/)、またはTailwindやPartytownなど他のツールをプロジェクトで使用する場合は、ここに[手動でインテグレーションをインポートして設定](/ja/guides/integrations-guide/)することになります。 Astroの[API設定リファレンス](/ja/reference/configuration-reference/)を読み、詳細を確認してください。

6. TypeScriptサポートを追加する

`tsconfig.json`を使用してTypeScriptを設定します。TypeScriptのコードを書かない場合でも、AstroやVS Codeなどのツールがプロジェクトを理解する方法を知るために、このファイルは重要です。`tsconfig.json`ファイルがなければ、エディタ上でのnpmパッケージのインポートなど、一部の機能が完全にはサポートされません。 TypeScriptコードを書く予定がある場合は、Astroの`strict`または`strictest`テンプレートを使用することをおすすめします。3種類の設定用テンプレートは[astro/tsconfigs/](https://github.com/withastro/astro/blob/main/packages/astro/tsconfigs/)で確認できます。 プロジェクトのルートに`tsconfig.json`を作成し、以下のコードをコピーして貼り付けます。（`base`、`strict`、`strictest`の3種類のTypeScriptテンプレートを使用できます） ```json title="tsconfig.json" "base" { "extends": "astro/tsconfigs/base" } ``` Astroの[TypeScriptセットアップガイド](/ja/guides/typescript/#準備)を読み、詳細を確認してください。

7. 次のステップ

以上の手順に従った場合、プロジェクトディレクトリは以下のようになっているはずです。 <FileTree> - node_modules/ - public/ - robots.txt - src/ - pages/ - index.astro - astro.config.mjs - package-lock.jsonまたは`yarn.lock`や`pnpm-lock.yaml`など - package.json - tsconfig.json </FileTree>

8. 以上により、Astroの開発サーバーを起動して、プロジェクトのライブプレビューを確認できるようになりました！

はじめに
開発とビルド