コンテンツにスキップ

Astroを選ぶ理由

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。

なぜ他のWebフレームワークではなく、Astroを選ぶのでしょうか？ここでは、Astroを構築した理由、Astroが解決すべき問題、そしてAstroがプロジェクトやチームに最適な理由を説明するための、5つの基本設計原則を紹介します。

Astroは……

セクションタイトル： Astroは……
  1. コンテンツ重視: Astroは、コンテンツが豊富なWebサイトのために設計されています。
  2. サーバーファースト: HTMLをサーバーでレンダリングすることで、Webサイトの動作が速くなります。
  3. デフォルトで高速: Astroで遅いウェブサイトを構築することは不可能です。
  4. 簡単に使える: 専門家でなくても、Astroで何かを構築できます。
  5. 充実した機能と柔軟性: 100以上のAstroインテグレーションから選択できます。

コンテンツ重視

セクションタイトル： コンテンツ重視

Astroは、コンテンツが豊富なウェブサイトを構築するために設計されています。 これには、ほとんどのマーケティングサイト、出版サイト、ドキュメントサイト、ブログ、ポートフォリオ、一部のeコマースサイトが含まれます。

これに対して、最近のほとんどのWebフレームワークは、Webアプリケーションを構築するために設計されています。これらのフレームワークは、ブラウザ上でより複雑な、アプリケーションのような体験を構築するのに適しています。ログインした管理者のダッシュボード、受信トレイ、ソーシャルネットワーク、Todoリスト、さらにはFigmaやPingのようなネイティブに近いアプリケーションもそうです。

これはAstroを理解する上でもっとも重要な違いの1つです。Astroはコンテンツにフォーカスするという独自の立場からトレードオフを行い、アプリケーションにフォーカスしたWebフレームワークでは実装する意味がないような比類ないパフォーマンス機能を提供します。

サーバーファースト

セクションタイトル： サーバーファースト

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）のような重要な指標を含むページパフォーマンスに悪影響を及ぼし、ファーストロードのパフォーマンスが不可欠なコンテンツ重視のWebサイトではあまり意味を成しません。

デフォルトで高速

セクションタイトル： デフォルトで高速

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

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

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

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

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

簡単に使える

セクションタイトル： 簡単に使える

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

まず、すでに知っている好きなUIコンポーネント言語が使えるようにすることから始めました。React、Preact、Svelte、Vue、Solid、Litなどはすべてサポートされており、それを使ってAstroプロジェクトで新しいUIコンポーネントを作成できます。

また、Astroには優れた組み込みコンポーネント言語も用意したいと思い、独自の.astroUI言語を作りました。これはHTMLに大きく影響されています。HTMLの有効なスニペットは、すでにAstroの有効なコンポーネントなのです！しかし、JSX式（React）やデフォルトでのCSSスコープ（SvelteやVue）など、他のコンポーネント言語から借用したお気に入りの機能も兼ね備えています。HTMLに近いことで、プログレッシブエンハンスメントや一般的なアクセシビリティパターンを無理なく簡単に使用できます。

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

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

充実した機能と柔軟性

セクションタイトル： 充実した機能と柔軟性

Astroは、Webサイトを構築するために必要なものがすべて揃ったオールインワンのWebフレームワークです。 コンポーネント構文、ファイルベースのルーティング、アセットハンドリング、ビルドプロセス、バンドル、最適化、データフェッチなど、Astroにはさまざまな機能が搭載されています。Astroのコア機能だけで、優れたウェブサイトを構築できます。

さらにコントロールが必要な場合は、 React、Svelte、Vue、Tailwind CSS、MDXなど、100以上のインテグレーションを使用してAstroを拡張できます。お気に入りのCMSを接続したり、お気に入りのホストにデプロイするのも、コマンド1つでできます。

AstroはUIにとらわれず、自分好みのUIフレームワークを持ち込めます（BYOF: Bring Your Own UI Framework）。React、Preact、Solid、Svelte、Vue、LitはすべてAstroで公式にサポートされています。同じページで異なるフレームワークを混在もでき、将来の移行を容易にし、単一のフレームワークにプロジェクトが固定されるのを防げます。