ホームページをリニューアルした
ゴールデンウイーク期間の5/2~5/9にかけて、ホームページをリニューアルした。
もともとホームページはさくらのVPNで運用していたがサーバー代が高かったのでGithub Pagesに引っ越したいと思っていた。 ホームページは2019年に作成したときの技術スタックそのままだったのでモダンな環境で一から作り直すことにした。 Astroを採用することにした。話題は聞くが触ったことがなかったので触ってみたかった。CSSはTailwindCSSを使うことにした。 これも評判は聞いているが自分で書いたことはなかったので良い機会だと思って使ってみることにした。 普段の業務ではReactとCSS in JSを使うことが多い。
環境構築
クリーンなMacに環境構築をするところから始まった。homebrewをいれて、fnm, Git, VSCode, iTerm2などを入れた。 VSCodeにprettier, eslintなどの拡張を入れたりエディタの設定を自分好みに設定した。gitのグローバル設定もした。 Gtihub用のsshキーを作成・登録したり、.zshrcにgit-promptの設定などした。
プロジェクトの作成
corepackを使用し、pnpmを使用した。pnpm create astroコマンドで初期化。pnpmの設定としてsave-prerix=""とminimumReleaseAgeを設定した。 exactバージョン指定により意図しないバージョンが入らないようにし、minimumReleaseAgeで攻撃を受けたパッケージをインストールしづらくした。 prettier, eslintをインストールし、READMEを書き換え、daisyUIとtailwindCSSをインストールし、開発の準備を整えた。
実装開始からv1.0.0まで
トップページをざっくり実装。Github Pagesへの自動デプロイのワークフローを作成した。 eslintの設定が正しくできておらず、誤検知が発生していたのでその修正に苦労した。 lint-stagedとhuskyを導入し、コミット時にprettier --writeとeslint --fixが動くようにした。
実装を粛々と進め、トップ以外のページを作成したり各SNSリンクを置いたり、ogを設定したりした。 旧ホームページからドメインの設定変更をして nekko1119.org でGithub Pagesを開けるようにした。 この時点でv1.0.0としてリリースとした。
v1.0.0から運用の仕組みづくりまで
v1.0.0より前は直接mainにpushをしていたが、v1.0.0移行はPRを作成することとした。 v1リリース後は運用の仕組みを強化することにした。最初にdependabotを設定して、パッケージ更新の自動化を行った。 renovateと近い感じで使えるように、メジャーアップデートではない更新は1つのPRにまとめるようにしたり、更新頻度を調整した。
次にCIを設定した。CIでlint, type-checkを行うようにした。 パッケージ更新などでページの表示崩れが発生してないことを確かめるためにplaywrightによるsnapshot test(VRT)を設定した。 業務ではStorycapとreg-suitを使っていて、playwrightによるVRTにあまり慣れておらず設定に苦労した。 PRを出したらGithub Actionsの中でマージ先ブランチにcheckoutして撮影を行い、その後PRブランチでも撮影を行い、比較するようにした。 VRTはアプリケーションを変更したときには差分が出て当然なので、差分がある・なしだけで成功・失敗とはならない。意図した差分かどうかが観点だ。 いちいちCIのログを見るのは面倒なため、PRのコメントに差分があるかどうかを書き込むスクリプトを作成した。 Gtihub Copilotのコードレビュー機能を有効にした。とても便利で助かる。
最後にaxe-coreをplaywrightで実行するようにし、アクセシビリティについて機械的に判定できる範囲では対応するようにした。
感想
Reactの経験のお陰でAstroファイルの書き方はすぐ理解できた。frontmatterと <script /> でビルド時とランタイム時のJSを書く場所が分かれているのはわかりやすくて良いと思った。
最初はReactを導入してAstroファイルからReact Componentを呼ぶ方式にしようかと思ったが、不要だった。Astroファイルで十分だった。
DaisyUIとTailwindCSSは初めてだったので @apply を使った指定やレスポンシブの書き方など初めての経験が多かった。classはCSSinJSのpropsと違って静的な型がつかないので補完やタイポの指摘が弱いなと感じた。補完に関してはVSCodeのTailwindCSS拡張でマシになった。
AIについて、chatgptと会話、Copilotによるコードレビューは使ったが、Coding Agentは使えなかった。今は経済的な理由で契約することができない。すっかりClaude Codeに慣れてしまって、自分で手書きすることが苦痛だった。自分で書かなくても生成させてそれについて質問すれば全然学習になる。
個人的に悲しかったのが、こんなとても小さいシンプルなSSGサイトを作るのに1週間丸々使ってしまったこと…
今後
まだちょっと改善したいことはある。lighthouseの指摘対応をしたい。Google Analyticsを導入したい、CIでplaywright install --with-depsに時間かかるのでいい感じにキャッシュしたい、ページに最終更新日いれたい、など。 今後は気が向いたときにゆっくり開発したい。
