# ユーザー入力
q chat "Next.js 15でTypeScriptを使ったクイズアプリを作りたい。適切なプロジェクト構造を教えて"

# Amazon Q CLIの提案
- create-next-app@latestの使用
- TypeScript設定の最適化
- ディレクトリ構造の提案
- package.jsonの依存関係設定

# ユーザー入力
q chat "GitHub Pagesにデプロイするクイズアプリに最適な技術スタックは？"

# Amazon Q CLIの回答
- Next.js静的エクスポートの推奨
- GitHub Actionsでの自動デプロイ設定
- CSS ModulesとCustom CSSの組み合わせ提案

# ユーザー入力
q chat "クイズ問題のデータ構造をTypeScriptで定義したい"

# 生成されたコード
export interface QuizQuestion {
  id: number;
  question: string;
  options: string[];
  correctAnswer: number;
  explanation?: string;
  links?: {
    title: string;
    url: string;
  }[];
}

# ユーザー入力
q chat "クイズコンポーネントでランダムに10問選択する機能を実装して"

# 提案されたロジック
const shuffleArray = (array: QuizQuestion[]) => {
  const shuffled = [...array];
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }
  return shuffled;
};

# ユーザー入力
q chat "ミリオネア風のエレガントなアニメーションを追加したい"

# 提案されたCSS
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.quiz-container {
  animation: scaleIn 0.7s ease-out 0.4s both;
}

# ユーザー入力
q chat "AWS公式カラーを使ったカラーパレットを作成して"

# 提案されたカラーシステム
:root {
  --primary-color: #FF9900;      /* AWS Orange */
  --secondary-color: #232F3E;    /* AWS Dark Blue */
  --millionaire-gold: #FFD700;   /* Gold Accent */
  --millionaire-silver: #C0C0C0; /* Silver Border */
}

# ユーザー入力
q chat "Android Chromeでタイトルが見切れる問題を解決したい"

# 提案された解決策
useEffect(() => {
  const setVH = () => {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  };
  
  setVH();
  window.addEventListener('resize', setVH);
  window.addEventListener('orientationchange', setVH);
}, []);

# ユーザー入力
q chat "モバイルでのグリッドレイアウトを最適化したい"

# 提案されたレスポンシブCSS
@media screen and (max-width: 768px) {
  .quiz-container {
    grid-template-rows: auto minmax(140px, 1fr) minmax(110px, auto) auto;
    height: calc(100vh - 160px);
  }
}

# ユーザー入力
q chat "Property 'text' does not exist in type エラーを修正して"

# 問題の特定と解決
// 問題: インターフェース定義との不一致
links: [{ text: "タイトル", url: "URL" }] // ❌

// 解決: 正しいプロパティ名を使用
links: [{ title: "タイトル", url: "URL" }] // ✅

# ユーザー入力
q chat "experimental.turbo is deprecated 警告を修正して"

# 修正された設定
// 修正前
experimental: { turbo: {} }

// 修正後
turbopack: {}

# ユーザー入力
q chat "GitHub Pages向けのNext.js設定を最適化したい"

# 提案された設定
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
  assetPrefix: process.env.NODE_ENV === 'production' ? '/aws-url-quiz' : ''
}

# ユーザー入力
q chat "AWS URLクイズにふさわしいSVGファビコンを作成して"

# 生成されたSVGファビコン
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <!-- AWS風クラウド + URL + クイズ要素 -->
  <path d="M6 16c0-2 1.5-3.5 3.5-3.5..." fill="#FF9900"/>
  <circle cx="24" cy="24" r="4" fill="#FF9900"/>
  <text x="24" y="27.5" fill="#FFFFFF">?</text>
</svg>

# ユーザー入力
q chat "GitHub PagesへのNext.js自動デプロイ設定を作成して"

# 生成されたワークフロー
name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: '20'
    - run: npm ci
    - run: npm run build
    - uses: actions/deploy-pages@v4

# 悪い例
q chat "クイズアプリを作って"

# 良い例
q chat "Next.js 15でTypeScriptを使ったクイズアプリの基本構造を教えて"
q chat "ランダム選択機能の実装方法は？"
q chat "レスポンシブ対応のベストプラクティスは？"

# 悪い例
q chat "エラーが出る"

# 良い例
q chat "TypeScript error: Property 'text' does not exist in type '{ title: string; url: string; }' を解決して"

# 良い例
q chat "GitHub Pagesにデプロイする予定のNext.jsアプリで、Android Chromeでタイトルが見切れる問題を解決したい"