Girataro Times

新しいフロントエンドフレームワークである　Astro(https://astro.build/)を軽く触ってみたのでそれについて書いていきます。

Astroとは

一応Astroとは何かを簡単に書こうとは思いますが、詳しくは公式ドキュメント(https://docs.astro.build/ja/getting-started/)を参照ください。(一部日本語対応してます!!)
Astroは高速なWebサイトを構築するためのJavascriptフレームワークです。重要なのは「Webアプリ」ではなく「Webサイト」のためのフレームワークであることで、ブログやポートフォリオなどの作成に向いています。
文法がシンプルで高速であることが強みになります。

具体的なAstroの記法について以下に書きます。

MyFavoritePokemon.astro

---
// Your component script here!
import Banner from '../components/Banner.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- HTML comments supported! -->
{/* JS comment syntax is also valid! */}


<Banner />
<h1>Hello, world!</h1>


<!-- Use props and other variables from the component script: -->
<p>{title}</p>


<!-- Include other UI framework components with a `client:` directive to hydrate: -->
<ReactPokemonComponent client:visible />


<!-- Mix HTML with JavaScript expressions, similar to JSX: -->
<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>


<!-- Use a template directive to build class names from multiple strings or even objects! -->
<p class:list={["add", "dynamic", {classNames: true}]} />

ちなみにこれはAstroの公式ドキュメント(https://docs.astro.build/ja/core-concepts/astro-components/)から引用したものです。公式ドキュメントで「Pokemon」を使ってるんですね...

コードについていくつか解説します。

一番上の"---"で囲まれた部分はコードフェンスと呼ばれる部分で、コンポーネントスクリプトと呼ばれています。ここにJavaScript(TypeScript)を書くことができます。import文や変数の定義はここで記述します。
コードフェンス最後の行のAstro.props でコンポーネント引数を定義します。そのためこのファイルは以下のようにコンポーネントとして読み込むことができます。

　　　<MyFavoritePokemon title="私のお気に入りのポケモン">

コードフェンスの下にはコンポーネントが出力するHTMLを書いていきます。これをコンポーネントテンプレートと呼びます。基本的にHTMLと同じような記法で書くことができます。また、{} で囲うことによってJavascriptの式を書くことができます。
Banner.astro は別ファイルで定義されたastroコンポーネントです。コンポーネントスクリプトでこのファイルをインポートすることでコンポーネントテンプレート内でコンポーネントを利用することができます。
Astroではアイランドアーキテクチャと呼ばれるものを採用しておりReact、Vue、Next.jsなどのコンポーネントをそのまま呼び出すことが出来ます。この例ではReactPokemonComponent がこれにあたり、拡張子がjsx であるのにも関わらずコンポーネントテンプレートで実装できています。なおclient:visible はAstroでJavaScriptを有効化するために書きます。逆にいうとAstroではデフォルトではクライアント側にJavaScriptファイルが読み込まれないようになっています。

チュートリアルやってみた

Astroドキュメントには簡単なブログを構築するチュートリアルがあります。残念ながらまだ日本語対応されていませんが非常にわかりやすいので翻訳しながら読みましょう。

チュートリアルに書かれていることをまとめておきます。

Chapter1

Astroプロジェクトのセットアップ手順について書かれています。Astroだけではなく、VSCode・Githubの設定及びNetlifyへのデプロイの手順まで含まれています。

Chapter2

実際にAstroで簡単なWebページを作ります。global.css ファイルにスタイルを記述するところまでやります。

Chapter3

コンポーネントについて扱っています。実際に、ヘッダーやナビゲーション等をコンポーネントとして作成します。propsに関してもここで扱っています。

Chapter4

レイアウトについて扱っています。Reactのchildrenに当たる<slot/> について触れられています。ダイナミックルーティングとgetStaticPathについてもここで扱います。

Chapter5

Astro APIについて扱っています。Astroでの実装を支援してくれる便利なAPIの一部が紹介されています。この章ではglob とrss が取り扱われました。

Chapter6

Astro Islandsについて扱っています。Preactで作成されたコンポーネントをAstroで読み込む方法が書かれています。その一方で極力クライアント側のJavaScriptを少なくするという設計手法からscriptタグでダークモード機能を実現する方法が書かれています。

個人的にはかなり充実しているチュートリアルだと感じました。
また、チュートリアル以外にも他フレームワークからの移行やTypescriptでの導入などドキュメントは充実しているので必要に応じて参照すると良いでしょう。私はこのチュートリアルをTypescriptでやっていたため結構お世話になりました。

一応私がこのチュートリアルで作ったものがまだデプロイされているため貼っておきます。(いずれ削除する可能性はあります)
https://astro-tutorial-giratify.netlify.app/

感想

あくまでNext.jsでブログを作ってきた身としての感想ですが、文法的には確かに簡単だと思いました。Next.jsのわかりやすい部分であるルーティングはそのままにJavascriptとHTMLが明確に分離されているのが良かったです。
チュートリアルも優しく、かなり初心者に向けているように感じました。(VSCodeの導入等はやや冗長に感じましたが)
既存のサイトをAstroに移行する必要があるか？と言われればWebサイト次第とかと思いますが、これから作成する人にとってはお勧めできると思います。
ただ、コンポーネントの概念があるため、多少はReact等の知識はあった方がいいのかなと思いました。

今回は以上になります。このブログもリプレイスしていこうと思うので、完了次第それについて書いていこうと思います。

初めてのAstro