カテゴリ内記事一覧ページを作成しました
こんにちは、だいちゃんです。
1年越し？の実装を成し遂げることが出来ました！w
このページ のように、カテゴリごとの記事一覧をまとめたページを作成しました！
このブログを作り始めたのがJavascriptを使い始めた頃ということもあり、基礎もほとんど分かってない状態でいろんなサイトを参考にコピペで作り上げたので、どういう仕組みで動いているのかを自分でもほぼ理解できておらず、ソースも汚いという醜態で、ずっと読み返すことから逃げていたらこんなに時間が経ってしまいました。
なんならJavascriptだけでなくscssも雑すぎて書き直したかったけど、今回は書き直すまで手が回ってませんw
実装内容
全記事の概要を持ってる summary.json を全部見て、いま表示されているページのスラッグと一致するカテゴリを持つ記事だけで配列を作って、その配列を元に画面を作ってる感じです。
毎ページ生成するごとに summary.json を全部調べて配列作るの非効率な気がするんですが、まぁでもレンダリング（HTMLの生成）はローカルで済ませちゃうので今回は良しとします。
変数を直書きできる場所と {{hoge}} で書くべきとこの区別がつかなくてちょいハマりました。template側でも :to= とかだと変数そのまま書いて大丈夫なんですかね？JSの処理をそのまま書けちゃうしいいんだろうなぁ...。こういうところにちゃんと勉強していないツケが効いてる感じがします。
Nuxt 3が来るらしいですね
Vue 3準拠になることで、TypeScriptサポートしたり、スラッグの書き方も変わり、 /static も /public になるなど細かい変更がいろいろありそうです。
リリースされたら使ってみようかなと思っていますが、この調子だとバージョンアップに1年くらい掛けちゃいそうですね（笑）このスピード感でフロントエンドついていけないよねw
今後の展望
今回のアップデートはあまりにも突貫工事すぎるので、いろいろ手直ししてあげる必要があります。
カテゴリ内記事一覧ページのページネーション実装
現状（TOPページで実装されてるページネーション）だと、表示されてない記事がある気がするので、ページネーションのやり方をもう一度考え直したいと思っています。
コンポーネントの再設計
TOPページや記事下にある新着記事の部分、コンポーネントにしてはいるものの汎用性が無くて今回使えなかったので、TOPページ・記事下の新着一覧の部分・カテゴリ内記事一覧ページで使い回せるように再設計したいです。
TOPページや記事からカテゴリ内記事一覧ページへのリンクを設置する
現状は意図的に飛べないようにしてます。もうちょい整ったらTOPから飛べるようにします！
Nuxt 3への対応
JS・SCSSをもうちょいきれいに書き直す。
あと、pugとHTMLが混在してるのもどうにかしたい。
とりあえず、もう少し、せめてページネーションくらいは実装してからmergeする予定なので、しばらくはカテゴリ内記事一覧ページへのリンクは設置しない予定です。...でもページネーションを実装するには、コンポーネントの再設計が必要になりそうなので、結構大工事になるかもしれないですね。
そして、作りながら気づいてはいたけど、 タグ と カテゴリ という名称が混在してるのもどうにかしたいなぁ。
（2022/02/21追記： タグに統一し、記事ページから飛べるように しました！）
