Reactをやめた - nownab.log

自分の個人のサイトをリニューアルして React を排除しました。

https://nownabe.github.io/

これ作ったときはちょうど 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 っぽいですが、まぁ内容には関係ないので大丈夫。

リニューアルしたのはいいんですが、内容がだいぶ古いので更新しないといけないんですが、例のごとく飽きてしまったのでそのままです。。。 😅