やること

• サイドバーコンポーネントの作成
• 追加ボタンの実装
• 追加ボタンによって新しいページを作成
  • ul, li で追加していくイメージ
  • 新しいページを作成するときに名前をつけられるようにする。
• 新しいページを推すと遷移する

参考

https://abeshi-blog.com/blog/20dzfu4tl

サイドバーコンポーネントの作成

簡単にダミーのリストを表示させる。ところまで実装してみる。

各ページにまたがって表示したいコンポーネントは layout.tsx に記載する。

memo:
<ul> で ・（リストマーカー） を表示させたくない場合は、list-style-type: none; を指定する。

<ul> タグを使う旨味がないようにおもえた。<p>タグで良さそう。

Next.js v13 移行は <Link> タグの中に <a> を記載するとエラーが出るように変更となった。
<a> タグを書く必要がない。
https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

memo:
マウスカーソルを当てた際にスタイルを変更する際は、&:hover を使用する。

<Link> コンポーネントのクリック範囲をもう少し広げたい。

<Link> コンポーネントのクリック範囲をもう少し広げたい。

display: block を使用するとできそう。

指マークになるが、少し動かすとまたポインタに戻ってしまう。

Chrome がおかしい可能性がある。
Zenn のリンクもポインタが指マークにならない。

Safari だと想定通りになった。再起動してみる。

Chrome の再起動で解決した...

追加ボタンの実装

以下が方針

• リストを useState で定義。
• ボタンを押すと、リストに add する。
• リストを .map() でイテレートし、<Link> のコンポーネントを返す。

追加した際に入力フォームを表示させ、その入力した名前のリストになるようにしたい。

<input> と onChange, onBlur, onKeyPress を組み合わせれば、したいことができそう。
また <Link> で表示させるか、<input> で表示させるかの切り替えは、boolean の useState を用いて制御すれば良さそう。

onKeyPress は deprecated になっている。onKeyDown が推奨。

onKeyDown を使うときは、event の型を KeyboardEvent で定義する必要がある。
また、ジェネリクスで対象となる要素を指定することで型安全となる。
e.g.) React.KeyboardEvent<HTMLInputElement>

• HTMLInputElement (by chatgpt)
  • HTML 内の <input 要素を表すための TypeScript の型。<input> 要素のインスタンスに関する情報やメソッドを提供する。

例えば、以下のような <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 要素に対応する型も存在します。

今日はここまで。明日以降にやりたいこと。

• 追加ボタンを押した時のページの作成
• ページへのルーティング
• DB にページの日付を登録
• ページを押すと DB から必要な情報を取得し、ページを表示する。