自分の個人のサイトをリニューアルしてReactを排除しました。
これ作ったときはちょうどReactにはまってる時期で、どんな妄想が働いたのかわかりませんが静的サイトもReactで組んだら楽なんじゃね？と思って作ったんですが、いろいろアレだったのでほぼJavaScriptなしのプレーンなHTML/CSSで書き換えました。
以前のサイトも、完全に静的なページを毎回ReactでレンダリングするのはさすがによろしくないのでNext.jsっていうサーバーサイドレンダリングができたり、静的ファイルに出力できたりするのを使ってました。がしかし、Next.jsの吐くコードもなんか変なJSいっぱいのってるし、HTMLタグは汚いし、Next.jsのバグかなんかで複数ページ出力できずシングルページになっててGitHub Pagesだったので/から遷移したページにはリダイレクトできず直接アクセスできなかったりしたので辞めたかったんですが、当時はReactで作ったとこで飽きて放置してました。
こないだ社内で「JavaScriptはクソだ」みたいな発表を聞いて、そういえば自分もクソJSサイト持ってるわと思い出し、重い腰をあげて書き換えました。
当時JSを結構触ってたのでpackage.jsonがあったりwebpack.config.jsがあったりyarn.lockがあったり.eslintrcがあったりしても違和感なかったんですが、普通に考えたら異常だったので一掃できてよかったです。
リニューアル後はただ1枚のindex.htmlがあるだけで外部CSSや外部JSはもちろん読み込んでないし、CSSは<head>に直接書いています。JavaScriptは書かないつもりだったんですが、WebFontを遅延読み込みするコードだけ入れました。
const font = new FontFace(
"Noto Sans Light",
"url(fonts/NotoSans-Light.ttf)", {
style: "normal",
weight: "300",
});
font.load().then((ff) => {
document.fonts.add(ff);
document.body.style.fontFamily = ff.family;
});
CSSでフォントをURLで指定すると、フォントを読み込むまで文字が表示されません。そのせいでかなり表示が遅かったんですが、JavaScriptのFontFaceで遅延読み込みすることで表示がはやくなりました。まだWorking Draftっぽいですが、まぁ内容には関係ないので大丈夫。
リニューアルしたのはいいんですが、内容がだいぶ古いので更新しないといけないんですが、例のごとく飽きてしまったのでそのままです。。。 😅