続・個人サイトを改装した話

　あなた３か月くらい前にしばらくこれで行くって言ったのにまた改装したの？　　
　はい。

　もともと私すごい改装魔なんですよね……飽き性だからね……。
　……というわけでこのエントリの続きです。

今回のサイトの見た目

……はこんな感じになりました。

https://squall.velvet.jp/

　使用しているのはNuxt3＋tailwindcss＋daisy UI。やりながら「あれもいらーんこれもいらーん　全部消しちゃえ～　えいっ☆」ってなってたのでページ構成としてはとってもシンプルです。作品倉庫にできればそれでいい。
　そもそも今回改装すっか～ってなったのは本日で個人サイト運営始めて１８年とか経ってたからです。こわ……。
　１８年もやってる割に作品下げたり下げたりしてるのでめっちゃ作品数少ないんですけど、まあ今後は……増えるんじゃない？知らんけど……。

　あとは蛇足の話。

改装にとりかかったきっかけ

　そう、今回、Nuxt3＋tailwindcss＋daisy UIで組んでるんですよ。

　話は前回改装まで遡るのですが、前回はCSSフレームワークにUIKit3を選んで構築してました。そのときにCSSフレームワーク探しててtailwindcssにも出会ってたんですけど、使い方全然分かんなかったんですよね。

「npm install -D tailwindcss」って……何？

　そういえばUIKit3にも

pnpm add uikit

　って書いてた。これ、何？
　っていうのがどうにもずっと引っ掛かっていて、ちょうど時間があるタイミングがあったのでちょっと調べてみよう、が始まったんですよ。

「node.jsダウンロードしてきて？コマンドプロンプトに打ち込んで？コマンドプロンプトじゃなくてもVScodeのターミナルでもOK？それでダウンロード？分からんけどとりあえずやってみよう……あっなんかできた」

　ということを学んでいる最中に新しく出会ったのが、Javascriptフレームワーク。

　ここで私のWeb関係スキルですが、

• HTML4/CSS2時代にそこそこ個人サイト自分で作ってた

• 触ってた頃過渡期だったのでHTML5/CSS3の流れは見てたし個人サイトはずっとあったので何となく触れてはいた

• Javascriptはほとんど分からない。constとかletとかで変数宣言するやつ。なんか最初console.logで延々計算させられてつまんないな～で自力学習を放り投げた。（何となく読める気はする）

　……という感じで、多分そんなんでお前それに手を出すんじゃねえよ……というスキルではあるのですが、
　興味があるものの範疇で知ったものはやってみたい性分なので　まあ　手を出すことにしました。Javascriptフレームワーク。

React？Vue？ライブラリ？フレームワーク？

　……とはいえ前述したように私はJavascriptが分からない。
　QiitaとかZennの記事を読み漁り、とりあえず恐らく今一番勢いがあるのはReactで、それをもとにしたNEXT.jsというフレームワークが活発に開発されているっぽいことは分かったんですけど、うーんどっからどう見ても書き方がJavascript。あとライブラリとフレームワークの違いが分からん。でもなんかフレームワークの方が使いやすそう？という印象。
　私にはHTMLとCSSしか書けないんよ……しょもしょも……と思いながら、今度はReactと二大巨頭らしいVueへ。こっちはそれを元にしたNuxtというフレームワークがあるらしい、最近3にアップデートされた？学習コストは低め？ふむふむ、と思いながらコードを見て、あ、これなら今の私でもできるんじゃない？と思いました。
　多分最初に見たのが

<template>
<p>Hello,World!</p>
</template>
 
<style>
p {
color: red;
}
</style>

　……みたいな、scriptが全然ないコードだったのが一番大きかったです。あ、これJS書けなくても何かふわっと使えそうじゃん、みたいな。
　JS書けないならJavascriptフレームワーク使うなよって？おっしゃる通りです。

試行錯誤の学習

　まあこれを機にちょっとJSも覚えられたらいいな～と思いながらNuxt3のドキュメント読んでたら今度はTypescriptなどという単語が飛び出しﾜｱ頭ｲﾀｲ……となったものの、ここで後には引けないぞという謎のやる気が顔を出したのでとりあえずインストール。あちこちの指南サイトを行ったり来たりしながら、とりあえず作ってみるターン。
　その過程でGitとGithubちょっと覚えた。ちょっとだけ。ブランチ！コミットする！プッシュ！マージ！くらいのことは覚えた。後ですか？分かりません。soucetreeとか落としてみたけど設定上手くいかなくて結局全部VScodeでやってる。VScode天才では？？？？？元々GitとGithubは別口でちょっと覚えたいな～と思っていたので、思わぬ拾い物の学習でした。まあGithubPagesとやらのことはまだ分からないんですけど。
　とりあえずtailwindcssの前に先に使ってたUIkit3でちょこちょことサンプルサイトを作成してみて、おお！作れるぞ！となったのでそのまま自分のサイトの作成に取り掛かったのでした。

やってみて

　多分本当にNuxt使ってお仕事とかされてる方には「いやそれなら普通にHTMLとCSSでやった方が」って言われるの重々承知してるのですが、
　新しいことやるの　楽しい……☆
　でした。本当に楽しかった。
　まあこれ以上先に進もうと思うとやっぱりJSとTS覚えなきゃな～って感じなのでちょっとどうしようかな……と思ってはいるのですが。静的サイトに出力しちゃえば普通にHTMLとCSS書く感じにも出来るので、ま、いっかな～という感じです。
　まあVScodeでyarn動かないぞとか、いざ出力したらデザイン崩れたぞとか、Google Bardにこのコードエラー出る！何で！って聞いたら修正案に同じコード出されてキレたりとかわちゃわちゃしてましたが……ハイ……。
　結局手を動かして自分が好きなことから覚えないと私は覚えないな～って再確認もしました。ちょっと読めるJS増えた。ふふん。（書けるとは言っていない）
　Nuxtはどうも2→3の移行でNextに乗り換えたひとが多い感じで、3の記事は少なめで下火っぽいなと思ったのですが、分からんなりにNextも触ってみた感触としては、最初に触るJSフレームワークとしてはいいのかな～と思いました。何となくでも使えるから学習コストは確かに低い。これを取っ掛りに覚えていきたいな～と思ってます、今のところ。

　そんなわけでしばらくはこんな感じでまた個人サイトを運用していこうとしている私でした。また何か手出したら記事書きます。たぶん。