Astroについての調査メモ
ヤマチュー2022.08.09にv1.0が出たAstroに興味を持ったので、その調査メモ_φ(･_･
ヤマチューとりあえず、公式のDocsを眺めてみる
（和訳が充実しているの地味にすごい…。そして感謝）
ヤマチューnpm create astro@latest
でセットアップ終わるの楽
以下、generate結果の感想
- 個人的にpakage.jsonの中身がとてもシンプルなの好き
-
.astroファイルの中身は少し不思議な感じ。でも上にJS、下にHTML + CSSという形自体はVueとかに近いものを感じるので個人的には慣れたら好きになりそう - 逆に書き方がJS部分が
;あり、インデントがタブといったところの方が気になるが、普通に消しても動くのでLinterとかを調整すれば良さそう - propsに型が付けれるみたい？
- ディレクトリ構造はNext.jsやGatsbyみたいな構成でとっつきやすい
- build結果もちゃんと純粋なHTMLとCSSのみだった
ヤマチューエディターはVSCode推奨みたい？
ヤマチュー以下の3ページを読んだ感想として、アプリ開発向けというよりはWeb制作に近い分野で力を発揮できそうなフレームワークだと感じた
ドキュメントやブログの作成なんかだと割と相性が良さそう
ヤマチューメンテナンスを完全にサボっているGatsby(v2.x)で作っていたブログを置き換えるのに良さそうなものを選びたいと思っていたので、astroはちょうど良さそう
ヤマチューなかなか興味深い👀
ヤマチュー基本部分をざっと眺める
ヤマチューディレクトリ構成
ある程度ルールがあるが、一応configファイルで書き換えられるみたい
感想にも書いたが、よくある構成なので分かりやすい印象
ヤマチューAstroコンポーネント
---
// コンポーネントスクリプト (JavaScript)
---
<!-- コンポーネントテンプレート (HTML + JS Expressions) -->
この書き方はなかなか興味深い
初見のときは違和感があったが、よくよく考えてみると意外と良いかもしれない
定数とかを下に定義して上のテンプレートで使うというVueの書き方は若干読みにくいと思っていたこともあるし、上に定数やpropsが定義されるのは読みやすくなるのかも？
ヤマチューまたコンポーネントスクリプトで、VueやReactのコンポーネント使えるのも良き
基本的な記述の方法はJSXに近いのでReactを触っていたこともあり、分かりやすい印象
なんとなくVueとReactの良いところをバランス良く取り入れている記法な気がする
（逆に言うとVueとReactの両方を書いたことがない人には若干読みにくいのかも？）
あと地味に<head>を標準で書き換えられるの良き（地味にGatsbyで面倒くさかった印象あったので）
ヤマチューAstroでは、基本的にJSはbuild時に消される方向にあるが、以下の方法でJSをbuild後も使える
多分、APIなどで動的な動きを実現する or リッチなアニメーションなどを導入するときには上記の方法を使うことになるのかな
ヤマチューヤマチューレイアウトの仕組みはよく使うのであるのは普通に嬉しい（ただ実際にはslot使っているだけ）
入れ子で使うアイデアも好き
一方で、マークダウンでレイアウトを指定して適応させれるのは若干新しい気がした（勉強不足なだけで、他にも既にあるアイデアかもしれないが）
ヤマチューなかなか充実している
シンタックスハイライトが最初から設定されているのも嬉しいポイント
ただ一方で、独自の記述ができ過ぎる部分がメリットでもありデメリットなのかもしれない
多分、別のシステムに移るときに色々な機能を使いすぎていると、移行が大変になるはず
ヤマチュー柔軟なルーティングができそう
ページ分割、地味にすごい気がする
ヤマチュー充実のラインナップって感じ
Astroは標準で出来ることが良い意味で多い
ヤマチューさらっとのみ目を通した
当たり前だが、Google Firebaseが簡単に使えるみたいで良かった
ヤマチュー特徴をざっと眺める
ヤマチューastro.config.mjsの説明
詳細
ヤマチュー大体よく使うCSSの記法は使えそう
個人的にはTailwindを使いたいので、インテグレーションを試してみたが
npm run astro add tailwind
でセットアップが終わるの普通に感動
ヤマチュー個人的にはあまり使わないけど、フォントも自由に変えられそう
アクセントで使うのも良いかもね
ヤマチューfetch()が使えるよう
ただ、このfetchってブラウザのfetchなの？という感じ（Nodeビルトインの解説見る感じ、node側のfetchとは違いそうだけど）
ヤマチューimport.meta.env初めて聞いたので、勉強になった
.envで調整できるのも最近は割と普通だと思うけど、やっぱり標準であるのは嬉しい
ヤマチュー普通に<img>を埋め込める
ただし、Astro’s Image Integrationを使うと<img>が使えなくなる
Astro’s Image Integrationは内部的にsharpを使った画像最適をおこなってくれる<Image />と<Picture>を代わりに提供してくれる
自分も似たようなことをGatsbyでプラグインを入れて設定したなぁという思い出
ヤマチューエイリアス懐かしい。Vueでよく設定したなぁという思い出
VSCodeにも統合されるようだし、普通に良さそう
ヤマチューIntegration
npx astro add xxx
で設定が完了するので、本当に便利
ヤマチューIntegrationは公式とコミュニティのもの、あと自分で作成もできるみたい
Gatsbyでいうプラグインみたいなものかな？
ヤマチューRSSもある
静的にも動的にも対応できるっぽい？（動的にするならSSRもいるっぽい）
ヤマチュー結構いろいろ出来そう。思ったよりもアプリっぽいことができるみたい
これだけ機能があるなら、WPっぽいことくらいなら大体できるのでは？
ヤマチュー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で型チェックをする方法も紹介されている
ヤマチューUIフレームワークを色々使えるのは、業務とかでは正直使わない気がする（コストが高そう…）
ただ、飽きっぽい自分の性格にはあっている気もするし、何より実験的にSolidやSvelteをちゃんと書く機会にできそう
あとは気に入ったライブラリが〇〇にしか無い！みたいなときでも対応しやすそうかも？
ヤマチューVueやReactでいうところのContextみたいなものとして、Nano Storesを使うらしい
ヤマチューあとリファレンス読んだら1通りは終わり
ヤマチューブログの置き換えのために調べたいこと
- image関係
- SEO周り
- analytics
- adsense
- pagination
- sns share btn
- tag
- ToC
- コンテンツの埋め込み
参考リポジトリ
ヤマチューimage
@astrojs/imageで良さそう
pagination & tag
paginationは標準の機能で存在している
tagも動的ルーティングを工夫すれば普通にリンクが作れるのでいけそう
こんなのもあった
まるでWPのプラグインみたいだな
ヤマチューSEO周り
sitemap
他にも色々作ってくれている
ヘッダーのOGPなど
コンポーネントとして作成しているみたい
まぁ、react-helmetよりはシンプルにできそうかな？
こっちでも良さそう
lazy-loaded
圧縮
インテグレーション
というか、めっちゃ色々あったw
ヤマチューanalytics
普通にあるのね👀
中身はただのwrapperみたいだから使わなくても良いけど、悪くはない
adsense
adsenseも基本的にはanalyticsと同じ考え方で良い気がする
最悪、前のブログのコンポーネント持ってくれば良い
ヤマチューToC
これもいけるのか、スゴ
ヤマチューsns share btn
流石にastroの方にはなさそう
でもreact-shareとか有名所使っちゃえば良さそう
コンテンツの埋め込み
Zennが対応しているみたいなやつ
作る or 探すみたいになりそうなのかな？
ヤマチュー他の参考になるスクラップ・記事
この記事の人、別の記事でastroのコードまで読んでいらっしゃる(ﾟдﾟ)！
ヤマチューlinter周りについて
eslintはコミュニティ、prettierは公式が出しているっぽい
ヤマチュー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関係ないけど、技術記事を書くならこれ入れると良さそう👀
ヤマチューその他
GitHub見ていて気づいたが、地味にturbolinksとかも準備している👀
SSRにdeno利用できるの凄い
ただ、@astrojs/imageの最初のページに
⚠️ This integration is still experimental! Only node environments are supported currently, stay tuned for Deno support in the future!
とあるから、すぐに採用はできないかもなぁ
ヤマチューStorybookにissueが上がっていたから人気次第かもしれないが、そのうちAstroコンポーネントもStorybookで利用できるようになるのかも