フロントエンドAstro(アストロ)は表示速度が高速でユーザービリティが優れているというだけでなく、Vue,React,Svelte等のモダンJavaScriptをコンポーネント単位で使えるというエンジニアにとってのメリットもたくさんある高機能フレームワークです。
昨年、2022年8月にver.1が公開され、今年の1月28日にver.2が公開となったため、今フロントエンド界隈でかなり注目されており、今後もかなり盛り上がってくると予想されています。
今回はこのAstroの解説をAstro未経験者向けにできる限りわかりやすくしていこうと思います。
是非、最後までお読みください。
Table of Contents
Astro(アストロ)とは?
Astroは超高速なWebサイトを構築するためのWebフレームワークです。
今まではNext.jsやGatsby、Nuxt.jsなどが有名なフレームワークでしたが、そこに新たに加わったのがAstroです。
しかしながら、今までのフレームワークとは全く違っているので、まずはそこから解説していきます。
MPAとSPA
MPAとは、マルチページアプリケーションのことで、Ruby on Rails、 Django、 Laravel、WordPressなどがあります。
MPAは複数のHTMLページで構成されており、そのほとんどがサーバー上でレンダリングされます。そして新しいページに移動すると、ブラウザがサーバーに新しいページのHTMLを要求し、リロードされるのが特徴です。
一方SPAは、シングルページアプリケーションのことで、Next.js、Gatsby、Nuxt.js、SvelteKitなどがあります。
SPAはブラウザに読み込まれ、ローカルでHTMLをレンダリングする単一のJavaScriptアプリケーションで構成されており、ブラウザ上でJavaScriptアプリケーションとしてウェブサイトを実行し、ページ遷移したときに同じHTMLで新しいHTMLのページを再描画する機能が主な特徴です。
以前まではMPAばかりでしたが、ReactやVueの需要が高まるにつれ、SPAが徐々に増えていったといった流れです。
一般的にはNext.jsは速くて、WordPressは遅いといったイメージがあるため、MPAは遅く、SPAは速いと思われている方も多いと思います。
では、Astroはどちらに該当するかというと、実は「MPA」なんです。
MPAで高速。これがAstroの一つ目の特徴です。
デフォルトでゼロJavaScript
SPAの問題点として挙げられるのが、初回のページロードに時間がかかるという点です。
SPAはページ遷移したときに同じHTMLで新しいHTMLのページを再描画するため、最初のページが読み込まれればその後の表示速度は速いのですが、その分最初に大量のJavaScriptを読み込むために時間がかかります。
特にJavaScriptはブラウザ環境に依存するため、開発者側のPCでは速くても、携帯電話や低消費電力デバイスになるとより遅くなってしまいます。
Astroはサイトを遅くするJavaScriptをゼロにすることができるため、こういったSPAの問題点をクリアすることができるのです。
どのようなデバイスでも表示速度が速いのがAstroの二つ目の特徴です。
フロントエンドのみ
MPAは基本的にRubyやPython,PHPなどのサーバーサイド(バックエンド)言語と、ブラウザ(フロントエンド)言語であるJavaScriptの両方を使って実装しますが、SPAはVueやReactなどのJavaScriptライブラリーで実装されているため、フロントエンドのみで完結します。
では、Astroはというと、MPAにも関わらず、SPAのようにフロントエンドのみで実装できるのです。
さらに今までのSPAは、ReactではNext.js、VueではNuxt.jsとライブラリーごとにフレームワークは決まっていました。
しかし、Astroはコンポーネントごとにライブラリーを選択することができます。
同一ページ内にReactとVue,Svelteを混在させることも可能です。（※もちろん、ライブラリーを使わないという選択肢も選べます）
Astroは従来の常識をことごとく覆しているフレームワークなのです。
親しみやすい
Astro内では様々なコードを書くことができます。
先ほども言った通り、ReactやVueをコンポーネントごとに書くこともできますし、そういったモダンJavaScriptは使わずに、従来のJavaScriptで書くこともできます。
もちろんType Scriptも使えます。
Reactで使われるJSXやVueで使われているCSSスコープもデフォルトで用意されており、画像の最適化なども可能です。
これまでNext.jsやNuxt.jsなどのフレームワークを使ってきた方であれば、同じように使えます。
また、Astroの中にはViteが組み込まれているので、Viteを触ったことがある方も親しみやすいと思います。
これまで様々な知識や経験を積んできたフロントエンジニアなら、そういったものをフルで生かせるフレームワークと言えるでしょう。
アイランド・アーキテクチャ
Astroではコンポーネントをアイランド（島）として扱うことができます。
島ごとに異なるライブラリを使うこともできれば、表示のタイミングを変えることもできます。
例えば、ページの下の方にある優先度の低いアイランドであれば、ユーザーがそこにたどり着いた時に表示させた方が、ページ全体の表示速度は早くなります。
このように島ごとの表示のタイミングを変えることにより、より表示速度の速いページを作ることが可能になります。
マークダウンに対応
ブログなどのテキストが多いときによく使われるマークダウン記法を、Astroはデフォルトでサポートしています。
さらに機能を追加することで、マークダウンファイルの中でJSXが使えるMDXにも対応可能です。
普段からマークダウン記法を使うエンジニアにとっては非常にありがたいです。
問題点
Astroを約２ヶ月ほど使ってみて感じた問題点を挙げていきます。
①情報量が少ない
これは新しい技術を使うときの定番の問題ですね。
検索しても解決策が出てこないというのは非常に困ります。
ただ、Astroの場合は、ReactやVue、Viteで解決できる問題も多いのでまだマシな方かと思います。
困った時はすぐに公式リファレンスに飛ぶのがおすすめです。
アストロ公式リファレンス
https://docs.astro.build/ja/getting-started/
②エラーがわかりにくい
Next.jsの場合は、コードの記述を間違えれば大抵の場合はピンポイントでエラーの箇所を教えてくれますが、Astroはどこがエラーか分からない場合も多々あります。
コードはあっているはずなのにエラーになり、再度立ち上げればエラーが消えているなんてこともありました。
この辺りは今後開発が進むにつれて解消されていくはずですが、フレームワークに慣れていない初心者の方は戸惑うことが多いかもしれません。
まとめ
Astroを約２ヶ月ほど触ってみましたが、今回紹介した以外にもいいと思うところがたくさんありました。
今後のフロントエンドは、アプリ系はNext.js、大抵のWebサイトはAstroでという流れになっていきそうな雰囲気があります。
（移り変わりの早いフロントエンドでは、あっという間に流れが変わるかもしれませんが、、、）
Astroについては今後も開発を進めていくので、どんどん記事を書いていこうと思います。
【Astro公式サイト】
https://astro.build/
記事内でちょくちょく出てきたViteについて、「Viteってなんだ？」と思った方はこちらをどうぞ。
