はじめに
最近Ver2.0がリリースされ、去年度の「The State of JS」でも話題になったフレームワークを使って、
個人に関する2サイトを作ってみたので共有です。
どんな技術かなどの説明は、ドキュメントをご覧ください
大部分が日本語対応しているので、理解しやすいと思います。
作成者スペック
・業務: Springboot + js、現在新卒です
・非業務: React,Nextjs,astro(すべて勉強中、非業務レベルです)
・資格ちらほらです
作ったもの
以下２サイトです（update等で見られなくなっていたら、見逃してください…）
企画含めて、大体１ヶ月半くらいで作りました。
すごいレベル高いものというより、こんな感じならサクッと作れるよ～というところになります。
技術記事のほうはまだあまり書けていないで、ご了承ください。
追記: サーバーの期限切れて、api叩けなくなってるから、多分上のブログ見れませんね…
https://tktechblog.info/
https://portfolio-tk.vercel.app/
なぜこれらを作ったのか
上記書籍の内容で、個人でテックブログを作る重要性を強く主張していた、技術的資産を作ることを勧めていたので、素直にそのアドバイスに従ってテックブログを作ってみました。
ポートフォリオサイトは、ブログの中のプロフィール的立ち位置（おまけ）として作ってみました。
Astroを使った理由としては、かなり単純（というか興味本位）で、
Twitter等を見ていたときに、かなりサクサクなサイトを作れるとのことだったので、試しに使ってみました。
また、今回のサイトの種別がJamStackとなりますので、コンテンツフォーカスや簡単に使えることに重きを置いたAstroとの考え方と、親和性が高いように感じており、結論としては使ってよかったなと感じています。
使用技術
共通
・Astro ver1.0で作成、ver2.0にアップグレード済み
・デザインはtailwindcss, daisyUIでサクっと作りました
・理由は後述しますが、デプロイはVercelで行っています。
・Reactのアダプターを使ってはいますが、今回はあまりhooksなどは使わなかった（使う必要もなかった）ので、詳細は割愛
・一応レスポンシブ対応です
テックブログ
・個人で借りてるサーバー内に作ってあるwordpressサイトのWordpress Rest Api を用いて、オリジナル記事の取得、Qiita APIを使って、Qiitaで書いた記事の取得をしています。ちなみに前者は、公式も記事を出しております。（内容に従って画像取得しようとしましたが、なぜかできませんでした…いったん放置してます）
・URL内のParameterを使って動的なルーティングを実現したかったので、SSRで作っております
ポートフォリオサイト
・SSGモードで作っています
・GSAPを軽く使っていますが、今回初めて使ったので、あまり凝ったアニメーションは実現しておりません
作ってみてよかったこと
・SSRを使わない場合は、Astroのチュートリアルレベルの概念を理解するだけで、サクサクなサイトが作れたので楽でよかったです。Astroのプロジェクト内ディレクトリに「〇〇なファイルを入れればいいんだな」ぐらいの理解でも、かなり書けるかなと思ってます。
・また、ReactのようにコンポーネントとしてUIを管理できるのもよかったです。別にSPAが要件としていらなくて、コンテンツ > 機能なアプリケーションとかならastro一択かなと思います。
・公式、非公式にかかわらず、便利なアダプターも多いので、組み合わせると開発者体験が向上しやすくなるかなと思います。
・ReactなどのほかUIフレームワークを併用できるスキルフルなエンジニアの方なら、さらなるパフォーマンス向上につなげられるかと思います。（そうなりたい）
作ってみてイマイチかも…と思ったこと
順次アップグレード等で解消されれば、うれしいなというところになります。
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内で呼び出して使えたらより良いなあと思いました。
まとめ、感想
今後に期待できるフレームワークでした。複雑な機能やSPAを必要としないものなら、Astroでいいかもしれませんね
※記事内容に間違い等あれば、ご指摘お願い致します。