TODOリスト実装にあたって、複数のランダムな id をつける方法（nanoid）

2950 ワード
npm React JavaScript id JavaScript テキストリンク

挨拶

初めまして。yuiと申します。プログラミング初学者です。Qiitaへの投稿は今回が初めてとなります。よろしくお願いします。さて、プログラミングを勉強していて、現在挫折期に入っています。（さらっと思春期的な言い方しましたが、皆さんは挫折期をどのように乗り越えましたか？）そんな中、プログラミングを学ぶ上で主にインプットしかしていないことに気づきました。「アウトプットして学びの定着を深めたい（泣）」と思っていたところ、Qiitaへの投稿を知人に勧められました。学びを他者に共有しながら自身の学びを定着を深められるなら最高かな！と思い今に至ります。初学者だからこそ分かりやすい言葉で、噛み砕きながら説明できるように心掛けます。みんなで勉強頑張りましょう！

実装環境

  • MacOS(MacBookPro)
  • VScode
  • Chrom
  • React
  • JavaScript

著者について

  • 1990年生まれのRedy👩
  • 2020年3月からプログラミング学習を始めました。
    • ドットインストール⇨Progate⇨JS特化型プログラミングスクール⇨2021年6月卒業予定
    • 現在の学習進捗 - HTML ,CSS ,JavaScript ,React ,Github
  • 現職は、ノーマル会社員

nanoid(ナノID)とは

  • 重複しない id を作れるやつ
    • 例えば、TODOリストを実装するとき、リストには「・掃除をする　・洗濯をする　・料理をする」などのTODO項目ができる。

PGの気持ち
ユーザーが「洗濯終わった」ら「・洗濯をする」の項目は削除（もしくは完了）ボタンで完了できるようにしたい
そうだ！『TODOの項目にそれぞれ id を付けた上で、「このidの項目のボタンをクリックしたら、このidの項目を削除（完了）する」というコードを書けばいいんだな（💡）』

そこで1とか2とか3とかの単純な数字のidを付してもいいのですが、たまたま「洗濯をする」にも「料理をする」にも同じ数字のidが付されてしまったら、ユーザーは洗濯しか完了していないのに、同時に同じidを付された「料理をする」も削除（完了）となってしまいます。⇦TODOリストとして致命傷😨

ここでスーパーマンのごとく登場するのが　nanoid(ナノID) !

nanoidを使うと、ランダムな20文字くらいの文字列（英数字が混ざったもの）を勝手に作ってくれます。

nanoidインストール方法

上記のリンクからインストールできます。インストールには下記の赤枠をクリックコピーして、ターミナルへ貼り付ける

ターミナルへ貼り付けたら、Enterを押せば完了です。簡単簡単♪

ちゃんとインストール出来たかどうかは、VScodeの「package.json」の中に

package.json
"nanoid": "^3.1.21",

という記載があればOKです。

参考文献