こんにちは
今回見た目はそのままでGatsbyからメタフレームワーク利用率2位*1であるAstroに移行してみたので、簡単に何をしたか解説してみよう！という記事になります
なぜ移行したの？
もともとReactの勉強がしたくて、ブログサイトを作るというゴールがあったので、ただReactを触るんじゃなくて静的サイトに最適なReactフレームワークを使ってみたい！と思った結果、Gatsbyが良さそうだぞという理由で採用しました
しかし、結局Gatsbyへの理解が恐ろしく深まらなかったのに加えて、パフォーマンスのチューニングをするためにどこをいじればいいのか全くわからず、GitHubのIssueが溜まりまくった（全部自分で書いたIssueです）ため、「難しいことはしないんだからもっとシンプルなフレームワークで書き換えて保守を簡単にしよう！」ということで選んだのがAstroでした
そもそもAstroとは？
詳しいことはAstroブログを見ていただけるとわかりやすいかなと思います
https://docs.astro.build/ja/concepts/why-astro/
Astroは、ブログやマーケティング、eコマースなど、コンテンツ駆動のウェブサイトを作成するためのウェブフレームワークです。
と公式が言う通り、ブログやコーポレートサイトなど、コンテンツ主体のウェブサイトを作るのに向いているフレームワークです
とにかくAstroは表示速度にこだわっており、デフォルトでゼロJS（サイト訪問者がJSを実行することがない）なので、高速にページを表示することができます
また、基本的に難しいことをしようとしなければHTMLとCSSさえ理解していればAstroを利用することができます
初心者が初めて触るフレームワークとしてはとても最適だなと思っています（段階的に難しいことに挑戦できるため）
やったこと
ブログを移行するときにやったことを簡単に解説していこうと思います
コード移行
やったことは単純で、コードをとりあえず全部Astroに突っ込んで、ちまちまAstro用に記述を手作業で変えました
具体的には、Gatsbyの処理の部分を適当にAstroのフロントマター（コンポーネントスクリプトとか表現されたりしてる）部分に突っ込み、returnで書いてあった表示部分はそのままAstroの表示部分に突っ込んだだけです
その段階でエラーが出たものやAstroには存在しないReact, Gatsby独自の関数に関してはAstroの該当関数などに置き換えました
基本的に難しいことはしていなかったので、移行が大変な処理などもなく、GatsbyもAstroもJSX記法なのでそのまま使える部分が多かったのがとても助かりました
スタイル移行
スタイルはもともとSCSSファイルを使っていて、FLOCSS記法に則ってディレクトリを作ったりしていました
ただ、最近こういう構造でスタイルを書いているプロジェクトを見ない（というかtailwindとか使ってるものばっかりよく見る）だったり、そもそも使いまわしてないクラスばっかりだったり、使いまわしていたクラスはそもそもコンポーネント化すればよくね？みたいな物が多かったです
なので、基本的にスタイルはコンポーネント内に記述し、共通で使いたいものだけstylesフォルダに入れる、という形に変えました
コンポーネントのスタイルを変えたかったら該当のコンポーネントを開いて修正すればよいだけなので、いちいちスタイルのファイルを切り替えてクラス名修正する、みたいな面倒な手間が発生しなくなったのでとても良いです
SCSSからCSSにした
上記とも繋がるところですが、クラス名で検索するときに結果に出てこないというデカい害があったり、普通のCSSでネスト対応したりしていて、SCSSを使う利点がほとんどないな～と思ったのでこれを機にデフォルトのCSSに戻しました
SCSSの記法に関しては最近無料になったGitHub Copilotに、CSS用の記述に変える作業をしてもらいました
シンタックスハイライトをshikiにした
もともとはhighlight.jsというのを使っていたんですが、Astroにデフォルトで組み込まれているらしいshikiに変えました
microCMSを使っている関係で別途shikiをインストールしていて無駄なことはしています
シンタックスハイライトに関してはほとんど設定なども弄ってなかったので、highlight.jsと比較しても特に「ここが便利！」みたいな感想はないです
目次の処理を変えた
ヘッダーに目次を入れていた関係で、 ポスト詳細画面→親レイアウト→ヘッダー→目次パーツ という流れで記事情報を渡していたのを、slotを使って ポスト詳細画面→親レイアウト→目次パーツ で済むようにしました
まだまだリファクタリングできそうな箇所ではありますが、一旦データのバケツリレーを一箇所減らせただけでもデータを追うのが簡単になるのでやってよかったなと思います
Gatsbyでもできることですが、リファクタリングする気が起きてなかったので、移行で重い腰が上がったということで一応書きました
NetlifyからCloudflare Pagesにした
最近ドメインを買ってこのブログも独自ドメインにしたんですが、DNSの管理とかを最近お名前.comからCloudflareに変更したので、それに合わせてホスティングサービスも一元化しようと思ってNetlifyからCloudflare Pagesに変えました
サイトの操作性だったり機能という点ではやっぱりNetlifyのほうがいいな～と思う一方で、大した機能使ってないのでCloudflareでアナリティクスとかもまとめて見れるのは楽でいいなと思います
サイト保護などもCloudflareのものを使えるので、安心感がありますね
Netlifyと一緒でブランチごとにプレビューが見れるのは良いです
このあとやること
新リッチエディタへの移行
未だに旧リッチエディタを使っているので、新リッチエディタに移行したいです
特にコードブロックのファイル名と言語名を追加しないとまともにコード表示ができないのが痛いです
共有ボタンのサービスを追加
BlueskyとMisskeyらへんに対応しようと思ってます
API使うわけじゃないので比較的簡単に追加できるとは思いますが
デザインを改修する
最近ドメインを取得したのでフロントサイト（大本のドメインのサイトの事を言ってます）のデザインをフロントサイトにあわせて直そうと思います（ベースはそんなに変わらなさそう）
デザインの方向性が大きく違うわけじゃないので、大した修正はないと思いますが、Figmaにもうちょっと慣れたいなと思っているので、ちゃんとFigmaでデザインしてから実装しようかなと思っています
リンクカードを表示できるようにする
ブログ見てると、リンクをテキストじゃなくてカードで表示しているところが多くて、羨ましいので実装します
SEO対策を最低限やる
現時点でどんだけ検索しても検索結果に乗らないので、SEO対策を最低限やろうと思います
検索で引っかからないサイトにどうやって辿り着くんだ
シェアカード（OGPとか）の要素をちゃんと設定する
ツイッターとかに共有する際に、ちゃんとシェアカードみたいなやつが表示されるようにmeta情報を埋め込まないとなと思ってます
頑張ります
Share!