TypeScriptとReactを理解する

※ChatGPTの補足あり

### はじめに

アンケートシステムは、ユーザーの意見やフィードバックを効率的に収集するための非常に重要なツールです。企業の満足度調査やサービス改善、研究のデータ収集など、多くの場面で活用されています。

この記事では、アンケートシステムをゼロから開発するために必要な知識や手順を紹介します。静的な画面作成から、動的な描画、データバリデーション、バックエンドとの連携まで、実際に使えるコード例と共に進めていきます。これにより、アンケートシステムを構築する際の課題をクリアし、効率的な開発が可能となるでしょう。

---

## 全体知識

アンケートシステムの開発を始めるにあたり、まず基本的な知識を整理しましょう。システム全体を見通すためには、変数や関数、モジュール化の知識が欠かせません。

### 変数の宣言
アンケートの質問内容や回答データなどを保存するために、適切な変数を宣言します。

- 例:
  ```typescript
  const questionTitle: string = "お名前を教えてください。";
  let currentStep: number = 1;
  ```

---

### 関数の宣言
質問の表示や回答の保存など、アンケートの各機能を関数で実現します。

- 例:
  ```typescript
  function getSurveyQuestions(): string[] {
    return ["お名前", "メールアドレス", "ご意見"];
  }

  const saveResponse = (response: string): void => {
    console.log(`回答が保存されました: ${response}`);
  };
  ```

---

### 他ファイルの使用
質問や回答ロジックをモジュールとして切り出し、再利用性を高めます。

- 例:
  ```typescript
  // questions.ts
  export const questions = ["お名前", "メールアドレス", "ご意見"];

  // main.ts
  import { questions } from "./questions";
  console.log(questions);
  ```

---

### オブジェクト指向
質問や回答のロジックをオブジェクトとしてまとめ、柔軟な設計を可能にします。

- 例:
  ```typescript
  class Question {
    constructor(public text: string, public type: string) {}
    display(): string {
      return `質問: ${this.text} (形式: ${this.type})`;
    }
  }

  const question = new Question("お名前を教えてください", "text");
  console.log(question.display());
  ```

---

### TypeScript
アンケートデータに型を定義することで、エラーを未然に防ぎます。

- 例:
  ```typescript
  interface SurveyResponse {
    questionId: number;
    answer: string;
  }

  const response: SurveyResponse = { questionId: 1, answer: "山田太郎" };
  ```

---

## 画面作成

次に、アンケートのUIを構築します。静的な画面から動的な描画へと進め、最終的にはバックエンドとの連携やバリデーションも行います。

---

### 静的描画の導入
アンケート画面の基本構造を固定的な要素で構築します。この段階では、画面デザインやレイアウトに集中します。

- 例:
  ```typescript
  function StaticSurveyPage() {
    return (
      <div>
        <header>
          <h1>アンケートにご協力ください</h1>
        </header>
        <main>
          <p>以下の質問にお答えください。</p>
          <ul>
            <li>お名前</li>
            <li>メールアドレス</li>
            <li>ご意見</li>
          </ul>
        </main>
        <footer>
          <p>© 2024 アンケートシステム</p>
        </footer>
      </div>
    );
  }
  ```

---

### 動的描画の導入
次に、質問や回答内容を動的に処理する仕組みを追加します。これにより、データの状態に応じたUIの変化が可能になります。

- 例:
  ```typescript
  function DynamicSurvey() {
    const [questions, setQuestions] = React.useState([
      "お名前を教えてください",
      "メールアドレスを入力してください",
      "ご意見をお聞かせください"
    ]);

    const [answers, setAnswers] = React.useState<string[]>([]);

    const handleAnswerChange = (index: number, value: string) => {
      const updatedAnswers = [...answers];
      updatedAnswers[index] = value;
      setAnswers(updatedAnswers);
    };

    return (
      <div>
        {questions.map((question, index) => (
          <div key={index}>
            <p>{question}</p>
            <input
              type="text"
              value={answers[index] || ""}
              onChange={(e) => handleAnswerChange(index, e.target.value)}
            />
          </div>
        ))}
        <button onClick={() => console.log(answers)}>回答を送信</button>
      </div>
    );
  }
  ```

---

### ルーティング
アンケートの「開始画面」「質問画面」「送信完了画面」などを切り替えるルーティングを実装します。

- 例:
  ```typescript
  import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<SurveyStart />} />
          <Route path="/questions" element={<SurveyQuestions />} />
          <Route path="/complete" element={<SurveyComplete />} />
        </Routes>
      </Router>
    );
  }
  ```

---

### バリデーション
入力されたデータが正しいかどうかを確認するバリデーションを追加します。

- 例:
  ```typescript
  const validateEmail = (email: string): boolean => {
    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return regex.test(email);
  };

  console.log(validateEmail("example@example.com")); // true
  ```

---

### スタイリング
最後に、アンケート画面を見やすくするためにスタイリングを行います。

- 例:
  ```css
  /* styles.css */
  .header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px;
  }
  ```

  ```typescript
  import './styles.css';

  function StyledHeader() {
    return <header className="header">アンケートシステム</header>;
  }
  ```

---

## おわりに

アンケートシステムを構築する際には、最初に静的な画面を作成し、動的な要素やデータのバリデーション、バックエンドとの連携を段階的に実装していくことが重要です。このガイドを参考に、ユーザーのフィードバックを効率的に収集できるアンケートシステムを構築してください。