Zenn
Closed60

Astroについての調査メモ

Astro
ヤマチューヤマチュー

2022.08.09にv1.0が出たAstroに興味を持ったので、その調査メモ_φ(･_･

https://astro.build/blog/astro-1/

ヤマチューヤマチュー

とりあえず、公式のDocsを眺めてみる
（和訳が充実しているの地味にすごい…。そして感謝）

https://docs.astro.build/ja/getting-started/

ヤマチューヤマチュー
npm create astro@latest

でセットアップ終わるの楽

以下、generate結果の感想

  • 個人的にpakage.jsonの中身がとてもシンプルなの好き
  • .astroファイルの中身は少し不思議な感じ。でも上にJS、下にHTML + CSSという形自体はVueとかに近いものを感じるので個人的には慣れたら好きになりそう
  • 逆に書き方がJS部分が;あり、インデントがタブといったところの方が気になるが、普通に消しても動くのでLinterとかを調整すれば良さそう
  • propsに型が付けれるみたい？
  • ディレクトリ構造はNext.jsやGatsbyみたいな構成でとっつきやすい
  • build結果もちゃんと純粋なHTMLとCSSのみだった
ヤマチューヤマチュー

メンテナンスを完全にサボっているGatsby(v2.x)で作っていたブログを置き換えるのに良さそうなものを選びたいと思っていたので、astroはちょうど良さそう

ヤマチューヤマチュー

基本部分をざっと眺める

ヤマチューヤマチュー

Astroコンポーネント

---
// コンポーネントスクリプト (JavaScript)
---
<!-- コンポーネントテンプレート (HTML + JS Expressions) -->

この書き方はなかなか興味深い
初見のときは違和感があったが、よくよく考えてみると意外と良いかもしれない
定数とかを下に定義して上のテンプレートで使うというVueの書き方は若干読みにくいと思っていたこともあるし、上に定数やpropsが定義されるのは読みやすくなるのかも？

https://docs.astro.build/ja/core-concepts/astro-components/

ヤマチューヤマチュー

またコンポーネントスクリプトで、VueやReactのコンポーネント使えるのも良き

基本的な記述の方法はJSXに近いのでReactを触っていたこともあり、分かりやすい印象
なんとなくVueとReactの良いところをバランス良く取り入れている記法な気がする
（逆に言うとVueとReactの両方を書いたことがない人には若干読みにくいのかも？）

あと地味に<head>を標準で書き換えられるの良き（地味にGatsbyで面倒くさかった印象あったので）

ヤマチューヤマチュー

レイアウトの仕組みはよく使うのであるのは普通に嬉しい（ただ実際にはslot使っているだけ）
入れ子で使うアイデアも好き

一方で、マークダウンでレイアウトを指定して適応させれるのは若干新しい気がした（勉強不足なだけで、他にも既にあるアイデアかもしれないが）

https://docs.astro.build/ja/core-concepts/layouts/

ヤマチューヤマチュー

なかなか充実している
シンタックスハイライトが最初から設定されているのも嬉しいポイント

ただ一方で、独自の記述ができ過ぎる部分がメリットでもありデメリットなのかもしれない
多分、別のシステムに移るときに色々な機能を使いすぎていると、移行が大変になるはず

https://docs.astro.build/ja/guides/markdown-content/

ヤマチューヤマチュー

特徴をざっと眺める

ヤマチューヤマチュー

普通に<img>を埋め込める

https://docs.astro.build/ja/guides/images/

ただし、Astro’s Image Integrationを使うと<img>が使えなくなる
Astro’s Image Integrationは内部的にsharpを使った画像最適をおこなってくれる<Image />と<Picture>を代わりに提供してくれる
自分も似たようなことをGatsbyでプラグインを入れて設定したなぁという思い出

https://docs.astro.build/en/guides/integrations-guide/image/

ヤマチューヤマチュー

Integrationは公式とコミュニティのもの、あと自分で作成もできるみたい
Gatsbyでいうプラグインみたいなものかな？

ヤマチューヤマチュー

TypeScriptも普通に使えそう。セットアップ時にも使うか聞いてくれるし

Astro doesn’t perform any type checking itself. Type checking should be taken care of outside of Astro, either by your IDE or through a separate script. The Astro VSCode Extension automatically provides TypeScript hints and errors in your open files.

ただ、上記のようにAstro自体では型チェックを行わず、VSCodeの拡張機能で指摘してくれる
あとはastro check && tsc --noEmitで型チェックをする方法も紹介されている

https://docs.astro.build/ja/guides/typescript/

ヤマチューヤマチュー

UIフレームワークを色々使えるのは、業務とかでは正直使わない気がする（コストが高そう…）

ただ、飽きっぽい自分の性格にはあっている気もするし、何より実験的にSolidやSvelteをちゃんと書く機会にできそう
あとは気に入ったライブラリが〇〇にしか無い！みたいなときでも対応しやすそうかも？

https://docs.astro.build/ja/core-concepts/framework-components/

ヤマチューヤマチュー

あとリファレンス読んだら1通りは終わり

ヤマチューヤマチュー

ブログの置き換えのために調べたいこと

  • image関係
  • SEO周り
  • analytics
  • adsense
  • pagination
  • sns share btn
  • tag
  • ToC
  • コンテンツの埋め込み

参考リポジトリ

https://github.com/withastro/astro/tree/main/examples/blog

ヤマチューヤマチュー

SEO周り

sitemap

https://docs.astro.build/en/guides/integrations-guide/sitemap/

他にも色々作ってくれている

https://github.com/alextim/astro-lib

ヘッダーのOGPなど

コンポーネントとして作成しているみたい
まぁ、react-helmetよりはシンプルにできそうかな？

https://github.com/withastro/astro/blob/main/examples/blog/src/components/BaseHead.astro

こっちでも良さそう

https://github.com/jonasmerlin/astro-seo#readme

lazy-loaded

https://docs.astro.build/en/guides/integrations-guide/partytown/

圧縮

https://github.com/Playform/astro-compress#readme

インテグレーション

というか、めっちゃ色々あったw

https://astro.build/integrations/performance+seo/

ヤマチューヤマチュー

他の参考になるスクラップ・記事

https://zenn.dev/lima/scraps/d831e9e81cf948

この記事の人、別の記事でastroのコードまで読んでいらっしゃる(ﾟдﾟ)！
https://lealog.hateblo.jp/entry/2022/06/13/143211

ヤマチューヤマチュー

公式の3つのテーマ、どれも良さげなパーツいっぱいある👀

https://github.com/withastro/astro/tree/main/examples/blog

https://github.com/withastro/astro/tree/main/examples/docs

https://github.com/withastro/astro/tree/main/examples/portfolio

ヤマチューヤマチュー

Gatsbyとの比較（個人の経験＆感想）

前に作ったGatsbyとの比較で思ったことをツラツラ書いてみる

  • <a>タグでリンクできるのは便利（Gatsbyは<Link>と<a>の使い分けが必要だったはず）
  • GraphQL使いたいか、使いたくないかで所感が変わりそう
  • CMSとの連携は現状ならGatsbyの方が有利そう
  • Gatsbyのプラグインはgatsby-config.jsの記述が多くて面倒くさかった印象、一方で今の所Astroのインテグレーションはastro.config.mjsが比較的シンプルにできるイメージがある
    • ただし、この部分はカスタマイズ性とかの嗜好で所感が変わりそう
  • Gatsbyはプラグインで拡張していくイメージに対して、Astroは標準で出来ることが多いイメージ
    • これはAstroが0JSを標準にしているからこそ、余分なbuild結果が出力されないため出来ることなのかも？
  • Gatsbyは公式がPWA対策を提供している（Astroも非公式ならインテグレーションがある）
  • Gatsbyはテーマ機能が強めかも（若干WPっぽい親テーマ・子テーマみたいな仕組みがある）
    • あとテーマの種類・クオリティもv2のころよりも良くなっていそうなので強そう
  • 画像周りは使っているライブラリ確か一緒のはずなので同等だと思われる
    →このあたりは若干違っていた。今の所はGatsbyのほうが色々と便利
ヤマチューヤマチュー

そんな中で自分がAstro使う理由としては

  • React以外が書ける試食環境としての役割（SvelteやSolidは興味がある👀）
  • 新しいものへの好奇心

なのかもしれない

ヤマチューヤマチュー

その他

GitHub見ていて気づいたが、地味にturbolinksとかも準備している👀

https://github.com/withastro/astro/tree/main/packages/integrations/turbolinks

SSRにdeno利用できるの凄い
ただ、@astrojs/imageの最初のページに

⚠️ This integration is still experimental! Only node environments are supported currently, stay tuned for Deno support in the future!

とあるから、すぐに採用はできないかもなぁ

https://github.com/withastro/astro/tree/main/packages/integrations/deno

このスクラップは2022/08/27にクローズされました