kobitoDevelopment

[
  { "id": 1, "title": "記事1", "content": "記事1の内容です。", "date": "2025-01-01" },
  { "id": 2, "title": "記事2", "content": "記事2の内容です。", "date": "2025-01-02" },
  { "id": 3, "title": "記事3", "content": "記事3の内容です。", "date": "2025-01-03" },
  { "id": 4, "title": "記事4", "content": "記事4の内容です。", "date": "2025-01-04" },
  { "id": 5, "title": "記事5", "content": "記事5の内容です。", "date": "2025-01-05" },
  { "id": 6, "title": "記事6", "content": "記事6の内容です。", "date": "2025-01-06" },
  { "id": 7, "title": "記事7", "content": "記事7の内容です。", "date": "2025-01-07" },
  { "id": 8, "title": "記事8", "content": "記事8の内容です。", "date": "2025-01-08" },
  { "id": 9, "title": "記事9", "content": "記事9の内容です。", "date": "2025-01-09" },

kobitoDevelopment

'use client'

import { usePathname } from 'next/navigation'

export default function FugaPage() {
  const pathname = usePathname()
  const isHoge = pathname.includes('/hoge')

  return (
    <div>

kobitoDevelopment

.canvas {
  display: block;
  width: 100%;
  height: 100vh;
}

kobitoDevelopment

canvas.water {
  display: block;
  width: 100%;
  height: 100vh;
}

kobitoDevelopment

#canvas {
  display: block;
  width: 100%;
  height: 100vh;
}

kobitoDevelopment

.list {
  display: flex;
  gap: 16px;
  align-items: center;
}
.item {
  width: 120px;
  aspect-ratio: 1/1;
  background-color: orange;
  &.-border {

kobitoDevelopment

三層アーキテクチャとサンプル構成

三層アーキテクチャとは？

三層アーキテクチャ（Three Layer Architecture）は、アプリケーションを「役割ごと」に3つの層に分割して設計するパターン。
これにより、役割ごとに責任が明確になり、保守性や再利用性が高まる。

---

1. プレゼンテーション層（Presentation Layer）

kobitoDevelopment

GraphQLロジック設計サンプル

概要

GraphQLを使用したロジック設計について、Shopify API連携を例に、保守性・拡張性・テスタビリティを重視した設計サンプルを例示

アーキテクチャ原則

1. 責任の分離（Separation of Concerns）

• GraphQLクエリ定義とビジネスロジックの完全分離
• UI層とデータアクセス層の明確な境界設定

kobitoDevelopment

# JWT(JSON Web Token)とセッション方式の違い
## ざっくり違い列挙
### セッション方式(サーバーが状態を持つ)
1. ユーザーがログインに成功した際に、サーバー側で事前に用意されているセッションストアに新しいセッションレコードを追加し、そのキーであるセッションID(ランダム文字列)をクライアントに渡す。
2. ブラウザは、受け取ったセッションIDをCookieに保存する。
3. 以降のリクエストでは、ブラウザがCookieに保持しているセッションIDをサーバーに送信することで、サーバー側でセッションストアから該当するセッションレコードを取得し、ユーザーの認証情報を確認する。

### JWT方式(サーバーが状態を持たず、状態はトークン自体に内包)
1. ログイン成功時にサーバーが「署名付きの自己完結型トークン」を発行する。
2. ブラウザは、受け取ったJWTをCookieに保存する（Authorizationヘッダーで送信するパターンもある）。

kobitoDevelopment

SSGでAPIキーを露出させない方法

背景

• APIキーはサービスの認証情報であり、フロントエンド側でAPIキーを露出させてしまうと他者が使用できてしまう。
• SSGでレンダリングする場合、APIキーの取り扱いに注意が必要。SSRであれば、サーバーサイドで実行する処理の中でAPIキーを使用したらOK。

---

Next.jsの環境変数の扱い