Astroって何？気になったところまとめ？

目次

1. はじめに
2. Astro の特徴
   1. 向き不向き
   2. Astro Islands
3. 実装方法
   1. コンポーネントスクリプト
   2. コンポーネントテンプレート
   3. CSS
   4. addEventListener の実行
   5. 画像最適化方法
   6. プロジェクトのはじめ方
4. 参考
5. さいごに

はじめに

最近よく見かけるようになった新しいフレームワーク Astro を使ってみたくなったので、はじめる前に記事を書いてまとめてみることにしました。
この記事を書くまでは、なんとなく Next.js みたいな感じのフレームワークの Web サイトを作るのに特化したモノなのかな？と思っていたけれど、そんなことはなくて Astro 特有のおもしろさがあるので、その辺りを書いていこうと思います。

Astro の特徴

Astro について調べる中でもっとも驚いた。というか私が勘違いしていただけなのですが、SSG(静的サイトジェネレーター)はするけど SPA(Single Page Application) ではなくて MPA(Multiple Page Application) のフレームワークなんですね。

世の中のトレンドはもう SPA にして、ページの遷移速度を高速化しちゃおう。というお話かと思い込んでいたのですが、Astro では 中身が JavaScript でできている Next.js とは違い、ビルド時に JavaScript を取り除いて パフォーマンスにすぐれた MPA サイトを実装することができるようです。

また、Web サイトを作るには Next.js は少々オーバースペック気味になるかなと思っていたので、静的サイトの実装に特化した Astro には期待したいところです。

Web サイトを作るときに、よく lighthouse で『unused javascript~』って怒られるのも気になっていたので、ここで不要な JavaScript を組み込まないようにしてくれるのは嬉しいですね。

向き不向き

Astro には 5 つの基本原則があります。

• 1.コンテンツ重視: Astro は、コンテンツが豊富な Web サイトのために設計されています。
• 2.サーバーファースト: HTML をサーバーでレンダリングすることで、Web サイトの動作が速くなります。
• 3.デフォルトで高速: Astro で遅いウェブサイトを構築することは不可能です。
• 4.簡単に使える: 専門家でなくても、Astro で何かを構築できます。
• 5.充実した機能と柔軟性: 100 以上の Astro インテグレーションから選択できます。

詳しい話は公式ドキュメントを読んでいただければと思いますが、この 5 つの基本原則を見る限り Web サイトを実装する場合に適していて、ハイパフォーマンスで簡単に作れますよ。というコンセプトのようです。

ということで、Web アプリケーションなら Next.js で、Web サイトなら Astro！と差別化をしているので Web サイトの実装に特化したフレームワークになっています。

公式ドキュメントにもまとめられているように、Web サイトの表示速度が遅いことによって、売上にも大きく影響を与えることになります。

• 高速化 100ms ごと → コンバージョン数 1％増（Mobify、年間 38 万ドルの収益）
• 50%高速化 → 売上 12%増（AutoAnything）
• 20%高速化 → コンバージョン数 10%アップ（Furniture Village）
• 40%高速化 → サインアップ 15%増（Pinterest）
• 850ms 高速化 → コンバージョン数 7%増（COOK）
• 1 秒遅くなるごと → ユーザー数が 10%減少（BBC）

こういう数字を見てしまうと、実装者としてもパフォーマンスの低い表示速度の遅い Web サイトを実装することはなんとしても避けたいですよね。

Astro を選ぶ理由: https://docs.astro.build/ja/concepts/why-astro/

Astro Islands

それでは、Astro の大きな特徴のひとつである Astro Islands についても見てみましょう。
Astro Islands とは"HTML の静的なページ上にあるインタラクティブな UI コンポーネント"のこと。
公式ドキュメントには『静的で非インタラクティブな HTML の海に浮かぶ島（アイランド）』と表現されていて、とてもわかりやすくて可愛らしい表現で、すぐにイメージできました。

この UI コンポーネントを扱う上ですぐれているのが、React、Preact、Svelte、Vue、SolidJS、AlpineJS といったさまざまな UI フレームワークを使うことができるといったところにあるようです。
これができると Next.js を使いたいけど Vue しかわからないしなぁ…といった悩みもなく、既存のフレームワークよりも多くの人が Astro に触れることができそうですね。

以下は公式からのサンプルのコードになりますが、インタラクティブに使いたいコンポーネントにはclient:loadと記述することで可能になります。 Astro は JavaScript を取り除いた状態でビルドしてくれると説明していましたが、このようにコンポーネントごとに JavaScript を許可することができるのを"Partial Hydration"というようです。

---
// 例：ページ上で動的なReactコンポーネントを使用します。
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- このコンポーネントは、ページ上でインタラクティブに動作するようになります！
     残りの部分は静的でJSゼロのままです。 -->
<MyReactComponent client:load />

そして、もうひとつおもしろいと思った点が『並列ロード』というもので、Astro Islands が静的なコンポーネントをブロックすることなく処理してくれるというところ。
また、読み込みのタイミングも指定することができ、この調整が実装者の腕の見せ所にもなりそうですね。

Astro アイランド https://docs.astro.build/ja/concepts/islands/

実装方法

拡張子は.astro でファイル内にはコンポーネントスクリプトとコンポーネントテンプレートが存在します。

---
// コンポーネントスクリプトはここに書きます
---
<!-- コンポーネントテンプレートはここに書きます -->

コンポーネントスクリプト

コンポーネントスクリプトにはコードフェンス(---)内に記述します。
この中には以下の内容が記述できます。

• 他の Astro コンポーネントのインポート
• 他のフレームワークコンポーネント（React など）のインポート
• データ（JSON ファイルなど）のインポート
• API やデータベースからコンテンツを取得するコード
• テンプレートで参照する変数の作成

以下は公式からのサンプルのコードになります。

---
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';

// 渡されたコンポーネントのprops（`<X title="Hello, World" />`など）にアクセスする。
const {title} = Astro.props;
// 外部データを取得する（プライベートAPIやデータベースからでも可）
const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---
<!-- テンプレートはここに書きます -->

コンポーネントテンプレート

コンポーネントスクリプトの記述を行い、コンポーネントスクリプトで設定した値などを組み込んで HTML を生成することができます。

以下は公式からのサンプルのコードになります。

---
// コンポーネントスクリプトはここに書きます
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
---
<!-- HTMLコメントに対応しています -->

<h1>Hello, world!</h1>

<!-- propsやコンポーネントスクリプトの変数を使用します。 -->
<p>好きなポケモンは: {Astro.props.title}</p>

<!-- `client:`ディレクティブで他のコンポーネントをハイドレートに含める -->
<ReactPokemonComponent client:visible />

<!-- JSXと同じように、HTMLとJavaScriptの式を混ぜる -->
<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>

<!-- テンプレートディレクティブを使って、複数の文字列やオブジェクトからクラス名を作成する -->
<p class:list={["add", "dynamic", {classNames: true}]} />

CSS

ドキュメントを読む限り、Astro でのスタイリングはコンポーネント内に style タグを用意して、その中に css を書いていくようです。
ルール的にはコンポーネント内でデフォルトで自動的にスコープされます。
自分で記述したクラス名に適当な文字が追加されていくので CSS Modules を使っている人は理解しやすいかと思います。 以下公式ドキュメントより

<style>
  h1 {
    color: red;
  }
  h1.astro-HHNQFKH6 {
    color: red;
  }
  .text {
    color: blue;
  }
  .text.astro-HHNQFKH6 {
    color: blue;
  }
</style>

また、上記のように。スコープさせたくない場合には以下のように style タグにis:globalを記述する必要があります。

<style is:global>
  /* スコープされず、ブラウザにそのまま配信されます。
     サイト内の全ての<h1>タグに適用されます。*/
  h1 {
    color: red;
  }
</style>

もちろん、scss で書きたい人がほとんどだと思うので対応方法もとっても簡単です。 まず、以下のコマンドで sass をインストール。

npm install -D sass

そして、style タグを<style lang="scss">とすると、scss で書けるようになって一件落着です。

Astro の CSS とスタイル: https://docs.astro.build/ja/guides/styling/

addEventListener の実行

JavaScript のフレームワークというと、React みたいな感じでonClickみたいな感じでイベントを実行するものかと思っていたのですが、ファイル内に script タグを置いて vanilla JS と同様に addEventListener で実装できるようです。

画像最適化方法

Next.js などと同様に Astro にも画像最適化の手段が用意されています。
やはり、ハイパフォーマンスな Web サイトを作るためのフレームワークをうたっているからには画像の最適化は必須必須なんでしょう。
助かりますね。
Astro の開発している@astrojs/image の他にも Astro ImageTools というプラグインがあります。

@astrojs/image の場合、通常であれば<Image>で、レスポンシブに対応したい場合などには<Picture>で対応することが可能です。
src に設定する画像に関して、リモート、public ディレクトリ、src ディレクトリでそれぞれ違いがあります。

• リモート:URL(https://picsum.photos/id/957/300/200.jpg)
• public ディレクトリ: public 直下の"/"(/assets/stars.png)
• src ディレクトリ: import(import localImage from "../assets/logo.png";)

https://ebisu.com/note/astro-responsive-image/ > https://docs.astro.build/en/guides/images/

プロジェクトのはじめ方

ここまで読んで Astro 試してみたいな。と思ったら、以下のコマンドから始めてみてください！ 実行したら勝手に進めてくれるので楽ちんです。

npm: npm create astro@latest
pnpm: pnpm create astro@latest
yarn: yarn create astro

参考

• https://astro.build/
• https://astro.build/blog/introducing-astro/
• https://docs.astro.build/ja/getting-started/
• https://blog.openreplay.com/building-an-astro-website-with-wordpress-as-a-headless-cms/
• https://zenn.dev/takanorip/articles/c75717c280c81d
• https://zenn.dev/yend724/articles/20220701-430vndv085eh6xn2
• https://qiita.com/tronicboy/items/4c10f98a60d4c4f0044c
• https://developer.mamezou-tech.com/blogs/2022/09/07/build-doc-site-with-astro/
• https://blog.microcms.io/astro-microcms-introduction/
• https://ebisu.com/note/astro-responsive-image/
• https://hbsnow.dev/blog/astro-blog

さいごに

今回は実際に自分で Astro を使ってみる前に、どんな特徴があってどんな場面で利用されるのかを調べてまとめてみましたので、使ってみてどうだった。というような記事ではないのですが、これから Astro 使ってみようかな？と思っている人の参考になればいいなと思っております。
また、公式ドキュメントも非常に読みやすくなっていますので、時間がある際にじっくり読んでみるといいかもしれません。

これから Astro で実装してみたい案件があるので、実際に使ってみた感想はまた後日記事にしてみたいと思います。