Astroって何？
Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
Astroの特徴
コンテンツ重視
Astroはコンテンツが豊富なWebサイトを構築するのに向いています。例えば、マーケティングサイトやブログなどです。
一方で、世の中にはアプリケーション構築を目的にしたフレームワークも存在します。Next.jsなどがそうです。これらのフレームワークでは、ログイン機能やTODO機能など豊富な機能が要求されます。
AstroはWebアプリケーション向けの用途ではなく、コンテンツ重視のWebサイトを構築することに向いています。
サーバーファースト
Astroはできる限りサーバーでのレンダリングを実行します。これにより描画の高速化を実現することが可能です。ただし、クライアントサイドでの操作が大量に存在する場合、リアクティブな操作が柔軟にできないため、Astro以外の選択肢を検討したほうが良い場合もあります。
デフォルトで高速
デフォルトで非常に高速です。
簡単に使える
従来のフレームワーク(React, Vue)を使ってコンポーネントを作ることができます。また、Astroではサーバー上でのレンダリングを想定されているため、リアクティブといった難しいことを考える必要がありません。
充実した機能と柔軟性
100以上の統合機能を追加して機能拡張をすることが可能です。
Astro環境設定
初期プロジェクトのセットアップもとても簡単です。
必要な要件は以下となります。
- Node.js v16.12.0 またはそれ以上。
以下のコマンドで初期プロジェクトを作成する事ができます。
$ yarn create astro
npm等のコマンドを利用する場合は、公式リファレンスを参照ください。
(Astroを自動CLIでインストール)[https://docs.astro.build/ja/install/auto/]
上記のコマンドを実行すると自動ウィザードに従ってプロジェクトの設定を行います。内容は特に難しいことはないかと思いますが、念の為解説します。
Where would you like to create your new project?
作成するプロジェクトのディレクトリ名を設定します。
How would you like to setup your new project?
どうやってプロジェクトをセットアップするのかを設定します。今回は推奨の「a few best practices」を選択しています。
Would you like to install yarn dependencies?
依存関係をインストールするかどうかですが、インストールすため「y」を入力します。
Would you like to initialize a new git repository?
Gitリポジトリの初期設定を行うかどうかですが、今回は実施しますので「y」を入力します。
How would you like to setup TypeScript?
TypeScriptの設定を行うかどうかを選択します。今回は推奨の「Strict」を選択します。
Astroのプロジェクト構成
Astroのプロジェクト構成に関しては特に難しいことはないと思います。Nuxt.js等のフレームワークに馴染みがある人はすぐに内容を把握できるかと思います。
※公式サイトから引用
それぞれのディレクトリの詳細は以下を参照ください。
ディレクトリ構成
Astroコンポーネント
Astroでは'.astro'拡張子の特別なファイルを使うことができます。
これに関しては、公式リファレンスが非常にわかりやすいため、以下を参照ください。
Astroコンポーネント
ReactやVueにある程度親しみがある人はすぐに内容を把握することができると思います。
その他最低限必要な知識
以下のページの内容についてはある程度把握しておくと良いと思います。
そこまで量がないのですぐに理解できると思います。
- ページ
- レイアウト
-
MarkdownとMDX
- 「Markdownの機能」のセクションまでで良いです。それ以降は必要なときに参照すればOK
- ルーティング
実践
入門用のリポジトリを用意したので、各自で新規作成したプロジェクトを以下のリポジトリを参考に修正してみてください。
https://github.com/papi-tokei/astro-tutorial