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

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

TypeScript

TypeScript

Next.js

Next.js

🦔はじめに

ReactJSNextTS知識ゼロ の著者がなんとなく気合でゴリ押し理解する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>
びきニキ

びきニキ

@BkNkbot