🚀

[WIP]Astroをテンプレートエンジンとして使うメリット

2023/03/13に公開約1,000字

Astroとは?

Astroは、コンテンツにフォーカスした高速なWebサイトを構築するためのオールインワンWebフレームワークです。
https://docs.astro.build/ja/concepts/why-astro/

コンセプト

  • コンテンツ重視
    • Astroは、コンテンツが豊富なウェブサイトを構築するために設計されています。

    • 複雑な操作を要求するウェブアプリケーションには向いておらず、その代わりに高いパフォーマンスを得ている
  • サーバーファースト
    • サーバーサイドレンダリングを可能な限り使用し、優れたTTI(Time To Interactive)を実現する
    • → コンテンツをいち早く表示させたい場合に有力
  • デフォルトで高速
    • MPAアーキテクチャに極振りすることで、普通に作るだけで高速
  • 簡単に使える
    • ReactやSvelteのようなUIフレームワークの知識を必要としない(ステートやフックなど)
    • デフォルトでコンポーネントやCSSスコープを使用可能
  • 充実した機能と柔軟性
    • 必要に応じてReactやTailwindCSSなどを追加できる

(本題)テンプレートエンジンとして優れている点

個人的な感想

  • ビルドツールとして内部にVite.jsを採用しているため開発時のホットリロードが非常に高速
  • デフォルトでコンポーネントシステムが用意されているため、独自ルールの運用が必要ない
  • デフォルトでTypeScriptをサポートしているため、補完が効いて開発効率が良い
  • Vite.jsプラグインの資産を活かせる

EJSとの比較

(おそらく)一般的なコーディング環境である gulp + webpack + EJS + SCSS(dart sass) の組み合わせとの比較。上記のテンプレートエンジンとして優れている点と重複する部分もある。

  • メリット
    • 開発時はesbuildによって依存関係が事前ビルドされているためホットリロードが非常に高速
    • gulpのタスク定義のような面倒で煩雑な設定に比べると設定項目がほとんどない
    • コンポーネント構文がデフォルトで用意されており、独自のEJSコンポーネントガイドラインを設定する必要がない(設計とはまた別の話)
    • 積極的に開発されている
  • デメリット
    • pages/ を起点にバンドルするため、JSファイルを個別にコンパイルしたい場合に不向き

Discussion

ログインするとコメントできます