Atsulog#003

久しぶりにAtsulogシリーズ

今回は簡単にプロジェクトの概要として，技術スタックやディレクトリ構造を掲載したいと思います．

---

Repository

https://github.com/a-hashioka/atsulog/

---

Technical Stack

• Framework: Next.js v16.2.6 (App Router)
• Language: TypeScript v5.x
• UI Library: React v19.2.4 / Lucide React v1.16.0
• Styling: Tailwind CSS v4.x / PostCSS / Typography (v0.5.19)
• Markdown: React Markdown v10.1.0 / Remark GFM v4.0.1 / Rehype Highlight v7.0.2 / Highlight.js v11.11.1
• Authentication: jose v6.2.3
• Linter: ESLint v9.x / ESLint Config Next v16.2.6

---

Directory Tree

.
├── .gitignore                      # Gitの追跡除外設定
├── app                             # アプリケーションのメインロジック（App Router）
│   ├── articles                    # 記事一覧・詳細ページ
│   │   ├── [slug]                  # 各記事の個別ページ（動的ルーティング）
│   │   │   └── page.tsx            # 記事詳細の画面
│   │   └── page.tsx                # 記事一覧のメイン画面
│   ├── components                  # UIコンポーネント（Atomic Design構成）
│   │   ├── atoms                   # 最小単位のコンポーネント（ボタン，タグ，マークダウン描画など）
│   │   │   ├── article-list.tsx
│   │   │   ├── article-meta.tsx
│   │   │   ├── article-taxonomies.tsx
│   │   │   ├── button.tsx
│   │   │   ├── canvas-sphere.tsx   # 3D背景（Canvas）用コンポーネント
│   │   │   ├── form-field.tsx
│   │   │   ├── logout-button.tsx
│   │   │   ├── markdown-field.tsx
│   │   │   ├── markdown-renderer.tsx # マークダウンのHTMLレンダラー
│   │   │   ├── pagination-nav.tsx
│   │   │   ├── search-field.tsx
│   │   │   ├── series-navigation.tsx
│   │   │   └── tag.tsx
│   │   └── organisms               # 複数のアトムを組み合わせたコンポーネント（フォーム，リストなど）
│   │       ├── article-search-form.tsx
│   │       ├── create-article-section.tsx
│   │       ├── edit-article-form.tsx
│   │       ├── hero-title.tsx
│   │       ├── paginated-article-list.tsx
│   │       ├── recent-articles.tsx
│   │       └── site-stats.tsx
│   ├── edit                        # 記事管理（作成・編集）ページ
│   │   ├── [slug]                  # 特定記事の編集画面
│   │   │   └── page.tsx
│   │   ├── create                  # 新規記事の作成画面
│   │   │   └── page.tsx
│   │   └── page.tsx                # 記事管理ダッシュボード
│   ├── favicon.ico                 # サイトのアイコン
│   ├── globals.css                 # 全体適用スタイル（Tailwind等）
│   ├── images                      # 画像配信用ディレクトリ
│   │   └── [...path]               # 動的な画像リクエストをハンドリングするエンドポイント
│   │       └── route.ts            # 画像データの配信ロジック（API Route）
│   ├── layout.tsx                  # 全ページ共通のレイアウト枠
│   ├── lib                         # 共通ユーティリティ・バックエンド連携ロジック
│   │   ├── article-repository.ts   # 記事データの取得・保存（CRUD）処理
│   │   ├── article-types.ts        # 記事データに関する型定義
│   │   ├── article-utils.ts        # 記事処理のヘルパー関数
│   │   ├── auth-actions.ts         # サーバーアクション（ログイン・認証系）
│   │   ├── auth.ts                 # セッション・JWT処理などの認証コアロジック
│   │   ├── image-actions.ts        # 画像アップロード等の処理（サーバーアクション）
│   │   ├── site-config.ts          # サイト名やURLなどの共通定数
│   │   ├── use-article-editor.ts   # 記事編集用のカスタムフック
│   │   ├── use-navigation-guard.ts # 編集途中のページ離脱を防ぐカスタムフック
│   │   └── use-tag-input.ts        # タグ入力エリア用のカスタムフック
│   ├── login                       # ログインページ
│   │   └── page.tsx
│   └── page.tsx                    # トップページのメイン画面
├── eslint.config.mjs               # コードの構文チェック設定
├── next.config.ts                  # Next.jsの動作設定
├── package-lock.json               # 依存ライブラリのバージョン固定ファイル
├── package.json                    # プロジェクトの依存関係・スクリプト管理
├── postcss.config.mjs              # CSSコンパイル設定
├── proxy.ts                        # 通信中継（プロキシ）スクリプト
├── public                          # 外部公開する静的ファイルの配置場所
│   └── icon.png                    # 静的画像アセット
├── README.md                       # プロジェクトの説明書
├── standalone.sh                   # 本番起動用のシェルスクリプト
└── tsconfig.json                   # TypeScriptの設定ファイル

---

最後に

components/のatoms/やorganisms/という考え方は少し古いらしいですが，かっこいいので採用しています．

Atsulogの話は沢山書きたいと思っていたのですが，だんだん面倒くさくなってきたので省略します．最低限デプロイの話と，記事データ管理の話は書こうと思います．

ではまた次回．