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