設定の概要

Astroは特定のやり方を押し付けない柔軟なフレームワークであり、プロジェクトをさまざまな方法で設定できます。そのため、新しいプロジェクトを始める際に戸惑うことがあるかもしれません。Astroプロジェクトのセットアップに「唯一の正解」はないのです！

この「設定」セクションのガイドでは、プロジェクトや開発環境のさまざまな側面を設定・カスタマイズするための種々のファイルについて紹介します。

Astroプロジェクトを触るのが初めての場合や、新しくプロジェクトをセットアップしてから時間が経っている場合は、ドキュメントの以下のガイドやリファレンスを参考にしてください。

Astroの設定ファイル

Astroの設定ファイル (EN)は、すべてのスタータープロジェクトのルートに含まれるJavaScriptファイルです。

import { defineConfig } from "astro/config";

export default defineConfig({
  // 設定オプションをここに記述します...
});

設定が必要な場合にのみ必要となるファイルですが、実際にはほとんどのプロジェクトで使用します。defineConfig()ヘルパーはIDEで自動的にIntelliSenseを提供し、プロジェクトをビルドしHTMLへとレンダリングする方法をAstroに伝えるための設定オプションを記述する場所です。

ほとんどの場合はデフォルトのファイル形式.mjsを使用することをおすすめします。設定ファイルでTypeScriptを使用したい場合は.tsも使用できます。ただし、astro.config.jsやastro.config.cjsもサポートされています。

サポートされているすべての設定オプションの概要については、Astroの設定リファレンス (EN)を確認してください。

TypeScriptの設定ファイル

すべてのAstroスタータープロジェクトには、tsconfig.jsonファイルが含まれています。AstroのコンポーネントスクリプトはTypeScriptであり、Astroのエディターツールを提供するとともに、プロジェクトコードの型チェックのために、オプションでJavaScriptに構文を追加できるようにします。

tsconfig.jsonファイルを使用して、コードの型チェックをおこなうTypeScriptテンプレートの設定、TypeScriptプラグインの設定、インポートエイリアスの設定などをおこないます。

TypeScriptオプションとAstro組み込みのユーティリティ型の概要については、AstroのTypeScriptガイド (EN)を確認してください。

開発体験

開発モードで作業する際には、コードエディターやその他のツールを活用してAstroの開発体験を向上させられます。

Astroは公式のVS Code拡張機能を提供しており、その他の人気のあるエディターツールとも互換性があります。また、開発サーバーの実行中にブラウザプレビューに表示される、カスタマイズ可能なツールバーも提供しています。ツールバーアプリをインストールしたり、自分で作成して機能を追加することもできます。

開発体験のカスタマイズ方法については、エディタのセットアップと開発ツールバーの使い方に関するAstroのガイドを確認してください。

新しいプロジェクトでよくあるタスク

以下は、新しいAstroプロジェクトで最初におこなうことが多いステップです。

デプロイ先のドメインを追加する

サイトマップの生成やCanonical URLの作成のために、site (EN)オプションでデプロイ先のURLを設定します。www.example.com/docsなど特定のパスにデプロイする場合は、base (EN)によりプロジェクトのルートを設定することもできます。

また、デプロイ先のホストによって、URLの末尾のスラッシュの扱いが異なる場合があります（例: example.com/aboutとexample.com/about/）。サイトをデプロイした後、trailingSlash (EN)の設定が必要になることがあります。

import { defineConfig } from "astro/config";

export default defineConfig({
  site: "https://www.example.com",
  base: "/docs",
  trailingSlash: "always",
});

サイトのメタデータを追加する

Astroは、一般的なSEOやメタデータには設定ファイルを使用せず、プロジェクトのコードをビルドしHTMLにレンダリングするために必要な情報にのみ使用します。

代わりに、通常のHTMLページを書くときと同じように、標準的なHTMLの<link>タグや<meta>タグを使用してページの<head>に情報を追加します。

Astroサイトでよく見られるパターンとして、<Head />という.astroコンポーネントを作成し、共通のレイアウトコンポーネントに追加することで、すべてのページに適用するという方法があります。

---
import Head from "./Head.astro";

const { ...props } = Astro.props;
---
<html>
  <head>
    <meta charset="utf-8">
    <Head />
    <!-- 追加のhead要素 -->
  </head>
  <body>
    <!-- ページコンテンツはここに記述します -->
  </body>
</html>

Head.astroは通常のAstroコンポーネントであるため、ファイルをインポートしたり、特定のページタイトルなど他のコンポーネントから渡されたpropsを受け取ることができます。

---
import Favicon from "../assets/Favicon.astro";
import SomeOtherTags from "./SomeOtherTags.astro";

const { title = "私のAstroウェブサイト", ...props } = Astro.props;
---
<link rel="sitemap" href="/sitemap-index.xml">
<title>{title}</title>
<meta name="description" content="私の新しいAstroウェブサイトへようこそ！">

<!-- ウェブアナリティクス -->
<script data-goatcounter="https://my-account.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

<!-- Open Graphタグ -->
<meta property="og:title" content="私の新しいAstroウェブサイト" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:description" content="私の新しいAstroウェブサイトへようこそ！" />
<meta property="og:image" content="https://www.example.com/_astro/seo-banner.BZD7kegZ.webp">
<meta property="og:image:alt" content="">

<SomeOtherTags />

<Favicon />

貢献するコミュニティスポンサー