Web制作用のAstroテンプレートを公開しました
タグ:
テンプレートについて
ダウンロードはこちら
概要
Web制作用のAstroテンプレートです。以下の機能により快適な開発体験を提供します。
- Astroによる優れたパフォーマンスと開発者体験
- 各種リンターによるエラーの即時指摘
- ファイル保存時の自動フォーマット
- commit前のファイルのリント、フォーマット、エラーの検知
Astroについて
端的に言うと、モダンフロントエンドの開発者体験そのままにWeb制作ができるフレームワークです。
State of JS 2022 のRendering Frameworks満足度ランキングでは堂々の1位！同興味ランキングでも1位と、今非常に勢いのあるフレームワークです。
実際に使用してみて思ったことを書いていきます。
抜群の開発者体験
- モジュールバンドラとしてViteを使用しているので、ホットリロードやビルドが非常に高速
- Reactなどのモダンフロントエンドに慣れていれば学習コストほぼゼロ
- サイト上のパーツをコンポーネントとして管理できる！
pagesディレクトリ配下にastroファイルなりmdファイルなりを置いておけば、勝手にルーティングしてくれる- ドキュメントが充実している
といった感じで、開発者体験はめちゃくちゃ良好です。
モダンフロントエンド界隈で発展してきた技術や思想を、その潮流から取り残されていたWebサイト制作界隈にまとめて持ち込んだ、みたいな感じです。今までgulpやwebpack、Vite、Next.jsなんかを使ってなんとかうまくやろうとしてきたWeb制作界隈ですが、Astroによって天下が統一されそうです。
爆速
Astroはビルド時に不要なJSをすべて引き剥がすので、ビルド後のサイトはHTMLとCSSと必要最小限のJSだけになります。そのため、非常に高速なサイトになります。
Less Config
Viteと同様、Astroもconfigがシンプルでわかりやすいです。プラグインも開発されており、プラグインの導入によってビルドしたファイルを圧縮したり、SEOを楽に設定したりできます。静的サイトジェネレータのGatsbyはconfigファイルが3つぐらいあったり、プラグインを使用する際の記述が煩雑だったりして微妙だったので、configがわかりやすいのはありがたいです。
好きなUIライブラリと組み合わせられる
Astroは好きなUIライブラリを組み込むことができます。複数のライブラリの同時使用もできます。サイトの設計的にそれが良いかはともかく、柔軟です。
感想
Astroが良すぎて、このブログもGatsbyから乗り換えてしまいました。結果から言うと乗り換えて大正解でした。Gatsbyもまあ悪くはないんですが、Astroの快適さを知ってしまうとね～という感じです。Web制作者の方はぜひ触ってみることをおすすめします！