Astro で何ができる？業務で使用してみた感想

エンジニアである私が感じたアレコレをぜひ皆さんに共有させていただきます！今回は「Astro」について、ご興味のある方もいるのではと思います。気になる方、使い勝手等率直な感想を書いてみたので、ぜひ読んでみてください！

経緯

今回簡単な静的サイトとして LP やコーポレートサイトへ導入しました。

もともと webpack や pug を使ったテンプレートがありそれを利用していたのですが、随分古くなってきてこともあり、このタイミングで一新したいと感じ、 Astro を導入することにしました。

Astroを採用した理由

採用した大きな理由は、メンバーのスキルレベルに差異があっても共同作業出来るからです。

Astro は基本的に HTML と CSS さえ書ければ使えます。

なので React や Vue などコンポーネント指向の開発に慣れていないメンバーでも理解しやすい形でコンポーネントを扱うことが出来ます。

また Astro は React など様々なライブラリを integration として追加することが出来ます。

そのため一部の複雑なコンポーネントだけ React で実装したり、案件のアサイン似合わせてというようなことが可能です。

このようにメンバーのスキルレベルに合わせて柔軟に開発出来ることが魅力的だと思い採用に至りました。

実際に使ってみて

基本的に SSG を使用し、ビルドされた HTML ファイルをサーバーにアップロードするという形で運用しています。(この辺は全て CI で自動化しています)

Astro ファイルの記法はとてもシンプルで、前述したように HTML と CSS さえ書ければ使えます。

またデフォルトで CSS が scoped なので他のファイルに影響しません。これは保守する上でとてもありがたいです。

ダイナミックルーティングの実装も簡単に出来るため、コーポレートサイトによくあるニュースページなども簡単に実装出来ます。

また markdown ファイルをサポートしているため、CMS を使うほどでも無いけど...という場合に便利です。

Tips

Props で HTML を受け取る

あるコンポーネントで文字列を受け取るとき、スマホでは改行を入れたいけど PC では改行を入れたくないというような場合があります。

そんなときにset:html を使うことで HTML 文字列を挿入することが出来ます。

https://docs.astro.build/en/reference/directives-reference/#sethtml

// Foo.astro
---
interface Props {
text: string;
}
const { text } = Astro.props
---
<div class="text" set:html={text}></div>

// index.astro
---
---
<Foo text={"foo<br>bar"} />

コメントがビルド後の HTML に残る

Astro では でコメントを書くことが出来ます。

しかしこの記法で書いたコメントはビルド後の HTML にも残ってしまいます。

なので TODO など残したくないコメントを書くときは {/* */} のように書けばビルド時に除去されます。

https://docs.astro.build/en/core-concepts/astro-syntax/#comments

不満に思ってしまった点

便利に思う反面、今回利用していて気になった点を率直に書いてみます。

①Astro コンポーネントを React で使えない

Astro で作った汎用コンポーネントを React で import 出来ないのが不便でした。

そういうときは React で作り直したり、単純なものであれば global.css に書いたりしていました。

// 🙅‍♂
import Button from "./Button.astro";
const Component = () => {
return <Button />;
};

②クライアント処理を書くのが辛い

クライアント側での処理は script タグに直接書くので宣言的に書くことが出来ません。

少しだけなら良いのですが複雑な処理を書こうとすると JSX に慣れてる人からすると辛いです。

---
---
<button>BUTTON</button>
<script>
const btn = document.querySelector("button");
btn.addEventListener("click", () => {
console.log("clicked");
});
</script>