WebサイトをNuxt.jsでリニューアルしました

コーディングデザインのフロントエンドエンジニア 森 史憲です。

長くWordPressで運用してきたWebサイトを、ようやくNuxt.jsでリニューアルしました。

なぜNuxt.jsを選んだのか？

ReactやNext.jsが人気の中、「なぜNuxt.js？」と思われるかもしれません。

その理由はシンプルで、開発者の好みです。

私はもともとコーダー出身で、HTMLやCSSを書くのが好きです。

スクリプトをなるべく少なくしたいという思いもあり、Vue.jsやNuxt.jsの「HTMLを大切にしている感覚」が自分に合っています。

もちろん、どのフレームワークでも調べることは増えますが、Nuxt.jsは書いた後の運用がしやすいと感じています（パッケージの更新は少し手間ですが…）。

自社サイトだからこその自由

自社サイトは自分一人で作るため、完全に好みを反映できます。

トップページとブログだけのシンプルな構成ですが、いくつかチャレンジを取り入れました。

軽く触れておきます。

1. microCMSの導入

WordPressを使わず、ヘッドレスCMSとしてmicroCMSを採用しました。
管理画面へのログインが不要で、セキュリティ面でも安心。さらに、JavaScriptフレームワークを別のものに移行しやすい点も魅力です。

microCMSは年々使いやすくなっており、管理画面や公式パッケージの完成度が素晴らしいです。

2. Tailwind.CSS v4の導入

コンポーネント作成で人気のTailwind CSSを導入しました。

v3に慣れていましたが、v4では使い勝手が少し変わっており、以下の点に驚きました。

• カスタマイズは tailwind.config.js ではなく、CSSファイルに記述する
• @tailwindcss/typographyを使用する際もCSSファイルに記述する必要がある

最初は戸惑いましたが、公式ドキュメントを参考に解決しました。

3. Nuxt Icon / Nuxt Fontの導入

アイコンやフォントを簡単に扱えるモジュールを導入しました。

• Nuxt Icon
  Iconsというサイトにあるアイコンを簡単に利用できるモジュールです。
  アイコンコレクションのパッケージを別途インストールする必要がありますが、インストールコマンドが用意されており、とても親切です。
• Nuxt Font
  Googleフォントなどを簡単に利用できるモジュールです。
  CSSでfont-familyを指定するだけでフォントが適用されます。こちらもめちゃくちゃ便利。
  注意点として、デフォルトでは font-weight: 400;のみがダウンロードされるため、必要なウェイトを以下のようにnuxt.config.tsに記述する必要があります。

  fonts: {
    defaults: {
      weights: [400, 500, 600, 700],
    },
  },

4. Node.jsではないサーバにNuxt.jsを使う

これが最大の難関でした。
現在のレンタルサーバーではNode.jsが使えないため、Nuxt.jsをSSG（静的サイト生成）で書き出し、サーバーにアップロードする必要がありました。

この工程をGitHub Actionsを活用し、 .github/workflows/build.yml を作成して自動化しました。

ChatGPTを活用しながら試行錯誤しましたが、無事成功しました。

まとめ

• WordPressからの置き換えを考えはじめてから時間がかかってしまったけど、なんとか完遂できて一安心です
• 新しい技術に挑戦し、それがうまくいくと本当に嬉しいですね
• 便利なモジュールを作ってくださるエンジニアの皆さんに感謝です

以上が今回のリニューアルの概要です。今後も改善を続けていきたいと思います！