icon

Blog
About

Astro Tutorialをやってみる

2024/02/23

このブログのフレームワークを Next.js からもっと軽量なものへの乗り換えを検討しているため、その候補探しとして Astro を勉強してみる。

やること

このチュートリアルを最初からやってみる

https://docs.astro.build/ja/tutorial/0-introduction/

インストール

  • コマンド実行したらサクッとテンプレートが作られてすぐに開発できる
    • (欲を言うと Linter の設定も欲しい)
  • テンプレート生成用の CLI がすごくリッチに作ってある

ページ追加

  • .astro ファイルに html のようなものを記述していく
    • 独自の記法を使って変数宣言することになるので、.vue ファイルと同じようにリンターやビルド周りの追従が必要になる
  • /src/pages にページ相当の astro ファイルを置いていく
    • pages 以下の配置によって自動でルーティングされていく

コードフェンス

以下のコードページ内で使う変数を設定して利用できる

---
const pageTitle = "About me"
---

<h1>{pageTitle}</h1>
  • --- で囲われた部分をコードフェンスと呼ぶらしい
  • コードフェンス内に書くものがない場合は省略しても良い
  • オブジェクトや配列も利用可能。jsx と同様に配列を map で展開して HTML を出力することも可能 React に慣れてたらスムーズに受け入れられそう
  • Middleman のような静的なページを作成するフレームワークでも似た方法が用いられてきた

Style

  • <style> 内で変数を使用するには define:vars() を使用して CSS の変数化する必要がある
  • css ファイルを各 astro ファイルに import するだけで global の style として利用できる

コンポーネント

  • /src/components にフォルダを置く
  • ページや他のコンポーネントから import して <Navigation /> のように読み込む
  • const { username } = Astro.props によってコンポーネントに値を渡すことができる
  • コンポーネント内に <style> を書くことでコンポーネント内に適用する CSS を設定できる

Script

  • <script> タグによって JavaScript を記述できる
  • /src/scripts にスクリプトを置く
  • <script> タグの内側に import "../scripts/hoge.js" を記述することで

Layout

  • /src/layouts にテンプレートとなるレイアウトファイルを置く
  • <slot /> 部分が <BaseLayout> の子コンポーネントとしてスロットインできる
  • markdown のコードフェンス内には frontmatter として yaml 形式で props を記述する
  • <slot /> をネストさせることで複数のレイアウトを組み合わせることも可能になる

Astro API

  • Astro.glob を使って特定パスのマークダウンファイルを frontmatter ごと取得し、map で html をレンダリングすることができる
  • pages に js ファイルを置き、GET 関数を export することでファイルを生成することもできる
    • turorial では @astrojs/rss を使って rss.xml を作成した

Astro Island

  • npx astro add preact によって astro プロジェクトに preact をインストールする
    • astro.config.mjs ファイルの変更も加えてくれる
  • components に jsx のファイルを作成することで、React でコンポーネントを作ることができる
    • props は通常の React コンポーネントと同じように第一引数として渡すことができる
    • React によってボタンをクリックした時に特定の関数を実行して表示のようなインタラクティブな操作を作ることができた
  • client:load をコンポーネント呼び出し時に設定することで、ロード時に JavaScript の動作を設定することができる（ハイドレートという）
    • client:visible なら表示されたタイミングでハイドレートする
  • 新しいプロジェクトを立ち上げなくても、部分的に他のフレームワークによる UI コンポーネントで置き換えることができるのは色々試してみたい自分にはメリットだと感じた

Astro Islandを使わないインタラクティブな操作

  • UI コンポーネントを使わなくても <script is:inline> 内に JavaScript を記述すればインタラクティブな操作を作ることができる
    • 純粋な JavaScript から HTML を操作する必要があるのでまあまあ大変

おわりに

  • ブログをシンプルな設定で簡単に作ることができたので、静的サイトで一部だけ動的のようなページには良い選択肢になりそう
  • 今の Next.js 製ブログから Astro への乗り換えにおいて気になったポイント
    • markdown サポートが最初から入っているので、細かい markdown の設定を考えずにブログの記事に集中できそう
    • 動的に目次を生成することになる場合も、React を使うことができるので大きな問題はなさそう
    • RSS の生成もそんなに難しくないので、Next.js よりもわかりやすく生成することができそう
    • React のライブラリ使いたいとなった時にどこまで対応されるのか不安
    • コードフェンスなどの Astro 独自の記法があるので、 linter などエコシステムの対応が追い切れるのかという懸念がある
    • タグ機能だけでも Astro 独自の仕組みを使っている感があったので、高機能にして JS の割合が増えていくとメンテナンスする時のコードの見通しが悪くなりそうな感じはした
  • Next.js からの乗り換えにおいて迷わずベストとは思えないので、他のフレームワークももう少し検討してみる
  • 久しぶりにチュートリアルから取り組む学び方を進めてみたが、非常にドキュメントが整備されており学習を進める体験がとてもよかった