Webフレームワーク「Astro」を便利に使う～環境のカスタマイズとAstro 4.3までの新機能まとめ～

　本連載は、Web制作者である筆者が、Astro（アストロ）というフレームワークに出会って、爆速静的サイト構築に向けて歩き出すまでの物語です。第4回では、自分に合った制作環境の構築方法と、Astroの最新機能で実際にどのようなWebコンテンツが制作できるのかをご紹介します。

Astroの制作環境を自分好みにカスタムする方法

　Webサイトのコーディング経験がある方であれば、ある程度自分の慣れた制作環境というものがあるかと思います。

　そこでこの項では、Astroの制作環境を自分の使いやすいように構築する一例をご紹介します。

Sass（SCSS）を使用する場合

　CSSプリプロセッサのSassを使用する場合は、まずターミナルでプロジェクトにSassをインストールします。

npm install sass

　.astroファイル内で、<style lang="scss">を指定することで、AstroコンポーネントにSCSS記法でCSSを記述することができます。

SCSS記法でstyleを記述する

---
---
<html lang="ja">
  （...略）
  <body>
    <h1>Welcome to Astro</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Officia odio non explicabo ab deserunt doloremque praesentium.
      nemo aliquam minima quis, animi error velit quos officiis quaerat.
      magnam minus amet esse!</p>
  </body>
</html>

<style lang="scss">
  $h1-color: #ffff00;

  @mixin my-mix-in {
    padding: 1rem;
    border: 1px solid #fff;
    font-size: 3rem;
    color: $h1-color;
  }

  body {
    padding: 1rem;
    background-color: #222;
    color: #fff;
    font-size: 1.5rem;

    h1 {
      @include my-mix-in;
    }
  }
</style>

AstroとSCSSでビルドされたHTML

　第3回でご説明したように、SCSS記法でもAstroコンポーネントにおけるCSSスコープ化が有効であるため、普段SCSS記法に慣れた方であれば、Astroでも手軽に導入することができます。

　また、外部のSCSSファイルを使用する場合は、CSSファイルと同様にAstroコンポーネントにインポートすることもできます。

SCSSファイルをインポートして使用する

---
import "../css/global.scss";
---
<html lang="ja">
  （...略）
  <body>
    <h1>Welcome to Astro</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Officia odio non explicabo ab deserunt doloremque praesentium.
      nemo aliquam minima quis, animi error velit quos officiis quaerat.
      magnam minus amet esse!</p>
  </body>
</html>

PostCSSを使用する場合

　Sassで使用していた変数やネストなどの便利機能の多くは、すでにネイティブのCSSでも記述できるようになっているため、最小限のプラグインでCSSをシンプルに記述するならば、PostCSSも選択肢の一つです。

　AstroにはデフォルトでPostCSSが組み込まれているため、プロジェクトにPostCSSを設定するには、プロジェクトルートにpostcss.config.cjsファイルを作成し、プラグインを個別にインポートします。

postcss.config.cjs

module.exports = {
  plugins: [
    require('postcss-preset-env'),
    require('autoprefixer'),
  ],
};

　そして、Astroコンポーネント内でPostCSSとして記述することができます。

PostCSSでstyleを記述する

---
---
<html lang="ja">
  （...略）
</html>

<style>
  :root {
    --h1-color: #ffff00;
  }
	
  body {
    padding: 1rem;
    color: #fff;
    font-size: 1.5rem;

    h1 {
      padding: 1rem;
      border: 1px solid #fff;
      font-size: 3rem;
      color: var(--h1-color);
    }
  }
</style>

　外部PostCSSファイルとして運用する場合は、@importによる複数ファイルの統合も可能です。

src/css/global.css内に複数のCSSファイルをインポートする

@import "foundation/body.css";
@import "object/button.css";

統合されたCSSファイルをインポートして使用する

---
import "../css/global.css";
---
<html lang="ja">
  （...略）
</html>

TailwindCSSを使用する場合

　汎用的なutility classを組み合わせて構築するTailwindCSSフレームワークを使用する場合は、Astroのインテグレーション機能を使って簡単に導入することができます。

　ターミナルで以下のコマンドを実行すると、TailwindCSSを有効化するためのセットアップが始まります。

npx astro add tailwind

　これだけで、必要なライブラリのインストールと、tailwind.config.mjsの初期設定が完了するので、Astroコンポーネント内ですぐにTailwindCSS記法を使用することができます。

---
---
<html lang="ja">
  （...略）
  <body class="p-4 bg-black text-white text-2xl">
    <h1 class="p-4 border border-solid border-white text-5xl text-[#ffff00]">
      Welcome to Astro</h1>
  </body>
</html>

　TailwindCSSに代表されるutility class系の記述方式は、一見すると記述量が増えて読みにくく思えますが、Astroのコンポーネント運用とはとても相性が良く、クラス名で管理・設計する必要がなく、効率的な開発を行うこともできます。

　CSSの記述方式・管理方法については人によって大きく異なる部分でもあり、作業効率に直結してくるため、既存の慣れた制作環境をAstroにどのように最適化するかを模索してみると良いかもしれません。