本日は計2件のコミットで作業を進めました。内容はその他の実装・CSSの調整です。
👉 https://kiyo4810.github.io/autocal/html_ver/index29.html
① イベントを起こすボタン部と表示するリスト部
外部jsonファイルのガイジン名リスト表示
変更ファイル：html_ver/index29.html, html_ver/index29.js
<button id="liBtn">外人リスト追加ボタン</button>
<ol id="names"></ol>② asyncで非同期だよと宣言し、プロミス先に投げて先に進む
async awaitがようやくわかった
変更ファイル：html_ver/index28.css, html_ver/index29.css, html_ver/index29.html, html_ver/index29.js
const btn = document.getElementById('liBtn');const ol = document.getElementById('names');btn.addEventListener('click', async function () { // awaitがないと、fetchは「約束(Promise)」だけ投げて次に進む const res = await window.fetch( 'https://jsonplaceholder.typicode.com/users', ); console.log(res); // resの中身はまだ空っぽ（Promise状態）なので、.json()なんて持ってない！と怒られる const users = await res.json(); console.log(users); users.forEach((user) => { console.log(user.name); const li = document.createElement('li'); li.innerText = user.name; ol.appendChild(li); });});今日の振り返り
コミット2本でまとまった実装ができました。各変更の意図を理解しながら進めることで、コードの構造に対する理解が深まってきています。
今日の成果物 🎉
コメントを残す