米Astro Technology Companyは、JavaScript/TypeScriptに対応するWebフレームワーク「Astro」の新版である「Astro 2.4」を5月4日(現地時間)に公開した。AstroはMITライセンスで公開しているオープンソース・ソフトウェア。
Astroの最大の特徴は、JavaScriptを可能な限りサーバー・サイドで処理し、クライアントには静的なHTMLだけを送信しようとする点にある。クライアント側でのJavaScriptの処理を排除することで、ページの読み込みからユーザーが操作可能になるまでの時間を短縮している。そして、「React」「Preact」「Svelte」「Vue」「SolidJS」「AlpineJS」「Lit」など多様なユーザー・インターフェイス構築用ライブラリを組み合わせて使えることも特徴だ。これらのライブラリのJavaScriptも可能な限りサーバー・サイドで処理する。
「Astro」では従来、コンポーネントのスコープを限定するときに「:where」というセレクタを使用していた。これで、CSSで書いているときと同じような効果を得られていたが、多くの人が期待するようには動作しないこともしばしばあった。
そこでAstro 2.4では、「scopedStyleStrategy」というオプションを導入した。このオプションを使用することで、スコープを厳密に指定することができる。scopedStyleStrategyを使用したスコープ指定は、Astro 3.0からは標準となる予定だ。
そして、エディタ上でのコードの色分け表示に「Shiki 0.11」を使用していたが、今回のバージョンからShiki 0.14を使うようになった。これで新たに色分け表示のテーマを使えるようになり、新しい言語にも対応した。
また、動的にWebページを生成するサイトでも、「@astrojs/sitemaps」を使ってサイトマップを持たせることができるようになった。以前のバージョンでは、「output: 'static'」を指定し、静的に生成したWebサイトでなければサイトマップを持たせることはできなかった。
加えて、「output: 'server'」を使うことでも、Webサイトの事前に分かっている部分のサイトマップを作ることができるようになっている(動的に生成する部分は無視する)。この機能は、設定をほとんど変えることなく利用できる。
Astro 2.4では、実験的な機能も2つ加わっている。1つ目は、リクエストとレスポンスを横取りし、動的にWebサイトの振る舞いを変えることを可能にする「Middleware」だ。この機能を利用するには、「astro.config.mjs」ファイルの「experimental」フラグの「middleware」を「true」に設定する必要がある。Middlewareの機能を利用することで、新規アクセス者をユーザー認証のページに誘導するようなことが可能になる。
さらに、HTMLファイル内にインラインでCSSを記述することも実験的に可能になった。この機能を利用するには、「astro.config.mjs」ファイルの「experimental」フラグの「inlineStylesheets」を「auto」か「always」に設定する必要がある。現時点ではこの部分の標準設定は「never」となっているが、Astro 3.0からは「auto」が標準設定となる予定だ。
この記事は参考になりましたか?
- この記事の著者
-
CodeZine編集部(コードジンヘンシュウブ)
CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です