なんとなく雰囲気で理解するNext.js+TSのあれそれ

🦔はじめに

React も JSも Next も TS も 知識ゼロ の著者がなんとなく気合でゴリ押し理解するNext.js+TSのあれそれです。
雰囲気を掴むことを今回のゴールとして、

① ユーザーの追加 / 削除
② プルダウンの実装

の2つについて解説します！（読者には1㎜もやさしくないメモ書きです）

⛏ ユーザーの追加

【ユーザー追加】 ① 関数の宣言など下準備のコード

/*ここで型をつけます*/
 type User = {
  id: number;
  name: string;
};

/*いろいろ宣言します*/
const initialState: User[] = [];

const Home: NextPage = () => {
  const [inputName, setInputName] = useState("");
  const [users, setUsers] = useState(initialState);

/*ここで入力した名前を取得するイベントをつくる*/
  const handleInputName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputName(e.target.value);
  };

/*これはボタンをクリックしたら入力した名前を表示するボタン*/
  const handleClickButton = () => {
    setUsers([
      ...users,
      {
        id: users.length + 1,
        name: inputName
      }
    ]);

/*名前を入力してボタンを押した後は空文字にするよ*/
    setInputName("");
  };

② 実際に使うところ

<Input value={inputName} onChange={handleInputName} />

/*inputboxが空でなく、かつボタンを押した場合はhandleClickButtonの処理を走らせる*/
<Mdbutton onClick={handleClickButton} disabled={inputName === ""}>
          ふやす
</Mdbutton>

【ユーザー削除】 ① 関数の宣言など下準備のコード

const delate = css`
  width: 25px;
  height: 25px;
  background-color: ${colors.black.lighten[4]};
  border-radius: 50%;
  margin: 2px;
  position: absolute;
  right: 20px;
  border: 1px solid #c3c3c3;
  padding: 0 0 2px 2px;
`;
const deleteUser = (ositaId: number) => {
 /* const [newUsers, setUsers] = useState(initialState);に上書きするイメージ*/
    const newUsers = users.filter((user) => !(user.id === ositaId));
    setUsers(newUsers);
  };

② 実際に使うところ

<Userlist>
          <ul>
            {users.length === 0 && <User>ユーザーの追加</User>}
            {users.map((user) => (
              <User key={user.id}>
                {user.name}
                <button css={delate} onClick={() => deleteUser(user.id)}>
                  <VscTrash color={"#757575"} />
                </button>
              </User>
            ))}
          </ul>
        </Userlist>

【プルダウンの実装】 ① 関数の宣言など下準備のコード

/*プルダウンで実装したい配列の準備*/
const times = [
  { id: 1, name: "1" },
  { id: 2, name: "2" },
  { id: 3, name: "3" },
  { id: 4, name: "5" },
  { id: 5, name: "10" },
  { id: 6, name: "15" }
];

const turns = [
  { id: 1, name: "5" },
  { id: 2, name: "6" },
  { id: 3, name: "7" },
  { id: 4, name: "8" },
  { id: 5, name: "9" },
  { id: 6, name: "10" },
  { id: 7, name: "11" },
  { id: 8, name: "12" },
  { id: 9, name: "13" },
  { id: 10, name: "14" },
  { id: 11, name: "15" }
];

② 実際に使うところ

<select css={setTime} name="username">
          {times.map((turns) => (
            <option css={pulldown} value={turns.id} key={turns.id}>
              {turns.name}回
            </option>
          ))}
        </select>