[memo]サイドバーの実装
batiやること
- サイドバーコンポーネントの作成
- 追加ボタンの実装
- 追加ボタンによって新しいページを作成
- ul, li で追加していくイメージ
- 新しいページを作成するときに名前をつけられるようにする。
- 新しいページを推すと遷移する
参考
batiサイドバーコンポーネントの作成
簡単にダミーのリストを表示させる。ところまで実装してみる。
bati各ページにまたがって表示したいコンポーネントは layout.tsx に記載する。
batimemo:
<ul> で ・（リストマーカー） を表示させたくない場合は、list-style-type: none; を指定する。
bati<ul> タグを使う旨味がないようにおもえた。<p>タグで良さそう。
batiNext.js v13 移行は <Link> タグの中に <a> を記載するとエラーが出るように変更となった。
<a> タグを書く必要がない。
batimemo:
マウスカーソルを当てた際にスタイルを変更する際は、&:hover を使用する。
bati<Link> コンポーネントのクリック範囲をもう少し広げたい。
bati<Link> コンポーネントのクリック範囲をもう少し広げたい。
display: block を使用するとできそう。
bati指マークになるが、少し動かすとまたポインタに戻ってしまう。
batiChrome がおかしい可能性がある。
Zenn のリンクもポインタが指マークにならない。
batiSafari だと想定通りになった。再起動してみる。
batiChrome の再起動で解決した...
bati追加ボタンの実装
以下が方針
- リストを useState で定義。
- ボタンを押すと、リストに add する。
- リストを .map() でイテレートし、<Link> のコンポーネントを返す。
bati追加した際に入力フォームを表示させ、その入力した名前のリストになるようにしたい。
bati<input> と onChange, onBlur, onKeyPress を組み合わせれば、したいことができそう。
また <Link> で表示させるか、<input> で表示させるかの切り替えは、boolean の useState を用いて制御すれば良さそう。
bationKeyPress は deprecated になっている。onKeyDown が推奨。
bationKeyDown を使うときは、event の型を KeyboardEvent で定義する必要がある。
また、ジェネリクスで対象となる要素を指定することで型安全となる。
e.g.) React.KeyboardEvent<HTMLInputElement>
bati-
HTMLInputElement(by chatgpt)- HTML 内の
<input要素を表すための TypeScript の型。<input>要素のインスタンスに関する情報やメソッドを提供する。
- HTML 内の
例えば、以下のような <input> 要素があるとします：
<input type="text" id="myInput" />
これに対して、関連する TypeScript コードで HTMLInputElement を使用すると、その要素に対する型安全なアクセスが可能になります：
const myInput: HTMLInputElement | null = document.getElementById('myInput');
if (myInput) {
// HTMLInputElement型なので、typeやvalueといったプロパティに安全にアクセスできる
console.log(myInput.type); // 'text'
console.log(myInput.value); // 入力フィールドの現在の値
}
このように、HTMLInputElement を使用することで、特定の型を持つ HTML 要素にアクセスし、そのプロパティやメソッドに安全にアクセスできます。同様に、他の HTML 要素に対応する型も存在します。
bati今日はここまで。明日以降にやりたいこと。
- 追加ボタンを押した時のページの作成
- ページへのルーティング
- DB にページの日付を登録
- ページを押すと DB から必要な情報を取得し、ページを表示する。