js.DOMの基本

ブラウザは、htmlを読み込むと内部的にDOM（Document Object Model）と呼ばれるデータ構造が作られて、その内容に応じてページが描画がされる、という仕組みになっている。

htmlは、ただの文字列。それをブラウザがバババーーーって読み込んでDOMに変換してくれる。そうすることで、cssやjsにとって使える形になる。

DOMは、ツリー状になってる。htmlは、ツリー状になってない。

---

qiita.js

const main = document.querySelector("main");
// DOMのメインをとってこい。取得できる。
window.addEventListener("load", function () {//loadしたら、function{}のなかを実行してね。
  const article = document.createElement("article"); // DOMを作り出してる。
  main.prepend(article); //mainの前に差し込む。
  const article2 = document.createElement("article");
  main.appendChild(article2);  //mainの後に差し込む。
});

---

qiita.js

const main = document.querySelector("main");

function createArticles() {      //createArticleを複数回実行したいよ
  const items = [
    { title: "🎅です", body: "テスト１" },
    { title: "メリクリ", body: "テスト2" },
  ];

  items.forEach(function (item) {   //itemsの配列の数だけforEachが回る。この（item）の中にitemsで定義したオブジェクトが入る。
    createArticle(item);            //このようにitemsのオブジェクトをitemという名前で使える。　　　　　　
  });
}

function createArticle(item) {(item)にitemsで定義したオブジェクトが渡る
  console.log(item);
  const article = document.createElement("article");
  const title = document.createElement("h2");
  title.textContent = item.title;           //itemのタイトル
  const body = document.createElement("p");
  body.textContent = item.body;             //itemのbody
  article.appendChild(title);
  article.appendChild(body);
  main.appendChild(article);
}

window.addEventListener("load", createArticles);

---

・fetchでAPIを叩く。
fetchは、2段階ある

const res = await fetch（）； で叩きにいく。リクエストが返ってくる。でもそれだけでは、使えない
const json = await res.json();で変換する。jsonという形に変換する。

同期処理は一つずつ。例としてはjsで上から一つずつ読み込んでいく感じ。
const article = document.createElement("article");
const title = document.createElement("h2");
const body = document.createElement("p");
article.appendChild(title);
article.appendChild(body);
article.appendChild(body);から始まるとそもそもarticleが定義されてないからできない。

非同期処理は、どんどん進む。
外部のAPIを叩くとき、通信が走る処理は、非同期通信のみ。
fetchとjsonは非同期
非同期通信にも待つ場合、待たない場合がある。

待つ場合。これがほとんど。
async awaitで待ってる。
APIを叩くときは非同期処理でしか書けないから、同期処理っぽく書九ためにasync awaitという構文がある。
const res = await fetch（）；
const json = await res.json();
res.jsonで変換しないといけないのでresがある状態でないといけない。どんどん先に進むことができるけど、resを使いたいから待ってる。
外部APIを叩くときは、非同期処理なんだけど待たないといけないから、結局同期処理っぽくなる。

---

qiita.js

const main = document.querySelector("main");
const input = document.querySelector("input");
const textarea = document.querySelector("textarea");
const button = document.querySelector("button");

async function createArticles() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const items = await res.json();
  items.forEach(function (item) {
    const article = createArticle(item);
    main.appendChild(article);
  });
}

function createArticle(item) {

  const article = document.createElement("article");
  const title = document.createElement("h2");
  title.textContent = item.title;
  const body = document.createElement("p");
  body.textContent = item.body;
  article.appendChild(title);
  article.appendChild(body);
  // main.appendChild(article);
  return article;
}
window.addEventListener("load", createArticles);

// ここからは、投稿をprependで一番上に表示させるイベント
button.addEventListener("click", async function () {
// フォームの内容をresに代入する。
  const res = await fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    body: JSON.stringify({
      title: input.value,
      body: textarea.value,
      userId: 1,
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8",
    },
  });
// json化して、dataに代入する。
  const data = await res.json();
// 引数にdataを渡して、createArticleを実行してreturnで帰ってデータをarticleに代入する。
  const article = createArticle(data);
  main.prepend(article);
});