Ploigi project

microCMSとPloigi-Webを紐づけブログ機能を追加した。

Ploigi-Webのトップからこのソレビブログを閲覧できるようになったのは良いのだがナビバーがなかったので追加しようと実装作業を行った。

非常に簡単に、スムーズに実装できある種の感動があったため、エンジニアとしては初級のことであるのだろうがNext.jsに触れて”おー”と感じたことを忘れないうちに学習ノート的に書こうと思う。

まず何何を行ったのか

/components/navbar.tsx

import Link from "next/link"
import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export default function Navbar() {
  return (
    <header className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-8 py-4 bg-gray-900/95 backdrop-blur-md border-b border-white/10">
      <span className="text-xl font-bold tracking-tight text-white">Ploigi</span>
      <nav className="flex items-center gap-8">
        <div className="hidden md:flex gap-6 text-sm text-gray-300">
          <Link href="/" className="hover:text-white transition-colors font-medium">Home</Link>
          <Link href="/about" className="hover:text-white transition-colors font-medium">About</Link>
          <Link href="/sorevi" className="hover:text-white transition-colors font-medium">ブログ</Link>
        </div>
        <Link href="/login" className={cn(buttonVariants(), "text-sm px-5")}>Login</Link>
      </nav>
    </header>
  )
}

なぜ簡単に感じたか

実装にあたっての具体的な方法だけを調べ実行したので、自分が何をしていたのかも曖昧な理解だった。そもそもなぜ簡単だったのか、自分は何を使用していたのかを理解しようということでまずは調べた。

感動を与えてくれていたのはReactのコンポーネント設計だったようだ。

これはUIを「部品（コンポーネント）」として分割できる仕組み。

ではこれがあることでなぜ簡単だと感じたのか、これは変更箇所が1パーツ1ファイルに集約されていたからである。以前は「ナビを変えたい → 使用するファイルを全部探して修正」だったのが、対象のファイルを1か所直すだけで全ページに反映される状態になった。

なぜ実現できるか：3つの原則

① DRY原則（Don't Repeat Yourself）

同じコードを複数箇所に書かない。変更コストと見落としリスクが下がる。

② Reactのコンポーネントモデル

UIを関数として定義し、<Navbar /> という形で何度でも再利用できる。Reactがなければ同じHTMLをコピペするしかなかった。

③ JavaScriptのモジュールシステム（import/export）

ファイルをまたいでコードを共有できる仕組み。import Navbar from "@/components/navbar" の1行で別ファイルの部品を呼び出せる。

ブログのまとめ方の提案

タイトル案：「ナビゲーションバーを共通化してわかったReactコンポーネント設計の本質」

構成：

1. 問題：ナビが各ページにコピペされている状態

2. 解決：コンポーネントに切り出す

3. なぜ動くか：DRY / Reactのコンポーネントモデル / モジュールシステム

4. 得られたこと：変更コストが下がる＝保守性が上がる

一言で言うと「Reactのコンポーネント化によってDRY原則を実践し、保守性を上げた」という体験です。

Next.js コンポーネント追加について

まず何何を行ったのか

なぜ簡単に感じたか