Astro

Description:

優れたパフォーマンスを実現する、コンテンツ主導型の最新Webフレームワーク

GitHub:

Tags:

Explore:

Updated:

2026/01/28

・ コンポーネント・アイランド構成: インタラクティブな部分（島）だけをJavaScriptで動かし、他を静的なHTMLで配信することで、劇的な高速化を実現。
・ サーバーファースト: デフォルトでJavaScriptをクライアントに送信せず、必要なときだけ必要な分だけを読み込む設計。
・ UIフレームワークに依存しない: React, Vue, Svelte, Solid など、お好みのUIライブラリを自由に混ぜて使用可能。
・ コンテンツ管理の最適化: Markdown や MDX、各種CMSとの親和性が高く、ブログやドキュメントサイトの構築に最適。
・ 強力なエコシステム: 画像最適化、サイトマップ生成、SEO対策など、100以上の豊富なインテグレーションを簡単に導入可能。

・ 高速なブログ・メディアサイト: 大量の文字・画像コンテンツを高速に表示する静的サイトの構築。
・ 製品のランディングページ: パフォーマンスとSEOが重視されるマーケティングページの作成。
・ 技術ドキュメントの構築: Starlight 等のテンプレートを活用した、管理しやすく検索性に優れたドキュメントサイト（本サイトもAstro + Starlightを採用）。
・ 多機能なWebアプリケーション: 必要な箇所にのみ React や Vue のインタラクティブ性を組み込んだ、ハイブリッドなWebアプリ。

構築・初期設定

Node.js (v18.17.1 / v20.3.0 以上) が必要です。

# 対話形式でセットアップ
npm create astro@latest

プロジェクト作成後、必要な機能をコマンド一つで追加できます。

# Tailwind CSS を追加
npx astro add tailwind

# React を追加
npx astro add react