Astro とは
Astro
Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.
開発時にはJavaScriptを使い、ビルド時にそれらを全て除去して軽量化してくれる静的サイトジェネレータ。たとえば、ヘッドレスCMSから投稿を取得して一覧ページや詳細ページを生成するなど。もちろん、任意のJavaScriptを追加できます。
ReactやVue、Svelteなどのフレームワークが使えるので、コードを書くのが非常に楽です。そしてビルドすればただのHTMLになるので、納品後にお客様が変更するのも簡単です。
はじめてみよう
はじめに
Astroの基本的な紹介です。
公式ドキュメントが一部を除き日本語訳されているのでとっつきやすいですね。まずはインストールからやっていきましょう。
$ npm create astro@latest
╭─────╮ Houston:
│ ◠ ◡ ◠ Let's build something fast!
╰─────╯
astro v1.6.3 Launch sequence initiated.
? Where would you like to create your new project? › ./astro
✔ Where would you like to create your new project? … ./astro
✔ How would you like to setup your new project? › a few best practices (recommended)
✔ Template copied!
✔ Would you like to install npm dependencies? (recommended) … yes
✔ Packages installed!
✔ Would you like to initialize a new git repository? (optional) … yes
✔ Git repository created!
✔ How would you like to setup TypeScript? › Strict
✔ TypeScript settings applied!
next Liftoff confirmed. Explore your project!
Enter your project directory using cd ./astro
Run npm run dev to start the dev server. CTRL+C to stop.
Add frameworks like react or tailwind using astro add.
Stuck? Join us at https://astro.build/chat
╭─────╮ Houston:
│ ◠ ◡ ◠ Good luck out there, astronaut!
╰─────╯
いくつか選択肢が出てくるので、好きなものを選べばいい感じにインストールしてくれます。とりあえずおすすめのやつで〜ポチポチっとな。
インストール後のディレクトリ構造はこんな感じ。シンプルですね。
├── public
│ └── favicon.svg
├── src
│ ├── components
│ │ └── Card.astro
│ ├── layouts
│ │ └── Layout.astro
│ ├── pages
│ │ └── index.astro
│ └── env.d.ts
├── .gitignore
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
└── tsconfig.json
拡張子astroという独自の形式でコーディングします。書き方はVueやSvelteに近いです。VSCODEの拡張もあるので、シンタックスハイライトや補完もききます。
---
import Layout from '../layouts/Layout.astro';
import Counter from '../components/Counter';
import Card from '../components/Card.astro';
const props = {
h1: Astro,
};
---
<Layout title="Welcome to Astro.">
<main>
<h1>
Welcome to <span class="text-gradient">{props.h1}</span>
</h1><!-- Welcome to Astro -->
<p class="instructions">
To get started, open the directory <code>src/pages</code> in your project.<br
/>
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
</p>
<ul role="list" class="link-card-grid">
<Card
href="https://docs.astro.build/"
title="Documentation"
body="Learn how Astro works and explore the official API docs."
/>
<Card
href="https://astro.build/integrations/"
title="Integrations"
body="Supercharge your project with new frameworks and libraries."
/>
<Card
href="https://astro.build/themes/"
title="Themes"
body="Explore a galaxy of community-built starter themes."
/>
<Card
href="https://astro.build/chat/"
title="Community"
body="Come say hi to our amazing Discord community. ❤️"
/>
</ul>
<Counter
client:visible
/><!-- JSを使うコンポーネントは`client:visible`をつける -->
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1.5rem;
max-width: 60ch;
}
/* 略 */
</style>
npm run devで開発環境が起動します。もちろんホットリロード対応なので、エディタでの変更がすぐブラウザへ反映されます。
ビルドはnpm run buildで、成果物の静的サイトはnpm run previewで確認できます。
インテグレーション
インテグレーションを追加する
Astroに機能を追加します。いわゆるプラグインですね。Integrationsに公式・非公式パッケージが掲載されています。
Reactを追加してみましょう。
$ npx astro add react
✔ Resolving packages...
Astro will run the following command:
If you skip this step, you can always run it yourself later
╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ npm install @astrojs/react @types/react-dom@^18.0.6 @types/react@^18.0.21 react-dom@^18.0.0 react@^18.0.0 │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Continue? … yes
✔ Installing dependencies...
Astro will make the following changes to your config file:
╭ astro.config.mjs ─────────────────────────────╮
│ import { defineConfig } from 'astro/config'; │
│ │
│ // https://astro.build/config │
│ import react from "@astrojs/react"; │
│ │
│ // https://astro.build/config │
│ export default defineConfig({ │
│ integrations: [react()] │
│ }); │
╰───────────────────────────────────────────────╯
✔ Continue? … yes
success Added the following integration to your project:
- @astrojs/react
Astro will make the following changes to your tsconfig.json:
╭ tsconfig.json ──────────────────────────╮
│ { │
│ "extends": "astro/tsconfigs/strict", │
│ "compilerOptions": { │
│ "jsx": "react-jsx", │
│ "jsxImportSource": "react" │
│ } │
│ } │
╰─────────────────────────────────────────╯
✔ Continue? … yes
success Successfully updated TypeScript settings
パッケージのインストールや設定ファイルの変更までやってくれます。
どんなケースで使うか
Next.jsやNuxt.jsを使うほどでもない、普通のウェブサイトを作るのに向いています。既存のフレームワークを使えますし、独自形式もわかりやすいので学習コストがかなり低く、デザイナーの方もとっつきやすいのではないでしょうか。