Zenn
Open36

Astroが気になる

SSG
Astro
さとうあまみさとうあまみ

VS Code用の拡張機能あり。

Astro はどのようなコードエディタでも動作しますが、VS CodeはAstroで開発する際におすすめのエディタです。 私たちはいくつかの重要な機能の追加と、開発者体験を向上させる公式VS Code 拡張機能をメンテナンスしています。
.astroファイルのシンタックスハイライト
.astroファイルのTypeScript型情報
VS Code Intellisenseによるコード補完、ヒントなど

https://docs.astro.build/ja/editor-setup/

TypeScript設定
https://docs.astro.build/ja/guides/typescript/

さとうあまみさとうあまみ

なんていうか非常に至れり尽くせりですね…

lima@LIMAs-MacBook-Air Workspace % npm create astro@latest
Need to install the following packages:
  create-astro@1.0.0
Ok to proceed? (y) 

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? … ./penta-astro
✔ Which template would you like to use? › Just the basics (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? › Relaxed
✔ TypeScript settings applied!
✔ Setup complete.
✔ Ready for liftoff!

 Next steps 

You can now cd into the penta-astro project directory.
Run npm run dev to start the Astro dev server. CTRL-C to close.
Add frameworks like react and tailwind to your project using astro add

Stuck? Come join us at https://astro.build/chat
Good luck out there, astronaut.

lima@LIMAs-MacBook-Air Workspace % cd penta-astro/
lima@LIMAs-MacBook-Air penta-astro % npm run dev


> @example/basics@0.0.1 dev
> astro dev

  🚀  astro  v1.0.3 started in 55ms
  
  ┃ Local    http://localhost:3000/
  ┃ Network  use --host to expose
さとうあまみさとうあまみ

とりあえずReactいれる。

lima@LIMAs-MacBook-Air penta-astro % npx astro add react
✔ Resolving packages...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import react from "@astrojs/react";           │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [react()]                     │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

╭──────────────────────────────────────────────────────────────────────╮│ npm install --save-dev @astrojs/react react-dom@^18.0.0              ││ react@^18.0.0                                                        │╰──────────────────────────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...
  
   success  Added the following integration to your project:
  - @astrojs/react

Tailwindも入れる

lima@LIMAs-MacBook-Air penta-astro % npx astro add tailwind
✔ Resolving packages...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │ import react from "@astrojs/react";           │
 │                                               │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [react(), tailwind()]         │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭───────────────────────────────────────────╮
 │ npm install --save-dev @astrojs/tailwind  │
 ╰───────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will generate a minimal ./tailwind.config.cjs file.

✔ Continue? … yes
  
   success  Added the following integration to your project:
  - @astrojs/tailwind
さとうあまみさとうあまみ

VS Codeで整形が効かないのが気になったけどフォーマッターがあった。

lima@LIMAs-MacBook-Air penta-astro % npm i --save-dev prettier-plugin-astro prettier

added 14 packages, and audited 465 packages in 6s

186 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
lima@LIMAs-MacBook-Air penta-astro %

settings.jsonに追記

  "prettier.documentSelectors": ["**/*.astro"]
さとうあまみさとうあまみ

なんとなく勘でコンポーネントを現行サイトから移行してみた。
静的な部分はclassNameをclassに置換するだけでほとんど大丈夫そう。

microCMS SDKいれてみるか…

lima@LIMAs-MacBook-Air penta-astro % npm install microcms-js-sdk
added 11 packages, and audited 476 packages in 2s
192 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
さとうあまみさとうあまみ

環境変数はどうやって…？

Astroは環境変数にViteを使用しています。Viteのいずれかの方法で環境変数の取得や設定ができます。
サーバ側のコードでは すべて の環境変数が使えますが、クライアント側のコードではセキュリティのためにPUBLIC_というプレフィックスを持つ環境変数のみが使えることに注意してください。
環境変数は、プロジェクトディレクトリの.envファイルから読み込めます。
https://docs.astro.build/ja/guides/environment-variables/

うーん、なるほど？こういうことかな？

export const client = createClient({
  serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
  apiKey: import.meta.env.MICROCMS_SERVICE_API_KEY
});
さとうあまみさとうあまみ

データを取ってくるには…

すべてのAstroコンポーネントは、そのコンポーネントスクリプトでグローバルなfetch()functionにアクセスし、APIにHTTPリクエストを行えます。
https://docs.astro.build/ja/guides/data-fetching/

わお。なんとなく書いたらAstroでmicroCMSからデータ取得できた。microCMS SDKありがたい

さとうあまみさとうあまみ

元々Next.jsで作ってたサイトだから、AstroをReactで使ったらほとんど書き換えなくてよさそう…

さとうあまみさとうあまみ

npm run devだとデータ表示できるけど、npm run buildだと Endpoint handler not found! Expected an exported function for "get"と言われてこける。

microCMS SDKを使わずfetchしたらビルドが通った。たぶん.astroファイル上ではSDK使えないのかな（tsxファイルの中でなら使える…きっと…

さとうあまみさとうあまみ

Next.jsで作ってたページをAstroに載せかえた結果よ。PSIちゃんがいかにJavaScriptを嫌うかというね😂
microCMS（ヘッドレスCMS）使ってると気軽に載せかえて遊べるから楽しい。着せ替え人形みたい！

スクリーンショット：PSIの結果として93点が表示されている

さとうあまみさとうあまみ

axios通信のHubSpotフォームはコンポーネントをほぼそのまま移行。
クライアントでもJavaScriptを動かしたい場合は

 <Form client:load />

全部移行できたらビルド時間を比較してみよう。

さとうあまみさとうあまみ

Astroは私が愛し続けた「静的サイトジェネレーター」そのものだ…
便利な時代になったなぁ。
microCMSのプレビューをつけられるかは謎

さとうあまみさとうあまみ

動的ルーティング&コンテンツ取得ができて一歩前進。
色々処理させるとフロントマター的な部分がもりもりになるな…

---
// ルーティング
export async function getStaticPaths() {
  const posts = await fetch(
    "https://pentaprogram.microcms.io/api/v1/blog?limit=100",
    {
      headers: {
        "X-MICROCMS-API-KEY": import.meta.env.MICROCMS_SERVICE_API_KEY,
      },
    }
  ).then((response) => response.json());
  const params = posts.contents
    .map((content) => {
      if (content.externalUrl == "" || content.externalUrl == null) {
        return `${content.id}`;
      }
    })
    .filter((content) => content);
  const paths = params.map((slug) => {
    return {
      params: { slug: slug },
    };
  });
  return paths;
}

// コンテンツ取得
const { slug } = Astro.params;
const post = await fetch(
  `https://pentaprogram.microcms.io/api/v1/blog/${slug}`,
  {
    headers: {
      "X-MICROCMS-API-KEY": import.meta.env.MICROCMS_SERVICE_API_KEY,
    },
  }
).then((response) => response.json());
---

次はページネーションかな。
どうせなら純正のものを使いたいけど、microCMSのデータでも使えるのかな。

さとうあまみさとうあまみ

ページネーションはこんな感じで取得できるみたい。

export async function getStaticPaths({ paginate }) {
  const posts = await fetch(
    "https://pentaprogram.microcms.io/api/v1/news?limit=100",
    {
      headers: {
        "X-MICROCMS-API-KEY": import.meta.env.MICROCMS_SERVICE_API_KEY,
      },
    }
  ).then((response) => response.json());
  const postsContents = posts.contents;
  return paginate(postsContents, { pageSize: 6 });
}
const { page } = Astro.props;
さとうあまみさとうあまみ

Astro、公式と非公式のサイトマップ生成がある？？どっちがいいんだろ。
と思ったらちゃんとReadmeに書いてあった

Advantages of astro-sitemap over @astrojs/sitemap:
Exclude pages from a sitemap by glob patterns.
More control on the sitemap output:
manage XML namespaces;
lastmod format option;
possibility to add a link to custom XSL.
Automatically creates a link to the sitemap in the <head> section of generated pages.
Flexible configuration: configure the integration with an external config, astro.config.* or a combination of both.
Better logging.
https://github.com/alextim/astro-lib/tree/main/packages/astro-sitemap#readme

私の用途なら公式で充分そうなので公式いれてみよう

さとうあまみさとうあまみ

公式サイトマップ生成。何から何まで親切だなあ。
インストール後にビルドコマンドを打つだけでなにもせずにサイトマップできた。

lima@LIMAs-MacBook-Air penta-astro % npx astro add sitemap
✔ Resolving packages...

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────────╮
 │ import { defineConfig } from 'astro/config';      │
 │ import react from "@astrojs/react";               │
 │ import tailwind from "@astrojs/tailwind";         │
 │                                                   │
 │ import sitemap from "@astrojs/sitemap";           │
 │                                                   │
 │ // https://astro.build/config                     │
 │ export default defineConfig({                     │
 │   site: 'https://pentaprogram.tokyo/',            │
 │   integrations: [react(), tailwind(), sitemap()]  │
 │ });                                               │
 ╰───────────────────────────────────────────────────╯

✔ Continue? … yes

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────╮
 │ npm install --save-dev @astrojs/sitemap  │
 ╰──────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...
  
   success  Added the following integration to your project:
  - @astrojs/sitemap

https://docs.astro.build/en/guides/integrations-guide/sitemap/

さとうあまみさとうあまみ

ウェブアプリケーションを作りたいならNext/Nuxt/Angularのいずれかは必要かなと思うけど、シンプルにウェブサイトを効率良く（ヘッドレスCMS組み合わせて）作るならAstroが一番分かりやすい気がする。
CMS連携でReactなりVueなりは必要になるとはいえ。
ドキュメントもターミナルのダイアログ（っていうのかな？対話形式）も親切だし、日本語ドキュメントもあるし…何より出力結果がHTMLとCSSだから分かりやすい。

さとうあまみさとうあまみ

全50ページ弱のサイトだとNext.jsでもAstroでもローカルでのビルド時間にそんなに差が出ないな。
Next.jsが12〜13秒、Astroは10〜11秒って感じ。
Nextはビルド合計時間がでないから、手動でストップウォッチで測ってます。

さとうあまみさとうあまみ

ふむ、リダイレクトなど、そして…

In the API route you can safely define secret values, or read your secret environment variables.

https://docs.astro.build/ja/guides/server-side-rendering/

my-adapterは使うサービスに置き換えるのか。

lima@LIMAs-MacBook-Air penta-astro % npm install --save-dev @astrojs/vercel    
npm WARN deprecated node-pre-gyp@0.13.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future

added 96 packages, and audited 608 packages in 7s

209 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
さとうあまみさとうあまみ

!?
おもしろ。Astroでブログ記事のプレビューを作ってるんだけど、デプロイするとCSS Modulesであてたスタイルがきかなくなる。
プレビューじゃない方はあたってる。どこで何をしてるのかちゃんと分かってなきゃダメなのね。

さとうあまみさとうあまみ

RSSはこんな感じ。

import rss from '@astrojs/rss';
import axios from "axios";

const data = await axios
.get(
  `https://pentaprogram.microcms.io/api/v1/blog?limit=10`,
  {
    headers: {
      "X-MICROCMS-API-KEY": import.meta.env
        .PUBLIC_MICROCMS_SERVICE_API_KEY,
    },
  }
)
.then((response) => {
  return response.data
})
.catch((error) => console.error(error));
const posts = data.contents;

export const get = () => rss({
    title: 'ブログ名',
    description: 'ブログの説明',
    site: import.meta.env.SITE,
    items: posts.map((post) => ({
      link: import.meta.env.SITE + post.id,
      title: post.title,
      pubDate: post.pubDate,
    })),
  });
さとうあまみさとうあまみ

載せかえ以外の条件がもろもろ違うので単純比較はしにくいんだけど、Vercel上のビルドもやっぱりAstroのほうがちょっとはやめな気がする。
スクリーンショット:Next
スクリーンショット:Astro

さとうあまみさとうあまみ

Astro、PSIの点数が上がるなあ。
スムーススクロールをreact-scrollからCSSに変えてしまった影響もあると思う（ついでにJS少なくしちゃおうと思って）それにしても。
画像とかは全く一緒でも、完全静的で出力するかNext.jsで出力するかで違いがでますね…

ただ、ページ遷移によっては、ブラウザ上の体感はNext.jsの方が速かったりするので善し悪しですね。
PSIはゲームのように楽しむものだと思ってますが、PSIちゃんはもうちょっとJavaScriptを好きになって欲しい🥲

Next
Astro

さとうあまみさとうあまみ

日付が一日ずれてる〜！と気付いた
前もそんなことあったなと思い出してビルドコマンドにTZ='Asia/Tokyo'入れたらちゃんと日本時間になった☺️
コード側でどうにかすべき気もするけど、こっちの方が手軽なのでとりあえずこれで。