はじめに
プロジェクトでAstroを使うことになったので軽くドキュメントの内容をまとめてみました。
Astroとは
Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
(https://docs.astro.build/ja/concepts/why-astro/)
Astroは高度なWebアプリケーションを構築するために設計されたフレームワーク(Next.jsなど)とは異なり、ブログやポートフォリオサイトといった静的なWebサイトを作るのに向いています。
Astroはサーバーサイドでのレンダリングをメインとしており、この点も最近のJSフレームワークと異なる点となっています。
サーバーサイドでのレンダリングのおかげでパフォーマンスの向上にも期待ができる。
フロントエンドを触る人には周知の事実かも入れないが一応このような事例がある。
- 高速化100msごと → コンバージョン数1％増（Mobify、年間38万ドルの収益）
- 50%高速化 → 売上12%増（AutoAnything）
- 20%高速化 → コンバージョン数10%アップ（Furniture Village）
- 40%高速化 → サインアップ15%増（Pinterest）
- 850ms高速化 → コンバージョン数7%増（COOK）
- 1秒遅くなるごと → ユーザー数が10%減少（BBC）
(作りたいアプリやサイトに応じてどのフレームワークを採用するかが1番重要！！)
Astroのメリット
- 簡単に始めることができる
以下のコードを見てもらえればわかるように基本的なHTML,CSS,JSを学べばすぐに開発を始めることができる。
---
---
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} >
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
</body>
</html>
また、AstroにはAstroアイランドという独自の概念がありJSフレームワーク(React,Vue,Svelte...)の使用を網羅している。
---
// 例: 同じページで複数のフレームワークのコンポーネントを混在させる
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';
import MyVueComponent from '../components/MyVueComponent.vue';
---
<div>
<MySvelteComponent />
<MyReactComponent />
<MyVueComponent />
</div>
JSを使いたい時には自由にパッケージを追加してお好みのフレームワークで開発を進めることができる。
(JSフレームワークを使わなくてもコンポーネント同士でpropsを渡したりすることができる)
---
import GreetingHeadline from './GreetingHeadline.astro';
const name = "Astro"
---
<h1>グリーティングカード</h1>
<GreetingHeadline greeting="やぁ" name={name} />
<p>素敵な一日をお過ごしください！</p>
---
const { greeting, name } = Astro.props;
---
<h2>{greeting}、{name}！</h2>
ひとつのページの中にこの部分は静的コンテンツで、反対にこっちは動的コンテンツで実装というように混ぜて開発ができる、これをAstroアイランドという。
終わりに
今回は簡単な概念の説明になってしまいましたが、次回からセットアップを行い簡単なWebサイトを作っていくので次回も読んでいただけたら嬉しいです