Open2022/12/30にコメント追加3

Astro メモ

2022年夏にVersion 1.0を迎えた、イマドキでイケテル静的サイトジェネレーターだけどSSRもできるよっていう、サイト制作の鉄板（じゃないかと思われる）ツール「Astro」について、気づいたことをメモしていきます。

Astroのアイランドとか、React/Vue/Angularなどとのintegration機能は、公式サイトや他の方のブログ等でよく見かけるので、ここでは実際に使っていて気になった細かいことベースで記載していきます。

技術的なスタック

Node.jsがベースです。
古式ゆかしい静的サイトジェネレーターみたく、Markdownファイル（.md）群からページを量産することもできれば、Node.jsのバックエンドからDBに接続し、記事をDBから引っ張ってくる的なこともできます。

というか、Node.jsで出来てるだけあって、Node.jsで出来ることは大概できます。

筆者はかつてHexoという静的サイトジェネレーターを好んで使っていましたが、Node.jsの自由度はあれど、Hexo流の組み方みたいなのがあって（ちょうどWordPressの関数群のようなイメージです）、あんまり自由が効かなかった覚えがあります。

それと比べると、Astroは比較的自由度が高いのですが、とはいえAstroにもお作法的な細かいことが多いので注意は必要です。

基本は.astroというファイルで作っていきます。

古式ゆかしい静的サイトジェネレーターを使っていた方にはお馴染みのFrontmatterと言う書式に似た感じで書きます。

sample.astro

---
const myDream = 'I wanna be a rich man.'
---
<p>{myDream}</p>

必要最低限の.astroファイルの構成です。このように、ファイル上部に---を2行書き、その間にJavaScriptを記載します。

終わりの---から下の部分は基本的にHTMLを記載しますが、{}で括った部分は、ファイル上部で記載したJavaScriptを展開することができます。

/sample

<p>I wanna be a rich man.</p>

となります。

例えば、こういう疑問もあるかと思います。

sample.html

<script>
const target = document.getElementById('target')
target.textContent = 'I wanna be a rich man.'
</script>
<p id="target"></p>

実は、Astroでは、---で挟んだセクションは必須要素ではなく、いきなりHTMLを書いてもOKです。上記のようなHTMLの中でJavaScriptを書く.astroファイルがあっても問題ありません。

ただ、この場合はクライアントサイドでJavaScriptを実行することになります。

端的に言えばこれに尽きます。

---の中はJavaScriptといってもNode.jsが実行されます。そこはサーバーサイドの世界です。一方、---の下側は、HTML/CSS/JavaScriptが実行されるフロントエンドの世界です。

つまり、---で二つの世界は隔絶されているように見えますが、前述のように{}を使って変数を渡したり、一時的に{}の中でNode.jsを実行する、といった使い方もできます。