このサイトがどうやって動いているのかを書き綴る

こんにちは！このサイトがどんな技術で作られているのか、詳しくご紹介していきます。

結論から言うと、このサイトは「パフォーマンス」と「開発者体験」、そして「3Dビジュアル」の3つを軸に技術選定を行いました。

🎯 このサイトについて分かること

このサイトで使用している技術スタック（Next.js 14、Three.js、microCMSなど）
なぜこれらの技術を選んだのか、その理由
実際にどのように実装されているかのコード例
パフォーマンスや開発効率を重視した設計思想
AWS AmplifyからVercelへの移行した理由

前提知識レベル：webサイトやプログラミングに興味があれば、どなたでも読んでいただけます！

---

このサイトの技術構成

使用している主要技術

まず、このサイトの「心臓部」となる主要技術をご紹介します：

Frontend: Next.js 14 (App Router) + TypeScript

Styling: Sass (SCSS modules)

3D Graphics: Three.js + React Three Fiber

CMS: microCMS

Hosting: Vercel (以前はAWS Amplify)

Deployment: 静的サイト生成 (SSG)

＊以前まではドメインを設定していましたが、予算と更新頻度の観点から今は設定していません

なぜこの組み合わせを選んだのか？

パフォーマンス重視：静的サイト生成でLighthouseスコア90点以上を狙う
視覚的インパクト：3Dエフェクトでユーザーの印象に残るサイトに
開発効率：TypeScriptで型安全性を確保し、バグを事前に防ぐ
保守性：モジュール化されたコンポーネント設計で長期運用も安心

---

Next.js 14 App Router - モダンReactの最前線

App Routerって何がすごいの？

1. ファイルシステムベースのルーティング

App Routerの最も直感的な特徴は、ファイルシステムベースのルーティングです。

app ディレクトリ内にフォルダとファイルを作成するだけで、自動的にルーティングが設定されます。例えば、app/about/page.tsxというファイルを作成するだけで、/about というURLに対応するページが自動的に生成されます。

これは、プロジェクトの構造を非常にわかりやすくし、新しいページやルートの追加を簡単に行えるようにします。

従来のPages Router：

pages/
  index.js     // '/' ルート
  about.js     // '/about' ルート
  blog/
    [slug].js  // '/blog/[slug]' ルート

新しいApp Router：

app/
  page.tsx           // '/' ルート
  about/
    page.tsx         // '/about' ルート
  blog/
    [slug]/
      page.tsx       // '/blog/[slug]' ルート
  layout.tsx         // 共通レイアウト

2. React Server Components

App Routerは、ReactのServer Componentsを完全にサポートしています。

Server Componentsは、その名の通り、サーバー上でレンダリングされるコンポーネントです。これにより、以下のようなメリットが生まれます。

パフォーマンスの向上: クライアントに送るJavaScriptの量を大幅に削減できます。これにより、ページの初期表示が高速になり、ユーザー体験が向上します。
サーバー上でのデータ取得: サーバーコンポーネントは、APIを介さずに直接データベースやバックエンドからデータを取得できます。これにより、データ取得のロジックがシンプルになり、クライアントとサーバー間の通信回数を減らせます。
バンドルサイズの削減: サーバー上で動作するコンポーネントは、クライアント側のJavaScriptバンドルに含まれません。これにより、アプリケーション全体のファイルサイズが小さくなります。

実際のプロジェクト構成

このサイトでは以下のような構成にしています：

// src/app/layout.tsx - ルートレイアウト
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

  const navItems = await getNavItems(); // SSGのためのデータ取得
  return (
    <html lang="ja">
      <body className={notoSansJP.className}>
        <Header navItems={navItems} />
        {children}
      </body>
    </html>
  );
}

ここがポイント！

async functionでサーバーサイドでのデータ取得
日本語フォント（Noto Sans JP）の最適な読み込み
型安全なpropsの受け渡し

パフォーマンス最適化のポイント

// next.config.mjs
const nextConfig = {
  images: { unoptimized: true }, // 静的エクスポート用の設定
};

この設定により、CDNを使わない環境でも画像の最適化を無効にして、静的サイトとして完璧にエクスポートできるんです。

---

microCMS

なぜmicroCMSを選んだのか？

ミニマムスタートで架空のオフィシャルサイトを始めたかったため制限はありますが、無料で比較的簡単に使えるmicroCMSを採用しました。

実際のCMS連携

// src/libs/client.ts
import { createClient } from "microcms-js-sdk";

export const client = createClient({
  serviceDomain: process.env.NEXT_PUBLIC_API_ENDPOINT ?? "",
  apiKey: process.env.NEXT_PUBLIC_API_KEY ?? "",
});

たったこれだけで、APIを通じてブログ記事やコンテンツを取得できちゃいます。

Jamstackアーキテクチャの恩恵

JavaScript (Frontend) + APIs (microCMS) + Markup (Static HTML)

この組み合わせにより：

セキュリティ：データベースが直接公開されない
パフォーマンス：CDNでの高速配信が可能
スケーラビリティ：アクセス増加にも柔軟に対応
開発者体験：フロントエンドとバックエンドの分離で並行開発可能

---

ホスティング環境 - AWS AmplifyからVercelへの移行

なぜVercelに移行したのか？

当初、このサイトはAWS Amplifyでホスティングしていました。Amplifyも素晴らしいサービスなのですが、Next.jsとの相性やデプロイの手軽さを考慮して、Vercelに移行することにしました。

AWS Amplify時代の課題：

デプロイ時間がやや長い
設定項目が多く、シンプルさに欠ける
毎月の支払コストが高かった

Vercelに移行した理由：

Next.jsの開発元が提供するサービスなので相性抜群
GitHubとの連携が非常にスムーズ
デプロイが爆速（数十秒で完了）
無料枠でも十分な機能とパフォーマンス

Vercelのメリット

パフォーマンスの向上：

Edge Network による世界中での高速配信
自動的な画像最適化
Core Web Vitals の自動測定
特別な設定なしでSSG、SSR、ISRの実現

開発者体験：

Gitプッシュするだけで自動デプロイ
プレビューURL の自動生成
リアルタイムでのパフォーマンス監視

まとめ - 現代的Webサイトの作り方

このサイトを通じて、以下のことが実現できました：

✅ 高パフォーマンス：静的サイト生成による高速表示

✅ リッチな表現：Three.jsによる印象的な3Dエフェクト

✅ 型安全性：TypeScriptによるバグの事前防止

✅ 保守性：モジュール化されたコンポーネント設計

✅ 開発効率：最新のツールチェインによる快適な開発体験

技術選定で大切にしたポイント

将来性：長期間メンテナンスできる技術を選ぶ
学習コスト：チームメンバーが習得しやすい技術
コミュニティ：活発なコミュニティがある技術
パフォーマンス：ユーザー体験を最優先に考える
運用の簡単さ：AWS AmplifyからVercelへの移行のように、より良い選択肢があれば柔軟に変更