Astroを使う上で気をつけることろ

komosyu2023.01.04

はじめに

少し前から Astro に興味を持って、個人的にもブログにまとめてみてから、すぐに触ってみたくなって以前から作りたかった Web メディアを実装する中で気になった点をまとめてみることにしました。

まだ触りはじめてから 1 週間程度なので、そこまで深い情報は出せずメモ書き程度になってしまうかもしれませんが、今作っているものがローンチできるくらいになったら、また新しい記事に詳しい情報を載せられると思うので、少々お待ちくださいませ。

環境変数

これはふつうにドキュメントを読んでいればわかると思うのですが、私がバカなミスをしてしまっていた笑い話として共有していきます。

まず、私がやらかしてしまっていたのは、これまで SSG のフレームワークは Next.js を使うことが多く、そこではクライアント側で使う環境変数はあたまにNEXT_PUBLIC_つける決まりがあったので、Astro でも何も考えずに同じようにしてしまっていました。(こんな人間はいないと思いますが一応共有でした)

それでは、Astro での正しい環境変数の扱いについての話に戻ります。
Astro での Next.js と同じようにクライアント側で使う環境変数にはあたまに特定のテキストを入れるのですが、NEXT_PUBLIC_ではなくPUBLIC_になります。
ただそれだけの話でした。

あと、この環境変数にアクセスする際にはPUBLIC_の前にimport.meta.env.をつけて、import.meta.env.PUBLIC_XXXみたいにする必要があります。
この辺りのことは公式ドキュメントに詳しい内容が記されています。

記事データ取得方法

Astro での記事データ取得方法は非常にシンプルで、Next.js みたいに getStaticProps などする必要はなくて、以下のようなコードフェンス(---)内に囲まれたコンポーネントスクリプト内にロジックを書いていけばいいだけです。

下記のコードは headlessCMS の Newt から記事データを取得するためのコードになります。

---
const postsData = await client.getContents({
    appUid: import.meta.env.PUBLIC_NEWT_APP_UID,
    modelUid: import.meta.env.PUBLIC_NEWT_MODEL_POST,
})
---

これだと、ページ内だけでなくコンポーネント内でデータを取得することができますので便利ですね。

CMS から吐き出されたコンテンツにスタイルが当たらない

Astro で style を当てるには html 要素の下部に style タグを設置して、その中に css を書きます。そこで書かれた css はコンポーネント内で自動的にスコープされてカプセル化されています。

しかし、CMS から吐き出された html 要素には style が当たりませんでした。
他のコンポーネントと同じように、以下のように書いてはいるのですけれども。

<style lang="scss">
  .postContent {
    p {
      margin-top: 3rem;
      font-size: 1.6rem;
      line-height: 1.8;
    }
  }
</style>

では、どうしたらこの問題を解決できるのか？
結論から言うと、グローバルでスコープされていない css を書くことで解決します。

別にコンポーネント内に書かなくて、global.css とかでもいいのですが、あまり気持ちよくないので、以下のように style タグにis:globalとつけることで、style をスコープせずに当てることができるようになります。

<style lang="scss" is:global>
  .postContent {
    p {
      margin-top: 3rem;
      font-size: 1.6rem;
      line-height: 1.8;
    }
  }
</style>

調べてみたら、一応issueにも登録されていたのですが、tailwind でのやり方だけだったので、今実装しているものには合いませんでしたが、tailwind を使っている方は試してみてもいいかもしれません。

ちなみに、Astro で CMS から html を出力する方法は非常に簡単で、出力したいタグの中にset:html={html要素}を設定すればいいだけで非常にシンプルです。

<article class="postContent" set:html={props} />

パフォーマンスの高さ

まだまだ制作途中なので、まだまだ自慢げにパフォーマンスがいいぞ！なんて大きな声で言えませんが、SPA ではないけど表示速度もページ遷移の速度もはやくて気に入っています。
これまで Next.js のような SSG フレームワークで実装した時に LightHouse で「不要な js を削除して！」って怒られることも無くなりました。
まだまだ完成していないですがパフォーマンスチューニングをおこなっていない状態でも、そこそこいいスコアが出ていたので、完成してからのブラッシュアップが楽しみです。

公式より: Astro vs. X

参考

https://docs.astro.build/ja/guides/environment-variables/

さいごに

少し長くなってしまいそうだったし、headlessCMS の話も絡んできてしまうので、ここで書くのはあきらめてしまったのですが、次回は Astro と Newt での実装方法で経験したことをまとめていきたいと思います。

Astro を触りはじめてから感じたのは、やはり Next.js などの日本でもよく使われているフレームワークであれば使っている人も多くて情報が多く出ているのですが、Astro はまだまだ情報が多くないし、内容も基礎的なところが多かったので、使ってみてわかったより実践的な情報を発信していかないとな。と思いました。
お役に立てましたら幸いでございます。