あいさつ

初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回は今まで学んできたJSで一つの作品を作っていきます！
ここまで来たらとりあえず基礎は自分なりにできたと思います！
では！

作品の設計

今回はボタンを押すとユーザーのリストが増えていくものを作っていきます！

ユーザーは前回の記事のこれを使っていきます！

必要な機能

webApiを叩いてくる
リストを追加
リストを表示
大まかな処理がこのようになると思います

準備

まずは作っていくための準備をします

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
    </head>
    <body>
        <script src="index.js"></script>
    </body>
</html>

まずはhtmlです
構造は簡単でスクリプトファイルを読み込んでいるだけです

DOM操作

まずはDOM操作を実装していきます
今回の作品はボタンとリストが必要なのでhtmlに記述していきます

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf8">
    </head>
    <body>
        <ol id="lists">
        </ol>
        <button id="btn">もっと</button>
        <script src="index.js"></script>
    </body>
</html>

ボタンのidはbtnリストのidはlistsにしました

ではidをjsで使えるようにしていきます

main.js

const btn = document.getElementById("btn");
const lists = document.getElementById("lists");

これでjsからbtnとlistsが使えるようになりました

webApiを叩く

DOM操作の準備が整ったのでwebApiを叩いていきます！
webApiを叩くにはasyncで非同期関数にしてawaitを使います
ボタンが押されたらwebApiを叩きたいのでこのようにします

index.js

btn.addEventListener("click", async function () {
    const res = await fetch("http://jsonplaceholder.typicode.com/users");
    const users = await res.json();
});

これでwebApiが叩けるようになりました

listに追加

ではlistに追加していきます
コードが見やすいように関数で分けて記述しました

index.js

// DOM
const btn = document.getElementById("btn");
const lists = document.getElementById("lists");

// 関数
function addList(user) {
    const list = document.createElement("li");
    list.innerText = user.name;
    lists.appendChild(list);
}

async function getUsers() {
    const res = await fetch("http://jsonplaceholder.typicode.com/users");
    const users = await res.json();

    return users;
}

async function listUsers () {
    const users = await getUsers();

    users.forEach(addList);
};

//イベント
window.addEventListener("load", listUsers);
btn.addEventListener("click", listUsers);

コードがすっきりなりました
最後のwindowsのところではリロードされたら表示されるようになっています

さいごに

いやぁ長かったjsの基礎のアウトプットが終わりました！！
今度は一つの分野を掘り下げた記事を書きたいと思っています！
Twitterしています→AtieのTwitter
では！また次回の記事で！

参考、学習資料

【JavaScript入門 #9】これまで講座で学習した知識をフル活用しよう【ヤフー出身エンジニアの入門プログラミング講座】