Astroとは？
簡単に言うと、Astroはウェブサイトを素早く簡単に作れるツールで、特にコンテンツが多いサイトに最適です。
Astroの使い方は簡単。各ページのファイルを用意し、Markdown（HTMLの簡単なバージョン）やHTMLライクな構文で内容を書きます。インタラクティブな部分、例えばボタンを作りたい場合は、ReactやSvelte、Vueなどのフレームワークを使えます。コンテンツとコードが完成したら、コマンドを実行してサイトをビルドするだけ。HTMLファイルなのでサーバーにアップロードすればすぐに公開できます。
AstroとGatsbyの違い
Gatsbyというツールも聞いたことがあるかもしれません。AstroとGatsbyはどちらもウェブサイトを作るツールですが、いくつかの違いがあります。
- AstroはデフォルトでJavaScriptを最小限にし、Gatsbyに比べてサイトの読み込みが速い
- AstroはReact、Svelteなど複数のライブラリを使えるがGatsbyはReact依存
- AstroはReactを知らなくても始められるが、GatsbyはReactとGraphQLの知識が必須
Astroを選ぶメリット
他のツールと比べて、Astroを選ぶ理由は以下の通りです。
- 高速性能: サイトの読み込みが速い
- 学習コストが低い: 比較的簡単で初心者にもおすすめ
- 柔軟性: 必要なライブラリを使えるので、用途に合わせて最適化できます
- 将来性: 最新のウェブ技術で作られているので、将来も役立ちます
要はAstroは速くて簡単で柔軟性があるため、特にコンテンツ重視のサイトを作るのに選ばれます。ブログやポートフォリオを作りたい人にもおすすめです。
Astroテンプレートの作り方
まずはスターターテンプレートをインストールしてAstroの環境を構築します。
npm create astro@latest
このコマンド実行後、対話形式でプロジェクト設定を行います。テンプレート作成目的で、「Empty Project」を選択し、TypeScriptのstrictモードを有効にするのが推奨です。
テンプレートディレクトリ構造
Astroの基本的なテンプレートは、特定のフォルダ構成を持っています。主に以下のようになります。
src/
├── components/
├── layouts/
├── pages/
├── styles/
├── env.d.ts
astro.config.mjs
package.json
pagesディレクトリは必須で、ここに配置された.astroファイルが直接ルーティングされます。例えばpages/about/index.astroは/aboutパスでアクセス可能です
コアコンポーネントの作成
ヘッダーやフッターなどの共通部品はcomponentsディレクトリに配置します。
基本のヘッダーコンポーネント例：
---
// src/components/Header.astro
const { title } = Astro.props
---
<header class="header">
<h1>{title}</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
このコンポーネントは他のページからインポートして使用できます
テンプレート作成に必要な要素
公開用テンプレートに含めるべき最低限のファイルはこちら。
package.json：依存関係とスクリプト定義
astro.config.mjs：ビルド設定
README.md：使用方法とドキュメント
src/pages/：ベースページ
src/layouts/：共通レイアウト
astro.config.mjsではテンプレートの基本設定を定義します。
export default defineConfig({
output: 'static',
integrations: [react(), tailwind()]
});
GitHubへのテンプレート公開
新しいリポジトリを作成してテンプレートファイルをプッシュします。
ここは通常のGithubと使い方は同じです。
公開済みテンプレートの利用方法
テンプレートの利用は公式テンプレートと同様Githubからインストールできます。
npm create astro@latest -- --template yourgithub/your-template-repo
また、手動でクローンして使うこともできます。
git clone https://github.com/yourusername/yourtemplate
cd yourtemplate
npm install
npm run dev
テンプレートをコミュニティに公開
公式テーマページからテンプレートを登録することができます。
https://astro.build/themes/
Githubにログインして「Submit theme」から登録作業を行います。
Astroで使えるテンプレートとコンポーネント一覧
公式テーマはこちら
公式コンポーネントはこちら
まとめ
今回は最低限の構成で作る方法を解説しましたが、実際にはデザインの追加、再利用できるコンポーネントの追加、Tailwindを入れたりSEO対策やGTMを入れたりと言った作業も行います。素晴らしいテンプレートが完成したらぜひコミュニティに登録してみてください。