【初心者向け/ITスクール 80日】JS練習

はじめに

今日は、ITスクールに通った80日目の日です。
Reactの前にJSをしっかり勉強した方が良いというアドバイスを受け、JSでアプリケーションを作成する練習をしました。

JavaScript

計算機（Objectの関数を活用)

今まで、JSONのようにデータをマッピングすることはありましたが、関数を直接使ったことがなかったので、いい勉強でした。
関数名をKeyに設定し、Valueのロジックを実行する方法でした。

const calculator = {
  plus: function (a, b) {
    return a + b;
  },
  minus: function (a, b) {
    console.log(a - b);
  },
  times: function (a, b) {
    return a * b;
  },
  divide: function (a, b) {
    return a / b;
  },
  power: function (a, b) {
    return a ** b;
  },
};

console.log(calculator.power(10, 3));

1000

Event(CSS)

JSから直接CSSを操作する方法は洗練されている方法ではない。
なるべく分離することが良い。
ex) h1.style.color = 'blue' -> BAD

const h1 = document.querySelector('div.hello:first-child h1');


function handleTitleClick() {
  
  //before
  const clickedClass = 'clicked'
  if(h1.classList.contains(clickedClass)){
     h1.classList.remove(clickedClass);
  }else{
     h1.classList.add(clickedClass);
  }  

  //after( toggle = add + remove)
  h1.classList.toggle('clicked');
}

h1.addEventListener('click', handleTitleClick);

.clicked {
  color: tomato;
}

★fetch★

fetch()を通して、AJAXをやってみる練習を行いました。
以下が一番基本的なfetch()の方法です。

<script>
fetch('address')
  .then(res => res.json())
  .then(json => { json.arrays or object
    // dataの通信を成功した際に、呼び出すロジック。
  });
  </script>

jsonファイルをhtmlからロードしてみます。

まず、jsonを作成する必要があります。

その後、jsからfetchメソッドを利用してみます。

/*
data.jsonをfetch()で取得する

1. fetch(url)を使用してデータを取得します。
2. 返されたresponseをjson()関数を使用してJavaScriptのObjectに変換します。
3. JavaScriptのObjectからitems配列を返します。
*/

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

/*
items配列をHTMLに挿入する

1. ulクラス内のliを子要素として追加するために、クエリセレクタを使用して要素を取得します。
2. itemsは配列なので、mapを使用して繰り返し処理を作成します。
3. HTMLにはitemsの各要素の属性にアクセスして値を挿入します。
4. 必ずjoin('')を使用します。これを使用しないと、各要素が配列になり、HTML文書にカンマが表示されます。
   これを1つの文字列に結合する必要があります。
*/
function displayItems(items) {
  const container = document.querySelector('.items');
  container.insertAdjacentHTML(
    'afterbegin',
    items.map((item) => createHTMLString(item)).join('')
  );
}

function createHTMLString(item) {
  return `
  <li class="item">
        <img src=${item.image} alt="${item.type}" class="item__thumbnail" />
        <span class="item__description">${item.gender},${item.size}</span>
  </li>
  `;
}

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