CSSプロパティをまとめた辞書アプリをNext.jsで作ってみた

1. はじめに

Web制作やコーディングをしていると、ふと「このCSSプロパティ、どう書くんだっけ？」と思って調べること、ありませんか？
私は制作のたびに flex や position などをGoogleで検索し直していて、「また調べてる…」と自分でも苦笑いするくらい、効率が悪いなと感じていました。

そこで、「必要なときにサッと調べられて、しかも見やすい辞書があれば絶対便利だよな」と思い立ち、自分と同じ悩みを持つ人のために CSSプロパティ辞書アプリ を作ることにしました。

最初は React（Vite）で作っていたのですが、もっとSEOを強化して検索からも見つけてもらえるように、そしてスマホでも快適に使えるようにPWA対応をしっかり整えるため、Next.js に移行しました。

この記事では、このアプリの概要から、Next.jsでの実装ポイント、開発中の工夫や苦労、そして今後の展望までをまとめてご紹介します。

---

2. アプリの概要

• 名称：CSS Dictionary
• URL：https://www.css-dictionary.com
• 機能：
  • CSSプロパティのキーワード検索
  • カテゴリ別一覧
  • プロパティ詳細（説明・シンタックス・サンプル）
  • 逆引き機能
  • CSSテクニック集
  • お気に入り登録・履歴機能
  • PWA対応（ホーム画面追加＆オフライン利用可能）

---

3. 技術スタック

• フロントエンド：Next.js（App Router）
• スタイリング：Tailwind CSS
• データ管理：ローカルJSON
• ホスティング：Vercel
• PWA：next-pwa
• SEO：metadata API + sitemap + robots.txt

---

4. 実装ポイント

4-1. データ管理（JSON）

CSSプロパティの情報はJSONで管理しています。
これにより、データの追加・修正が容易で、ビルド時に静的生成（SSG）できます。

{
  "name": "flex",
  "category": "レイアウト",
  "syntax": "flex: <flex-grow> <flex-shrink> <flex-basis>;",
  "description": "フレックスボックスでアイテムの伸縮や配置を設定します。",
  "example": "flex: 1 0 auto;",
  "tips": "flex: 1; で均等に並べやすい",
  "common_mistakes": [
    "親要素にdisplay:flexが必要",
    "flex-directionと混同しやすい"
  ],
  "id": "flex"
}

4-2. 静的生成（SSG）

Next.js の generateStaticParams を使い、プロパティごとの静的ページをビルド時に生成しています。
これにより、すべてのプロパティページがあらかじめ HTML として生成され、表示速度や SEO 効果が高まります。

export async function generateStaticParams() {
  return properties.map((p) => ({ id: p.id }));
}

4-3. SEO 設定

Next.js の generateMetadata を使って、各ページごとに <title> や <meta description> を動的に設定しています。
これにより、検索結果に適切なタイトルと説明文が表示され、SEOの効果が高まります。

export function generateMetadata({ params }) {
  const prop = properties.find(p => p.id === params.id);
  return {
    title: `${prop.name} | CSS Dictionary`,
    description: `${prop.name} の使い方とサンプルコードを解説`,
  };
}

さらに、next-sitemap を利用して sitemap.xml を自動生成し、Google Search Console に登録しています。
これにより、新しいプロパティページも素早くインデックスされます。

4-4. PWA 対応

next-pwa を導入し、PWA（Progressive Web App）として動作するようにしました。
これにより、スマホのホーム画面に追加して、オフライン環境でも利用できます。

const withPWA = require('next-pwa')({
  dest: 'public',
  register: true,
  skipWaiting: true, // 新しいバージョンを即時反映
});
module.exports = withPWA({
  // その他の Next.js 設定
});

skipWaiting: true を設定することで、新しいバージョンの Service Worker が即座に有効になり、キャッシュ更新のタイムラグを防げます。

4-5. お気に入り機能

お気に入りは localStorage に保存し、カスタムフック useFavorites で管理しています。
この仕組みにより、ブラウザを閉じてもお気に入り状態が保持されます。

export function useFavorites() {
  const [favorites, setFavorites] = useState<string[]>([]);

  const addFavorite = (id: string) => {
    const updated = [...favorites, id];
    setFavorites(updated);
    localStorage.setItem('favorites', JSON.stringify(updated));
  };

  return { favorites, addFavorite };
}

お気に入りページでは、このフックで保存したデータを一覧表示し、プロパティ詳細ページへのリンクを提供しています。

5. 開発で工夫したこと

• プロパティ情報を JSON で管理
  データの追加・修正が容易になり、構造のシンプル化を実現。
• 静的生成（SSG）で SEO と表示速度を両立
  すべてのプロパティページを事前生成し、高速かつSEOに有利な構成に。
• 逆引き機能を実装
  「やりたいこと」から適切なCSSプロパティを探せる逆引き検索機能を追加。
  例：「テキストを中央寄せしたい」→ text-align, justify-content などを提案。
• CSSテクニック集を実装
  実務や学習で役立つCSSテクニックをまとめたページを用意。
  グラデーション背景、ホバーアニメーション、Flexboxレイアウト例など、コード付きで掲載。
• PWA 対応でオフラインでも利用可能に
  スマホのホーム画面に追加して、オフラインでも辞書機能が使える。
• キャッシュ更新問題を解決
  skipWaiting: true と更新通知 UI の導入で、最新バージョンが即時反映されるようにした。

---

6. 公開と今後の展望

今後追加予定：

• プロパティ使用例の充実
• 逆引き機能の検索精度向上（類義語や複数条件対応）
• CSSテクニック集のコンテンツ拡充（アニメーション、CSS変数活用例など）

7. まとめ

React（Vite）から Next.js へ移行することで、SEO と PWA 対応が容易になり、
CSS 辞書アプリとしての価値を高めることができました。
さらに、逆引き検索やCSSテクニック集といった実務で役立つ機能も搭載し、
日常のコーディングをよりスムーズにするツールになっています。

Web 制作の現場や学習で役立つツールとして、今後も改善を続けていきます。
ぜひ試して感想をいただけると嬉しいです！

▶ アプリはこちら → https://www.css-dictionary.com
▶ X（Twitter）はこちら → https://x.com/hello__world_0