Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@Atie

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】これまで講座で学習した知識をフル活用しよう【ヤフー出身エンジニアの入門プログラミング講座】

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?