見出し画像
Photo by mericanadesico

Nuxt3からAstroに乗り換え中の話

桜星

 さんざっぱらサイト改装の話書いてない？って感じではあるのですが、今回は改装の話じゃなくてフレームワークを乗せかえることにしたという話です。今年３回目だよ。そうね。
 （サイトのデザインはそのまま持ってきてるのでほぼ変わってない）（CSSだけちょっと見直しはかけた）

　というわけで以上ふたつの続編です。


きっかけ

 前回の記事にも書いているのですが、私、JavaScriptのことは分からない。
 ふわっとconstがどうちゃらとかこの変数はこれ書換するんだな？とかそういうことは読めるのですが、どうにもこうにもその辺りが分からないので、Nuxt触るのは楽しいけどオーバースペックだよなあ……あと多分もっと知識があれば軽量化できるんだろうけど、今んとこビルドにどんどん時間掛かるようになってるしページも結構重たくなってはいるなあ……（更新書くの自体は今までより楽なんだけど）ということには悩んでいたのでした。
 Nuxt/Contentとかにしたらもうちょっと軽くできるか？楽もできるか？と思いながら眺めていたのですが、ページの動的ルーティングって何……とかいろいろ考えてたら頭が煙を上げてしまい、思考停止していたのでした。
 そんなときにZennだったかQiitaだったかを眺めているときに出会ったフレームワークが、Astroだったのです。

勉強してみる

 何より助かったのが 日本語ドキュメント ！！！！！
 まあ英語でもぽちっと翻訳かけるんですが、もともと日本語ドキュメントに切り替えが可能っていうのは本当に助かるもので。
 ドキュメントを読んでいると「コンテンツ重視」っていう単語にまず惹かれ（小説サイト、ドキュメントの数はがんがん増えていくので……）、Markdownを使うのもさほど難しそうではないこと、JSの知識がなくてもHTMLとCSSを触れさえすればどうにかなりそうなことを理解。じゃあ小説全部マークダウンで書いても許されるのでは？まじで？やったね！くらいの気持ち。
 とりあえずお試ししてみようぜ、読んでても分からんことはやってみようぜ、といういつもの軽いノリで、yarn create astroしてみたのでした。

構成してみる

 とりあえずサイトの再現ができるかどうか？という部分が大事だったので、tailwindcssとdaisyuiは落とさなければならない。
 書かれている通りに"yarn astro add tailwind"を打ってみたのですがなぜかエラー連発で全くインストールできず。仕方がないので"yarn add @astrojs/tailwind tailwindcss"で手動インストール。からのastro.config.mjsの書換。このエラーのときの手動インストール手順もちゃんとドキュメントにあって調べる必要がなくて一人感動する私。
 とりあえずsrcフォルダの中にcomponentsとlayoutsとpagesを作成。ちゃかちゃかととりあえずサイトのインデックスページを流し込んでから"yarn dev -o"。お！なんかうちのサイトっぽくなった！
 となると次はマークダウンをどうするか。ついでにページネーションもうちょっと楽したい……ということで試行錯誤した結果、最終的にこうなりました。

☆ 小説用ページのレイアウトファイル

--
const { title } = Astro.props.frontmatter;
const { frontmatter, url } = Astro.props;
---
～～～ 中略 ～～～
<div class="divider"></div> 
      <slot /> 
<div class="divider"></div> 

  <div class="flex flex-col w-full lg:flex-row">
  <div class="grid flex-grow card rounded-box place-items-center"><a href={frontmatter.prev}>Prev</a></div> 
  <div class="grid flex-grow card rounded-box place-items-center"><a href="/">Home</a></div> 
  <div class="grid flex-grow card rounded-box place-items-center"><a href={frontmatter.next}>Next</a></div>

～～～&emsp;後略&emsp;～～～

☆ 小説用ページのmdファイル

---
layout: '../../layouts/Basetext.astro'
title: '小説タイトル'
subtitle: 'サブタイトル（あれば入れる）'
prev: '../../test01/01/'
next: '../../test01/03/'
---
↓以下本文記載

 JSだかTSだか分かってないけど、こうしておけばページネーションどこだ～？ってページ下部分を探さなくても最初の部分で全部指定できる！ということを……ここでようやく理解する……多分もうちょっと理解が進めばNuxtでも似たようなことできたのでは？分からない……試行錯誤しかできない私には分からない……。ページネーションのなんか説明もあったけどよく分からない……あとこの方法だとビルドしたらURLずれるから数字だけはだめだよ、気を付けて私。あと多分propsのところ間違えてるんだけどなんか動いてるからいいや（いいの？）TSじゃないから型指定いらなかった。消した。
　ページネーション関数あ～るよ！とは書いてあったんですが何回読んでも私には理解できなかった。試してみたんだけど分からなかった。またそのうち……そのうちね……という感じ。
 こんなことをやってる最中にAstroがv3からv4になってあわあわしたのはここだけの話。私の触る範囲は特に変更なさそうでほっとしました。開発活発なんだなあ。
 ひとまずちゃんと動くことは確認して、今度は"yarn build"でHTML&CSSにビルドです。わくわく。
 ……いやはっやいな！？ というのが正直な感想。他に言うことがない。コーヒーブレイクするような時間もなく完了。めっちゃはや。えっこれならページ数ガンガン増えてもそんなに待たなくていいんじゃない？ということで、せっせと乗せ換えを敢行することにしたのでした。

乗せ換え決行

 vueならコンポーネントそのままで使えた？のか？とは思いつつもNuxt3を使っていたものでちょっと不安だったこともあり、その辺りは<NuxtLink to='***'></NuxtLink>を<a href='***'></a>に書き換え、ついでにコンポーネントも見直しをしてちゃかちゃか乗せ換えました。どちらにしろ小説ページをマークダウンで入れ直すからまあいいかと思った。
 まだ小説ページ全部が追いついたわけではないんですが、サイトがめちゃくちゃ軽くなった上に（私の理解がおっついてなかったせいもあるのですが）更新しやすくなって万々歳！あと本当にマークダウンで小説書いても許されるのがありがたい。プラグインでremark breaks入れれば改行タグとかも何も入れなくていいのでらくちん。行頭空白だけ&emsp;にしなきゃいけないからそれだけは面倒だけど。最後にまとめて置換するからいいや。
 Nuxt3に出会っていなければAstroに興味を抱くこともなかっただろうと思うのと、Nuxt3はNuxt3で楽しかったのでまた機会があれば触ってみたいところです。Astro触ってるうちに理解が深まってもっと触れるようになるかもしれない。

今後

 ほんとはGitHubにpushしたらどうちゃらみたいなのやってみたいけどまだまだ全然意味分かんない。しょんぼり。多分今のレンタルサーバーのプランじゃできないかな～っていうのもあるので如何ともし難い。ブログ作るとかで試してみるしかない。チュートリアルのブログ作りやってたら途中から上手く動かなくなったけど……（謎）
 あとサイトいじってばっかいないで小説書いて。それはそう。

参考文献（お世話になりました！）

https://docs.astro.build/ja/getting-started/
https://codecodeweb.com/798
https://higelog.brassworks.jp/4222


この記事が気に入ったらサポートをしてみませんか？