Open2
Reactを深く理解する
tomy_dev削除ボタンを実装してfilter関数を理解する。
そもそもfilter関数とは？
filter()は配列から条件に合う要素だけを集めて、新しい配列を作るメソッド
重要なポイント
- 元の配列は変更されない(イミュータビリティの保持)
- 条件式がtrueのものだけで、新しい配列が作成される
使用例
削除ボタンの実装などで使用。
下記例の場合は、useStateで管理しているnotesに対してfilter関数を使用、
条件式は、note.idがidと一致しない。
この条件で新しい配列を作成し、setNotes(filterNotes)で更新する。
引数のidには、note.idが入ってくることで、クリックされた対象のアイテムだけがfilterから弾かれる。
App.js
const [notes, setNotes] = useState([]);
// 削除ボタンの処理
const onDeleteNote = (id) => {
const filterNotes = notes.filter((note) => note.id !== id);
// filter関数は、このルールに合致したら"残す"、このルールに合致するものだけで新しい配列を作る。という考え方。
// useStateで管理しているnotes配列をフィルタリング、条件note.id !== idは一致するidを持つnote以外の全てに対して
// trueを返す。つまり配列の中に残るのは、押されなかったノート以外が配列に残る
// つまり、クリックされたノート以外で新しい配列を作成して、それをsetNotesで更新する処理。
setNotes(filterNotes);
};
Sidebar.js
<button onClick={() => onDeleteNote(note.id)}>削除</button>
demo.js
// 配列の形
const notes = [
{
id: uuid(),
title: 'タイトル',
content: '投稿本文',
modDate: Date.now()
},
{
id: uuid(),
title: 'タイトル',
content: '投稿本文',
modDate: Date.now()
},
]
tomy_devデータをローカルストレージに保存する
ローカルストレージには配列やオブジェクトをそのまま保存できないので、JSON形式に変換して保存する必要がある。
今回使用するメソッド
demo.js
// JSONに関するもの
JSON.stringify() // JSONの文字列形式に変換する
JSON.parse() // JSON文字列の構造を解析して、その構造に合わせたJavaScriptで使用可能なデータ型に戻す
// ローカルストレージに関するもの
localStorage.setItem("key", value) // ローカルストレージに保存する
localStorage.getItem("key") // ローカルストレージから取り出す
使用例
App.js
const [notes, setNotes] = useState(
JSON.parse(localStorage.getItem("notes")) || []
);
// noteが更新される度にlocalstorageに保存する
useEffect(() => {
localStorage.setItem("notes", JSON.stringify(notes));
}, [notes]);
データをローカルストレージから取り出して使用する
localStorage.getItem("key")を使用して取り出す。
その際保存されている形式がJSON形式のため、JSON.parse()を使用して、JavaScriptで使用可能な形に変換する。
使用例
App.js
const [notes, setNotes] = useState(
JSON.parse(localStorage.getItem("notes")) || []
);