Astro Together 2024 全部観る

完全に脱線だが、このスクラップのトピックを選択して出てくる Astro のロゴがちょっと古めだったため https://astro.build/press/ にあるものに変更した（Zenn はダークモードがないので黒っぽくなる）:

さらについでに Starlight トピック用のアイコンも申請しておいた。Zenn の仕組み上申請ステータスなどが見られないのでちゃんとできているかわからず若干不安。

イベントの管理は luma でおこなわれた:

https://lu.ma/astro-together-meetup-2024

関係ないが、日本ではイベントの管理が connpass でおこなわれることがなぜか多く、正直異常に体験が悪いため（特に iOS アプリ）、この luma などモダンな代替があれば切り替えていってほしい。Remix Tokyo × Cloudflare Meetup は luma を使っている:

https://lu.ma/wv9xzam7

おそらく Astro Together に合わせて公開されたブログ記事たち:

https://astro.build/blog/future-of-astro-zero-js-view-transitions/
https://astro.build/blog/future-of-astro-content-layer/
https://astro.build/blog/future-of-astro-server-islands/

Fred K. Schott が Astro の現状と未来の話、Ben Holmes が Actions の話、Matthew Phillips が Container API などの話、Sarah Rainsberger が Starlight の話、という流れの模様。いつものメンツという感じで高まるが、地味に matthewp が話しているのをあまり見たことがなかったので新鮮かも。

ついでに彼らの GitHub や Bluesky アカウントを貼っておく:

• Fred K. Schott
  • https://github.com/FredKSchott
  • https://bsky.app/profile/fks.bsky.social
  • https://twitter.com/FredKSchott
• Ben Holmes
  • https://github.com/bholmesdev
  • https://bsky.app/profile/bholmes.dev
  • https://twitter.com/bholmesdev
• Matthew Phillips
  • https://github.com/matthewp
  • https://bsky.app/profile/spooky.click
  • https://twitter.com/matthewcp
• Sarah Rainsberger
  • https://github.com/sarah11918
  • https://bsky.app/profile/sarah11918.rainsberger.ca
  • https://twitter.com/sarah11918

Astro DB の次のステップとして Actions が必要という話。

taintObjectReference や server-only を使ってユーザーが気を付けるのではなく、フレームワークがそれを自動的に防止するべきだよねという話で、非常に頷ける。

FormData の型の扱いがめんどくさいので組み込みでサポートしますよといういい話、これもよくわかる。

React 19 の useFormStatus や useActionState も初日からサポートすると。これは https://astro.build/blog/astro-490/#react-19-support の話かな。正式な docs にこれが書かれていない気がするけどなんでだろう。

React というか Next.js の Actions の微妙なポイントを解消しようとしていて、後発だからできるという感じではあるけど、全体的にやりたいことには納得感がある。

後半は Like ボタンや React 19 の useActionState と組み合わせるフォームのデモ。さらに最後は JS を無効化しても後者のフォームが動くというデモだった。「あれこれって React でも動くんだっけ？」と微妙によくわからなくなったので useActionState を復習しないとな...

React 19 関連の話はやっぱり https://docs.astro.build/en/guides/actions/ にないけど今どういうステータスなんだろう。

この時点での最新版である v4.10 の話の模様。

https://astro.build/blog/astro-4100/

Astro の Design Principles:

HTTP リクエストをリライトする機能が追加された話。Astro コンポーネント内やミドルウェアで使用できる。ミドルウェアの場合は以下のような感じのコードになる:

import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(({ request, url }, next) => {
  if(request.method === 'POST' && url.pathname === '/api') {
    return next('/api/v2');
  }
});

静的生成のパフォーマンス改善の話。Astro Docs を例に、単なる改善で 14m03s -> 5m30s に、そして実験的な Content Collections のキャッシュ機能を使うと 1m09s になったといういい話:

なお左下でめっちゃ喜んでるのが Docs チームの Sarah である。かわいいw

astro:env により環境変数に型を付けたりバリデーションできるというめちゃ嬉しい話。サードパーティのライブラリとか自前実装でなんとかしがちだけど、あったら普通に嬉しいのでフレームワークに入れたのだと思う。ありがたい（使い方も簡単）。現時点では v5-beta のドキュメントに書かれている:

https://5-0-0-beta.docs.astro.build/en/guides/environment-variables/#type-safe-environment-variables

最後は https://docs.astro.build/en/reference/container-reference/ にある Container API の話。Astro コンポーネントをビルドプロセスから独立してレンダリングすることを可能とする API で、現状文字列にレンダリングできる。これを利用して PHP プロジェクト内にアイランド込み（！）で Astro コンポーネントを埋め込むというデモ。ちゃんとカウンターも動いていて素晴らしい。

次は自分も深く関わっている Docs の話。冒頭の Contributors のリスト

に極小サイズだが Fred と Yan に挟まれて登場でき嬉しい 😂

Astro Docs から https://lunaria.dev/ や https://expressive-code.com/ などのツールも生まれてめでたいという話。

そしてメインの Starlight の話に続く。

コードを書く以外に色々なコントリビューションの仕方があるよといういい話。Astro の魅力は個人的にはコミュニティの雰囲気で、こういう色々なところに顔を出して温かい言葉をかけている Sarah の存在は特に重要だと思っている。

最後は以下の動画を流して終わり（これ出演したかった...）:

https://www.youtube.com/watch?v=TtRtkTzHVBU

Push the web forward をモットーにして Astro を開発してきた結果、Core Web Vitals を根拠にパフォーマンス面で牽引できているという話。

• 2021 Island Architecture
• 2022 Content Collections
• 2023 View Transitions

と機能が追加されてきたけど、2024 年はこれらをさらに発展させていく。

View Transitions については、各ブラウザがこれをネイティブにサポートすることを信じてポリフィルを提供してきたけど、とうとう Chrome や Edge などで CSS により動くようになったという話。対応するのは以下の記事:

https://astro.build/blog/future-of-astro-zero-js-view-transitions/

View Transitions、上流の人たちがこういうことができると認識していないのであまり仕事で使う感じにならなかったんだけど、そろそろ自分も使っていきたいなあ。以下のコードで動くらしい:

<style>
  @view-transition {
    navigation: auto;
  }
</style>

続いて Content Layer の話。これは

https://astro.build/blog/future-of-astro-content-layer/

の記事の内容だけど、現在は API が変わっているので注意が必要。

自分もいくつか Content Layer を使ったパッケージを前に作ってみたけど、コンテントのデータソースの自然な拡張となっており普通に素晴らしい機能だと思う。

Server Islands の話:

https://astro.build/blog/future-of-astro-server-islands/

ストリームを使わないので app shell をキャッシュしやすかったり、Next.js の PPR とかと比べて扱いやすいのはいいよなぁと思う。

何より server:defer だけで OK なのは既存のアイランドの延長として受け入れやすいし、こういう API の拡張の仕方が Astro の魅力だと感じる。

これは今までのを全部つなげただけっぽいのでパスでいいかな。

それにしても、DB とかにはほとんど触れず、Astro Studio には一ミリも触れなかったので、この時点で Studio の終了は予定されていた感がある。