【初心者向け/ITスクール 81日】JS miniproject(data-set, filter)

はじめに

今日は、ITスクールに通った81日目の日です。
SpringBoot基礎講座をまた、繰り返えしながら理解できなかったところをもう一度コーディングしたり、JavaScriptのfetchメソッド、json()を活用し、filter, data-set attributeなど、
filterlingと非同期処理の練習をしました。
1時間の動画でしたが、自分の力で具象するのがとてもぶずかしかったです。

JS

先日、作成したmini shopのプロジェクトに活用したいと考え、JSで非同期処理の練習を行いました。
fetch()と必要なhtmlを挿入するのはなんとなく段々分かりましたが、filterlingは本当に難しかったと思います。
これで6時間を費やしましたが、なんとなく感が付きましたので、今後のプロジェクトでも積極的に活用したいと思います。

難しかった点(OVERHEADしない）

あまに、JSとfetch()になれてないこともありましたが、一番難しかったのはNodelist, JSONなどを具別することでした。Queryselectorの場合、Nodelistには適用されないところと、JSONとcssのelementを具別することがとても難しかった。

特に、XSSがあるので、innerHTMLを使わず、insertAdjacentHTMLを使用し、
無駄を減らすために各カテゴリをクリックする際に、もう一度データーを書き直すこどではなく、cssで隠す練習をしました。
こちらで6時間以上かかりました。

CODE

//main
loadItems()
  .then((items) => {
    writeItems(items);
    showAllItems();
    setEventListeners();
  })
  .catch(console.log);

コード詳細

/* fetch()で、data.jsonをloading */

function loadItems() {
  return fetch('data/data.json')
    .then((response) => response.json())
    .then((json) => json.items);
}

/* containerにhtml注入（No InnerHTML) */
function writeItems(items) {
  const container = document.querySelector('.items');
  container.insertAdjacentHTML(
    'afterbegin',
    items.map((item) => createHTMLString(item)).join('')
  );
}


/* data.json(item)を HTMLに */
function createHTMLString(item) {
  return `
  <li class="item" data-type="${item.type}" data-color="${item.color}">
    <img src="${item.image}" alt="${item.type}" class="item__thumbnail">
    <span class="item__description">${item.gender}, ${item.size}</span>
  </li>
  `;
}


/*page loading 完了　->  ボタンでデーターをfilitering*/


/* invisible(css) classを除去しdisplay:noneを除去 */
function showAllItems() {
  const itemElements = document.querySelectorAll('.item');
  itemElements.forEach((itemElement) => {
    itemElement.classList.remove('invisible');
  });
}

/*event delegationを通して、buttonsにevent handling*/
function setEventListeners() {
  const logo = document.querySelector('.logo');
  const buttons = document.querySelector('.buttons');

  logo.addEventListener('click', () => {
    showAllItems();
  });

  buttons.addEventListener('click', (event) => {
    onButtonClick(event);
  });
}

/*clickした部ターンのdataを獲得*/
function onButtonClick(event) {
  const dataset = event.target.dataset;
  const key = dataset.key;
  const value = dataset.value;

  if (key == null || value == null) {
    return;
  }

  updateItems(key, value);
  
}



/* dataのkeyと valueが一致していないクラスにinvisible追加*/
function updateItems(key, value) {
  const itemElements = document.querySelectorAll('.item');
  itemElements.forEach((item) => {
    if (item.dataset[key] === value) {
      item.classList.remove('invisible');
    } else {
      item.classList.add('invisible');
    }
  });
}

完成