やかんです。

お気づきの方も2, 3人くらいいらっしゃるかもしれませんが、先日ブログサイトをリメイクしました！webサイトの変遷などについてはこちらにちょろちょろ書いてます。

めでたい。

変更点

まず大きな変更点としては、前のwebサイトはGatsbyというreactのフレームワークで実装してましたが、今回はNextjs（13.4.13）で実装してます。もちろんTypescriptです。

これは、僕が外部でNextjsエンジニアとして活動することが多いのと、Nextjsがシンプルで好みだったということによります。

細かいところで言うと、まあちょろちょろデザインを変えたよ、程度ですかね。

あと、技術的なことでの大きな変更点として、SSGからISRに変えたよ、といったことがあります。が、これを実感していただけることはおそらく無いでしょう。。

東大生やかんのブログ
やかん

開発者の自己満感が否めない。。

動機

前のwebサイトを作ったのがちょうど1年前くらいですが、ちょっともうボロボロすぎて、汚すぎて、メンテナンスも大変だし運用がしんどくなってしまったんですよね。。

また、前は人生初のwebサイト作成ということでなんか、変に気合い入ってしまって、色々盛り込んだ超ゴテゴテwebサイトになってしまっていました。

いわゆる「コードの寿命」ってやつも来てましたしね。そんなこんなで作り替えるに至りました。

こだわり

今回のwebサイトは、

  • 極力シンプルに。
  • メンテナンス、そして運用が楽なように。
  • とにかくシンプルに。
  • もうとにかくシンプルに。

といった点にこだわって作ったつもりです。

東大生やかんのブログ
やかん

とにかくシンプル。

自分で書くコードは最小限に、そして最小限のライブラリで実装する。

その中で、技術的な話で言うと

  • コンポーネントの分割、結構頭使った。
  • キャッシュ戦略にも踏み込んだ。←特にこれ！
  • ディレクトリ構成、結構こだわって作った。
  • コードフォーマットも、きれいになるようこだわった。

あたりに気を使いました。

使用技術

  • Nextjs（13.4.13）
  • WordPress Rest API

以下、主な使用パッケージの一部。と言っても、だいたい以下に挙げるものしか使ってないです。

  • shadcn/ui
    • UIはこれを基準に作った。
  • tailwindcss
    • もちろんtailwindのprettierも入れてる。
  • date fns
    • 王道。Dateオブジェクトで下手がきしてもいいけど、一応入れといた。便利。
  • react spinners
    • 個人的に結構お気に入り。

と言った感じでして、「まあ頑張って作ったんだな〜」など思っていただけると大変に嬉しいです。

最後までお読みいただき、ありがとうございます！