LoginSignup
1

More than 1 year has passed since last update.

posted at

JS 知識をつなげる (JSアウトプット)

あいさつ

初めての人は初めまして!知っている人はこんにちは!
中学生バックエンド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】これまで講座で学習した知識をフル活用しよう【ヤフー出身エンジニアの入門プログラミング講座】

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1