ウェブサイトをNext.js + TypeScript + Tailwind CSSでリニューアルした

2024/03/24追記 — 現在はNext.jsからAstroに変更しました。

いまご覧になっているウェブサイトは、2021年1月上旬にリニューアルしました。

というわけで、新ウェブサイトをつくるにあたって利用した技術を紹介します。

技術一覧

• フレームワーク・言語
  • Next.js
  • TypeScript
  • Tailwind CSS
• インフラ系
  • Vercel
  • microCMS

順番に見ていきます。

フレームワーク・言語

Next.js

https://nextjs.org/

Reactのフレームワークです。リニューアル前のウェブサイトではNuxt.jsを使っていました。Nuxt.jsはVue.jsのフレームワークです。

個人的にVue.jsとNuxt.jsのほうが愛着があり、今までNuxt.jsを使っていました。しかし、就職先はReactを使っている会社です。個人開発でReactを使っていないと成長に限界があるなと感じ、思い切ってVueからReactに移行してみました。

TypeScript

https://www.typescriptlang.org/

型定義ができるJavaScriptです。インターン先の開発でTypeScriptがだいぶ書けるようになってきたので、個人開発でも使ってみることにしました。

インターン初期はTypeScriptにあまり慣れておらず、よくわからなかったらとりあえずany 付けとけばいっか、みたいなノリでした。当時は、少し込み入ったことをしようとするのが辛かった記憶があります。しかし最近は自分で型定義したりUtility Typesが使えるようになってきました。TypeScriptの良さがわかってきました。そこで、このウェブサイトでもTypeScriptを使っています。

Tailwind CSS

https://tailwindcss.com/

Utility Firstを謳うCSSフレームワークです。どこからか、Next.jsとTailwind CSSは相性が良い的な話を聞いたので、初めて使ってみました。

どんな感じのフレームワークなのかは、Tailwind CSS公式サイトのアニメーションを見ればかんたんに理解できるかと思います。Bootstrapならclass="btn btn-primary" と書くところ、Tailwind CSSでは以下のように書きます。

<button class="bg-blue-600 text-white hover:bg-blue-700 transition-colors focus:ring-2 ring-opacity-50 px-4 py-2 rounded-md select-none focus:outline-none">
  ボタン
</button>

デモはこちら (読み込みに数秒かかります)

僕はこれを書いていて楽しかったです。素のCSSを書くより、細かいデザインをサクッと作れるのが好印象でした。

ただ、Tailwind CSSを使うメリットみたいなものはうまく説明できないので、もっと知りたい方はTailwind CSSの公式サイトなどを見ると良いかと思います。

インフラ系

Vercel

https://vercel.com/

ホスティングサービスです。Next.jsを使うなら、使うホスティングサービスはVercel一択だと思います。

GitHubと連携すれば、GitHubにコードをPushするだけでウェブサイトを公開できるので楽です。

microCMS

https://microcms.io/

ヘッドレスCMSです。このブログの記事や、プロダクト一覧ページのコンテンツはmicroCMSで管理しています。

正直、Markdownが使えるという点でNetlify CMSを使いたかったのですが、「VercelでNetlify CMS？」という、ただそれだけの理由で使いませんでした。

Netlify CMSと違って、microCMSはGUI上でAPIスキーマをポチポチ作れます。あと、日本製なので、UIは日本語です。

おまけ : リニューアルのきっかけ

以前のウェブサイトは約2年前に作り、その後、少しずつ手直しを重ねてきました。

ですが、いくつか問題が出てきました。

• 各プロダクトについて、詳細な説明を書くための仕組みがなかった
• サイト内にブログを設置したかった
• 手直しを重ねすぎてコードが混沌としてきた
• そもそもデザインがダサい

各プロダクトの説明欄を作ったり、ブログを作ったりするだけなら、今あるウェブサイトを改造していくという手もありました。ですが、「ダサい」問題は手直しレベルではどうにもならないという印象がありました。コードも汚いし、デザインを良くしようとしても違法建築のような状態になりかねない気がしていました。

そこで、思い切ってウェブサイトを一から作り直すことにしてみました。自分のウェブサイトを作り直すのに何日もかけたくなかったので、できるだけシンプルなデザインを心がけました。その結果、数日でほぼ完成させることができました。

新しいウェブサイトは以下のような特徴があります。

• ダークモードに対応
  • 以前のウェブサイトもダークモードに対応していました。しかし新しいウェブサイトでは、OSの設定とは別に、トグルスイッチでダークモードの切り替えができるようにしました。トグルスイッチは、ページの一番下に設置しています。
• プロダクトの紹介を長文で書ける
  • 以前のウェブサイトは、画像1枚 + かんたんな説明しか書くことができない仕様・デザインになっていました。新しいウェブサイトでは、画像や文章をたくさん書けるようにしました。
• コードがすっきり（？）
  • これについては、僕自身のReactでの開発経験が浅く、現状だと何とも言えないです…
• デザインがよくなった
  • Tailwind CSSの margin や padding 周りの機能は気が利いていて、良い感じの余白を使ったデザインが簡単にできます。おかげで、以前よりだいぶすっきりとしたデザインに仕上げることができた気がします。

個人的に、デザインがよくなったのは大きなプラスです。完全に自画自賛なのですが、個人開発のモチベーションがアップしました。リニューアルは正解だったと思います。