https://www.youtube.com/watch?v=ICr32kxTjG4&list=PLX8Rsrpnn3IVOk48awq_nKW0aFP0MGpnn&index=4

• まずはアプリの見た目を作ってみる（ワイヤーフレーム）

  ↑手書きでもOK！とにかく作りたいものの見た目を書き出す！！

  <aside> 💫 この時、「ここを押したらこう動く」などの動線も、言語化あるいは図面化しておいた方がデータ設計が楽になるよ

  </aside>

• アプリ開発は、MVCモデルに当てはめると設計や開発がしやすい

• モデル？View？となった場合は、MVCモデルを思い出そう（プロになるためのWeb技術入門に記載あり）

データモデルを設計する

まずはルート（親コンポーネント）で管理すべきstateを決めていく

今回はchatbot-appを例に説明する

1. ワイヤーフレームを見ながら、どういったデータが欲しいのか（どこが動的に変わっていくのか）確認、決めていく

   <aside> 💫 このとき、「このボタンを押したらここが表示されて〜」など、一つ一つ言語化なり図評化した方が分かりやすい。

   </aside>

2-a. 親（App.js）のconstructorの中でstate（データ）を設定する。（クラスコンポーネントの場合）

2-b. 親（App.js）のコンポーネントの中でuseStateを設定する。（関数コンポーネントの場合）

▼データ設計の例

配列の中に連想配列（オブジェクト）が入っている

[]は配列、{}は連想配列（オブジェクト） answersは、現在の質問（currentId）に対する回答を表示する

▼書き方例

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      answers: [],
      chats: [],
      currentId: "init",
      dataset: {}, //外部データベースと接続する場合は{}にしておこう
      open: false,
    };
//省略
}

const App = () => {
  const [answers, setAnswers] = useState([]);
  const [chats, setChats] = useState([]);
  const [currentId, setCurrentId] = useState("init");
  const [dataset, setDataset] = useState({}); //外部データベースと接続する場合は{}にしておこう
  const [open, setOpen] = useState(false);
//省略
}

• dataset：データベースに格納しているデータ。datasetからanswersやcurrentIdを取得してきている。※後述

▼chatsとanswersそれぞれで設定されているオブジェクトの解説

chat、answerはそれぞれ、吹き出し一つ一つ、回答の選択肢一つ一つのことを指しているよ