Takoyaki

Web Developer

  1. Home
  2. Blog
  3. Astroの特徴と仕組みをやさしく解説

Astroの特徴と仕組みをやさしく解説

Astroの特徴と仕組みをやさしく解説

この記事では、「Astro」について解説していきます。私も最近学習したので、理解をより深めるべく、アウトプットしたいと思います。

Astroとは？

Astroは、高速なウェブサイトを簡単に作るためのウェブフレームワークで、静的サイトジェネレーター（SSG：Static Site Generator）の一つです。
コンテンツ中心のウェブサイトの構築に適しています。

Astro公式サイト

主な特徴

  1. 基本的にはMPA（Multi Page Application）とSSG（Static Site Generation）が採用されている
  2. 高速なパフォーマンス
  3. SEOフレンドリー
  4. 他のフレームワークを組み合わせて使える
  5. 割と簡単に始められる

そもそも、MPA/SPAとは？

MPA/SPAとは、アプリケーションのアーキテクチャ（構造）を示す用語です。それぞれの特徴を解説します。

MPA (Multi Page Application)

  • 複数のHTMLファイルで構成
  • ページ遷移のたびに新しいHTMLを読み込む
  • 従来型のウェブサイト構造（index.htmlと、about/index.htmlと、service/index.htmlを準備しておくような構造）
  • MPAを採用している代表的なフレームワークは、Astro、Next.js、Nuxt.jsなど

お弁当屋さんに例えるならば、あらかじめ全メニュー分のお弁当を作っておいて、のり弁当の注文があったら、用意しておいたのり弁のお弁当箱を渡す。
次に、「やっぱり幕の内弁当がいい！」と注文があったら、また用意しておいた幕の内弁当のお弁当箱を渡すイメージです。

SPA (Single Page Application)

  • 単一のHTMLファイルで構成
  • JavaScriptで画面を書き換える
  • モダンな（イマドキな）ウェブアプリケーション構造
  • SPAを採用している代表的なフレームワークは、React、Vue.js、Next.js、Nuxt.jsなど

お弁当屋さんに例えるならば、空のお弁当箱だけ用意しておいて、のり弁当の注文があったらお弁当箱の中にのり弁を作る。
次に、「やっぱり幕の内弁当がいい！」と注文があったら、すでにのり弁が入っていたお弁当箱の中身を、幕の内弁当に作り替えるイメージです。

そもそも、SSG/SSR/CSRとは？

SSG/SSR/CSRとは、レンダリング（HTMLを生成する）手法を示す用語です。それぞれの特徴を解説します。

SSG（Static Site Generation：静的サイト生成）

  • HTMLを事前に生成する形式
  • SSGを採用している代表的なフレームワークは、Astro、Next.js（SSGモード）、Nuxt.js（SSGモード）
  • ブログやドキュメントサイトの構築に適している

お弁当屋さんに例えるならば、お弁当を事前に作っておき、お客さんが来たらそれを売るイメージです。

SSR（Server Side Rendering：サーバーサイドレンダリング）

  • アクセス時のHTML生成を、サーバー側で行う形式
  • SSRを採用している代表的なフレームワークは、Next.js、Nuxt.js
  • ECサイトや動的コンテンツが多いサイトの構築に適している

お弁当屋さんに例えるならば、お客さんが来たら、裏の厨房で注文のお弁当を完成させて、それを売るイメージです。

CSR（Client Side Rendering：クライアントサイドレンダリング）

  • アクセス時のHTML生成を、クライアントサイド（ユーザーのブラウザ）で行う形式
  • CSRを採用している代表的なフレームワークは、React、Vue.js
  • 管理画面やダッシュボード、SNSなど、Webアプリケーションの構築に適している

お弁当屋さんに例えるならば、お客さんが来たら、お客さんのお弁当箱の中で、注文のお弁当を完成させるイメージです。（全く現実的ではないw）

Astroはなぜ高速なパフォーマンスを発揮するのか？

前述の通り、SSG（Static Site Generation：静的サイト生成）を採用しているため、ユーザーがアクセスする前から事前にHTMLが生成されており、高速な初期表示ができます。

お弁当屋さんの例も挙げましたが、事前にお弁当を作ってショーケースに並べておけば、お客さんが来たらすぐに提供できますよね！

AstroはSEOフレンドリー

MPAとSSGを採用しているため、Googleなどの検索エンジンが、サイトの内容を読み取りやすい構造になっています。
SPAのように、JavaScriptで後から内容を生成する方式と比べて、検索エンジンが内容を理解しやすいという訳です。

また、検索エンジンは、表示速度の速いサイトを高く評価するため、高速なパフォーマンスを発揮するAstroは評価されやすくなります。

Astroは「検索エンジンに見つけてもらいやすいサイト」を作るのが得意なフレームワークと言えるでしょう。

Astroは他のフレームワークを組み合わせて使える

ReactやVueなどの他のフレームワークと組み合わせて開発ができます。
例えば、同じプロジェクトの中で：

  • ヘッダーをReactで作成
  • サイドバーをVueで作成
  • フッターをSvelteで作成

というような、混ぜ合わせた開発が可能です。

また、アイランドアーキテクチャ（Islands Architecture）と呼ばれる技術により、動的な要素が必要な部分だけを、指定したフレームワークで動的に表示できます。
「大半はSSG（静的）だけど、ここはCSR（動的）にしたい！」ということが可能ということです。

（私はReactやVueなどの経験がないため、あまりピンと来ていません…汗）

とりあえず、Astroは「いろいろなフレームワークのいいとこ取り」ができる、柔軟なフレームワークであると言えますね。

Astroは割と簡単に始められる

HTMLとCSSの知識があれば、割と簡単にAstroでの開発を始められます。
私自身、まともにAstroの勉強を始めてから2〜3日ほどで、このポートフォリオを作成することができました。

公式のドキュメントが充実していたので、学習手順が分かりやすかったです。
初めてのAstroブログ（Astroチュートリアル）

たにぐちまことさんのUdemyも参考にしました。
ちゃんと学ぶ、Astro（たにぐちまことさんUdemy）

まとめ

Astroは、高速なウェブサイトを簡単に作るためのウェブフレームワークです。
主な特徴は以下の5つです：

  1. 基本的にはMPA（Multi Page Application）とSSG（Static Site Generation）が採用されている
  2. 高速なパフォーマンス
  3. SEOフレンドリー
  4. 他のフレームワークを組み合わせて使える
  5. 割と簡単に始められる

特に、ブログやドキュメントサイトなど、静的コンテンツが中心のウェブサイトを作成する場合に、Astroは非常に効果的な選択肢となります。
初心者にも扱いやすく、かつ高度な機能も備えているため、幅広いニーズに対応できるフレームワークと言えるでしょう。

参考

Back to List

Contact