コンテンツにスキップ

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

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

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

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

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

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

  1. 以下のコマンドをターミナルで実行して、インストールウィザードを起動します。

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

    create astroはマシン上のどこでも実行でき、プロジェクトを開始する前に新しい空のディレクトリを作成する必要はありません。新しいプロジェクトのための空のディレクトリがまだない場合、ウィザードが自動的に作成します。

    問題がなければ成功のメッセージが表示され、推奨される次のステップがいくつか続きます。プロジェクトが作成されたら、新しいプロジェクトのディレクトリにcdしてAstroを使い始められます。

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

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

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

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

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

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

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

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

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

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

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

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

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

Terminal window
npm run dev

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

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

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

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

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

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

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

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

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

Terminal window
npm run build

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

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

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

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

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

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

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

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

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

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

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

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

  1. ディレクトリを作成する

    新しいプロジェクトの名前で空のディレクトリを作成し、そのディレクトリに移動します。

    Terminal window
    mkdir my-astro-project
    cd my-astro-project

    新しいディレクトリに移動したら、プロジェクトのpackage.jsonファイルを作成します。これにより、Astroなどのプロジェクトの依存関係を管理します。このファイル形式に不慣れな場合は、以下のコマンドを実行して作成することも可能です。

    Terminal window
    npm init --yes
  2. Astroをインストールする

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

    Terminal window
    npm install 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を起動したり、その他のコマンドを実行したりします。

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

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

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

    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などの検索ボットにサイトの扱い方を伝えるために、多くのサイトが利用しているシンプルなファイルです。

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

    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を作成し、以下のコードをコピーして貼り付けます。

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    // https://astro.build/config
    export default defineConfig({});

    ReactやSvelteなどのUIフレームワークコンポーネント、またはTailwindやPartytownなど他のツールをプロジェクトで使用する場合は、ここに手動でインテグレーションをインポートして設定することになります。

    AstroのAPI設定リファレンスを読み、詳細を確認してください。

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

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

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

    プロジェクトのルートにtsconfig.jsonを作成し、以下のコードをコピーして貼り付けます。(basestrictstrictestの3種類のTypeScriptテンプレートを使用できます)

    tsconfig.json
    {
    "extends": "astro/tsconfigs/base"
    }

    AstroのTypeScriptセットアップガイドを読み、詳細を確認してください。

  7. 次のステップ

    以上の手順に従った場合、プロジェクトディレクトリは以下のようになっているはずです。

    • ディレクトリnode_modules/
    • ディレクトリpublic/
      • robots.txt
    • ディレクトリsrc/
      • ディレクトリpages/
        • index.astro
    • astro.config.mjs
    • package-lock.json またはyarn.lockpnpm-lock.yamlなど
    • package.json
    • tsconfig.json
  8. 以上により、Astroの開発サーバーを起動して、プロジェクトのライブプレビューを確認できるようになりました!

貢献する

どんなことを?

GitHub Issueを作成

チームに素早く問題を報告できます。

コミュニティ