Skip to content

Instantly share code, notes, and snippets.

@dc7290

dc7290/fan-of-astro.md

Last active December 31, 2022 20:26
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dc7290/ee1de400293db2ad999be739ad8fc17d to your computer and use it in GitHub Desktop.
Save dc7290/ee1de400293db2ad999be739ad8fc17d to your computer and use it in GitHub Desktop.
Download ZIP
Astroのいいところ(個人的まとめ)
Raw
fan-of-astro.md

Astroのいいところ

  • islands architecture によって初期で読み込まれるJSサイズが少ない
  • 元々、Webサイト（静的サイト）に特化したフレームワークなので、他のフレームワークと違い使い勝手がいい
    • 言葉では伝えづらいのですが、「これだよこれ！」感がとても強いのです。

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

  • Integrationという統合機能によってプラグインを利用するように開発できる
    • 公式統合も豊富で、中でも @astro/image という画像統合は最高です。
      • ただ、これ使うとmicroCMSにおいてある画像をダウンロードしてローカルに配置ということが簡単にできてしまうので、自発的に紹介する必要はないかも
        • この機能使うと、当たり前ですがビルド時間は激増するのでそれを伝えた上で紹介するのはあり
    • 個人でも astro-fonts-next というNext.jsのフォント最適化をAstroで実現するライブラリも出しています。 https://github.com/dc7290/astro-fonts-next
  • Reactと同じくらいの使用感でコンポーネント開発ができる
    • 自分が簡易的なサイトでもNext.jsを使っていた理由の1つであるJSXでコンポーネントベースで作りたいというニーズをかなり叶えてくれている
  • ReactでもPreactでもVueでもSvelteでもノーマルJSでも使用可能で、組み合わせられる
    • たとえば元々Vueベースで作られているサイトを段階的にReactに変えていくといったことも簡単にできる
    • なんなら.astroファイルを使わずに、ほとんどReactを使って構築することもできちゃう
      • ならNext.jsでいいじゃんと思われがちですが、全てがコンテンツ重視のWebサイトに特化した作りになっているAstroという基盤の中でReactが使えることに価値があります。
        • AstroであればクライアントJSにReactを含めずにビルドできる
          • もちろんランタイムでReactの機能が必要であれば、前述のislands architectureによって必要な箇所にのみ、必要なタイミングで読み込むことができる
            • すごすぎぃぃ！
        • たとえばNext.jsの next export では主要な機能が使えない
          • これは仕方がない。
          • Vercel前提のフレームワークであるし、ランタイムで動くnode.jsサーバーありきのフレームワークである。
  • Reactのサーバーコンポーネントの特徴である先にHTMLスケルトンを送ってから、サーバーサイドでレンダリングしたコンポーネントを遅れて送るという手法に似た思想を感じる
    • 最高。

Astroの辛いところ

  • クライアントフレームワークを含んでいないので、いわゆるCSR(クライアントサイトルーティング)はないので、ページ遷移はSPAに比べるともっさりしがち

    • 一応 サードパーティーの統合ライブラリでastro-spaというものはあります。

    https://github.com/RafidMuhymin/astro-spa

  • JSXに似た記法で書けるとはいうもののテンプレートファイルなので、普通のJSと全く同じように動作しないところで思うようにいかないと感じることもある

    • eslint、prettierの設定は慣れてないと少し難しいかも

AstroとmicroCMSを使ったブログ

https://github.com/dc7290/astro-microcms-blog

※TOPページ、詳細ページ（プレビュー含め）のみとなります。

余談

個人的にWebサイトの開発環境はGulp、Webpack、11ty、Astroと経験してきたのですが、やっと自分の思う最高のWeb制作にあったフレームワークが出てきたという印象です。

https://twitter.com/d_suke_09/status/1564556061243490305

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment