スライドの見かた

右上に「記述」バッジ → 手を動かしてコードを書くスライド

ハイライトあり は、ハイライトの部分だけを書き足します。残りはそのままです。

function addPost() {
  const name = document.getElementById('name-input').value;
  const text = document.getElementById('text-input').value;
}

ハイライトなし は、コードをそのまま写します。

タイトルの番号（0-1 など）は、手元資料の見出しの番号と同じです。

0-1. 見出しを書く

書く場所：index.html の <main> の中

<h1>ホーム</h1>

成功：大きく太い「ホーム」の字が出る

0-2. class を付けて見た目を変える

書き換える：<h1> を <header class="header"> で包む

<header class="header">
  <h1>ホーム</h1>
</header>

成功：字が小さくなり、下に区切りの線が出る
styles.css にある header の見た目が当たった

0-3. 投稿欄にアイコンを出す

書く場所：</header> の下

<div class="compose">
  <img class="avatar" src="icon.svg" alt="">
</div>

成功：見出しの下に、丸いアイコンが出る

0-4. 本文の欄とボタンを足す

書く場所：アイコンの下

<div class="compose">
  <img class="avatar" src="icon.svg" alt="">
  <div class="compose-body">
    <textarea id="text-input" placeholder="いまどうしてる？"></textarea>
    <button id="post-btn">ポストする</button>
  </div>
</div>

成功：「いまどうしてる？」の欄と、薄い青のボタンが出る

0-5. 名前の欄を足す

書く場所：<textarea> の上

<div class="compose">
  <img class="avatar" src="icon.svg" alt="">
  <div class="compose-body">
    <input id="name-input" type="text" placeholder="名前">
    <textarea id="text-input" placeholder="いまどうしてる？"></textarea>
    <button id="post-btn">ポストする</button>
  </div>
</div>

成功：本文の欄の上に、「名前」の欄が出る

0-6. タイムラインに投稿カードを置く

書く場所：投稿欄の最後の </div> の下

<ul id="timeline">
  <li class="post">
    <img class="avatar" src="icon.svg" alt="">
  </li>
</ul>

成功：投稿欄の下に、アイコンだけのカードが出る

0-7. カードに名前と本文を入れる

書く場所：カードのアイコンの下

<ul id="timeline">
  <li class="post">
    <img class="avatar" src="icon.svg" alt="">
    <div class="post-body">
      <span class="name">たろう</span>
      <p class="text">はじめまして！</p>
    </div>
  </li>
</ul>

成功：アイコンの右に、名前と本文が出る

0-8. 投稿カードを template に移す

書き換える：<li> を <ul> の外に出して <template> で包む
名前と本文は空にする

<ul id="timeline"></ul>

<template id="post-template">
  <li class="post">
    <img class="avatar" src="icon.svg" alt="">
    <div class="post-body">
      <span class="name"></span>
      <p class="text"></p>
    </div>
  </li>
</template>

成功：カードが画面から消える（<template> の中身は画面に出ない）

1-1. ポストのデータを配列で書く

書く場所：script.js のいちばん下

const posts = [
  { name: 'たろう', text: 'はじめまして！' },
  { name: 'はなこ', text: 'こんにちは〜' },
  { name: 'じろう', text: 'ミニX できた ' },
];

console.log(posts);

成功：Console に (3) [{…}, {…}, {…}] と出る。三角を押すと中身が開く

1-2. 1 件だけ画面に出す

書く場所：console.log(posts); の下

function showPosts() {
  const timeline = document.getElementById('timeline');
  const template = document.getElementById('post-template');

  const card = template.content.cloneNode(true);
  card.querySelector('.name').textContent = posts[0].name;
  card.querySelector('.text').textContent = posts[0].text;
  timeline.appendChild(card);
}

showPosts();

成功：タイムラインに「たろう」のカードが 1 枚出る

1-3. 全件を並べる

書き換える：カードを作る 4 行を for で包み、posts[0] を post にする

function showPosts() {
  const timeline = document.getElementById('timeline');
  const template = document.getElementById('post-template');
  timeline.textContent = '';

  for (const post of posts) {
    const card = template.content.cloneNode(true);
    card.querySelector('.name').textContent = post.name;
    card.querySelector('.text').textContent = post.text;
    timeline.appendChild(card);
  }
}

成功：カードが 3 枚並ぶ

1-4. 4 件目を自分で足す

書き足す：posts の中に、自分の名前と好きな本文で 1 行

const posts = [
  { name: 'たろう', text: 'はじめまして！' },
  { name: 'はなこ', text: 'こんにちは〜' },
  { name: 'じろう', text: 'ミニX できた ' },
  { name: 'さぶろう', text: '自分で足した 4 件目' },
];

成功：保存すると、カードが 4 枚に増える

2-2. 配列をサーバーからの返事に置き換える

消す：const posts = [ ... ]; と console.log(posts);
書き足す：関数の頭に async、中の先頭に 2 行

async function showPosts() {
  const res = await fetch(API + '/posts?room=' + ROOM);
  const posts = await res.json();

  const timeline = document.getElementById('timeline');
  const template = document.getElementById('post-template');
  timeline.textContent = '';
  // ここから下はミッション 1 のまま

成功：サーバーにあるポストが新しい順に並ぶ

2-3. 更新ボタンを付ける

index.html：ヘッダーの <h1> の下に 1 行

<header class="header">
  <h1>ホーム</h1>
  <button id="reload-btn">更新</button>
</header>

script.js：いちばん下に 1 行

document.getElementById('reload-btn').addEventListener('click', showPosts);

addEventListener は、
「クリックされたら showPosts を動かして」と頼む命令です。

3-1. ボタンが押されたら動く関数を作る

書く場所：script.js の showPosts(); の上

async function addPost() {
  const name = document.getElementById('name-input').value;
  const text = document.getElementById('text-input').value;
  console.log(name, text);
}

いちばん下に 1 行

document.getElementById('post-btn').addEventListener('click', addPost);

成功：名前と本文を入れて「ポストする」を押すと、Console にその中身が出る

3-2. サーバーに送る

書き換える：console.log の行を、送る処理と後片付けに置き換える

async function addPost() {
  const name = document.getElementById('name-input').value;
  const text = document.getElementById('text-input').value;

  await fetch(API + '/posts?room=' + ROOM, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: name, text: text }),
  });

  document.getElementById('text-input').value = '';
  showPosts();
}

成功：自分のポストがタイムラインの先頭に出て、本文の欄が空になる

4-1. カードにいいねボタンを付ける

index.html：<template> の中、本文の下に 1 行

<template id="post-template">
  <li class="post">
    <img class="avatar" src="icon.svg" alt="">
    <div class="post-body">
      <span class="name"></span>
      <p class="text"></p>
      <button class="like-btn"><span class="like-count"></span></button>
    </div>
  </li>
</template>

成功：保存すると、カードの下にハートのボタンが出る