記事検索
購読 する ログイン

今すぐ始めるAstro入門 第1回 Astroの特徴

AstroはWebフレームワークのひとつです。Next.jsやGatsbyなどと伍する機能をもち、独自の設計思想があります。今回はAstroの特徴の紹介と、大まかな開発手順を体験してもらうことを目的としています。

カテゴリー
Webフレームワーク >
Astro

発行

著者 中野 祐人 Jamstackエンジニア
今すぐ始めるAstro入門 シリーズの記事一覧

はじめに

今回から数回にわたって、Astroという、高速なWebサイトを構築できるWebフレームワークの使い方を解説していきます。

さて、近年では、Jamstackに関連してよく話題に挙がるのはNext.jsやGatsbyのようなReactをベースにした高機能Webフレームワークであることが多いように思います。

また、その他では、過去にCodeGridでも紹介したEleventyなどでしょうか。

まずはじめに、それらのWebフレームワークや静的サイトジェネレータと比べた、Astroの特徴はどのようなものか見ていきましょう。

なお、この記事で使用している主要ツールのバージョンは、執筆当時のAstroの最新バージョンv1.0.1、Nodeのバージョンv16.16.0（最新のLTSバージョン）です。

Astroと他のWebフレームワークの比較

Astroとすでに開発現場で使われているほかのWebフレームワークとは、どのようなコンセプトの違いがあるのでしょうか。

たとえばNext.jsのようなWebフレームワークは、ページ間のシームレスなページ遷移が実現できたり、複数ページにわたっての状態管理が容易であったり、Webアプリケーションを作る上で役に立つような機能があります。これには、クライアントサイド（JavaScript）でページをルーティングする必要があるので、動作を高度に制御するためのJavaScriptがブラウザでも読み込まれます。

それに対して、Astroは従来どおりのWebサイトと同じようにクライアント側でルーティングせず、ビルド時にクライアントサイドのJavaScriptをできるだけ取り除き、そもそものサイトの表示に必要なファイルの容量を減らします。そもそも読み込むファイルの容量が減ることでサイトは否が応でも高速になるというわけです。

どちらのWebフレームワークを使うのが良いかというのは一概に言える話ではありません。

とは言え、Astroで作成したサイトのほうが従来どおりのHTML＋CSSが中心で、ルーティングなどのJavaScriptが一切必要ない分、開発者にとって構造や挙動が把握しやすいサイトになるとは言えるでしょう。

同じようにクライアント側でルーティングするようなことはせず、生成されたサイトの全容が把握しやすいという点でAstroはEleventy*と似た特徴をもちます。

*注：Eleventy

Eleventyについて詳しくは、次のシリーズを参考にしてください。

EleventyとAstroを比べると、EleventyはクライアントサイドのJavaScriptの面倒をまったくみず、よりシンプルな挙動をします。それはどのようなJavaScriptのライブラリを使っても良いという自由度の高さはあるものの、言い換えれば、そのような部分は自分でコードを書き構築するしかないということです。

対して、Astroは基本的にはJavaScriptを取り除きつつ、クライアントサイドで動作させたいJavaScriptに関しては、それを明記することで、コンポーネント単位でその部分のJavaScriptだけを読み込む機能があるので、JavaScriptを適切に管理できます。

この機能は「Astroアイランド」と呼ばれており、Astroの重要な設計思想になっています。

前述したように、どのWebフレームワークを使うと良いかは一概には言えませんが、静的な部分が多い、いわゆるWebサイトのようなコンテンツ重視のサイト作るのにはAstroやEleventyが適しています。

逆にWebアプリケーションのようなリッチな表現ができるものを作るなら、Next.jsなどそれらを作るのに適したWebフレームワークを使いましょう。

UIフレームワークの資産を自由に使える

EleventyではNunjucks（.njk）やLiquid（.liquid）をはじめとした、たくさんのHTMLテンプレート言語に対応していますが、それらはHTMLのテンプレート言語です。そのため、その書き味はWordPressに近いようなテンプレートエンジンベースのものになります。

これはGatsbyやNext.jsなどのようなコンポーネントベースの開発に慣れている人にとっては、少々とっつきにくい部分があります。

対して、Astroはコンポーネントごとに以下のUIフレームワークを自由に使え、コンポーネントベースの開発ができます。

これらのUIフレームワークを使って書いた場合でもビルド時に、ただの静的なHTMLに変換されます（デフォルト設定）。

UIフレームワークは混在させることもできます。たとえば、次のようにReact（.jsx）、Svelte（.svelte）、Vue（.vue）、それぞれのUIフレームワークで使ったコンポーネントを同時に使うこともできるのです。

astroファイル内でUIフレームワークを混在させる例

---
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
  <MySvelteComponent />
  <MyReactComponent />
  <MyVueComponent />
</div>

実際には、意図して複数のUIフレームワークを使うことは少ないかもしれませんが、Reactを使って作られていたプロジェクトでも、そのコンポーネントをそのまま資産として比較的簡単に移行できるので、Astroを使いやすいでしょう。

そうでなくともUIフレームワークの流行り廃りが激しい時代です。Astro自体が、その盛衰の影響を受けにくくなっているこの特徴は利点であると言えるでしょう。

Astroでサイトを生成する

長々と説明してきましたが、実際にAstroを動かしていきましょう。

Astroはいくつかの質問に答えるだけでプロジェクトの雛形を作成できるCLIを提供しているので、それに従ってセットアップします。

Astroのセットアップ

プロジェクトの作成は以下のコマンドから行えます。

セットアップコマンド

$ npm create astro@latest

実行すると再度、インストールの確認をされます。

インストールの確認

Need to install the following packages:
  create-astro@latest
Ok to proceed? (y)

yキーを押下して実行すると以下のような質問をされるので、それぞれに答えます。

  1. Where would you like to create your new project?（どこに新しいプロジェクトを作成するか？）

任意のプロジェクト名を入力してください。それがルートディレクトリの名前になります。この記事では「codegrid-astro-1」としました。

  1. Which template would you like to use?（どのテンプレートを使用するか？）

次のテンプレートから、矢印キーで好みのものが選択できます。

  • Just the basics (recommended)
  • Blog
  • Portfolio
  • Documentation Site
  • Empty projec

ここでは最小構成から解説したいので、Empty projectを選択しました。

  1. Would you like to install npm dependencies?（npm依存関係をインストールするか？）

yesにすると、依存関係にあるモジュールのインストールまで行ってくれます。ここではyesを選択します。

  1. Would you like to initialize a new git repository?（git initするか？）

プロジェクトをgitで管理するならば、yesとしておきましょう。

  1. How would you like to setup TypeScript?（TypeScriptのセットアップをどのようにするか？）

ここでも矢印キーで好みのセットアップ方法が選択できます。

  • Relaxed
  • Strict(recommended)
  • Strictest
  • I prefer not to use TypeScript

ここではRelaxedを選択しておきます。

すべてが完了すると以下のような表示になります。

インストール正常終了状態

Welcome to Astro! (create-astro v1.0.0)
Lets walk through setting up your new Astro project.

✔ Where would you like to create your new project? … codegrid-astro-1
✔ Which template would you like to use? › Empty project
✔ 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? › Relaxed
✔ TypeScript settings applied!
✔ Setup complete.
✔ Ready for liftoff!

無事インストールされたら、プロジェクトのディレクトリに移動しましょう。

ディレクトリの移動

$ cd codegrid-astro-1

まず、はじめにpackage.jsonを確認しておきましょう。

package.json

{
  "name": "@example/minimal",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "devDependencies": {
    "astro": "^1.0.1"
  }
}

"scripts"にはdev、buildなどのコマンドがすでに設定されています。Astroのバージョンも確認できます。

執筆時点でインストールされているAstroのバージョンは1.0.1です。

ディレクトリは次のようになっています。

ディレクトリ構成

├── node_modulesディレクトリ
├── README.md
├── .gitignore
├── .npmrc
├── tsconfig.json
├── package-lock.json
├── package.json
├── tsconfig.json
├── public
│   └── favicon.ico
├── astro.config.mjs
├── src
│   ├──env.d.ts
│   └── pages
│      └── index.astro

設定ファイル類がたくさんありますが、今回触るのはsrc/pages/index.astroのみです。

Astroではsrc/pagesフォルダ内にAstroファイル（.astro）またはMarkdownファイル（.md）を配置することで、そのファイルが自動的にWebサイトの元ページになります。

各ページのルーティングはsrc/pagesディレクトリ内のパスとファイル名に対応するので、src/pages/about.mdファイルを配置すると、それが自動的に/about/というURLのページになります。

開発サーバーを立てる

まずはじめに開発サーバーを立てます。

Astroはastro devコマンドで開発サーバーを立て、テンプレートの変更を監視してくれます。

astro devコマンドはセットアップ時に自動でdevコマンドに設定されているので、npm run devを実行すると開発サーバーが立ち上がります。

npm run devの実行

$ npm run dev

> @example/[email protected] dev
> astro dev

  🚀  astro  v1.0.1 started in 25ms

  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose

表示されているURLにアクセスすることで、開発中のサイトが確認できます。

インデックスページの変更

インデックスページはsrc/pages/index.astroをもとに生成されているので、該当のページを開きましょう。

index.astro

---
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
  </body>
</html>

h1部分がAstroとなっていますが、Helloに変更して、保存してみましょう。

h1要素の内容を変更する

<h1>Hello</h1>

すると、即座に開発サーバーにも変更が反映されるのがわかるでしょう。

このように、変更を確認しながら開発できます。

サイトの生成

サイトはastro buildコマンドでビルドできます。これはnpm run buildで実行されます。

ビルドコマンドの実行

$ npm run build

> @example/[email protected] build
> astro build

15:14:48 [build] output target: static
15:14:48 [build] Collecting build info...
15:14:48 [build] Completed in 20ms.
15:14:48 [build] Building static entrypoints...
15:14:48 [build] Completed in 215ms.

 generating static routes 
▶ src/pages/index.astro
  └─ /index.html (+5ms)
Completed in 15ms.

15:14:48 [build] 1 page(s) built in 255ms
15:14:48 [build] Complete!

これによってプロジェクト直下にdistというフォルダが作成され、index.htmlが生成されているはずです。

中身を見てみると次のようになっています。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="generator" content="Astro v1.0.1">
    <title>Astro</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body></html>

JavaScriptが読み込まれていない純粋なhtmlファイルが生成されていることがわかるでしょう。

まとめ

今回はAstroの特徴の紹介と、Astroで開発する流れを簡単に説明しました。Astroで開発していく大まかなポイントは掴んでもらえたと思います。

次回もこの環境を基本として、Astroの特徴を詳しく見ていく予定です。
X GitHub
運営会社