Astroでポートフォリオサイトと簡単なテックブログを作ったので、振り返ってみる

# はじめに
最近Ver2.0がリリースされ、去年度の「The State of JS」でも話題になったフレームワークを使って、
個人に関する2サイトを作ってみたので共有です。

どんな技術かなどの説明は、ドキュメントをご覧ください
大部分が日本語対応しているので、理解しやすいと思います。

https://astro.build/

# 作成者スペック
・業務: Springboot + js、現在新卒です
・非業務: React,Nextjs,astro(すべて勉強中、非業務レベルです)
・資格ちらほらです

# 作ったもの
以下２サイトです（update等で見られなくなっていたら、見逃してください…）
企画含めて、大体１ヶ月半くらいで作りました。
すごいレベル高いものというより、こんな感じならサクッと作れるよ～というところになります。

技術記事のほうはまだあまり書けていないで、ご了承ください。
追記: サーバーの期限切れて、api叩けなくなってるから、多分上のブログ見れませんね…


https://tktechblog.info/
https://portfolio-tk.vercel.app/

# なぜこれらを作ったのか

https://www.amazon.co.jp/SOFT-SKILLS-%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E9%96%8B%E7%99%BA%E8%80%85%E3%81%AE%E4%BA%BA%E7%94%9F%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E7%AC%AC2%E7%89%88-%E3%82%B8%E3%83%A7%E3%83%B3%E3%83%BB%E3%82%BD%E3%83%B3%E3%83%A1%E3%82%BA/dp/4296000500/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=2IS0QCRPARWVB&keywords=soft+skills&qid=1674972037&sprefix=soft+20skills%2Caps%2C154&sr=8-1

上記書籍の内容で、個人でテックブログを作る重要性を強く主張していた、技術的資産を作ることを勧めていたので、素直にそのアドバイスに従ってテックブログを作ってみました。
ポートフォリオサイトは、ブログの中のプロフィール的立ち位置（おまけ）として作ってみました。

Astroを使った理由としては、かなり単純（というか興味本位）で、
Twitter等を見ていたときに、かなりサクサクなサイトを作れるとのことだったので、試しに使ってみました。

また、今回のサイトの種別がJamStackとなりますので、コンテンツフォーカスや簡単に使えることに重きを置いたAstroとの考え方と、親和性が高いように感じており、結論としては使ってよかったなと感じています。

https://docs.astro.build/ja/concepts/why-astro/

# 使用技術
### 共通
・Astro ver1.0で作成、ver2.0にアップグレード済み
・デザインはtailwindcss, daisyUIでサクっと作りました
・理由は後述しますが、デプロイはVercelで行っています。
・Reactのアダプターを使ってはいますが、今回はあまりhooksなどは使わなかった（使う必要もなかった）ので、詳細は割愛
・一応レスポンシブ対応です

### テックブログ
・個人で借りてるサーバー内に作ってあるwordpressサイトの`Wordpress Rest Api` を用いて、オリジナル記事の取得、`Qiita API`を使って、Qiitaで書いた記事の取得をしています。ちなみに前者は、公式も記事を出しております。（内容に従って画像取得しようとしましたが、なぜかできませんでした…いったん放置してます）
・URL内のParameterを使って動的なルーティングを実現したかったので、SSRで作っております

https://docs.astro.build/ja/guides/cms/wordpress/#integrating-with-astro

https://docs.astro.build/en/core-concepts/routing/#server-ssr-mode

### ポートフォリオサイト
・SSGモードで作っています
・GSAPを軽く使っていますが、今回初めて使ったので、あまり凝ったアニメーションは実現しておりません

# 作ってみてよかったこと
・SSRを使わない場合は、Astroのチュートリアルレベルの概念を理解するだけで、サクサクなサイトが作れたので楽でよかったです。Astroのプロジェクト内ディレクトリに「〇〇なファイルを入れればいいんだな」ぐらいの理解でも、かなり書けるかなと思ってます。
・また、ReactのようにコンポーネントとしてUIを管理できるのもよかったです。別にSPAが要件としていらなくて、コンテンツ > 機能なアプリケーションとかならastro一択かなと思います。
・公式、非公式にかかわらず、便利なアダプターも多いので、組み合わせると開発者体験が向上しやすくなるかなと思います。
・ReactなどのほかUIフレームワークを併用できるスキルフルなエンジニアの方なら、さらなるパフォーマンス向上につなげられるかと思います。（そうなりたい）

https://docs.astro.build/ja/guides/integrations-guide/

https://www.npmjs.com/package/astro-compress

# 作ってみてイマイチかも…と思ったこと

順次アップグレード等で解消されれば、うれしいなというところになります。

### SSRでデプロイしようとするとエラーが頻発していた
・当初は`Netlify`でデプロイしようと考えていたのですが、実行ディレクトリ内の`cjs`で
`Top-level await is currently not supported with the “cjs” output format`というエラーが出て、SSRでのデプロイができませんでした。おそらくビルド環境のnodeのバージョンが対応できてはいないのでは？と考え、変更したものの、エラーメッセージは変化ありましたが、如何せん解消できずでした。
・そこで、デプロイ先を`Vercel`に変えていろいろ対応したところ、なぜかSSRでもデプロイができたという運びになります。
・また、Ver2.0にしたところ、`ReferenceError: fetch is not defined`というエラーが出て、なぜかfetchがunsupportedになっていました(呼び出しファイル内で`node-fetch`のfetchを呼び出して解消)
・このようにAdapterやBuild環境次第で対応が必要になる可能性があります。

### `window`オブジェクトが`.astro`で呼び出せない
・動きの出したいサイトを作るためにDOMを扱うライブラリとかだったり、JSの標準APIを使いたいときは、別途`.js`などのファイルを`<head></head>`等で、呼び出してあげる必要があります。`.astro`内で呼び出して使えたらより良いなあと思いました。

https://docs.astro.build/ja/guides/troubleshooting/#%E3%82%88%E3%81%8F%E3%81%82%E3%82%8B%E5%8E%9F%E5%9B%A0

# まとめ、感想
今後に期待できるフレームワークでした。複雑な機能やSPAを必要としないものなら、Astroでいいかもしれませんね

※記事内容に間違い等あれば、ご指摘お願い致します。