Astroを選ぶ理由

Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。Astroは、新しいフロントエンドアーキテクチャを開拓し、他のフレームワークと比較してJavaScriptのオーバーヘッドと複雑さを低減することで知られています。高速でSEOに優れたウェブサイトが必要なら、Astroが最適です。

特徴

Astroはオールインワンのウェブフレームワークです。 Astroには、ウェブサイトを作成するために必要なすべてが組み込まれています。また、さまざまなインテグレーションやAPIフックがあり、プロジェクトを自分のユースケースやニーズに合わせてカスタマイズできます。

特筆すべき点は以下の通りです。

アイランド: コンテンツ駆動のウェブサイトに最適化されたコンポーネントベースのウェブアーキテクチャです。
自由なUI: React、Preact、Svelte、Vue、Solid、Lit、HTMX、ウェブコンポーネントなどをサポートしています。
サーバーファースト: 重いレンダリング処理をサイト訪問者のデバイスから取り除きます。
デフォルトでゼロJS: サイトの読み込みを遅くするクライアントサイドのJavaScriptを減らします。
コンテンツコレクション: Markdownコンテンツを整理、検証し、TypeScriptの型安全性を提供します。
カスタマイズ可能: TailwindやMDXなど、100以上のインテグレーションから選択できます。

設計原則

以下は、Astroを作成した理由、Astroが解決する問題、Astroがプロジェクトやチームにとって最良の選択肢となるであろう理由を説明するための、5つの核となる設計原則です。

Astroは…

コンテンツ駆動: Astroは、コンテンツを上手く表示するために設計されています。
サーバーファースト: HTMLをサーバーでレンダリングすることで、ウェブサイトの動作が速くなります。
デフォルトで高速: Astroで遅いウェブサイトを作成することは不可能であるべきです。
簡単に使える: 専門家でなくても、Astroで何かを作成できます。
開発者を重視: 目的を達成するために必要なリソースが揃っているべきです。

コンテンツ駆動

Astroは、コンテンツが豊富なウェブサイトを構築するために設計されています。 これにはマーケティングサイト、出版サイト、ドキュメントサイト、ブログ、ポートフォリオ、ランディングページ、コミュニティサイト、eコマースサイトが含まれます。見せるべきコンテンツがあるなら、読者に素早く届ける必要があります。

これに対して、モダンなウェブフレームワークの多くは、ウェブアプリケーションを作成するために設計されています。これらのフレームワークは、ブラウザ上におけるより複雑な、アプリケーションのような体験を作成するのに適しています。ログインした管理者向けのダッシュボード、受信トレイ、ソーシャルネットワーク、Todoリスト、さらにはFigmaやPingのようなネイティブに近いアプリケーションなどがその例です。しかし、その複雑さゆえに、コンテンツを配信する際に優れたパフォーマンスを発揮するために苦労するかもしれません。

Astroは、その初期から静的サイトジェネレータとしてコンテンツに焦点を当ててきたため、コンテンツと読者を尊重しながら、パフォーマンスとパワーに優れた動的なウェブアプリケーションへと適切にスケールアップできます。Astroは、コンテンツにフォーカスするという独自の立場から、トレードオフを考慮しつつ、アプリケーションにフォーカスしたウェブフレームワークでは実装する意味がないようなパフォーマンス向上に取り組んでいます。

サーバーファースト

Astroは、ブラウザ上のクライアントサイドのレンダリングよりも、サーバーでのレンダリングを可能な限り活用します。 これは、従来のサーバーサイドフレームワーク（PHP、WordPress、Laravel、Ruby on Railsなど）が何十年も使ってきたアプローチと同じです。しかし、そのために2つ目のサーバーサイド言語を学ぶ必要はないのです。Astroでは、すべてがHTML、CSS、JavaScript（お好みでTypeScript）だけでいいのです。

このアプローチは、Next.js、SvelteKit、Nuxt、Remixなど、他のモダンなJavaScriptウェブフレームワークとは対照的です。これらのフレームワークは、ウェブサイト全体をクライアントサイドレンダリングすることを念頭に作成されており、サーバーサイドレンダリングは主にパフォーマンス上の懸念へ対処するために行われます。このアプローチはシングルページアプリケーション（SPA: Single Page App）と呼ばれ、Astroのマルチページアプリケーション（MPA: Multi Page App）アプローチと対照的です。

SPAモデルにも利点はあります。しかし、その代償として、さらなる複雑さとパフォーマンスのトレードオフが生じます。これらのトレードオフは、インタラクティブになるまでの時間（TTI: Time To Interactive）のような重要な指標を含むページパフォーマンスに悪影響を及ぼし、ファーストロードのパフォーマンスが不可欠なコンテンツ重視のウェブサイトでは問題となる可能性があります。

Astroのサーバーファーストアプローチでは、必要な場合にのみ、クライアントサイドレンダリングも選択できます。また、クライアントで実行されるUIフレームワークコンポーネントの追加も可能です。Astroのビュートランジションルーターを使用して、選択したページの遷移やアニメーションをより細かく制御できます。Astroの事前レンダリングとオンデマンドのサーバーファーストレンダリングは、高パフォーマンスで拡張可能なデフォルトを提供します。

デフォルトで高速

優れたパフォーマンスは常に重要ですが、コンテンツの表示に成功が左右されるウェブサイトではとくに重要です。パフォーマンスが低いと、エンゲージメント、コンバージョン、お金が失われることは、十分に証明されています。たとえば、次のような例があります。

高速化100msごと → コンバージョン数1％増（Mobify、年間38万ドルの収益）
50%高速化 → 売上12%増（AutoAnything）
20%高速化 → コンバージョン数10%アップ（Furniture Village）
40%高速化 → サインアップ15%増（Pinterest）
850ms高速化 → コンバージョン数7%増（COOK）
1秒遅くなるごと → ユーザー数が10%減少（BBC）

多くのウェブフレームワークでは、開発時には見栄えのするウェブサイトを作成できても、デプロイされるとロードがひどく遅くなることがよくあります。これはJavaScriptが原因であることが多く、というのも、ほとんどの携帯電話や低消費電力デバイスは、開発者のノートパソコンのスピードには及ばないためです。

Astroの魅力はコンテンツ重視とサーバーファーストのアーキテクチャという、上で説明した2つの価値を組み合わせることでトレードオフを行い、他のフレームワークでは不可能な機能を提供している点です。その結果、あらゆるウェブサイトで、何もせずとも驚くようなウェブパフォーマンスを発揮できるのです。私たちの目標は、Astroを使えば、遅いウェブサイトを作るのはほぼ不可能になることです。

Astroのウェブサイトは、もっとも人気のあるReactウェブフレームワークで構築された同じサイトよりも、90%少ないJavaScriptで40%速く読み込むことができます。Solid.jsとMarkoの開発者であるRyan Carniatoが言葉を失うほどのAstroのパフォーマンスを見てください。

簡単に使える

Astroの目標は、すべてのウェブ開発者が利用できることです。 Astroは、ウェブ開発のスキルレベルや過去の経験に関係なく、親しみやすいと感じられるように設計されています。

.astro UI言語は、HTMLのスーパーセットです。有効なHTMLはすべて、有効なAstroテンプレート構文です！つまり、HTMLを書けるなら、Astroコンポーネントも書けるということです！一方で、ReactのJSX式や、SvelteやVueのCSSスコープなど、他のコンポーネント言語から借りてきた人気の機能もデフォルトで兼ね備えています。HTMLに近いため、プログレッシブエンハンスメントや一般的なアクセシビリティパターンを、そのまま簡単に使用できます。

また、すでに知っているお気に入りのUIコンポーネント言語を使えるようにしたり、すでに手元にあるコンポーネントを再利用したりできるようにもしてあります。React、Preact、Svelte、Vue、Solid、Lit、さらにはウェブコンポーネントまですべてサポートされており、それを使ってAstroプロジェクトで新しいUIコンポーネントを作成できます。

Astroは、他のUIフレームワークや言語よりも複雑でないように設計されています。その大きな理由のひとつは、Astroがブラウザ上ではなく、サーバー上でレンダリングするように設計されていることです。つまり、hooks（React）、stale closures（同じくReact）、refs（Vue）、observables（Svelte）、atoms、セレクター、リアクション、デリバティブなどを気にする必要がないのです。サーバーにはリアクティビティがないので、そのような複雑なものはすべて溶けてなくなります。

私たちの好きな言葉のひとつに、「複雑さへのオプトイン」というものがあります。Astroは、開発者の体験から「必要な複雑さ」を可能な限り取り除くように設計されています。Astroでは、HTMLとCSSだけで、「Hello World」のようなサンプルサイトを構築できます。そして、より強力なものを構築する必要があるときは、新しい機能やAPIに段階的に手を伸ばせます。

開発者を重視

Astroのプロジェクトとしての成功は、Astroが人々から愛用されてこそ初めて得られるものであるということを、私たちは強く信じています。Astroには、Astroを使用するにあたって必要なものがすべて揃っています。

Astroは、ターミナルを開いてすぐに得られる優れたCLI体験、シンタックスハイライトのための公式VS Code拡張機能、TypeScriptとインテリセンス、そしてコミュニティの何百人ものコントリビューターによって積極的にメンテナンスされ14の言語で提供されているドキュメントなど、開発者向けのツールに投資しています。

互いを歓迎し尊重する、インクルーシブなDiscordコミュニティでは、サポートやモチベーション、励ましを提供することを惜しみません。プロジェクトのサポートを得るために#supportスレッドを開いてみてください。Astroサイト、ブログ記事、動画、さらには進行中の作業を、安全なフィードバックと建設的な批判を求めて共有するための、専用の#showcaseチャンネルにアクセスしてください。週次のコミュニティコールである「Talking and Doc’ing」やAPI/バグバッシュなど、定期的なライブイベントに参加しましょう。

オープンソースプロジェクトとして、あらゆる経験レベルのコミュニティメンバーからの、あらゆる種類と規模の貢献を歓迎します。Astroの将来を形作るためのロードマップの議論に参加してみてください。そして、コアコードベース、コンパイラ、ドキュメント、言語ツール、ウェブサイト、その他のプロジェクトに、修正や機能追加による貢献をしてもらえれば幸いです。

GitHub Issueを作成

フィードバックを送信