松永ライスファーム

1900.01.01

その他

本サイトの技術スタック

本サイトの構成です。別に大したものではないです。

最終更新: 2025/03/27

技術スタック

開発環境

  • Visual Studio Code Insiders: Copilot のエージェントモードが使いたいので Insiders 版です。
  • GitHub Copilit: 主に Claude 3.7 Sonnect を使用(2025 年 3 月現在)しており、あまりにも有能でビビり散らかしています。

フレームワークとライブラリ

  • Next.js: App router を使用
  • React: UI コンポーネント構築（バージョン 18.x）
  • TypeScript: 型安全な開発環境を実現
  • Material UI: デザインシステムとコンポーネントライブラリ
    • @mui/material
    • @mui/icons-material
    • @emotion/react および @emotion/styled（MUI のスタイリング）
  • Swiper: トップページの画像スライダーの実装に使用
  • Google Maps API: アクセスページでの地図表示（@googlemaps/react-wrapper）

デプロイ環境

  • Vercel: Next.js アプリケーションのホスティング

お知らせ管理

  • Markdown: 記事は Markdown 形式で管理しています。
    • gray-matter: フロントマターの解析
    • remark: Markdown の HTML への変換
    • remark-html: HTML レンダリング用プラグイン

アプリケーション構造

ディレクトリ構造

kiyone-matsunaga/
├── public/           # 静的ファイル（画像など）
│   └── img/          # サイトで使用する画像
├── posts/            # Markdown 形式のブログ記事
│   └── posts.json    # 記事のメタデータ
├── src/
│   ├── app/          # Next.js App Router ページ
│   │   ├── about/    # 農園紹介ページ
│   │   ├── access/   # アクセスページ
│   │   ├── contact/  # お問い合わせページ
│   │   ├── direct/   # 直販ページ
│   │   ├── posts/    # お知らせ一覧・詳細ページ
│   │   └── ...       # その他のページ関連ファイル
│   ├── components/   # 再利用可能なコンポーネント
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   └── ...       # その他コンポーネント
│   └── theme/        # テーマ設定
└── ...               # 設定ファイルなど
一覧に戻る